mirror of
https://github.com/supabase/supabase.git
synced 2026-06-13 01:39:53 +08:00
e4f824b835
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Documentation** * Consolidated API key deprecation guidance into a reusable notice for consistent messaging across docs. Announces deprecation of legacy anon/service_role JWT-secret keys by end of 2026, instructs switching to sb_publishable_xxx / sb_secret_xxx, and provides steps to locate and copy both new and legacy keys. Applied across auth, getting-started, API, and realtime guides. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: fadymak <dev@fadymak.com>
139 lines
3.7 KiB
Plaintext
139 lines
3.7 KiB
Plaintext
---
|
|
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:
|
|
|
|
<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 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>
|