Build a User Management App with React

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

If you get stuck while working through this guide, refer to the full example on GitHub.

<$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 to initialize an app called supabase-react:

npm create vite@latest supabase-react -- --template react
cd supabase-react

Install the only additional dependency: supabase-js.

npm install @supabase/supabase-js

And finally, save the environment variables in a .env.local file. Use the Project URL and the key that you copied earlier.

<$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. These variables will be exposed on the browser, and that's fine as you have Row Level Security enabled on the Database.

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 nice. You can find the full contents of this file here.

Set up a login component

Create a React component to manage logins and sign-ups. It uses Magic Links, so users can sign in with their email without using passwords.

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

Users also need a way to edit their profile details and manage their accounts after signing in.

Create an upload widget

Every Supabase project is configured with Storage for managing large files like photos and videos.

Create an avatar for the user so that they can upload a profile photo. Start by creating a new component:

Create and edit src/Avatar.jsx:

<$CodeSample path="/user-management/react-user-management/src/Avatar.jsx" lines={[[1, -1]]} meta="name=src/Avatar.jsx" />

After a user is signed in, allow them to edit their profile details and manage their account.

Create a new component for that called src/Account.jsx and also add the Avatar component created earlier.

<$CodeSample path="/user-management/react-user-management/src/Account.jsx" lines={[[1, -1]]} meta="name=src/Account.jsx" />

Launch!

Now that you have all the components in place, update src/App.jsx, which fetches the current user via the getUser method if there is an existing session. This method performs a network request to the Supabase Auth server.

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

npm run dev

And then open the browser to localhost:5173 and you should see the completed app.

At this stage you have a fully functional application!