How to Build a Authentication System with Lovable

1Create a profiles table in Supabase and a trigger that auto-creates a profile row when a user signs up.
2
3Profiles table:
4  id uuid primary key references auth.users(id) on delete cascade
5  email text not null
6  full_name text
7  avatar_url text
8  bio text
9  updated_at timestamptz default now()
10  created_at timestamptz default now()
11
12RLS:
13  Enable RLS on profiles.
14  SELECT: authenticated users can read all profiles.
15  UPDATE: users can only update their own profile (auth.uid() = id).
16  INSERT: disallow direct INSERT — the trigger handles creation only.
17  DELETE: disallow — profile is deleted via CASCADE when auth.users row is deleted.
18
19Trigger function (runs AFTER INSERT on auth.users):
20  CREATE OR REPLACE FUNCTION public.handle_new_user()
21  RETURNS trigger
22  LANGUAGE plpgsql
23  SECURITY DEFINER SET search_path = public
24  AS $$
25  BEGIN
26    INSERT INTO public.profiles (id, email, full_name, avatar_url)
27    VALUES (
28      NEW.id,
29      NEW.email,
30      COALESCE(NEW.raw_user_meta_data->>'full_name', split_part(NEW.email, '@', 1)),
31      NEW.raw_user_meta_data->>'avatar_url'
32    );
33    RETURN NEW;
34  END;
35  $$;
36
37  CREATE TRIGGER on_auth_user_created
38    AFTER INSERT ON auth.users
39    FOR EACH ROW EXECUTE FUNCTION public.handle_new_user();
40
41Generate TypeScript types for the profiles table.

1Build an authentication page at src/pages/Auth.tsx.
2
3Layout: centered Card with a logo at the top. Three Tabs: 'Sign In', 'Sign Up', 'Magic Link'.
4
5Sign In tab:
6  - Email Input (type='email', required)
7  - Password Input (type='password', required, min 8 chars)
8  - 'Sign In' Button (full width, loading state while submitting)
9  - Call supabase.auth.signInWithPassword({ email, password })
10  - On success: navigate('/dashboard')
11  - On error: show Alert with error.message
12
13Sign Up tab:
14  - Full Name Input (required, min 2 chars)
15  - Email Input (required, valid email)
16  - Password Input (required, min 8 chars, zod refine: at least one number)
17  - Confirm Password Input (must match password)
18  - 'Create Account' Button (loading state)
19  - Call supabase.auth.signUp({ email, password, options: { data: { full_name: name } } })
20  - On success: show Alert 'Check your email to confirm your account'
21  - On error: show Alert with error.message
22
23Magic Link tab:
24  - Email Input (required)
25  - 'Send Magic Link' Button (loading state)
26  - Call supabase.auth.signInWithOtp({ email, options: { emailRedirectTo: window.location.origin + '/dashboard' } })
27  - On success: show success Alert 'Magic link sent — check your inbox'
28
29Below all tabs: a Separator with 'or' text, then a Google sign-in Button calling supabase.auth.signInWithOAuth({ provider: 'google', options: { redirectTo: window.location.origin + '/dashboard' } })
30
31Note: OAuth will not work in the Lovable preview. Test it on the published URL.

1// src/contexts/AuthContext.tsx
2import { createContext, useContext, useEffect, useState } from 'react'
3import { Session, User } from '@supabase/supabase-js'
4import { supabase } from '@/integrations/supabase/client'
5
6type Profile = {
7  id: string
8  email: string
9  full_name: string | null
10  avatar_url: string | null
11  bio: string | null
12}
13
14type AuthContextType = {
15  user: User | null
16  session: Session | null
17  profile: Profile | null
18  loading: boolean
19  signOut: () => Promise<void>
20}
21
22const AuthContext = createContext<AuthContextType | undefined>(undefined)
23
24export function AuthProvider({ children }: { children: React.ReactNode }) {
25  const [user, setUser] = useState<User | null>(null)
26  const [session, setSession] = useState<Session | null>(null)
27  const [profile, setProfile] = useState<Profile | null>(null)
28  const [loading, setLoading] = useState(true)
29
30  useEffect(() => {
31    supabase.auth.getSession().then(({ data: { session } }) => {
32      setSession(session)
33      setUser(session?.user ?? null)
34      if (session?.user) fetchProfile(session.user.id)
35      else setLoading(false)
36    })
37
38    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
39      setSession(session)
40      setUser(session?.user ?? null)
41      if (session?.user) fetchProfile(session.user.id)
42      else { setProfile(null); setLoading(false) }
43    })
44
45    return () => subscription.unsubscribe()
46  }, [])
47
48  async function fetchProfile(userId: string) {
49    const { data } = await supabase
50      .from('profiles')
51      .select('id, email, full_name, avatar_url, bio')
52      .eq('id', userId)
53      .single()
54    setProfile(data)
55    setLoading(false)
56  }
57
58  const signOut = async () => {
59    await supabase.auth.signOut()
60  }
61
62  return (
63    <AuthContext.Provider value={{ user, session, profile, loading, signOut }}>
64      {children}
65    </AuthContext.Provider>
66  )
67}
68
69export function useAuth() {
70  const ctx = useContext(AuthContext)
71  if (!ctx) throw new Error('useAuth must be used inside AuthProvider')
72  return ctx
73}

1Build a ProtectedRoute component and update the app router.
2
3Create src/components/ProtectedRoute.tsx:
4- Import useAuth from AuthContext
5- If loading is true, return a centered Spinner (shadcn/ui skeleton or Loader2 icon from lucide-react)
6- If user is null, return <Navigate to='/auth' replace />
7- Otherwise return <>{children}</>
8
9Update src/App.tsx to use ProtectedRoute:
10- Wrap /dashboard, /profile, /settings, and any other private routes with <ProtectedRoute>
11- /auth and / (landing page) remain unprotected
12- Add the AuthProvider wrapping the entire BrowserRouter
13
14Example router structure:
15<AuthProvider>
16  <BrowserRouter>
17    <Routes>
18      <Route path='/' element={<Landing />} />
19      <Route path='/auth' element={<Auth />} />
20      <Route path='/dashboard' element={
21        <ProtectedRoute>
22          <Dashboard />
23        </ProtectedRoute>
24      } />
25      <Route path='/profile' element={
26        <ProtectedRoute>
27          <Profile />
28        </ProtectedRoute>
29      } />
30    </Routes>
31  </BrowserRouter>
32</AuthProvider>

1Build a profile settings page at src/pages/ProfileSettings.tsx.
2
3Requirements:
4- Pre-populate the form with the current user's profile data from useAuth().profile
5- Form fields (react-hook-form + zod):
6  - Full Name (required, min 2 chars, max 100)
7  - Bio (optional, max 300 chars, Textarea with character count)
8  - Avatar: show current avatar_url in an Avatar component, with a 'Change Photo' Button that opens a file input
9- Avatar upload logic:
10  1. User selects an image file (accept='image/*', max 2MB validation)
11  2. Upload to Supabase Storage bucket 'avatars' at path: userId/avatar.{ext}
12  3. Get the public URL: supabase.storage.from('avatars').getPublicUrl(path)
13  4. Store the URL in the avatar_url field
14- Save button: call supabase.from('profiles').update({ full_name, bio, avatar_url, updated_at: new Date().toISOString() }).eq('id', user.id)
15- Show a success toast: 'Profile updated'
16- Show loading state on the save button during submission
17- Create the 'avatars' Supabase Storage bucket with public access and a policy: authenticated users can upload to their own userId/ path