How to Add a Phone Number to a Supabase User Profile

1-- If creating a new profiles table
2create table public.profiles (
3  id uuid not null references auth.users(id) on delete cascade,
4  display_name text,
5  phone text,
6  updated_at timestamptz default now(),
7  primary key (id)
8);
9
10-- If adding phone to an existing profiles table
11alter table public.profiles
12  add column phone text;
13
14-- Optional: ensure phone numbers are unique
15alter table public.profiles
16  add constraint unique_phone unique (phone);

1-- Trigger function to create profile on signup
2create or replace function public.handle_new_user()
3returns trigger
4language plpgsql
5security definer set search_path = ''
6as $$
7begin
8  insert into public.profiles (id, display_name)
9  values (
10    new.id,
11    new.raw_user_meta_data ->> 'display_name'
12  );
13  return new;
14end;
15$$;
16
17-- Attach trigger to auth.users
18create trigger on_auth_user_created
19  after insert on auth.users
20  for each row execute function public.handle_new_user();

1-- Enable RLS
2alter table public.profiles enable row level security;
3
4-- Users can read their own profile
5create policy "Users can view own profile"
6  on public.profiles for select
7  to authenticated
8  using ((select auth.uid()) = id);
9
10-- Users can update their own profile
11create policy "Users can update own profile"
12  on public.profiles for update
13  to authenticated
14  using ((select auth.uid()) = id)
15  with check ((select auth.uid()) = id);

1import { createClient } from '@supabase/supabase-js'
2
3const supabase = createClient(
4  process.env.NEXT_PUBLIC_SUPABASE_URL!,
5  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
6)
7
8async function updatePhoneNumber(phone: string) {
9  // Get the current user
10  const { data: { user } } = await supabase.auth.getUser()
11  if (!user) throw new Error('Not authenticated')
12
13  // Validate E.164 format
14  const phoneRegex = /^\+[1-9]\d{1,14}$/
15  if (!phoneRegex.test(phone)) {
16    throw new Error('Phone must be in E.164 format: +14155551234')
17  }
18
19  // Update the profile
20  const { data, error } = await supabase
21    .from('profiles')
22    .update({ phone, updated_at: new Date().toISOString() })
23    .eq('id', user.id)
24    .select()
25    .single()
26
27  if (error) throw error
28  return data
29}

1// Step 1: Send OTP to the phone number
2async function sendPhoneOtp(phone: string) {
3  const { error } = await supabase.auth.signInWithOtp({
4    phone,
5    options: { shouldCreateUser: false }
6  })
7  if (error) throw error
8}
9
10// Step 2: Verify the OTP code
11async function verifyPhoneOtp(phone: string, token: string) {
12  const { data, error } = await supabase.auth.verifyOtp({
13    phone,
14    token,
15    type: 'sms'
16  })
17  if (error) throw error
18
19  // Only save to profile after verification succeeds
20  await updatePhoneNumber(phone)
21  return data
22}