mirror of
https://github.com/supabase/supabase.git
synced 2026-10-16 14:49:10 +03:00
Ivan Vasilov
75ead31767
* Minor updates to tanstack and nextjs auth. * Update the react client. * Update the react auth block. * Fix the clean-registry command.
67 lines
2.5 KiB
Plaintext
67 lines
2.5 KiB
Plaintext
---
|
|
title: Password-based Authentication
|
|
description: Password-based authentication block for React Single Page Applications
|
|
---
|
|
|
|
## 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
|
|
|
|
This block inserts components for login, sign-up, forgot-password and update-password flows in your projects. In general, you
|
|
would do the following steps:
|
|
|
|
1. Create routes using your framework of choice for the 4 flows
|
|
2. Import the block components into the routes
|
|
3. Add a authenticated route /info which should render the current user info.
|
|
4. Add the following code in the authenticated route to redirect to login if the user is unauthenticated.
|
|
|
|
````ts
|
|
useEffect(() => {
|
|
const checkAuth = async () => {
|
|
const client = createClient();
|
|
const { error } = await client.auth.getUser();
|
|
|
|
if (error) {
|
|
location.href = "/login";
|
|
}
|
|
};
|
|
checkAuth();
|
|
}, []);
|
|
```
|
|
|
|
4. Update the redirect upon successful login in `login-form.tsx` and `update-password.tsx` to `/info`.
|
|
5. Test the rest of the flows.
|
|
|
|
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.
|