-
Notifications
You must be signed in to change notification settings - Fork 26.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
examples: update
with-supabase
example to App Router (#51335)
### What? Update Next.js with Supabase example ### Why? Existing example for Next.js with Supabase is out of date ### How? - Rename `with-supabase-auth-db-realtime` to `with-supabase` - Update example to use App Router - Use Supabase Auth Helpers for Next.js to configure auth cookies ---------
- Loading branch information
1 parent
94c9418
commit 3cac097
Showing
32 changed files
with
497 additions
and
251 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
13 changes: 0 additions & 13 deletions
13
examples/with-supabase-auth-realtime-db/pages/api/getUser.js
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
# Update these with your Supabase details from your project settings > API | ||
# https://app.supabase.com/project/_/settings/api | ||
NEXT_PUBLIC_SUPABASE_URL=your-project-url | ||
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
# Supabase Starter | ||
|
||
This starter configures Supabase Auth to use cookies, making the user's session available throughout the entire Next.js app - Client Components, Server Components, Route Handlers, Server Actions and Middleware. | ||
|
||
## Deploy your own | ||
|
||
The Vercel deployment will guide you through creating a Supabase account and project. After installation of the Supabase integration, all relevant environment variables will be set up so that the project is usable immediately after deployment 🚀 | ||
|
||
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-supabase&project-name=nextjs-with-supabase&repository-name=nextjs-with-supabase&integration-ids=oac_jUduyjQgOyzev1fjrW83NYOv) | ||
|
||
## How to use | ||
|
||
1. Create a [new Supabase project](https://database.new) | ||
1. Run `npx create-next-app -e with-supabase myapp` to create a Next.js app using the Supabase Starter template | ||
1. Run `cd myapp` to change into the app's directory | ||
1. Run `npm install` to install dependencies | ||
1. Rename `.env.local.example` to `.env.local` and update the values for `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY` from [your Supabase project's API settings](https://app.supabase.com/project/_/settings/api) | ||
1. Run `npm run dev` to start the local development server | ||
|
||
> Check out [the docs for Local Development](https://supabase.com/docs/guides/getting-started/local-development) to also run Supabase locally. | ||
### Create Table and seed with data (optional) | ||
|
||
Navigate to [your project's SQL Editor](https://app.supabase.com/project/_/sql), click `New query`, paste the following SQL 👇 and click `RUN`. | ||
|
||
```sql | ||
create table if not exists todos ( | ||
id uuid default gen_random_uuid() primary key, | ||
created_at timestamp with time zone default timezone('utc'::text, now()) not null, | ||
title text, | ||
is_complete boolean default false | ||
); | ||
|
||
insert into todos(title) | ||
values | ||
('Create Supabase project'), | ||
('Create Next.js app from Supabase Starter template'), | ||
('Keeping building cool stuff!'); | ||
``` | ||
|
||
## Feedback and issues | ||
|
||
Please file feedback and issues over on the [Supabase GitHub org](https://github.com/supabase/supabase/issues/new/choose). | ||
|
||
## More Supabase examples | ||
|
||
- [Next.js Subscription Payments Starter](https://github.com/vercel/nextjs-subscription-payments) | ||
- [Cookie-based Auth and the Next.js 13 App Router (free course)](https://youtube.com/playlist?list=PL5S4mPUpp4OtMhpnp93EFSo42iQ40XjbF) | ||
- [Supabase Auth and the Next.js App Router](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs) | ||
- [Next.js Auth Helpers Docs](https://supabase.com/docs/guides/auth/auth-helpers/nextjs) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs' | ||
import { cookies } from 'next/headers' | ||
import { NextResponse } from 'next/server' | ||
|
||
export async function GET(request: Request) { | ||
// The `/auth/callback` route is required for the server-side auth flow implemented | ||
// by the Auth Helpers package. It exchanges an auth code for the user's session. | ||
// https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-sign-in-with-code-exchange | ||
const requestUrl = new URL(request.url) | ||
const code = requestUrl.searchParams.get('code') | ||
|
||
if (code) { | ||
const supabase = createRouteHandlerClient({ cookies }) | ||
await supabase.auth.exchangeCodeForSession(code) | ||
} | ||
|
||
// URL to redirect to after sign in process completes | ||
return NextResponse.redirect(requestUrl.origin) | ||
} |
27 changes: 27 additions & 0 deletions
27
examples/with-supabase/app/client-component-example/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
'use client' | ||
|
||
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs' | ||
import { useEffect, useState } from 'react' | ||
|
||
export default function ClientComponent() { | ||
const [todos, setTodos] = useState<any[]>([]) | ||
|
||
// Create a Supabase client configured to use cookies | ||
const supabase = createClientComponentClient() | ||
|
||
useEffect(() => { | ||
const getTodos = async () => { | ||
// This assumes you have a `todos` table in Supabase. Check out | ||
// the `Create Table and seed with data` section of the README 👇 | ||
// https://github.com/vercel/next.js/blob/canary/examples/with-supabase/README.md | ||
const { data } = await supabase.from('todos').select() | ||
if (data) { | ||
setTodos(data) | ||
} | ||
} | ||
|
||
getTodos() | ||
}, [supabase, setTodos]) | ||
|
||
return <pre>{JSON.stringify(todos, null, 2)}</pre> | ||
} |
Binary file not shown.
Oops, something went wrong.