mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 18:05:11 +03:00
Danny White
24be387cdb
## What kind of change does this PR introduce? Docs update. Aligns documentation and style guides with the **Sign in / Sign out / Sign up** platform standard. Closes DOCS-1328. Related to [#49874](https://github.com/supabase/supabase/pull/49874). ## What is the current behavior? Docs style guides prefer _login_ / _log in_. Guide prose uses mixed login and sign in wording. ## What is the new behavior? - [WORD_LIST.md](apps/docs/WORD_LIST.md) and [copywriting.mdx](apps/design-system/content/docs/copywriting.mdx) document the sign in standard - Design-system auth examples updated - Guide prose and API reference spec descriptions updated ### Terminology **Standard:** Use _sign in_, _sign out_, and _sign up_ as verbs. Use _sign-in_, _sign-out_, and _sign-up_ as nouns and adjectives. Match Studio UI labels (**Sign in**, **Sign out**, **Sign up**). **Preserved intentionally:** | Category | Keep as-is | Example | | -------- | ---------- | ------- | | Feature name | social login | `/social-login`, `features.mdx` heading, OAuth provider section | | URL slugs | `login` in paths | `/phone-login`, `/login-flows`, `choosing-login-flow` | | CLI | `supabase login` / `supabase logout` | Reference ids `supabase-login` / `supabase-logout`; executable commands unchanged | | SDK methods | `logout()` | Kotlin/Swift method names in API reference titles and examples | | Third-party UI | Provider product labels | Facebook Login, Kakao Login, portal **Login** buttons | | Postgres | Database terminology | login privileges, login credentials, login via role | | Audit/logging | Log prose | "Generates the following **log** in the Postgres Logs" | | Code and routes | Paths and filenames | `app/login/`, `Login.tsx`, `demos/android-login` | | External URLs | Third-party login pages | `dash.cloudflare.com/login`, `console.neon.tech/login`, `vercel.com/login` | | API identifiers | Event and field names | Audit actions `login`/`logout`, `should_logout_user` | ## To test - Run `pnpm lint:mdx` in `apps/docs` - Spot-check `features.mdx`, `social-login.mdx`, and a provider guide (e.g. Facebook, Kakao) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Documentation** * Standardized authentication terminology across guides, reference material, CLI documentation, and copywriting guidance using “sign in,” “sign out,” and “sign up.” * Updated authentication instructions, headings, link text, examples, and SSO guidance for clearer, more consistent wording. * Corrected related grammar, spelling, hyphenation, and documentation links while preserving established product names and implementation commands. * **Style** * Refined code examples with consistent import ordering and spacing. * **Examples** * Updated authentication button and menu labels to “Sign in” and “Sign out.” <!-- end of auto-generated comment: release notes by coderabbit.ai -->
282 lines
10 KiB
Plaintext
282 lines
10 KiB
Plaintext
---
|
|
title: 'Build a User Management App with Next.js'
|
|
description: 'Learn how to use Supabase in your Next.js App.'
|
|
---
|
|
|
|
<$Partial path="uiLibCta.mdx" />
|
|
<$Partial path="quickstart_intro.mdx" />
|
|
|
|
|
|
|
|
<Admonition type="note">
|
|
|
|
If you get stuck while working through this guide, you can find the [full example on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/nextjs-user-management).
|
|
|
|
</Admonition>
|
|
|
|
<$Partial path="project_setup.mdx" variables={{ "framework": "nextjs", "tab": "frameworks" }} />
|
|
|
|
## Building the app
|
|
|
|
Start building the Next.js app from scratch.
|
|
|
|
### Initialize a Next.js app
|
|
|
|
Use [`create-next-app`](https://nextjs.org/docs/getting-started) to initialize an app called `supabase-nextjs`:
|
|
|
|
```bash
|
|
npx create-next-app@latest --ts --use-npm supabase-nextjs
|
|
cd supabase-nextjs
|
|
```
|
|
|
|
Install [supabase-js](https://github.com/supabase/supabase-js):
|
|
|
|
```bash
|
|
npm install @supabase/supabase-js
|
|
```
|
|
|
|
Save the environment variables in a `.env.local` file at the root of the project, and paste the API URL and the key that you copied [earlier](#get-api-details).
|
|
|
|
The application exposes these variables in the browser, and that's fine as Supabase enables [Row Level Security](/docs/guides/database/postgres/row-level-security) by default on all tables.
|
|
|
|
```bash .env.local
|
|
NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
|
|
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=YOUR_SUPABASE_PUBLISHABLE_KEY
|
|
```
|
|
|
|
### App styling (optional)
|
|
|
|
An optional step is to update the CSS file `app/globals.css` to make the app look better.
|
|
You can find the full contents of this file [in the example repository](https://raw.githubusercontent.com/supabase/supabase/master/examples/user-management/nextjs-user-management/app/globals.css).
|
|
|
|
### Supabase Server-Side Auth package
|
|
|
|
Next.js is a versatile framework offering pre-rendering at build time (SSG), server-side rendering at request time (SSR), API routes, and proxy edge-functions.
|
|
|
|
To better integrate with the framework, we've created the `@supabase/ssr` package for Server-Side Auth. It has all the functionalities to configure your Supabase project to use cookies for storing user sessions. Read the [Next.js Server-Side Auth guide](/docs/guides/auth/server-side/creating-a-client?queryGroups=package-manager&package-manager=npm&queryGroups=framework&framework=nextjs) for more information.
|
|
|
|
Install the package for Next.js.
|
|
|
|
```bash
|
|
npm install @supabase/ssr
|
|
```
|
|
|
|
### Supabase utilities
|
|
|
|
There are two different types of clients in Supabase:
|
|
|
|
1. **Client Component client** - To access Supabase from Client Components, which run in the browser.
|
|
2. **Server Component client** - To access Supabase from Server Components, Server Actions, and Route Handlers, which run only on the server.
|
|
|
|
We recommend creating the following utilities files for creating clients, and organize them within `lib/supabase` at the root of the project.
|
|
|
|
Create a `client.ts` and a `server.ts` with the following code for client-side Supabase and server-side Supabase, respectively.
|
|
|
|
<$CodeTabs>
|
|
|
|
<$CodeSample
|
|
path="/user-management/nextjs-user-management/lib/supabase/client.ts"
|
|
lines={[[1, -1]]}
|
|
meta="name=lib/supabase/client.ts"
|
|
/>
|
|
|
|
<$CodeSample
|
|
path="/user-management/nextjs-user-management/lib/supabase/server.ts"
|
|
lines={[[1, -1]]}
|
|
meta="name=lib/supabase/server.ts"
|
|
/>
|
|
|
|
</$CodeTabs>
|
|
|
|
### Next.js proxy
|
|
|
|
Since Server Components can't write cookies, you need [Proxy](https://nextjs.org/docs/app/getting-started/proxy) to refresh expired Auth tokens and store them.
|
|
|
|
You accomplish this by:
|
|
|
|
- Refreshing the Auth token with the call to `supabase.auth.getClaims`.
|
|
- Passing the refreshed Auth token to Server Components through `request.cookies.set`, so they don't attempt to refresh the same token themselves.
|
|
- Passing the refreshed Auth token to the browser, so it replaces the old token. This is done with `response.cookies.set`.
|
|
|
|
You could also add a matcher, so that the Proxy only runs on routes that access Supabase. For more information, read [the Next.js matcher documentation](https://nextjs.org/docs/app/api-reference/file-conventions/proxy#matcher).
|
|
|
|
<Admonition type="danger">
|
|
|
|
Be careful when protecting pages. The server gets the user session from the cookies, which anyone can spoof.
|
|
|
|
</Admonition>
|
|
|
|
<$Partial path="auth_methods.mdx" />
|
|
|
|
Create a `proxy.ts` file at the project root and another one within the `lib/supabase` folder. The `lib/supabase` file contains the logic for updating the session. The `proxy.ts` file uses this, which is a Next.js convention.
|
|
|
|
<$CodeTabs>
|
|
|
|
<$CodeSample
|
|
path="/user-management/nextjs-user-management/proxy.ts"
|
|
lines={[[1, -1]]}
|
|
meta="name=proxy.ts"
|
|
/>
|
|
|
|
<$CodeSample
|
|
path="/user-management/nextjs-user-management/lib/supabase/proxy.ts"
|
|
lines={[[1, -1]]}
|
|
meta="name=lib/supabase/proxy.ts"
|
|
/>
|
|
|
|
</$CodeTabs>
|
|
|
|
### Set up a sign-in page
|
|
|
|
#### Sign-in and sign-up form
|
|
|
|
To add sign-in/sign-up page for your application, create a new folder named `login`, containing a `page.tsx` file with the following code for a sign-in/sign-up form:
|
|
|
|
<$CodeTabs>
|
|
|
|
<$CodeSample
|
|
path="/user-management/nextjs-user-management/app/login/page.tsx"
|
|
lines={[[1, -1]]}
|
|
meta="name=app/login/page.tsx"
|
|
/>
|
|
|
|
</$CodeTabs>
|
|
|
|
Create the sign-in/sign-up actions to hook up the form to the function which does the following:
|
|
|
|
- Retrieve the user's information.
|
|
- Send that information to Supabase as a sign-up request, which in turns sends a confirmation email. It uses [Magic Links](/docs/guides/auth/auth-email-passwordless#with-magic-link), so users can sign in with their email without using passwords.
|
|
- Handle any error that arises.
|
|
|
|
Create the `actions.ts` file in the `app/login` folder, which contains the sign-in and sign-up functions and the `error/page.tsx` file, which displays an error message if the sign-in or sign-up fails.
|
|
|
|
<$CodeTabs>
|
|
|
|
<$CodeSample
|
|
path="/user-management/nextjs-user-management/app/login/actions.ts"
|
|
lines={[[1, -1]]}
|
|
meta="name=app/login/actions.ts"
|
|
/>
|
|
|
|
<$CodeSample
|
|
path="/user-management/nextjs-user-management/app/error/page.tsx"
|
|
lines={[[1, -1]]}
|
|
meta="name=app/error/page.tsx"
|
|
/>
|
|
|
|
</$CodeTabs>
|
|
|
|
<Admonition type="caution">
|
|
|
|
The `cookies` method is called before any calls to Supabase, which takes fetch calls out of Next.js's caching. This is important for authenticated data fetches, to ensure that users get access only to their own data.
|
|
|
|
Read the Next.js docs to learn more about [opting out of data caching](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#opting-out-of-data-caching).
|
|
|
|
</Admonition>
|
|
|
|
#### Email template
|
|
|
|
Before proceeding, change the email template to support a server-side authentication flow that sends a token hash:
|
|
|
|
- Go to the [Auth templates](/dashboard/project/_/auth/templates) page in your dashboard.
|
|
- Select the **Confirm signup** template.
|
|
- Change `{{ .ConfirmationURL }}` to `{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email`.
|
|
|
|
<Admonition type="note" title="Did you know?">
|
|
|
|
You can customize other emails sent out to new users, including the email's looks, content, and query parameters from [the **Authentication > Email**](/dashboard/project/_/auth/templates) section of the Dashboard.
|
|
|
|
</Admonition>
|
|
|
|
#### Confirmation endpoint
|
|
|
|
As you are working in a server-side rendering (SSR) environment, you need to create a server endpoint responsible for exchanging the `token_hash` for a session.
|
|
|
|
The code performs the following steps:
|
|
|
|
- Retrieves the code sent back from the Supabase Auth server using the `token_hash` query parameter.
|
|
- Exchanges this code for a session, which you store in your chosen storage mechanism (in this case, cookies).
|
|
- Finally, redirects the user to the `account` page.
|
|
|
|
<$CodeSample
|
|
path="/user-management/nextjs-user-management/app/auth/confirm/route.ts"
|
|
lines={[[1, -1]]}
|
|
meta="name=app/auth/confirm/route.ts"
|
|
/>
|
|
|
|
### Account page
|
|
|
|
After a user signs in, they need a way to edit their profile details and manage their accounts.
|
|
|
|
Create a new component for that called `AccountForm` within the `app/account` folder.
|
|
|
|
<$CodeSample
|
|
path="/user-management/nextjs-user-management/app/account/account-form.tsx"
|
|
lines={[[1, 4], [7, 78], [88, 89], [99, -1]]}
|
|
meta="name=app/account/account-form.tsx"
|
|
/>
|
|
|
|
Create an account page for the `AccountForm` component you created
|
|
|
|
<$CodeSample
|
|
path="/user-management/nextjs-user-management/app/account/page.tsx"
|
|
lines={[[1, -1]]}
|
|
meta="name=app/account/page.tsx"
|
|
/>
|
|
|
|
### Sign out
|
|
|
|
Create a route handler to handle the sign-out from the server side, making sure to check if the user is signed in first.
|
|
|
|
<$CodeSample
|
|
path="/user-management/nextjs-user-management/app/auth/signout/route.ts"
|
|
lines={[[1, -1]]}
|
|
meta="name=app/auth/signout/route.ts"
|
|
/>
|
|
|
|
## Profile photos
|
|
|
|
Next, add a way for users to upload a profile photo. Supabase configures every project with [Storage](/docs/guides/storage) for managing large files like photos and videos.
|
|
|
|
### Create an upload widget
|
|
|
|
Start by creating a new component:
|
|
|
|
<$CodeSample
|
|
path="/user-management/nextjs-user-management/app/account/avatar.tsx"
|
|
lines={[[1, -1]]}
|
|
meta="name=app/account/avatar.tsx"
|
|
/>
|
|
|
|
### Update the account form
|
|
|
|
With the Avatar component created, update `app/account/account-form.tsx` to include it:
|
|
|
|
<$CodeSample
|
|
path="/user-management/nextjs-user-management/app/account/account-form.tsx"
|
|
lines={[[1, -1]]}
|
|
meta="name=app/account/account-form.tsx"
|
|
/>
|
|
|
|
### Launch
|
|
|
|
With all the pages, route handlers, and components in place, run the following in a terminal window:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
And then open the browser to [localhost:3000/login](http://localhost:3000/login) and you should see the completed app.
|
|
|
|
When you enter your email and password, you will receive an email with the title **Confirm your email**. Congrats 🎉!!!
|
|
|
|
At this stage you have a fully functional application!
|
|
|
|
## See also
|
|
|
|
- See the complete [example on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/nextjs-user-management) and deploy it to Vercel
|
|
- [Build a Twitter Clone with the Next.js App Router and Supabase - free egghead course](https://egghead.io/courses/build-a-twitter-clone-with-the-next-js-app-router-and-supabase-19bebadb)
|
|
- Explore the [pre-built Auth components](/library/docs/nextjs/password-based-auth)
|
|
- Explore the [Supabase Cache Helpers](https://github.com/psteinroe/supabase-cache-helpers)
|
|
- See the [Next.js Subscription Payments Starter](https://github.com/vercel/nextjs-subscription-payments) template on GitHub
|