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