# Use Supabase Auth with React

Learn how to use Supabase Auth with React.js.

1. **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).

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

2. **Create a React app**

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

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

3. **Install the Supabase client library**

Navigate to the React app and install the Supabase libraries.

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

4. **Declare Supabase Environment Variables**

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

You can also get the Project URL and key from [the project's **Connect** dialog](/dashboard/project/\_?showConnect=true&connectTab={{ .tab }}&framework={{ .framework }}).

### Get API details

Now that you've created some database tables, you are ready to insert data using the auto-generated API.

To do this, you need to get the Project URL and key from [the project **Connect** dialog](/dashboard/project/\_?showConnect=true&connectTab={{ .tab }}&framework={{ .framework }}).

[Read the API keys docs](/docs/guides/getting-started/api-keys) for a full explanation of all key types and their uses.

Supabase is changing the way keys work to improve project security and developer experience. You can [read the full announcement](https://github.com/orgs/supabase/discussions/29260), but in the transition period, you can use both the current `anon` and `service_role` keys and the new publishable key with the form `sb_publishable_xxx` which will replace the older keys.

**The legacy keys will be deprecated shortly, so we strongly encourage switching to and using the new publishable and secret API keys**.

In most cases, you can get the correct key from [the Project's **Connect** dialog](/dashboard/project/\_?showConnect=true&connectTab={{ .tab }}&framework={{ .framework }}), but if you want a specific key, you can find all keys in [the API Keys section of a Project's Settings page](/dashboard/project/_/settings/api-keys/):

**For new keys**, open the **API Keys** tab, if you don't have a publishable key already, click **Create new API Keys**, and copy the value from the **Publishable key** section.

5. **Set up your login component**

UI components built on shadcn/ui that connect to Supabase via a single command.

Explore Components

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.

6. **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`

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

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