How to Connect Supabase to Vercel

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

1// src/lib/supabase/client.ts
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// src/lib/supabase/server.ts
12import { createServerClient } from '@supabase/ssr'
13import { cookies } from 'next/headers'
14
15export async function createClient() {
16  const cookieStore = await cookies()
17
18  return createServerClient(
19    process.env.NEXT_PUBLIC_SUPABASE_URL!,
20    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
21    {
22      cookies: {
23        getAll() {
24          return cookieStore.getAll()
25        },
26        setAll(cookiesToSet) {
27          cookiesToSet.forEach(({ name, value, options }) =>
28            cookieStore.set(name, value, options)
29          )
30        },
31      },
32    }
33  )
34}

1// src/middleware.ts
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 }) =>
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  await supabase.auth.getUser()
30  return supabaseResponse
31}
32
33export const config = {
34  matcher: ['/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)'],
35}

1# Add these to Supabase Dashboard > Authentication > URL Configuration > Redirect URLs:
2
3# Production domain
4https://your-app.vercel.app/**
5
6# Vercel preview deployments (wildcard)
7https://*-your-team.vercel.app/**
8
9# Custom domain (if configured)
10https://your-domain.com/**
11
12# Local development
13http://localhost:3000/**