Example: Supabase authentication client- and server-side (API routes)

This example shows how to use Supabase auth both on the client (useUser hook) and server in API routes.

Demo

• See it in action on CodeSandbox.

How to use

Execute create-next-app with Yarn or npx to bootstrap the example:

npx create-next-app --example https://github.com/supabase/supabase/tree/master/examples/with-supabase-auth with-supabase-auth-app
# or
yarn create next-app --example https://github.com/supabase/supabase/tree/master/examples/with-supabase-auth with-supabase-auth-app

Configuration

1. Create new project

Sign up to Supabase - https://app.supabase.io and create a new project. Wait for your database to start.

2. Get the URL and Key

Create a copy of .env.local.example:

cp .env.local.example .env.local

Go to the Project Settings (the cog icon), open the API tab, and find your API URL and anon key and set them in your newly created .env.local file.

[Optional] - Set up OAuth providers

You can use third-party login providers like GitHub or Google. Refer to the docs to learn how to configure these.

3. Install and run

npm install
npm run dev
# or
yarn
yarn dev

4. Deploy with Vercel

You will be asked for the NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_KEY from step 2 above.

After deploying, copy the deployment URL and navigate to your Supabase project settings (Authentication > Settings) and set your site url.