Next.js Auth with a Supabase-Compatible Backend

npx create-next-app@latest my-app
cd my-app
npm install @supabase/supabase-js @supabase/ssr

# .env.local
NEXT_PUBLIC_API_URL=https://<project-ref>.p.stitchdb.com
NEXT_PUBLIC_ANON_KEY=<anon key from Settings > API>

// lib/db/client.ts
import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_API_URL!,
    process.env.NEXT_PUBLIC_ANON_KEY!,
  )
}

// lib/db/server.ts
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'

export async function createClient() {
  const cookieStore = await cookies()

  return createServerClient(
    process.env.NEXT_PUBLIC_API_URL!,
    process.env.NEXT_PUBLIC_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll()
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options),
            )
          } catch {
            // Called from a Server Component: cookies are read-only there.
            // Safe to ignore because the proxy refreshes the session.
          }
        },
      },
    },
  )
}

// proxy.ts  (Next.js 15 and earlier: middleware.ts with `export async function middleware`)
import { createServerClient } from '@supabase/ssr'
import { NextResponse, type NextRequest } from 'next/server'

export async function proxy(request: NextRequest) {
  let response = NextResponse.next({ request })

  const db = createServerClient(
    process.env.NEXT_PUBLIC_API_URL!,
    process.env.NEXT_PUBLIC_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll()
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value))
          response = NextResponse.next({ request })
          cookiesToSet.forEach(({ name, value, options }) =>
            response.cookies.set(name, value, options),
          )
        },
      },
    },
  )

  // Refreshes the session if needed and checks it with the Auth server.
  const { data: { user } } = await db.auth.getUser()

  const path = request.nextUrl.pathname
  if (!user && path.startsWith('/dashboard')) {
    const url = request.nextUrl.clone()
    url.pathname = '/login'
    return NextResponse.redirect(url)
  }

  return response
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)'],
}

// app/login/actions.ts
'use server'

import { redirect } from 'next/navigation'
import { headers } from 'next/headers'
import { createClient } from '@/lib/db/server'

export async function signIn(formData: FormData) {
  const db = await createClient()
  const { error } = await db.auth.signInWithPassword({
    email: String(formData.get('email')),
    password: String(formData.get('password')),
  })
  if (error) redirect('/login?error=' + encodeURIComponent(error.message))
  redirect('/dashboard')
}

export async function signUp(formData: FormData) {
  const db = await createClient()
  const origin = (await headers()).get('origin')
  const { error } = await db.auth.signUp({
    email: String(formData.get('email')),
    password: String(formData.get('password')),
    options: { emailRedirectTo: `${origin}/auth/callback?next=/dashboard` },
  })
  if (error) redirect('/login?error=' + encodeURIComponent(error.message))
  redirect('/login?message=Check your e-mail to confirm your account')
}

export async function signOut() {
  const db = await createClient()
  await db.auth.signOut()
  redirect('/login')
}

// app/login/page.tsx
import { signIn, signUp } from './actions'

export default function LoginPage() {
  return (
    <form>
      <input name="email" type="email" required />
      <input name="password" type="password" required minLength={8} />
      <button formAction={signIn}>Sign in</button>
      <button formAction={signUp}>Create account</button>
    </form>
  )
}

// app/auth/callback/route.ts
import { NextResponse } from 'next/server'
import { createClient } from '@/lib/db/server'

export async function GET(request: Request) {
  const { searchParams, origin } = new URL(request.url)
  const code = searchParams.get('code')
  const next = searchParams.get('next') ?? '/dashboard'

  if (code) {
    const db = await createClient()
    const { error } = await db.auth.exchangeCodeForSession(code)
    if (!error) return NextResponse.redirect(`${origin}${next}`)
  }
  return NextResponse.redirect(`${origin}/login?error=Could not sign you in`)
}

export async function signInWithGitHub() {
  const db = await createClient()
  const origin = (await headers()).get('origin')
  const { data, error } = await db.auth.signInWithOAuth({
    provider: 'github',
    options: { redirectTo: `${origin}/auth/callback` },
  })
  if (error) redirect('/login?error=' + encodeURIComponent(error.message))
  redirect(data.url)
}

// app/dashboard/page.tsx
import { redirect } from 'next/navigation'
import { createClient } from '@/lib/db/server'
import { signOut } from '../login/actions'

export default async function Dashboard() {
  const db = await createClient()
  const { data: { user } } = await db.auth.getUser()
  if (!user) redirect('/login')

  // RLS returns only this user's rows: no user filter needed.
  const { data: todos } = await db
    .from('todos')
    .select('id, task, is_complete')
    .order('created_at', { ascending: false })

  return (
    <main>
      <p>Signed in as {user.email}</p>
      <ul>{todos?.map((t) => <li key={t.id}>{t.task}</li>)}</ul>
      <form action={signOut}><button>Sign out</button></form>
    </main>
  )
}

alter table public.todos enable row level security;

create policy "Users manage their own todos" on public.todos
  for all to authenticated
  using (user_id = auth.uid())
  with check (user_id = auth.uid());