mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Danny WhiteandChris Chinchilla
9c03ad6b02
## What kind of change does this PR introduce? Docs update. Related to DEPR-551. ## What is the current behavior? Docs MDX still uses the legacy `label` prop for Admonitions, even though #45618 added `title` and kept `label` only as a backwards-compatible alias after #45302 was reverted in #45535. ## What is the new behavior? Migrates Docs-owned Admonitions from `label=` to `title=` without changing rendered copy, component APIs, Studio callsites, design-system examples, or the legacy `label` alias. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Documentation** * Standardized admonition headings across the docs by switching how admonition headings are provided (preserving all visible guidance and examples). Content and instructions remain unchanged; this ensures consistent rendering of callouts and improves uniformity across guides and reference pages. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46053?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Chris Chinchilla <chris.ward@supabase.io>
138 lines
4.1 KiB
Plaintext
138 lines
4.1 KiB
Plaintext
---
|
|
title: 'Build a User Management App with React'
|
|
description: 'Learn how to use Supabase in your React App.'
|
|
---
|
|
|
|
<$Partial path="uiLibCta.mdx" />
|
|
<$Partial path="quickstart_intro.mdx" />
|
|
|
|
|
|
|
|
<Admonition type="note">
|
|
|
|
If you get stuck while working through this guide, you can find the [full example on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/react-user-management).
|
|
|
|
</Admonition>
|
|
|
|
<$Partial path="project_setup.mdx" variables={{ "framework": "react", "tab": "frameworks" }} />
|
|
|
|
## Building the app
|
|
|
|
Start building the React app from scratch.
|
|
|
|
### Initialize a React app
|
|
|
|
Use [Vite](https://vitejs.dev/guide/) to initialize an app called `supabase-react`:
|
|
|
|
```bash
|
|
npm create vite@latest supabase-react -- --template react
|
|
cd supabase-react
|
|
```
|
|
|
|
Install [supabase-js](https://github.com/supabase/supabase-js):
|
|
|
|
```bash
|
|
npm install @supabase/supabase-js
|
|
```
|
|
|
|
Save the environment variables in a `.env.local` file, using the Project URL and the key that you copied [earlier](#get-api-details).
|
|
|
|
<$CodeSample
|
|
path="/user-management/react-user-management/.env.example"
|
|
lines={[[1, -1]]}
|
|
meta="name=.env"
|
|
/>
|
|
|
|
With the API credentials in place, create a helper file to initialize the Supabase client. The application exposes these variables in the browser, and that's fine as Supabase enables [Row Level Security](/docs/guides/database/postgres/row-level-security) by default on all tables.
|
|
|
|
Create and edit `src/supabaseClient.js`:
|
|
|
|
<$CodeSample
|
|
path="/user-management/react-user-management/src/supabaseClient.js"
|
|
lines={[[1, -1]]}
|
|
meta="name=src/supabaseClient.js"
|
|
/>
|
|
|
|
### App styling (optional)
|
|
|
|
An optional step is to update the CSS file `src/index.css` to make the app look better.
|
|
You can find the full contents of this file [in the example repository](https://raw.githubusercontent.com/supabase/supabase/master/examples/user-management/react-user-management/src/index.css).
|
|
|
|
### Set up a login component
|
|
|
|
You need a React component to manage logins and sign-ups. It uses [Magic Links](/docs/guides/auth/auth-email-passwordless#with-magic-link), so users can sign in with their email without using passwords.
|
|
|
|
<Admonition type="tip" title="Did you know?">
|
|
|
|
You can customize other emails sent out to new users, including the email's looks, content, and query parameters from [the **Authentication > Email**](/dashboard/project/_/auth/templates) section of the Dashboard.
|
|
|
|
</Admonition>
|
|
|
|
Create and edit `src/Auth.jsx`:
|
|
|
|
<$CodeSample
|
|
path="/user-management/react-user-management/src/Auth.jsx"
|
|
lines={[[1, -1]]}
|
|
meta="name=src/Auth.jsx"
|
|
/>
|
|
|
|
### Account page
|
|
|
|
After a user signs in, they need a way to edit their profile details and manage their accounts.
|
|
|
|
Create a new component called `src/Account.jsx` and add the following code:
|
|
|
|
<$CodeSample
|
|
path="/user-management/react-user-management/src/Account.jsx"
|
|
lines={[[1, 2], [4, 66], [74, -1]]}
|
|
meta="name=src/Account.jsx"
|
|
/>
|
|
|
|
## Profile photos
|
|
|
|
Add a way for users to upload a profile photo. Supabase configures every project with [Storage](/docs/guides/storage) for managing large files like photos and videos.
|
|
|
|
### Create an upload widget
|
|
|
|
Create `src/Avatar.jsx` and add the following code:
|
|
|
|
<$CodeSample
|
|
path="/user-management/react-user-management/src/Avatar.jsx"
|
|
lines={[[1, -1]]}
|
|
meta="name=src/Avatar.jsx"
|
|
/>
|
|
|
|
### Update the Account component
|
|
|
|
With the Avatar component created, update `src/Account.jsx` to include it:
|
|
|
|
<$CodeSample
|
|
path="/user-management/react-user-management/src/Account.jsx"
|
|
lines={[[1, -1]]}
|
|
meta="name=src/Account.jsx"
|
|
/>
|
|
|
|
### Launch!
|
|
|
|
With all the components in place, change the contents of `src/App.jsx` to include the new components and Auth logic.
|
|
|
|
<$Partial path="auth_methods.mdx" />
|
|
|
|
<$CodeSample
|
|
path="/user-management/react-user-management/src/App.jsx"
|
|
lines={[[1, -1]]}
|
|
meta="name=src/App.jsx"
|
|
/>
|
|
|
|
Once that's done, run this in a terminal window:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
And then open the browser to [localhost:5173](http://localhost:5173) and you should see the completed app.
|
|
|
|
|
|
|
|
At this stage you have a fully functional application!
|