mirror of
https://github.com/supabase/supabase.git
synced 2026-10-16 06:39:09 +03:00
44 lines
1.8 KiB
Plaintext
44 lines
1.8 KiB
Plaintext
---
|
|
title: Password-based Auth (React)
|
|
description: Password-based Auth block for React
|
|
---
|
|
|
|
## Installation
|
|
|
|
<BlockItem
|
|
name="password-based-auth-react"
|
|
description="All needed components for the password based auth flow"
|
|
/>
|
|
|
|
## Folder structure
|
|
|
|
<RegistryBlock itemName="password-based-auth-react" />
|
|
|
|
## Usage
|
|
|
|
After installing the block in your Nextjs project, you'll have all needed pages and components to build a password-based authentication flow.
|
|
|
|
There few more steps to finish the installation:
|
|
|
|
1. Set the `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY` environment variables in your `.env` file in your project.
|
|
1. Add an [email template for sign-up](https://supabase.com/dashboard/project/uznvnxvfhkixgqetwekc/auth/templates) to the Supabase project. 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](/docs/email-templates).
|
|
|
|
Your signup email template should contain the following HTML:
|
|
|
|
```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>
|
|
```
|
|
|
|
1. Set the site URL in the [Supabase dashboard](https://supabase.com/dashboard/project/_/auth/url-configuration).
|
|
1. Set the forgot-password route in `forgot-password-form.tsx` component. The route needs to be configured as a redirect URL in the [Supabase dashboard](https://supabase.com/dashboard/project/_/auth/url-configuration).
|
|
1. 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.
|