Use Supabase Auth with React - Supabase

<StepHikeCompact.Step step={1}> <StepHikeCompact.Details title="Create a new Supabase project">

[Launch a new project](/dashboard) in the Supabase Dashboard.

Your new database has a table for storing your users. You can see that this table is currently empty by running some SQL in the [SQL Editor](/dashboard/project/_/sql).

</StepHikeCompact.Details>

<StepHikeCompact.Code>

 ```sql name=SQL_EDITOR
  select * from auth.users;
  ````

</StepHikeCompact.Code>

</StepHikeCompact.Step>

<StepHikeCompact.Step step={2}>

<StepHikeCompact.Details title="Create a React app">

Create a React app using a [Vite](https://vitejs.dev/guide/) template.

</StepHikeCompact.Details>

<StepHikeCompact.Code>

```bash name=Terminal
npm create vite@latest my-app -- --template react
```

</StepHikeCompact.Code>

</StepHikeCompact.Step>

<StepHikeCompact.Step step={3}> <StepHikeCompact.Details title="Install the Supabase client library">

Navigate to the React app and install the Supabase libraries.

</StepHikeCompact.Details>

<StepHikeCompact.Code>

  ```bash name=Terminal
  cd my-app && npm install @supabase/supabase-js
  ```

</StepHikeCompact.Code>

</StepHikeCompact.Step> <StepHikeCompact.Step step={4}> <StepHikeCompact.Details title="Declare Supabase Environment Variables">

    Rename `.env.example` to `.env.local` and populate with your Supabase connection variables:

    <ProjectConfigVariables variable="url" />
    <ProjectConfigVariables variable="publishable" />



</StepHikeCompact.Details>

<StepHikeCompact.Code>

  <$CodeSample
    path="/auth/quickstarts/react/.env.example"
    lines={[[1, -1]]}
    meta="name=.env.local"
  />
  <$Partial path="api_settings_steps.mdx" variables={{ "framework": "react", "tab": "frameworks" }} />

</StepHikeCompact.Code>

</StepHikeCompact.Step> <StepHikeCompact.Step step={5}> <StepHikeCompact.Details title="Set up your login component">

<$Partial path="uiLibCta.mdx" />

In `App.jsx`, create a Supabase client using your Project URL and key.

The code uses the [`getClaims`](/docs/reference/javascript/auth-getclaims) method in `App.jsx` to validate the local JWT before showing the signed-in user.

</StepHikeCompact.Details>
<StepHikeCompact.Code>

  <$CodeSample
    path="/auth/quickstarts/react/src/App.jsx"
    lines={[[1, -1]]}
    meta="name=src/App.jsx"
  />

</StepHikeCompact.Code>

</StepHikeCompact.Step>

<StepHikeCompact.Step step={6}> <StepHikeCompact.Details title="Customize email template">

Before proceeding, change the email template to support support a server-side authentication flow that sends a token hash:

- Go to the [Auth templates](/dashboard/project/_/auth/templates) page in your dashboard.
- Select the Confirm sign up template.
- Change `{{ .ConfirmationURL }}` to `{{ .SiteURL }}?token_hash={{ .TokenHash }}&type=email`.
- Change your [Site URL](/dashboard/project/_/auth/url-configuration) to `https://localhost:5173`

</StepHikeCompact.Details>

</StepHikeCompact.Step>

<StepHikeCompact.Step step={7}> <StepHikeCompact.Details title="Start the app">

  Start the app, go to http://localhost:5173 in a browser, and open the browser console and you should be able to register and log in.

  </StepHikeCompact.Details>

  <StepHikeCompact.Code>

    ```bash name=Terminal
    npm run dev
    ```

  </StepHikeCompact.Code>

</StepHikeCompact.Step>

</StepHikeCompact>