How to Validate Email Format in Supabase Auth

1// Email validation utility
2const EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
3
4function isValidEmail(email: string): boolean {
5  if (!email || email.length > 254) return false
6  return EMAIL_REGEX.test(email)
7}
8
9// Usage in signup handler
10async function handleSignup(email: string, password: string) {
11  if (!isValidEmail(email)) {
12    return { error: 'Please enter a valid email address.' }
13  }
14
15  const { data, error } = await supabase.auth.signUp({
16    email: email.toLowerCase().trim(),
17    password,
18  })
19
20  return { data, error }
21}

1-- Create the validation function
2create or replace function public.validate_email_format()
3returns trigger
4language plpgsql
5security definer set search_path = ''
6as $$
7begin
8  -- Check email format with regex
9  if new.email !~ '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$' then
10    raise exception 'Invalid email format: %', new.email;
11  end if;
12
13  -- Check email length (RFC 5321 limit)
14  if length(new.email) > 254 then
15    raise exception 'Email address exceeds maximum length of 254 characters';
16  end if;
17
18  return new;
19end;
20$$;
21
22-- Create the trigger on auth.users
23create trigger validate_email_before_insert
24  before insert on auth.users
25  for each row
26  execute function public.validate_email_format();

1async function handleSignup(email: string, password: string) {
2  // Client-side validation first
3  if (!isValidEmail(email)) {
4    return { error: 'Please enter a valid email address (e.g., name@example.com).' }
5  }
6
7  const { data, error } = await supabase.auth.signUp({
8    email: email.toLowerCase().trim(),
9    password,
10  })
11
12  if (error) {
13    // Handle server-side validation errors
14    if (error.message.includes('Invalid email format')) {
15      return { error: 'The email address format is not valid. Please check and try again.' }
16    }
17    if (error.message.includes('already registered')) {
18      return { error: 'An account with this email already exists. Try logging in instead.' }
19    }
20    return { error: 'Signup failed. Please try again later.' }
21  }
22
23  return { data, error: null }
24}

1// supabase/functions/validated-signup/index.ts
2import { createClient } from 'npm:@supabase/supabase-js@2'
3import { corsHeaders } from '../_shared/cors.ts'
4
5const BLOCKED_DOMAINS = ['tempmail.com', 'throwaway.email', 'mailinator.com']
6const EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
7
8Deno.serve(async (req) => {
9  if (req.method === 'OPTIONS') {
10    return new Response('ok', { headers: corsHeaders })
11  }
12
13  const { email, password } = await req.json()
14  const normalizedEmail = email.toLowerCase().trim()
15
16  // Validate format
17  if (!EMAIL_REGEX.test(normalizedEmail)) {
18    return new Response(
19      JSON.stringify({ error: 'Invalid email format' }),
20      { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
21    )
22  }
23
24  // Check for disposable email domains
25  const domain = normalizedEmail.split('@')[1]
26  if (BLOCKED_DOMAINS.includes(domain)) {
27    return new Response(
28      JSON.stringify({ error: 'Disposable email addresses are not allowed' }),
29      { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
30    )
31  }
32
33  // Proceed with signup using the regular client
34  const supabase = createClient(
35    Deno.env.get('SUPABASE_URL')!,
36    Deno.env.get('SUPABASE_ANON_KEY')!
37  )
38
39  const { data, error } = await supabase.auth.signUp({
40    email: normalizedEmail,
41    password,
42  })
43
44  if (error) {
45    return new Response(
46      JSON.stringify({ error: error.message }),
47      { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
48    )
49  }
50
51  return new Response(
52    JSON.stringify({ data }),
53    { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
54  )
55})

1// Test cases for email validation
2const testEmails = [
3  // Should PASS
4  { email: 'user@example.com', expected: true },
5  { email: 'user.name+tag@domain.co.uk', expected: true },
6  { email: 'user@sub.domain.com', expected: true },
7
8  // Should FAIL
9  { email: 'user@', expected: false },
10  { email: '@domain.com', expected: false },
11  { email: 'user@.com', expected: false },
12  { email: 'user@domain', expected: false },
13  { email: 'user domain@test.com', expected: false },
14  { email: '', expected: false },
15  { email: 'a'.repeat(255) + '@test.com', expected: false },
16]
17
18for (const { email, expected } of testEmails) {
19  const result = isValidEmail(email)
20  console.log(`${email}: ${result === expected ? 'PASS' : 'FAIL'}`)
21}