ContextQMD
Back to Supabase

Build a User Management App with Next.js

apps/docs/content/guides/getting-started/tutorials/with-nextjs.mdx

1.26.0510.2 KB
Original Source

<$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.

</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 to initialize an app called supabase-nextjs:

bash
npx create-next-app@latest --ts --use-npm supabase-nextjs
cd supabase-nextjs

Install 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.

The application exposes these variables in the browser, and that's fine as Supabase enables Row Level Security by default on all tables.

bash
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.

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 quickly configure your Supabase project to use cookies for storing user sessions. Read the Next.js Server-Side Auth guide 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 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.

<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 login page

Login and signup form

To add login/signup page for your application, create a new folder named login, containing a page.tsx file with the following code for a login/signup 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 login/signup 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 signup request, which in turns sends a confirmation email. It uses Magic Links, so users can sign in with their email without using passwords.
  • Handle any error that arises.

Create the action.ts file in the app/login folder, which contains the login and signup functions and the error/page.tsx file, which displays an error message if the login or signup 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.

</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 page in your dashboard.
  • Select the Confirm signup template.
  • Change {{ .ConfirmationURL }} to {{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email.
<Admonition type="tip" label="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 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 just 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 logged 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 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 and you should see the completed app.

When you enter your email and password, you will receive an email with the title Confirm Your Signup. Congrats 🎉!!!

At this stage you have a fully functional application!

See also