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.