How to Set Up Supabase Auth with Next.js App Router

1npm install @supabase/supabase-js @supabase/ssr

1# .env.local
2NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
3NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

1// lib/supabase/server.ts
2import { createServerClient } from '@supabase/ssr'
3import { cookies } from 'next/headers'
4
5export async function createClient() {
6  const cookieStore = await cookies()
7
8  return createServerClient(
9    process.env.NEXT_PUBLIC_SUPABASE_URL!,
10    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
11    {
12      cookies: {
13        getAll() {
14          return cookieStore.getAll()
15        },
16        setAll(cookiesToSet) {
17          try {
18            cookiesToSet.forEach(({ name, value, options }) =>
19              cookieStore.set(name, value, options)
20            )
21          } catch {
22            // The `setAll` method is called from a Server Component
23            // where cookies cannot be set. This can be ignored.
24          }
25        },
26      },
27    }
28  )
29}
30
31// lib/supabase/client.ts
32import { createBrowserClient } from '@supabase/ssr'
33
34export function createClient() {
35  return createBrowserClient(
36    process.env.NEXT_PUBLIC_SUPABASE_URL!,
37    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
38  )
39}

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

1// app/login/page.tsx
2export default function LoginPage() {
3  return (
4    <form action="/auth/login" method="post">
5      <label htmlFor="email">Email</label>
6      <input id="email" name="email" type="email" required />
7      <label htmlFor="password">Password</label>
8      <input id="password" name="password" type="password" required />
9      <button type="submit">Log in</button>
10    </form>
11  )
12}
13
14// app/auth/login/route.ts
15import { createClient } from '@/lib/supabase/server'
16import { redirect } from 'next/navigation'
17import { NextResponse } from 'next/server'
18
19export async function POST(request: Request) {
20  const formData = await request.formData()
21  const email = formData.get('email') as string
22  const password = formData.get('password') as string
23
24  const supabase = await createClient()
25  const { error } = await supabase.auth.signInWithPassword({ email, password })
26
27  if (error) {
28    return NextResponse.redirect(new URL('/login?error=Invalid+credentials', request.url))
29  }
30
31  return NextResponse.redirect(new URL('/dashboard', request.url))
32}

1// app/auth/signup/route.ts
2import { createClient } from '@/lib/supabase/server'
3import { NextResponse } from 'next/server'
4
5export async function POST(request: Request) {
6  const formData = await request.formData()
7  const email = formData.get('email') as string
8  const password = formData.get('password') as string
9
10  const supabase = await createClient()
11  const { error } = await supabase.auth.signUp({
12    email,
13    password,
14    options: {
15      emailRedirectTo: `${new URL(request.url).origin}/auth/callback`,
16    },
17  })
18
19  if (error) {
20    return NextResponse.redirect(new URL('/signup?error=Signup+failed', request.url))
21  }
22
23  return NextResponse.redirect(new URL('/signup/confirm', request.url))
24}
25
26// app/auth/callback/route.ts
27import { createClient } from '@/lib/supabase/server'
28import { NextResponse } from 'next/server'
29
30export async function GET(request: Request) {
31  const { searchParams } = new URL(request.url)
32  const code = searchParams.get('code')
33
34  if (code) {
35    const supabase = await createClient()
36    await supabase.auth.exchangeCodeForSession(code)
37  }
38
39  return NextResponse.redirect(new URL('/dashboard', request.url))
40}