Skip to content

Commit

Permalink
chore: update supabase docs
Browse files Browse the repository at this point in the history
  • Loading branch information
Pagebakers committed Feb 11, 2025
1 parent aa05723 commit 44fe2ff
Showing 1 changed file with 56 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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:
Expand All @@ -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)

0 comments on commit 44fe2ff

Please sign in to comment.