How to Check if a User Is Authenticated in Supabase

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
8// TRUSTED: Makes API request, validates JWT
9const { data: { user }, error } = await supabase.auth.getUser()
10if (user) {
11  console.log('Authenticated:', user.id)
12} else {
13  console.log('Not authenticated')
14}
15
16// UNTRUSTED: Reads from local storage, fast but unverified
17const { data: { session } } = await supabase.auth.getSession()
18if (session) {
19  console.log('Session exists (unverified):', session.user.id)
20}

1// Set up a global auth state listener
2const { data: { subscription } } = supabase.auth.onAuthStateChange(
3  (event, session) => {
4    switch (event) {
5      case 'SIGNED_IN':
6        console.log('User signed in:', session?.user.id)
7        break
8      case 'SIGNED_OUT':
9        console.log('User signed out')
10        // Redirect to login page
11        break
12      case 'TOKEN_REFRESHED':
13        console.log('Token refreshed')
14        break
15    }
16  }
17)
18
19// Clean up when no longer needed
20subscription.unsubscribe()

1// Reusable auth guard function
2async function requireAuth(): Promise<{ id: string; email: string }> {
3  const { data: { user }, error } = await supabase.auth.getUser()
4
5  if (error || !user) {
6    // Redirect to login — adapt to your routing framework
7    window.location.href = '/login'
8    throw new Error('Not authenticated')
9  }
10
11  return { id: user.id, email: user.email! }
12}
13
14// React hook version
15import { useEffect, useState } from 'react'
16
17function useAuth() {
18  const [user, setUser] = useState<any>(null)
19  const [loading, setLoading] = useState(true)
20
21  useEffect(() => {
22    supabase.auth.getUser().then(({ data: { user } }) => {
23      setUser(user)
24      setLoading(false)
25    })
26
27    const { data: { subscription } } = supabase.auth.onAuthStateChange(
28      (event, session) => {
29        setUser(session?.user ?? null)
30      }
31    )
32
33    return () => subscription.unsubscribe()
34  }, [])
35
36  return { user, loading }
37}

1// Next.js App Router: Server Component auth check
2import { createServerClient } from '@supabase/ssr'
3import { cookies } from 'next/headers'
4import { redirect } from 'next/navigation'
5
6export default async function ProtectedPage() {
7  const cookieStore = await cookies()
8  const supabase = createServerClient(
9    process.env.NEXT_PUBLIC_SUPABASE_URL!,
10    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
11    { cookies: { getAll: () => cookieStore.getAll() } }
12  )
13
14  const { data: { user } } = await supabase.auth.getUser()
15
16  if (!user) {
17    redirect('/login')
18  }
19
20  return <div>Welcome, {user.email}</div>
21}

1-- RLS ensures data security even if client-side checks are bypassed
2alter table public.todos enable row level security;
3
4create policy "Users can only see own todos"
5  on public.todos for select
6  to authenticated
7  using ((select auth.uid()) = user_id);
8
9create policy "Users can only insert own todos"
10  on public.todos for insert
11  to authenticated
12  with check ((select auth.uid()) = user_id);