supabase/apps/docs/content/guides/auth/quickstarts/react.mdx

---
title: 'Use Supabase Auth with React'
subtitle: 'Learn how to use Supabase Auth with React.js.'
breadcrumb: 'Auth Quickstarts'
hideToc: true
---

<StepHikeCompact>

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

        <$Partial path="api_settings.mdx" variables={{ "framework": "react", "tab": "frameworks" }} />

    </StepHikeCompact.Details>

    <StepHikeCompact.Code>

      <$CodeSample
        path="/auth/quickstarts/react/.env.example"
        lines={[[1, -1]]}
        meta="name=.env.local"
      />

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