Supabase Authentication
Configure the Supabase authentication service
Supabase is an open source Firebase alternative that provides a Postgres database, authentication, and real-time data sync.
You can access the
supabase
branch of the Next.js Starter Kit to see the complete code for this example.
Install#
Install the Supabase auth service in the Next.js app.
yarn workspace web add @acme/auth-supabase
Configure#
Edit apps/web/.env
and add your public Supabase URL and KEY. You can find your project URL and KEY in the Supabase console.
NEXT_PUBLIC_SUPABASE_URL="https://x.supabase.co"NEXT_PUBLIC_SUPABASE_KEY="x"
Setup#
Edit apps/web/features/auth/auth-service
and create the supabase authentication service.
import {createAuthService,createSupabaseBrowserClient,} from '@acme/auth-supabase/client'export const supabase = createSupabaseBrowserClient()export const authService = createAuthService(supabase, {loginOptions: {redirectTo: '/auth/callback',},signupOptions: {emailRedirectTo: '/auth/callback',},})
Update the next.js Middleware apps/web/middleware.ts
to use the Supabase authentication service.
import { NextResponse } from 'next/server'import { auth } from '@acme/auth-supabase/middleware'const publicRoutes = ['/login','/signup','/forgot-password','/reset-password',]export default auth((req) => {if (!req.auth && !publicRoutes.includes(req.nextUrl.pathname)) {const redirectTo = new URL(req.nextUrl.pathname, req.nextUrl.origin)const newUrl = new URL('/login', req.nextUrl.origin)newUrl.searchParams.set('redirectTo', redirectTo.toString())return NextResponse.redirect(newUrl)}return NextResponse.next()})
Replace all getSession
imports with the getSession
from @acme/auth-supabase
in the following files:
apps/web/app/(app)/layout.tsx
apps/web/app/api/trpc/[trpc]/route.ts
apps/web/lib/trpc/rsc.ts
If you have any other files that use getSession
you will need to replace them as well.
import { getSession } from '@acme/auth-supabase'
If you previously used another auth service, like Better Auth, you can also remove the drizzle schema from packages/db/drizzle.config.ts
.
Now your app is configured to use Supabase authentication.
Try it out by running yarn dev:web
and navigating to http://localhost:3000
.
Additional resources#
If you need access to auth.users
table of Supabase, you can use the Supabase utilities from drizzle-orm/supabase
.
import { authUsers } from 'drizzle-orm/supabase'
More information here: drizzle-orm/supabase
Drizzle also supports Row-level security (RLS), which allows you to configure policies and roles for accessing data in your database.
Next steps#
Was this helpful?