How to Build Authentication system with V0

1// Paste this prompt into V0's AI chat:
2// Build an authentication system with Supabase Auth. Set up:
3// 1. A custom profiles table: id (uuid PK REFERENCES auth.users ON DELETE CASCADE), email (text), full_name (text), avatar_url (text), role (text DEFAULT 'user'), onboarded (boolean DEFAULT false), created_at (timestamptz DEFAULT now())
4// 2. A database trigger on auth.users INSERT that auto-creates a profiles row with the user's email
5// 3. RLS policies on profiles: users can read any profile, users can update only their own profile
6// 4. Enable email/password auth in Supabase (it's on by default)
7// Generate the SQL migration for the profiles table, trigger, and RLS policies.

1// Paste this prompt into V0's AI chat:
2// Build authentication pages:
3// 1. app/login/page.tsx - Login form with:
4//    - shadcn/ui Card containing the form
5//    - Input for email and password with Label components
6//    - Button for "Sign in with email"
7//    - Separator with "or continue with" text
8//    - Two OAuth Buttons: Google (with icon) and GitHub (with icon)
9//    - Link to /signup for new users
10//    - Use Supabase createBrowserClient for auth methods
11//    - signInWithPassword for email, signInWithOAuth for Google/GitHub
12//    - Redirect to /dashboard on success
13// 2. app/signup/page.tsx - Registration form with:
14//    - Same Card layout as login
15//    - Additional Input for full_name
16//    - signUp method with email, password, and metadata
17//    - Show "Check your email" message after signup
18//    - Link to /login for existing users
19// Both pages should be 'use client' with useState for loading/error states

1import { createServerClient } from '@supabase/ssr'
2import { NextResponse, type NextRequest } from 'next/server'
3
4export async function middleware(request: NextRequest) {
5  let supabaseResponse = NextResponse.next({ request })
6
7  const supabase = createServerClient(
8    process.env.NEXT_PUBLIC_SUPABASE_URL!,
9    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
10    {
11      cookies: {
12        getAll() {
13          return request.cookies.getAll()
14        },
15        setAll(cookiesToSet) {
16          cookiesToSet.forEach(({ name, value, options }) =>
17            request.cookies.set(name, value)
18          )
19          supabaseResponse = NextResponse.next({ request })
20          cookiesToSet.forEach(({ name, value, options }) =>
21            supabaseResponse.cookies.set(name, value, options)
22          )
23        },
24      },
25    }
26  )
27
28  const { data: { user } } = await supabase.auth.getUser()
29
30  if (
31    !user &&
32    !request.nextUrl.pathname.startsWith('/login') &&
33    !request.nextUrl.pathname.startsWith('/signup') &&
34    !request.nextUrl.pathname.startsWith('/auth') &&
35    request.nextUrl.pathname !== '/'
36  ) {
37    const url = request.nextUrl.clone()
38    url.pathname = '/login'
39    return NextResponse.redirect(url)
40  }
41
42  return supabaseResponse
43}
44
45export const config = {
46  matcher: ['/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)'],
47}

1import { createServerClient } from '@supabase/ssr'
2import { cookies } from 'next/headers'
3import { redirect } from 'next/navigation'
4import { UserNav } from '@/components/user-nav'
5
6export default async function ProtectedLayout({
7  children,
8}: {
9  children: React.ReactNode
10}) {
11  const cookieStore = await cookies()
12  const supabase = createServerClient(
13    process.env.NEXT_PUBLIC_SUPABASE_URL!,
14    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
15    {
16      cookies: {
17        getAll() {
18          return cookieStore.getAll()
19        },
20      },
21    }
22  )
23
24  const { data: { user } } = await supabase.auth.getUser()
25  if (!user) redirect('/login')
26
27  const { data: profile } = await supabase
28    .from('profiles')
29    .select('full_name, avatar_url, role, onboarded')
30    .eq('id', user.id)
31    .single()
32
33  if (!profile?.onboarded) redirect('/onboarding')
34
35  return (
36    <div className="min-h-screen">
37      <header className="border-b px-6 py-3 flex items-center justify-between">
38        <h1 className="text-lg font-semibold">Dashboard</h1>
39        <UserNav
40          name={profile.full_name}
41          email={user.email!}
42          avatar={profile.avatar_url}
43        />
44      </header>
45      <main className="p-6">{children}</main>
46    </div>
47  )
48}

1'use server'
2
3import { createClient } from '@supabase/supabase-js'
4import { revalidatePath } from 'next/cache'
5
6const supabase = createClient(
7  process.env.SUPABASE_URL!,
8  process.env.SUPABASE_SERVICE_ROLE_KEY!
9)
10
11export async function updateProfile(
12  userId: string,
13  fullName: string,
14  avatarUrl?: string
15) {
16  const updates: Record<string, unknown> = { full_name: fullName }
17  if (avatarUrl) updates.avatar_url = avatarUrl
18
19  const { error } = await supabase
20    .from('profiles')
21    .update(updates)
22    .eq('id', userId)
23
24  if (error) throw new Error(error.message)
25  revalidatePath('/profile')
26}
27
28export async function completeOnboarding(userId: string, fullName: string) {
29  const { error } = await supabase
30    .from('profiles')
31    .update({ full_name: fullName, onboarded: true })
32    .eq('id', userId)
33
34  if (error) throw new Error(error.message)
35  revalidatePath('/')
36}