From 44fe2ffc335e8297744d150145b986c152fbc66a Mon Sep 17 00:00:00 2001
From: Eelco Wiersma <eelco@appulse.nl>
Date: Tue, 11 Feb 2025 10:13:32 +0000
Subject: [PATCH] chore: update supabase docs

---
 .../authentication/supabase.mdx               | 61 +++++++++++++++++--
 1 file changed, 56 insertions(+), 5 deletions(-)

diff --git a/apps/website/src/pages/docs/nextjs-starter-kit/authentication/supabase.mdx b/apps/website/src/pages/docs/nextjs-starter-kit/authentication/supabase.mdx
index eaa24b18b..3a75672ad 100644
--- a/apps/website/src/pages/docs/nextjs-starter-kit/authentication/supabase.mdx
+++ b/apps/website/src/pages/docs/nextjs-starter-kit/authentication/supabase.mdx
@@ -5,6 +5,11 @@ description: Configure the Supabase authentication service
 
 Supabase is an open source Firebase alternative that provides a Postgres database, authentication, and real-time data sync.
 
+<Info>
+  You can access the `supabase` branch of the Next.js Starter Kit to see the
+  complete code for this example.
+</Info>
+
 ## Install
 
 Install the Supabase auth service in the Next.js app.
@@ -22,20 +27,52 @@ 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.
 
 ```ts
-import { createAuthService } from '@acme/auth-supabase/client'
-
-export const authService = createAuthService()
+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.
 
 ```ts
+import { NextResponse } from 'next/server'
+
 import { auth } from '@acme/auth-supabase/middleware'
 
-export default auth
+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:
@@ -50,10 +87,24 @@ If you have any other files that use `getSession` you will need to replace them
 import { getSession } from '@acme/auth-supabase'
 ```
 
-Now your frontend is configured to use Supabase authentication.
+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`.
+
+```tsx
+import { authUsers } from 'drizzle-orm/supabase'
+```
+
+More information here: [drizzle-orm/supabase](https://github.com/drizzle-team/drizzle-orm/tree/main/src/supabase)
+
+Drizzle also supports [Row-level security (RLS)](https://orm.drizzle.team/docs/rls), which allows you to configure policies and roles for accessing data in your database.
+
 ## Next steps
 
 - [Customize auth screens](/docs/nextjs-starterkit/authentication/customize-auth-screens)