Password-based Authentication

Installation

Folder structure

This block includes the Supabase client. When installing, you can skip overwriting it.

1import { createClient } from '@/lib/supabase/server'
2import { type EmailOtpType } from '@supabase/supabase-js'
3import { redirect } from 'next/navigation'
4import { type NextRequest } from 'next/server'
5
6export async function GET(request: NextRequest) {
7  const { searchParams } = new URL(request.url)
8  const token_hash = searchParams.get('token_hash')
9  const type = searchParams.get('type') as EmailOtpType | null
10  const next = searchParams.get('next') ?? '/'
11
12  if (token_hash && type) {
13    const supabase = await createClient()
14
15    const { error } = await supabase.auth.verifyOtp({
16      type,
17      token_hash,
18    })
19    if (!error) {
20      // redirect user to specified redirect URL or root of app
21      redirect(next)
22    } else {
23      // redirect the user to an error page with some instructions
24      redirect(`/auth/error?error=${error?.message}`)
25    }
26  }
27
28  // redirect the user to an error page with some instructions
29  redirect(`/auth/error?error=No token hash or type`)
30}

Usage

Once you install the block in your Next.js project, you'll get all the necessary pages and components to set up a password-based authentication flow.

Getting started

First, add a .env file to your project with the following environment variables:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

• If you're using supabase.com, you can find these values in the Connect modal under App Frameworks or in your project's API settings.

• If you're using a local instance of Supabase, you can find these values by running supabase start or supabase status (if you already have it running).

Adding email templates

1. Add an email template for sign-up to the Supabase project. Your signup email template should contain at least the following HTML:

   <h2>Confirm your signup</h2>
    
   <p>Follow this link to confirm your user:</p>
   <p>
     <a
       href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email&next={{ .RedirectTo }}"
       >Confirm your email</a
     >
   </p>

   Copy

   For detailed instructions on how to configure your email templates, including the use of variables like {{ .SiteURL }},{{ .TokenHash }}, and {{ .RedirectTo }}, refer to our Email Templates guide.

2. Add an email template for reset password to the Supabase project. Your reset password email template should contain at least the following HTML:

   <h2>Reset Password</h2>
    
   <p>Follow this link to reset the password for your user:</p>
   <p>
     <a
       href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=recovery&next={{ .RedirectTo }}"
       >Reset Password</a
     >
   </p>

   Copy

Setting up routes and redirect URLs

1. Set the site URL in the URL Configuration settings in the Supabase Dashboard.

2. Set up the Next.js route that users will visit to reset or update their password. Go to the URL Configuration settings and add the forgot-password route to the list of Redirect URLs. It should look something like: http://example.com/auth/forgot-password.

3. Update the redirect paths in the login-form.tsx and update-password-form.tsx components to point to the logged-in routes in your app.

Further reading

• Password-based authentication (PKCE flow)
• Authentication error codes
• Email templates
• Email templates for local development
• Custom SMTP