How to Debug Supabase Auth Not Persisting Session

1// lib/supabase.ts — create this file ONCE and import everywhere
2import { createClient } from '@supabase/supabase-js'
3
4const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
5const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
6
7export const supabase = createClient(supabaseUrl, supabaseAnonKey)
8
9// In any component:
10import { supabase } from '@/lib/supabase'

1import { useEffect, useState } from 'react'
2import { supabase } from '@/lib/supabase'
3import type { Session } from '@supabase/supabase-js'
4
5export function AuthProvider({ children }: { children: React.ReactNode }) {
6  const [session, setSession] = useState<Session | null>(null)
7
8  useEffect(() => {
9    const { data: { subscription } } = supabase.auth.onAuthStateChange(
10      (event, session) => {
11        console.log('Auth event:', event)
12        setSession(session)
13      }
14    )
15
16    return () => subscription.unsubscribe()
17  }, [])
18
19  return <>{children}</>
20}

1// Debug helper: check what is in localStorage
2const storageKey = `sb-${supabaseUrl.split('//')[1].split('.')[0]}-auth-token`
3const storedSession = localStorage.getItem(storageKey)
4console.log('Stored session:', storedSession ? 'EXISTS' : 'MISSING')
5
6// If you need to manually check the current session:
7const { data: { session } } = await supabase.auth.getSession()
8console.log('Current session:', session)

1// lib/supabase/client.ts — for Client Components
2import { createBrowserClient } from '@supabase/ssr'
3
4export function createClient() {
5  return createBrowserClient(
6    process.env.NEXT_PUBLIC_SUPABASE_URL!,
7    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
8  )
9}
10
11// lib/supabase/server.ts — for Server Components & Route Handlers
12import { createServerClient } from '@supabase/ssr'
13import { cookies } from 'next/headers'
14
15export async function createClient() {
16  const cookieStore = await cookies()
17  return createServerClient(
18    process.env.NEXT_PUBLIC_SUPABASE_URL!,
19    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
20    {
21      cookies: {
22        getAll() { return cookieStore.getAll() },
23        setAll(cookiesToSet) {
24          cookiesToSet.forEach(({ name, value, options }) =>
25            cookieStore.set(name, value, options)
26          )
27        },
28      },
29    }
30  )
31}

1// middleware.ts (project root)
2import { createServerClient } from '@supabase/ssr'
3import { NextResponse, type NextRequest } from 'next/server'
4
5export async function middleware(request: NextRequest) {
6  let response = NextResponse.next({ request })
7
8  const supabase = createServerClient(
9    process.env.NEXT_PUBLIC_SUPABASE_URL!,
10    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
11    {
12      cookies: {
13        getAll() { return request.cookies.getAll() },
14        setAll(cookiesToSet) {
15          cookiesToSet.forEach(({ name, value }) =>
16            request.cookies.set(name, value)
17          )
18          response = NextResponse.next({ request })
19          cookiesToSet.forEach(({ name, value, options }) =>
20            response.cookies.set(name, value, options)
21          )
22        },
23      },
24    }
25  )
26
27  await supabase.auth.getUser()
28  return response
29}
30
31export const config = {
32  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
33}