mirror of
https://github.com/supabase/supabase.git
synced 2026-07-04 14:34:21 +08:00
601 lines
16 KiB
Plaintext
601 lines
16 KiB
Plaintext
---
|
|
id: with-nextjs
|
|
title: 'Quickstart: Next.js'
|
|
description: Learn how to use Supabase in your Next App.
|
|
sidebar_label: 'Next.js'
|
|
---
|
|
|
|
import Tabs from '@theme/Tabs'
|
|
import TabItem from '@theme/TabItem'
|
|
|
|
## Intro
|
|
|
|
This example provides the steps to build a simple user management app (from scratch!) using Supabase and Next.js. It includes:
|
|
|
|
- Supabase [Database](/docs/guides/database): a Postgres database for storing your user data.
|
|
- Supabase [Auth](/docs/guides/auth): users can sign in with magic links (no passwords, only email).
|
|
- Supabase [Storage](/docs/guides/storage): users can upload a photo.
|
|
- [Row Level Security](/docs/guides/auth#row-level-security): data is protected so that individuals can only access their own data.
|
|
- Instant [APIs](/docs/guides/api): APIs will be automatically generated when you create your database tables.
|
|
|
|
By the end of this guide you'll have an app which allows users to login and update some basic profile details:
|
|
|
|
|
|
|
|
<!-- ## Video demo
|
|
|
|
Coming soon.
|
|
|
|
Use the annotated timeline to step through this tutorial.
|
|
|
|
## Instant deploy
|
|
|
|
Want to deploy a completed version of this example without following the guide?
|
|
|
|
[](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fsupabase%2Fsupabase%2Ftree%2Fmaster%2Fexamples%2Freact-user-management&project-name=supabase-user-management&repository-name=supabase-user-management&demo-title=Supabase%20User%20Management&demo-description=An%20example%20web%20app%20using%20Supabase%20and%20Next.js&demo-url=https%3A%2F%2Fsupabase-react-user-management.vercel.app&demo-image=https%3A%2F%2Fi.imgur.com%2FZ3HkQqe.png&integration-ids=oac_jUduyjQgOyzev1fjrW83NYOv&external-id=nextjs-user-management)
|
|
|
|
Clicking this button the application will:
|
|
|
|
- Launch and prepare the Postgres database in Supabase.
|
|
- Launch the app in Vercel.
|
|
- Fork the example into your own GitHub account.
|
|
- Prepare the deployed application with all the necessary environment variables.
|
|
|
|
If you want to do it yourself, let's get started: -->
|
|
|
|
## Project set up
|
|
|
|
Before we start building we're going to set up our Database and API. This is as simple as starting a new Project in Supabase
|
|
and then creating a "schema" inside the database.
|
|
|
|
### Create a project
|
|
|
|
1. Go to [app.supabase.com](https://app.supabase.com).
|
|
1. Click on "New Project".
|
|
1. Enter your project details.
|
|
1. Wait for the new database to launch.
|
|
|
|
### Set up the database schema
|
|
|
|
Now we are going to set up the database schema. We can use the "User Management Starter" quickstart in the SQL Editor,
|
|
or you can just copy/paste the SQL from below and run it yourself.
|
|
|
|
<Tabs
|
|
defaultValue="dashboard"
|
|
values={[
|
|
{label: 'Dashboard', value: 'dashboard'},
|
|
{label: 'SQL', value: 'sql'},
|
|
]}>
|
|
<TabItem value="dashboard">
|
|
|
|
1. Go to the [SQL Editor](https://app.supabase.com/project/_/sql) page in the Dashboard.
|
|
2. Click **User Management Starter**.
|
|
3. Click **Run**.
|
|
|
|
<video width="99%" muted playsInline controls="true">
|
|
<source
|
|
src="/docs/videos/sql-user-management-starter.mp4"
|
|
type="video/mp4"
|
|
muted
|
|
playsInline
|
|
/>
|
|
</video>
|
|
|
|
</TabItem>
|
|
<TabItem value="sql">
|
|
|
|
```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)
|
|
);
|
|
|
|
alter table profiles enable row level security;
|
|
|
|
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 ( auth.uid() = id );
|
|
|
|
create policy "Users can update own profile."
|
|
on profiles for update
|
|
using ( auth.uid() = id );
|
|
|
|
-- Set up Realtime!
|
|
begin;
|
|
drop publication if exists supabase_realtime;
|
|
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' );
|
|
|
|
```
|
|
|
|
</TabItem>
|
|
</Tabs>
|
|
|
|
### Get the API Keys
|
|
|
|
Now that you've created some database tables, you are ready to insert data using the auto-generated API.
|
|
We just need to get the URL and `anon` key from the API settings.
|
|
|
|
1. Go to the [Settings](https://app.supabase.com/project/_/settings) page in the Dashboard.
|
|
2. Click **API** in the sidebar.
|
|
3. Find your API `URL`, `anon`, and `service_role` keys on this page.
|
|
|
|
<video width="99%" muted playsInline controls="true">
|
|
<source
|
|
src="/docs/videos/api/api-url-and-key.mp4"
|
|
type="video/mp4"
|
|
muted
|
|
playsInline
|
|
/>
|
|
</video>
|
|
|
|
## Building the App
|
|
|
|
Let's start building the Next.js app from scratch.
|
|
|
|
### Initialize a Next.js app
|
|
|
|
We can use [`create-next-app`](https://nextjs.org/docs/getting-started) to initialize
|
|
an app called `supabase-nextjs`:
|
|
|
|
```bash
|
|
npx create-next-app supabase-nextjs --use-npm
|
|
cd supabase-nextjs
|
|
```
|
|
|
|
Then let's install the only additional dependency: [supabase-js](https://github.com/supabase/supabase-js)
|
|
|
|
```bash
|
|
npm install @supabase/supabase-js@rc
|
|
```
|
|
|
|
And finally we want to save the environment variables in a `.env.local`.
|
|
All we need are the API URL and the `anon` key that you copied [earlier](#get-the-api-keys).
|
|
|
|
```bash title=".env.local"
|
|
NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
|
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_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.
|
|
|
|
```js title="utils/supabaseClient.js"
|
|
import { createClient } from '@supabase/supabase-js'
|
|
|
|
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
|
|
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
|
|
|
|
export const supabase = createClient(supabaseUrl, supabaseAnonKey)
|
|
```
|
|
|
|
And one optional step is to update the CSS file `styles/globals.css` to make the app look nice.
|
|
You can find the full contents of this file [here](https://raw.githubusercontent.com/supabase/supabase/master/examples/user-management/nextjs-ts-user-management/styles/globals.css).
|
|
|
|
### 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.
|
|
|
|
```jsx title="components/Auth.js"
|
|
import { useState } from 'react'
|
|
import { supabase } from '../utils/supabaseClient'
|
|
|
|
export default function Auth() {
|
|
const [loading, setLoading] = useState(false)
|
|
const [email, setEmail] = useState('')
|
|
|
|
const handleLogin = async (email) => {
|
|
try {
|
|
setLoading(true)
|
|
const { error } = await supabase.auth.signInWithOtp({ email })
|
|
if (error) throw error
|
|
alert('Check your email for the login link!')
|
|
} catch (error) {
|
|
alert(error.error_description || error.message)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="row flex-center flex">
|
|
<div className="col-6 form-widget">
|
|
<h1 className="header">Supabase + Next.js</h1>
|
|
<p className="description">
|
|
Sign in via magic link with your email below
|
|
</p>
|
|
<div>
|
|
<input
|
|
className="inputField"
|
|
type="email"
|
|
placeholder="Your email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<button
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
handleLogin(email)
|
|
}}
|
|
className="button block"
|
|
disabled={loading}
|
|
>
|
|
<span>{loading ? 'Loading' : 'Send magic link'}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
### Account page
|
|
|
|
After a user is signed in we can allow them to edit their profile details and manage their account.
|
|
|
|
Let's create a new component for that called `Account.js`.
|
|
|
|
```jsx title="components/Account.js"
|
|
import { useState, useEffect } from 'react'
|
|
import { supabase } from '../utils/supabaseClient'
|
|
|
|
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)
|
|
|
|
useEffect(() => {
|
|
getProfile()
|
|
}, [session])
|
|
|
|
async function getCurrentUser() {
|
|
const {
|
|
data: { session },
|
|
error,
|
|
} = await supabase.auth.getSession()
|
|
|
|
if (error) {
|
|
throw error
|
|
}
|
|
|
|
if (!session?.user) {
|
|
throw new Error('User not logged in')
|
|
}
|
|
|
|
return session.user
|
|
}
|
|
|
|
async function getProfile() {
|
|
try {
|
|
setLoading(true)
|
|
const user = await getCurrentUser()
|
|
|
|
let { data, error, status } = await supabase
|
|
.from('profiles')
|
|
.select(`username, website, avatar_url`)
|
|
.eq('id', user.id)
|
|
.single()
|
|
|
|
if (error && status !== 406) {
|
|
throw error
|
|
}
|
|
|
|
if (data) {
|
|
setUsername(data.username)
|
|
setWebsite(data.website)
|
|
setAvatarUrl(data.avatar_url)
|
|
}
|
|
} catch (error) {
|
|
alert(error.message)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
async function updateProfile({ username, website, avatar_url }) {
|
|
try {
|
|
setLoading(true)
|
|
const user = await getCurrentUser()
|
|
|
|
const updates = {
|
|
id: user.id,
|
|
username,
|
|
website,
|
|
avatar_url,
|
|
updated_at: new Date(),
|
|
}
|
|
|
|
let { error } = await supabase.from('profiles').upsert(updates)
|
|
|
|
if (error) {
|
|
throw error
|
|
}
|
|
} catch (error) {
|
|
alert(error.message)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="form-widget">
|
|
<div>
|
|
<label htmlFor="email">Email</label>
|
|
<input id="email" type="text" value={session.user.email} disabled />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="username">Name</label>
|
|
<input
|
|
id="username"
|
|
type="text"
|
|
value={username || ''}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="website">Website</label>
|
|
<input
|
|
id="website"
|
|
type="website"
|
|
value={website || ''}
|
|
onChange={(e) => setWebsite(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<button
|
|
className="button primary block"
|
|
onClick={() => updateProfile({ username, website, avatar_url })}
|
|
disabled={loading}
|
|
>
|
|
{loading ? 'Loading ...' : 'Update'}
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<button
|
|
className="button block"
|
|
onClick={() => supabase.auth.signOut()}
|
|
>
|
|
Sign Out
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
### Launch!
|
|
|
|
Now that we have all the components in place, let's update `pages/index.js`:
|
|
|
|
```jsx title="pages/index.js"
|
|
import { useState, useEffect } from 'react'
|
|
import { supabase } from '../utils/supabaseClient'
|
|
import Auth from '../components/Auth'
|
|
import Account from '../components/Account'
|
|
|
|
export default function Home() {
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const [session, setSession] = useState(null)
|
|
|
|
useEffect(() => {
|
|
let mounted = true
|
|
|
|
async function getInitialSession() {
|
|
const {
|
|
data: { session },
|
|
} = await supabase.auth.getSession()
|
|
|
|
// only update the react state if the component is still mounted
|
|
if (mounted) {
|
|
if (session) {
|
|
setSession(session)
|
|
}
|
|
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
|
|
getInitialSession()
|
|
|
|
const { subscription } = supabase.auth.onAuthStateChange(
|
|
(_event, session) => {
|
|
setSession(session)
|
|
}
|
|
)
|
|
|
|
return () => {
|
|
mounted = false
|
|
|
|
subscription?.unsubscribe()
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<div className="container" style={{ padding: '50px 0 100px 0' }}>
|
|
{!session ? (
|
|
<Auth />
|
|
) : (
|
|
<Account key={session.user.id} session={session} />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
Once that's done, run this in a terminal window:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
And then open the browser to [localhost:3000](http://localhost:3000) and you should see the completed app.
|
|
|
|
|
|
|
|
## 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:
|
|
|
|
```jsx title="components/Avatar.js"
|
|
import { useEffect, useState } from 'react'
|
|
import { supabase } from '../utils/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}`
|
|
|
|
let { error: uploadError } = await supabase.storage
|
|
.from('avatars')
|
|
.upload(filePath, file)
|
|
|
|
if (uploadError) {
|
|
throw uploadError
|
|
}
|
|
|
|
onUpload(filePath)
|
|
} catch (error) {
|
|
alert(error.message)
|
|
} finally {
|
|
setUploading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{avatarUrl ? (
|
|
<img
|
|
src={avatarUrl}
|
|
alt="Avatar"
|
|
className="avatar image"
|
|
style={{ height: size, width: size }}
|
|
/>
|
|
) : (
|
|
<div
|
|
className="avatar no-image"
|
|
style={{ height: size, width: size }}
|
|
/>
|
|
)}
|
|
<div style={{ width: size }}>
|
|
<label className="button primary block" htmlFor="single">
|
|
{uploading ? 'Uploading ...' : 'Upload'}
|
|
</label>
|
|
<input
|
|
style={{
|
|
visibility: 'hidden',
|
|
position: 'absolute',
|
|
}}
|
|
type="file"
|
|
id="single"
|
|
accept="image/*"
|
|
onChange={uploadAvatar}
|
|
disabled={uploading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
### Add the new widget
|
|
|
|
And then we can add the widget to the Account page:
|
|
|
|
```jsx title="components/Account.js"
|
|
// Import the new component
|
|
import Avatar from './Avatar'
|
|
|
|
// ...
|
|
|
|
return (
|
|
<div className="form-widget">
|
|
{/* Add to the body */}
|
|
<Avatar
|
|
url={avatar_url}
|
|
size={150}
|
|
onUpload={(url) => {
|
|
setAvatarUrl(url)
|
|
updateProfile({ username, website, avatar_url: url })
|
|
}}
|
|
/>
|
|
{/* ... */}
|
|
</div>
|
|
)
|
|
```
|
|
|
|
## Next steps
|
|
|
|
At this stage you have a fully functional application!
|
|
|
|
- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
|
|
- Sign in: [app.supabase.com](https://app.supabase.com)
|