diff --git a/apps/docs/content/guides/getting-started/tutorials/with-react.mdx b/apps/docs/content/guides/getting-started/tutorials/with-react.mdx
index abb433c92e7..8f656779f11 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-react.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-react.mdx
@@ -18,53 +18,42 @@ If you get stuck while working through this guide, refer to the [full example on
## Building the app
-Let's start building the React app from scratch.
+Start building the React app from scratch.
### Initialize a React app
-We can use [Vite](https://vitejs.dev/guide/) to initialize
-an app called `supabase-react`:
+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
```
-Then let's install the only additional dependency: [supabase-js](https://github.com/supabase/supabase-js).
+Install the only additional dependency: [supabase-js](https://github.com/supabase/supabase-js).
```bash
npm install @supabase/supabase-js
```
And finally, save the environment variables in a `.env.local` file.
-All we need are the Project URL and the key that you copied [earlier](#get-api-details).
+Use the Project URL and the key that you copied [earlier](#get-api-details).
-<$CodeTabs>
+<$CodeSample
+path="/user-management/react-user-management/.env.example"
+lines={[[1, -1]]}
+meta="name=.env"
+/>
-```bash name=.env
-VITE_SUPABASE_URL=YOUR_SUPABASE_URL
-VITE_SUPABASE_PUBLISHABLE_KEY=YOUR_SUPABASE_PUBLISHABLE_KEY
-```
-
-
-
-Now that we have the API credentials in place, let's create a helper file to initialize the Supabase client. These variables will be exposed
-on the browser, and that's completely fine since we have [Row Level Security](/docs/guides/auth#row-level-security) enabled on our Database.
+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](/docs/guides/auth#row-level-security) enabled on the Database.
Create and edit `src/supabaseClient.js`:
-<$CodeTabs>
-
-```js name=src/supabaseClient.js
-import { createClient } from '@supabase/supabase-js'
-
-const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
-const supabasePublishableKey = import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY
-
-export const supabase = createClient(supabaseUrl, supabasePublishableKey)
-```
-
-
+<$CodeSample
+path="/user-management/react-user-management/src/supabaseClient.js"
+lines={[[1, -1]]}
+meta="name=src/supabaseClient.js"
+/>
### App styling (optional)
@@ -73,219 +62,53 @@ You can find the full contents of this file [here](https://raw.githubusercontent
### Set up a login component
-Let's set up a React component to manage logins and sign ups. We'll use Magic Links, so users can sign in with their email without using passwords.
+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`:
-<$CodeTabs>
-
-```jsx name=src/Auth.jsx
-import { useState } from 'react'
-import { supabase } from './supabaseClient'
-
-export default function Auth() {
- const [loading, setLoading] = useState(false)
- const [email, setEmail] = useState('')
-
- const handleLogin = async (event) => {
- event.preventDefault()
-
- setLoading(true)
- const { error } = await supabase.auth.signInWithOtp({ email })
-
- if (error) {
- alert(error.error_description || error.message)
- } else {
- alert('Check your email for the login link!')
- }
- setLoading(false)
- }
-
- return (
-
-
-
Supabase + React
-
Sign in via magic link with your email below
-
-
-
- )
-}
-```
-
-
+<$CodeSample
+path="/user-management/react-user-management/src/Auth.jsx"
+lines={[[1, -1]]}
+meta="name=src/Auth.jsx"
+/>
### Account page
-After a user is signed in we can allow them to edit their profile details and manage their account.
+Users also need a way to edit their profile details and manage their accounts after signing in.
-Let's create a new component for that called `src/Account.jsx`.
+### Create an upload widget
-<$CodeTabs>
+Every Supabase project is configured with [Storage](/docs/guides/storage) for managing large files like photos and videos.
-```jsx name=src/Account.jsx
-import { useState, useEffect } from 'react'
-import { supabase } from './supabaseClient'
+Create an avatar for the user so that they can upload a profile photo. Start by creating a new component:
-export default function Account({ session }) {
- const [loading, setLoading] = useState(true)
- const [username, setUsername] = useState(null)
- const [website, setWebsite] = useState(null)
- const [avatar_url, setAvatarUrl] = useState(null)
+Create and edit `src/Avatar.jsx`:
- useEffect(() => {
- let ignore = false
- async function getProfile() {
- setLoading(true)
- const { user } = session
+<$CodeSample
+path="/user-management/react-user-management/src/Avatar.jsx"
+lines={[[1, -1]]}
+meta="name=src/Avatar.jsx"
+/>
- const { data, error } = await supabase
- .from('profiles')
- .select(`username, website, avatar_url`)
- .eq('id', user.id)
- .single()
+After a user is signed in, allow them to edit their profile details and manage their account.
- if (!ignore) {
- if (error) {
- console.warn(error)
- } else if (data) {
- setUsername(data.username)
- setWebsite(data.website)
- setAvatarUrl(data.avatar_url)
- }
- }
+Create a new component for that called `src/Account.jsx` and also add the `Avatar` component created earlier.
- setLoading(false)
- }
-
- getProfile()
-
- return () => {
- ignore = true
- }
- }, [session])
-
- async function updateProfile(event, avatarUrl) {
- event.preventDefault()
-
- setLoading(true)
- const { user } = session
-
- const updates = {
- id: user.id,
- username,
- website,
- avatar_url: avatarUrl,
- updated_at: new Date(),
- }
-
- const { error } = await supabase.from('profiles').upsert(updates)
-
- if (error) {
- alert(error.message)
- } else {
- setAvatarUrl(avatarUrl)
- }
- setLoading(false)
- }
-
- return (
-
- )
-}
-```
-
-
+<$CodeSample
+path="/user-management/react-user-management/src/Account.jsx"
+lines={[[1, -1]]}
+meta="name=src/Account.jsx"
+/>
### Launch!
-Now that we have all the components in place, let's update `src/App.jsx`:
+Now that you have all the components in place, update `src/App.jsx`, which fetches the current user via the [`getUser`](/docs/reference/javascript/auth-getuser) method if there is an existing session. This method performs a network request to the Supabase Auth server.
-<$CodeTabs>
-
-```jsx name=src/App.jsx
-import './App.css'
-import { useState, useEffect } from 'react'
-import { supabase } from './supabaseClient'
-import Auth from './Auth'
-import Account from './Account'
-
-function App() {
- const [session, setSession] = useState(null)
-
- useEffect(() => {
- supabase.auth.getSession().then(({ data: { session } }) => {
- setSession(session)
- })
-
- supabase.auth.onAuthStateChange((_event, session) => {
- setSession(session)
- })
- }, [])
-
- return (
-
- {!session ? : }
-
- )
-}
-
-export default App
-```
-
-
+<$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:
@@ -297,132 +120,4 @@ And then open the browser to [localhost:5173](http://localhost:5173) and you sho
-## Bonus: Profile photos
-
-Every Supabase project is configured with [Storage](/docs/guides/storage) for managing large files like photos and videos.
-
-### Create an upload widget
-
-Let's create an avatar for the user so that they can upload a profile photo. We can start by creating a new component:
-
-Create and edit `src/Avatar.jsx`:
-
-<$CodeTabs>
-
-```jsx name=src/Avatar.jsx
-import { useEffect, useState } from 'react'
-import { supabase } from './supabaseClient'
-
-export default function Avatar({ url, size, onUpload }) {
- const [avatarUrl, setAvatarUrl] = useState(null)
- const [uploading, setUploading] = useState(false)
-
- useEffect(() => {
- if (url) downloadImage(url)
- }, [url])
-
- async function downloadImage(path) {
- try {
- const { data, error } = await supabase.storage.from('avatars').download(path)
- if (error) {
- throw error
- }
- const url = URL.createObjectURL(data)
- setAvatarUrl(url)
- } catch (error) {
- console.log('Error downloading image: ', error.message)
- }
- }
-
- async function uploadAvatar(event) {
- try {
- setUploading(true)
-
- if (!event.target.files || event.target.files.length === 0) {
- throw new Error('You must select an image to upload.')
- }
-
- const file = event.target.files[0]
- const fileExt = file.name.split('.').pop()
- const fileName = `${Math.random()}.${fileExt}`
- const filePath = `${fileName}`
-
- const { error: uploadError } = await supabase.storage.from('avatars').upload(filePath, file)
-
- if (uploadError) {
- throw uploadError
- }
-
- onUpload(event, filePath)
- } catch (error) {
- alert(error.message)
- } finally {
- setUploading(false)
- }
- }
-
- return (
-
- {avatarUrl ? (
-
- ) : (
-
- )}
-
-
-
-
-
- )
-}
-```
-
-
-
-### Add the new widget
-
-And then we can add the widget to the Account page at `src/Account.jsx`:
-
-<$CodeTabs>
-
-```jsx name=src/Account.jsx
-// Import the new component
-import Avatar from './Avatar'
-
-// ...
-
-return (
-
-)
-```
-
-
-
At this stage you have a fully functional application!
diff --git a/examples/user-management/react-user-management/README.md b/examples/user-management/react-user-management/README.md
index 4370ec623a2..cdcff65ee80 100644
--- a/examples/user-management/react-user-management/README.md
+++ b/examples/user-management/react-user-management/README.md
@@ -1,129 +1,343 @@
-# Supabase Vite User Management
+# Build a User Management App with React
-This example will set you up for a very common situation: users can sign up with a magic link and then update their account with public profile information, including a profile image.
+This example demonstrates how to build a user management app with React and Supabase. Users can sign up with a magic link and then update their account with public profile information, including a profile image.
-This demonstrates how to use:
+
-- User signups using Supabase [Auth](https://supabase.com/auth).
-- User avatar images using Supabase [Storage](https://supabase.com/storage).
-- Public profiles restricted with [Policies](https://supabase.com/docs/guides/auth#policies).
-- Frontend using [Vite](https://vitejs.dev/).
+## Features
-## Technologies used
+This app demonstrates how to use:
-- Frontend:
- - [Vite](https://vitejs.dev/) - a React toolchain.
- - [Supabase.js](https://supabase.com/docs/library/getting-started) for user management and realtime data syncing.
-- Backend:
- - [supabase.com/dashboard](https://supabase.com/dashboard/): hosted Postgres database with restful API for usage with Supabase.js.
+- User signups using Supabase [Auth](https://supabase.com/auth) with Magic Links
+- User avatar images using Supabase [Storage](https://supabase.com/storage)
+- Public profiles restricted with [Row Level Security](https://supabase.com/docs/guides/auth#row-level-security)
+- Frontend using [Vite](https://vitejs.dev/) and React
+- The [`getUser()`](https://supabase.com/docs/reference/javascript/auth-getuser) method to fetch current user details
-## Build from scratch
+## Technologies Used
-### 1. Create new project
+- **Frontend:**
+ - [Vite](https://vitejs.dev/) - Fast React development toolchain
+ - [Supabase.js](https://supabase.com/docs/library/getting-started) - For user management and data syncing
+- **Backend:**
+ - [Supabase](https://supabase.com/dashboard) - Hosted Postgres database with RESTful API
-Sign up to Supabase - [https://supabase.com/dashboard](https://supabase.com/dashboard) and create a new project. Wait for your database to start.
+## Getting Started
-### 2. Run "User Management" Quickstart
+### Prerequisites
-Once your database has started, head over to your project's `SQL Editor` and run the "User Management Starter" quickstart. On the `SQL editor` page, scroll down until you see `User Management Starter: Sets up a public Profiles table which you can access with your API`. Click that, then click `RUN` to execute that query and create a new `profiles` table. When that's finished, head over to the `Table Editor` and see your new `profiles` table.
+Before you begin, make sure you have:
+- A Supabase account ([sign up here](https://supabase.com/dashboard))
+- Node.js installed on your machine
-### 3. Get the URL and Key
+### 1. Create a Supabase Project
-Go to the Project Settings (the cog icon), open the API tab, and find your API URL and `anon` key, you'll need these in the next step.
+1. Sign in to [Supabase Dashboard](https://supabase.com/dashboard)
+2. Create a new project
+3. Wait for your database to start
-The `anon` key is your client-side API key. It allows "anonymous access" to your database, until the user has logged in. Once they have logged in, the keys will switch to the user's own login token. This enables row level security for your data. Read more about this [below](#postgres-row-level-security).
+### 2. Set Up the Database
-
+Once your database has started:
-**_NOTE_**: The `service_role` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
+1. Go to the **SQL Editor** in your project dashboard
+2. Scroll down to find **"User Management Starter"** quickstart
+3. Click it and then click **RUN** to execute the query
+4. This will create a `profiles` table - verify it in the **Table Editor**
-### 4. Env vars
-
-Create a file in this folder `.env.local`
-
-```
-VITE_SUPABASE_URL=
-VITE_SUPABASE_ANON_KEY=
-```
-
-Populate this file with your URL and Key.
-
-### 5. Run the application
-
-Run the application: `npm run dev`. Open your browser to the url indicated in the CLI (eg `https://localhost:5173/`) and you are ready to go 🚀.
-
-## Supabase details
-
-### Postgres Row level security
-
-This project uses very high-level Authorization using Postgres' Row Level Security.
-When you start a Postgres database on Supabase, we populate it with an `auth` schema, and some helper functions.
-When a user logs in, they are issued a JWT with the role `authenticated` and their UUID.
-We can use these details to provide fine-grained control over what each user can and cannot do.
-
-This is a trimmed-down schema, with the policies:
+The quickstart creates the following schema:
```sql
-- Create a table for Public Profiles
-create table
- profiles (
- id uuid references auth.users not null,
- updated_at timestamp
- with
- time zone,
- username text unique,
- avatar_url text,
- website text,
- primary key (id),
- unique (username),
- constraint username_length check (char_length(username) >= 3)
- );
+create table profiles (
+ id uuid references auth.users not null,
+ updated_at timestamp with time zone,
+ username text unique,
+ avatar_url text,
+ website text,
+ primary key (id),
+ unique (username),
+ constraint username_length check (char_length(username) >= 3)
+);
-alter table
- profiles enable row level security;
+alter table profiles enable row level security;
-create policy "Public profiles are viewable by everyone." on profiles for
-select
- using (true);
+create policy "Public profiles are viewable by everyone."
+ on profiles for select using (true);
-create policy "Users can insert their own profile." on profiles for insert
-with
- check ((select auth.uid()) = id);
+create policy "Users can insert their own profile."
+ on profiles for insert with check ((select auth.uid()) = id);
-create policy "Users can update own profile." on profiles for
-update
- using ((select auth.uid()) = id);
+create policy "Users can update own profile."
+ on profiles for update using ((select auth.uid()) = id);
--- Set up Realtime!
-begin;
+-- Set up Storage for avatars
+insert into storage.buckets (id, name) values ('avatars', 'avatars');
-drop
- publication if exists supabase_realtime;
+create policy "Avatar images are publicly accessible."
+ on storage.objects for select using (bucket_id = 'avatars');
-create publication supabase_realtime;
-
-commit;
-
-alter
- publication supabase_realtime add table profiles;
-
--- Set up Storage!
-insert into
- storage.buckets (id, name)
-values
- ('avatars', 'avatars');
-
-create policy "Avatar images are publicly accessible." on storage.objects for
-select
- using (bucket_id = 'avatars');
-
-create policy "Anyone can upload an avatar." on storage.objects for insert
-with
- check (bucket_id = 'avatars');
+create policy "Anyone can upload an avatar."
+ on storage.objects for insert with check (bucket_id = 'avatars');
```
+### 3. Get Your API Credentials
+
+1. Go to **Project Settings** (the cog icon)
+2. Open the **API** tab
+3. Copy your **Project URL** and **anon/public key**
+
+### 4. Configure Environment Variables
+
+Create a `.env.local` file in the project root:
+
+```bash
+VITE_SUPABASE_URL=YOUR_SUPABASE_URL
+VITE_SUPABASE_PUBLISHABLE_KEY=YOUR_SUPABASE_PUBLISHABLE_KEY
+```
+
+Replace the values with your actual Project URL and key.
+
+### 5. Install Dependencies
+
+```bash
+npm install
+```
+
+### 6. Run the Application
+
+```bash
+npm run dev
+```
+
+Open your browser to [http://localhost:5173](http://localhost:5173) 🚀
+
+## Building from Scratch
+
+If you want to build this app from scratch, follow these steps:
+
+### Initialize a React App
+
+Use [Vite](https://vitejs.dev/guide/) to create a new React app:
+
+```bash
+npm create vite@latest supabase-react -- --template react
+cd supabase-react
+```
+
+### Install Supabase
+
+Install the Supabase JavaScript client:
+
+```bash
+npm install @supabase/supabase-js
+```
+
+### Set Up Environment Variables
+
+Create a `.env.local` file with your Supabase credentials (see step 4 above).
+
+### Create the Supabase Client
+
+Create `src/supabaseClient.js`:
+
+```javascript
+import { createClient } from '@supabase/supabase-js'
+
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
+const supabasePublishableKey = import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY
+
+export const supabase = createClient(supabaseUrl, supabasePublishableKey)
+```
+
+This initializes the Supabase client with your project credentials. These variables are exposed in the browser, which is fine because Row Level Security protects your data.
+
+### Optional: Add Styling
+
+Update `src/index.css` to style the app. You can find the full CSS file [here](https://raw.githubusercontent.com/supabase/supabase/master/examples/user-management/react-user-management/src/index.css).
+
+## Application Structure
+
+### Authentication Component (`src/Auth.jsx`)
+
+Handles user login with Magic Links - users can sign in with their email without passwords:
+
+```javascript
+import { useState } from 'react'
+import { supabase } from './supabaseClient'
+
+export default function Auth() {
+ const [loading, setLoading] = useState(false)
+ const [email, setEmail] = useState('')
+
+ const handleLogin = async (event) => {
+ event.preventDefault()
+ setLoading(true)
+
+ const { error } = await supabase.auth.signInWithOtp({ email })
+
+ if (error) {
+ alert(error.error_description || error.message)
+ } else {
+ alert('Check your email for the login link!')
+ }
+ setLoading(false)
+ }
+
+ return (
+
+
+
Supabase + React
+
Sign in via magic link with your email below
+
+
+
+ )
+}
+```
+
+### Avatar Upload Component (`src/Avatar.jsx`)
+
+Manages profile photo uploads using Supabase Storage:
+
+- Downloads existing avatar images
+- Handles file uploads to the `avatars` bucket
+- Provides visual feedback during upload
+
+See the full component in [`src/Avatar.jsx`](src/Avatar.jsx).
+
+### Account Management Component (`src/Account.jsx`)
+
+Allows users to view and edit their profile:
+
+- Fetches user profile data from the `profiles` table
+- Updates profile information (username, website, avatar)
+- Displays the current user's email
+- Provides sign-out functionality
+
+Key features:
+- Uses the `user` prop (not `session`) passed from the parent component
+- Implements proper cleanup with the `ignore` flag to prevent race conditions
+- Updates profile data with `upsert` to handle both inserts and updates
+
+See the full component in [`src/Account.jsx`](src/Account.jsx).
+
+### Main App Component (`src/App.jsx`)
+
+The root component that manages authentication state:
+
+```javascript
+import { useState, useEffect } from 'react'
+import './App.css'
+import { supabase } from './supabaseClient'
+import Auth from './Auth'
+import Account from './Account'
+
+function App() {
+ const [user, setUser] = useState(null)
+
+ useEffect(() => {
+ // Get initial user on mount
+ supabase.auth.getUser().then(({ data: { user } }) => {
+ setUser(user)
+ })
+
+ // Listen for auth changes
+ supabase.auth.onAuthStateChange(async () => {
+ const { data: { user } } = await supabase.auth.getUser()
+ setUser(user)
+ })
+ }, [])
+
+ return (
+