-
-
-
-## Steps
-
-### Finding your Twilio credentials
-
-Start by logging into your Twilio account and starting a new project: https://www.twilio.com/console/projects/create
-
-Give your project a name and verify the mobile number you'll be using to test with. This is the number that will be receiving the SMS OTPs.
-
-
-
-
-Select 'SMS', 'Identity & Verification', and 'With code' as options on the welcome form.
-
-
-
-When you're back on the [Twilio console screen](https://www.twilio.com/console), you need to scroll down and click 'Get a trial phone number' - this is the number that you'll be sending SMSs from.
-
-
-
-
-
-You should now be able to see all three values you'll need to get started:
-
-- Account SID
-- Auth Token
-- Sender Phone Number
-
-
-
-Now go to the Auth > Settings page in the Supabase dashboard (https://app.supabase.com/project/YOUR-PROJECT-REF/auth/settings).
-
-You should see an option to enable Phone Signup:
-
-
-
-Toggle it on, and copy the 3 values over from the twilio dashboard. Click save.
-
-Note: for "Twilio Message Service SID" you can use the Sender Phone Number generated above.
-
-
-
-Now the backend should be setup, we can proceed to add our client-side code!
-
-#### SMS custom template
-
-The SMS message sent to a phone containing an OTP code can be customized. This is useful if you need to mention a brand name or display a website address.
-
-Go to Auth > Templates page in the Supabase dashboard (https://app.supabase.com/project/YOUR-PROJECT-REF/auth/templates).
-
-Use the variable `.Code` in the template to display the OTP code. Here's an example in the SMS template.
-
-
-
-### Using OTP with password based logins
-
-In this scenario we'll be using the user's mobile phone number and a corresponding password as an alternative to signing up with an email address. Note: please thoroughly consider potential security implications when signing up with a combination of phone number and password. Phone numbers are sometimes recycled by phone networks when users cancel their phone contracts or move countries, thereby granting access to the user's account to the subsequent owner of the phone number. In the near future Supabase will support multifactor authentication, which will mitigate this risk, but for now you may want to consider allowing your users to recover their account by some other means in an emergency.
-
-Using supabase-js on the client you'll want to use the same `signUp` method that you'd use for email based sign ups, but with the `phone` param instead of the `email param`:
-
-
+
+
+
+## Authentication
+
+You can authenticate your users in several ways:
+
+- Email & password.
+- Magic links (one-click logins).
+- Social providers.
+- Phone logins.
+
+### Providers
+
+We provide a suite of Providers and login methods, as well as [Auth helpers](/docs/guides/auth/auth-helpers/).
+
+
+
+
+### Configure third-party providers
+
+You can enable third-party providers with the click of a button by navigating to Authentication > Settings > Auth Providers and inputting your `Client ID` and `Secret` for each.
+
+
+
+### Redirect URLs and wildcards
+
+When using third-party providers, the [Supabase client library](/docs/reference/javascript/auth-signinwithoauth#sign-in-using-a-third-party-provider-with-redirect) redirects the user to the provider. When the third-party provider successfully authenticates the user, the provider redirects the user to the Supabase Auth callback URL where they are further redirected to the URL specified in the `redirectTo` parameter. This parameter defaults to the [`SITE_URL`](/docs/reference/auth/config#site_url). You can modify the `SITE_URL` or [add additional redirect URLs](https://app.supabase.com/project/_/auth/settings).
+
+You can use wildcard match patterns to support preview URLs from providers like Netlify and Vercel. See the [full list of supported patterns](https://pkg.go.dev/github.com/gobwas/glob#Compile). Use [this tool](https://www.digitalocean.com/community/tools/glob?comments=true&glob=http%3A%2F%2Flocalhost%3A3000%2F%2A%2A&matches=false&tests=http%3A%2F%2Flocalhost%3A3000&tests=http%3A%2F%2Flocalhost%3A3000%2F&tests=http%3A%2F%2Flocalhost%3A3000%2F%3Ftest%3Dtest&tests=http%3A%2F%2Flocalhost%3A3000%2Ftest-test%3Ftest%3Dtest&tests=http%3A%2F%2Flocalhost%3A3000%2Ftest%2Ftest%3Ftest%3Dtest) to test your patterns.
+
+> ⚠️ WARNING: While the "globstar" (`**`) is useful for local development and preview URLs, we recommend setting the exact redirect URL path for your site URL in production.
+
+#### Netlify preview URLs
+
+For deployments with Netlify, set the `SITE_URL` to your official site URL. Add the following additional redirect URLs for local development and deployment previews:
+
+- `http://localhost:3000/**`
+- `https://**--my_org.netlify.app/**`
+
+#### Vercel preview URLs
+
+For deployments with Vercel, set the `SITE_URL` to your official site URL. Add the following additional redirect URLs for local development and deployment previews:
+
+- `http://localhost:3000/**`
+- `https://*-username.vercel.app/**`
+
+Vercel provides an environment variable for the URL of the deployment called `NEXT_PUBLIC_VERCEL_URL`. See the [Vercel docs](https://vercel.com/docs/concepts/projects/environment-variables#system-environment-variables) for more details. You can use this variable to dynamically redirect depending on the environment:
+
+```js
+const getURL = () => {
+ let url =
+ process?.env?.NEXT_PUBLIC_SITE_URL ?? // Set this to your site URL in production env.
+ process?.env?.NEXT_PUBLIC_VERCEL_URL ?? // Automatically set by Vercel.
+ 'http://localhost:3000/';
+ // Make sure to include `https://` when not localhost.
+ url = url.includes('http') ? url : `https://${url}`;
+ // Make sure to including trailing `/`.
+ url = url.charAt(url.length - 1) === '/' ? url : `${url}/`;
+ return url;
+};
+
+const { data, error } = await supabase.auth.signInWithOAuth({
+ provider: 'github'
+ options: {
+ redirectTo: getURL()
+ }
+}
+```
+
+#### Mobile deep linking URIs
+
+For mobile applications you can use deep linking URIs. For example for your `SITE_URL` you can specify something like `com.supabase://login-callback/` and for additional redirect URLs something like `com.supabase.staging://login-callback/` if needed.
+
+## Authorization
+
+When you need granular authorization rules, nothing beats PostgreSQL's Row Level Security (RLS).
+
+Policies are PostgreSQL's rule engine. They are incredibly powerful and flexible, allowing you to write complex SQL rules which fit your unique business needs.
+
+Get started with our [Row Level Security Guides](/docs/guides/auth/row-level-security).
+
+### Row Level Security
+
+Authentication only gets you so far. When you need granular authorization rules, nothing beats PostgreSQL's [Row Level Security (RLS)](https://www.postgresql.org/docs/current/ddl-rowsecurity.html). Supabase makes it simple to turn RLS on and off.
+
+
+
+### Policies
+
+[Policies](https://www.postgresql.org/docs/current/sql-createpolicy.html) are PostgreSQL's rule engine. They are incredibly powerful and flexible, allowing you to write complex SQL rules which fit your unique business needs.
+
+
+
+With policies, your database becomes the rules engine. Instead of repetitively filtering your queries, like this ...
+
+```js
+const loggedInUserId = 'd0714948'
+let { data, error } = await supabase
+ .from('users')
+ .select('user_id, name')
+ .eq('user_id', loggedInUserId)
+
+// console.log(data)
+// => { id: 'd0714948', name: 'Jane' }
+```
+
+... you can simply define a rule on your database table, `auth.uid() = user_id`, and your request will return the rows which pass the rule, even when you remove the filter from your middleware:
+
+```js
+let { data, error } = await supabase.from('users').select('user_id, name')
+
+// console.log(data)
+// Still => { id: 'd0714948', name: 'Jane' }
+```
+
+### How It Works
+
+1. A user signs up. Supabase creates a new user in the `auth.users` table.
+2. Supabase returns a new JWT, which contains the user's `UUID`.
+3. Every request to your database also sends the JWT.
+4. Postgres inspects the JWT to determine the user making the request.
+5. The user's UID can be used in policies to restrict access to rows.
+
+Supabase provides a special function in Postgres, `auth.uid()`, which extracts the user's UID from the JWT. This is especially useful when creating policies.
+
+## User Management
+
+Supabase provides multiple endpoints to authenticate and manage your users:
+
+- [Sign up](/docs/reference/javascript/auth-signup)
+- [Sign in with password](/docs/reference/javascript/auth-signinwithpassword)
+- [Sign in with passwordless / one-time password (OTP)](/docs/reference/javascript/auth-signinwithotp)
+- [Sign in with OAuth](/docs/reference/javascript/auth-signinwithoauth)
+- [Sign out](/docs/reference/javascript/auth-signout)
+
+When users sign up, Supabase assigns them a unique ID. You can reference this ID anywhere in your database. For example, you might create a `profiles` table referencing `id` in the `auth.users` table using a `user_id` field.
+
+
+
export const Page = ({ children }) => {
- if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true') {
- return OldContent()
+ const router = useRouter()
+ if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true' && !router.asPath.includes('overview')) {
+ return NewContent()
}
return
+
+
+
+## Steps
+
+### Finding your Twilio credentials
+
+Start by logging into your Twilio account and starting a new project: https://www.twilio.com/console/projects/create
+
+Give your project a name and verify the mobile number you'll be using to test with. This is the number that will be receiving the SMS OTPs.
+
+
+
+
+Select 'SMS', 'Identity & Verification', and 'With code' as options on the welcome form.
+
+
+
+When you're back on the [Twilio console screen](https://www.twilio.com/console), you need to scroll down and click 'Get a trial phone number' - this is the number that you'll be sending SMSs from.
+
+
+
+
+
+You should now be able to see all three values you'll need to get started:
+
+- Account SID
+- Auth Token
+- Sender Phone Number
+
+
+
+Now go to the Auth > Settings page in the Supabase dashboard (https://app.supabase.com/project/YOUR-PROJECT-REF/auth/settings).
+
+You should see an option to enable Phone Signup:
+
+
+
+Toggle it on, and copy the 3 values over from the twilio dashboard. Click save.
+
+Note: for "Twilio Message Service SID" you can use the Sender Phone Number generated above.
+
+
+
+Now the backend should be setup, we can proceed to add our client-side code!
+
+#### SMS custom template
+
+The SMS message sent to a phone containing an OTP code can be customized. This is useful if you need to mention a brand name or display a website address.
+
+Go to Auth > Templates page in the Supabase dashboard (https://app.supabase.com/project/YOUR-PROJECT-REF/auth/templates).
+
+Use the variable `.Code` in the template to display the OTP code. Here's an example in the SMS template.
+
+
+
+### Using OTP with password based logins
+
+In this scenario we'll be using the user's mobile phone number and a corresponding password as an alternative to signing up with an email address. Note: please thoroughly consider potential security implications when signing up with a combination of phone number and password. Phone numbers are sometimes recycled by phone networks when users cancel their phone contracts or move countries, thereby granting access to the user's account to the subsequent owner of the phone number. In the near future Supabase will support multifactor authentication, which will mitigate this risk, but for now you may want to consider allowing your users to recover their account by some other means in an emergency.
+
+Using supabase-js on the client you'll want to use the same `signUp` method that you'd use for email based sign ups, but with the `phone` param instead of the `email param`:
+
+
-
-
-
-## Prerequisites
-
-Make sure you have these installed on your local machine:
-
-- [Docker](https://docs.docker.com/engine/install/)
-- [Git](https://github.com/git-guides/install-git)
-- [Supabase CLI](/docs/guides/cli)
-
-## Log in to the Supabase CLI
-
-```bash
-supabase login
-```
-
-## Initialize your project
-
-Create a new folder for your project and start a new git repository:
-
-```bash
-# create your project folder
-mkdir your-project
-
-# move into the new folder
-cd your-project
-
-# start a new git repository
-git init
-```
-
-## Start Supabase services
-
-[Initialize](/docs/reference/cli/usage#supabase-init) Supabase to set up the configuration for developing your project locally:
-
-```bash
-supabase init
-```
-
-Make sure Docker is running. The [start](/docs/reference/cli/usage#supabase-start) command uses Docker to start the Supabase [services](/docs/architecture).
-This command may take a while to run if this is the first time using the CLI.
-
-```bash
-supabase start
-```
-
-Once all of the Supabase services are running, you'll see output containing your local Supabase credentials.
-You can use the [stop](/docs/reference/cli/usage#supabase-stop) command at any time to stop all services.
-
-## Access services
-
-You can access services directly with any Postgres client or through the API Gateway ([Kong](https://github.com/Kong/kong)).
-
-
-
-
-
-### Make database changes
-
-For this guide, create a table called `employees`. In Supabase Studio, navigate to the **SQL Editor** page and run the following SQL command:
-
-```sql
-create table employees (
- id integer primary key generated always as identity,
- name text
-);
-```
-
-+ +## Auth + +### Email & Password Logins + +Build email logins for your application or website. [Docs](/docs/guides/auth/auth-email). + +### Magic Links + +Build passwordless logins for your application or website.[Docs](/docs/guides/auth/auth-magic-link). + +### Social Logins + +Provide social logins - everything from Apple, to GitHub, to Slack. [Docs](/docs/guides/auth/auth-apple). + +### Phone Logins + +Provide phone logins using a 3rd-party SMS provider. [Docs](/docs/guides/auth/auth-twilio). + +### Row Level Security + +Control the data each user can access with Postgres Policies. [Docs](/docs/guides/auth/row-level-security). + +### Serverside Auth Helpers + +Helpers for implementing user authentication in popular frameworks like [Next.js](/docs/guides/auth/auth-helpers/nextjs) and [SvelteKit](/docs/guides/auth/auth-helpers/sveltekit) + +### Auth UI Kit + +Build login and registration pages with custom themes. [Docs](/docs/guides/auth/auth-helpers/auth-ui). + +
+ +## APIs & Client libraries + +### Auto-generated REST API + +RESTful APIs are autogenerated from your database, without a single line of code. [Docs](/docs/guides/api#rest-api-overview). + +### Auto-generated GraphQL API + +Fast GraphQL APIs using our custom Postgres GraphQL extension. [Docs](/docs/guides/api#graphql-api-overview). + +### Realtime Database changes + +Receive your database changes through websockets. [Docs](/docs/guides/realtime/postgres-changes). + +### User Broadcasting + +Send messages between connected users through websockets. [Docs](/docs/guides/realtime#broadcast). + +### User Presence + +Synchronize shared state across your users, including online status and typing indicators. [Docs](/docs/guides/realtime#presence). + +### Client libraries + +Official client libraries for [JavaScript](/docs/reference/javascript/) and [Dart](/docs/reference/dart). +Unofficial libraries [supported by the community](https://github.com/supabase-community#client-libraries). + +
+ +## Storage + +### File storage + +Supabase Storage makes it simple to store and serve files. [Docs](/docs/guides/storage). + +### Storage CDN + +Cache large files using the Supabase CDN. [Docs](/docs/guides/storage-cdn). + +### Image Transformations + +Transform images on the fly. [Docs](/docs/guides/storage/image-transformations). + +
+ +## Edge Functions + +### Deno Edge Functions + +Globally distributed TypeScript functions to execute custom business logic. [Docs](/docs/guides/functions). + +
+ +## Project Management + +### CLI + +Use our CLI to develop your project locally and deploy to the Supabase Platform. [Docs](/docs/reference/cli). + +### Management API + +Manage your projects programmatically. [Docs](/docs/reference/api). + +
+ +## Feature Status + +Both Postgres and the Supabase Platform are production-ready. Some tools we offer on top of Postgres are still under development. + +| Product | Feature | Stage | +| -------------------------- | ---------------------- | ------- | +| Database | Postgres | `GA` | +| Database | Triggers | `GA` | +| Database | Functions | `GA` | +| Database | Extensions | `GA` | +| Database | Full Text Search | `GA` | +| Database | Webhooks | `alpha` | +| Database | Point-in-Time Recovery | `alpha` | +| Database | Vault | `alpha` | +| Studio | | `GA` | +| Realtime | Postgres Changes | `GA` | +| Realtime | Broadcast | `beta` | +| Realtime | Presence | `beta` | +| Storage | | `GA` | +| Storage | S3 Backend | `GA` | +| Storage | CDN | `GA` | +| Storage | Smart CDN | `beta` | +| Storage | Image Transformations | `beta` | +| Edge Functions | | `beta` | +| Auth | OAuth Providers | `beta` | +| Auth | Passwordless | `beta` | +| Auth | Next.js Auth Helpers | `alpha` | +| Auth | SvelteKit Auth Helpers | `alpha` | +| Auth | Remix Auth Helpers | `alpha` | +| Management API | | `beta` | +| CLI | | `beta` | +| Client Library: JavaScript | | `GA` | +| Client Library: Dart | | `beta` | + +export const Page = ({ children }) =>
+
+
{
+ await this.getProfile()
+
+ const { username, website, avatar_url } = this.profile
+ this.updateProfileForm.patchValue({
+ username,
+ website,
+ avatar_url,
+ })
+ }
+
+ async getProfile() {
+ try {
+ this.loading = true
+ const { user } = this.session
+ let { data: profile, error, status } = await this.supabase.profile(user)
+
+ if (error && status !== 406) {
+ throw error
+ }
+
+ if (profile) {
+ this.profile = profile
+ }
+ } catch (error) {
+ if (error instanceof Error) {
+ alert(error.message)
+ }
+ } finally {
+ this.loading = false
+ }
+ }
+
+ async updateProfile(): Promise
+
+
+
+```
+
+`app.module.ts` also needs to be modified to include the `ReactiveFormsModule` from the `@angular/forms` package.
+
+```ts title=src/app/app.module.ts
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+
+import { AppComponent } from './app.component'
+import { AuthComponent } from './auth/auth.component'
+import { AccountComponent } from './account/account.component'
+import { ReactiveFormsModule } from '@angular/forms'
+import { AvatarComponent } from './avatar/avatar.component'
+
+@NgModule({
+ declarations: [AppComponent, AuthComponent, AccountComponent, AvatarComponent],
+ imports: [BrowserModule, ReactiveFormsModule],
+ providers: [],
+ bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
+Once that's done, run this in a terminal window:
+
+```bash
+npm run start
+```
+
+And then open the browser to [localhost:4200](http://localhost:4200) 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.
+Create an **AvatarComponent** with `ng g c avatar` Angular CLI command.
+
+```ts title=src/app/avatar/avatar.component.ts
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser'
+import { SupabaseService } from '../supabase.service'
+
+@Component({
+ selector: 'app-avatar',
+ templateUrl: './avatar.component.html',
+ styleUrls: ['./avatar.component.css'],
+})
+export class AvatarComponent implements OnInit {
+ _avatarUrl: SafeResourceUrl | undefined
+ uploading = false
+
+ @Input()
+ set avatarUrl(url: string | null) {
+ if (url) {
+ this.downloadImage(url)
+ }
+ }
+
+ @Output() upload = new EventEmitter
+ ![Avatar]()
+
+
+
+
+
+
+```
+
+### Add the new widget
+
+And then we can add the widget on top of the **AccountComponent** html template:
+
+```html title=src/app/account.component.html
+
+```
+
+And add an `updateAvatar` function along with an `avatarUrl` getter to the **AccountComponent** typescript file:
+
+```ts title=src/app/account.component.ts
+@Component({
+ selector: 'app-account',
+ templateUrl: './account.component.html',
+ styleUrls: ['./account.component.css'],
+})
+export class AccountComponent implements OnInit {
+ // ...
+ get avatarUrl() {
+ return this.updateProfileForm.value.avatar_url as string
+ }
+
+ async updateAvatar(event: string): Promise
+
+ Supabase + Ionic Angular
+Sign in via magic link with your email below
+
+ Log Out
+
+
+ ![]()
+
+
+
+ `,
+ style: [
+ `
+ :host {
+ display: block;
+ margin: auto;
+ min-height: 150px;
+ }
+ :host .avatar_wrapper {
+ margin: 16px auto 16px;
+ border-radius: 50%;
+ overflow: hidden;
+ height: 150px;
+ aspect-ratio: 1;
+ background: var(--ion-color-step-50);
+ border: thick solid var(--ion-color-step-200);
+ }
+ :host .avatar_wrapper:hover {
+ cursor: pointer;
+ }
+ :host .avatar_wrapper ion-icon.no-avatar {
+ width: 100%;
+ height: 115%;
+ }
+ :host img {
+ display: block;
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+ }
+ `,
+ ],
+})
+export class AvatarComponent implements OnInit {
+ _avatarUrl: SafeResourceUrl | undefined
+ uploading = false
+
+ @Input()
+ set avatarUrl(url: string | undefined) {
+ if (url) {
+ this.downloadImage(url)
+ }
+ }
+
+ @Output() upload = new EventEmitter
+
+ Supabase + Ionic React
+Sign in via magic link with your email below
+
+
+ Log Out
+
+
+
+
+ );
+}
+```
+
+### Add the new widget
+
+And then we can add the widget to the Account page:
+
+```jsx title=src/pages/Account.tsx
+// Import the new component
+
+import { Avatar } from '../components/Avatar';
+
+// ...
+return (
+
+ {avatarUrl ? (
+ 
+ ) : (
+
+
+
+
+ Supabase + Ionic Vue
+Sign in via magic link with your email below
+{{email}}
+
+ Log Out
+
+
+
+
+
+
+
+```
+
+### Add the new widget
+
+And then we can add the widget to the Account page:
+
+```html title=src/views/Account.vue
+
+
+ ![]()
+
+
+
+
+
+### GitHub
+
+Should you get stuck while working through the guide, refer to [this repo](https://github.com/supabase/supabase/tree/master/examples/user-management/nextjs-ts-user-management).
+
+
+ {!session ? (
+
+ )
}
+export default Home
+```
+
+### Account page
+
+After a user is signed in we can allow them to edit their profile details and manage their account.
+
+Account page will go here.
+ )} +
+
+ )
+}
+```
+
+
+
+
+
+
+
+ setUsername(e.target.value)}
+ />
+
+
+
+ setWebsite(e.target.value)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+```
+
+
+
+
+
+
+
+ setUsername(e.target.value)}
+ />
+
+
+
+ setWebsite(e.target.value)}
+ />
+
+
+
+
+
+
+
+
+
+
+ {!session ? (
+
+ )
+}
+
+export default Home
+```
+
+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 widget for the user so that they can upload a profile photo. We can start by creating a new component:
+
+
+ {avatarUrl ? (
+
+ ) : (
+
+ )}
+
+ )
+}
+```
+
+
+
+
+
+
+ {avatarUrl ? (
+
+ ) : (
+
+ )}
+
+ )
+}
+```
+
+
+
+
+
+
+ {/* Add to the body */}
+ {
+ setAvatarUrl(url)
+ updateProfile({ username, website, avatar_url: url })
+ }}
+ />
+ {/* ... */}
+
+)
+```
+
+## Next steps
+
+At this stage you have a fully functional application!
+
+- See the complete [example on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/nextjs-ts-user-management) and deploy it to Vercel.
+- Explore the [pre-built Auth UI for React](/docs/guides/auth/auth-helpers/auth-ui).
+- Explore the [Auth Helpers for Next.js](/docs/guides/auth/auth-helpers/nextjs).
+- Explore the [Supabase Cache Helpers](https://github.com/psteinroe/supabase-cache-helpers).
+- See the [Next.js Subscription Payments Starter](https://github.com/vercel/nextjs-subscription-payments) template on GitHub.
+- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
+- Sign in: [app.supabase.com](https://app.supabase.com)
+
+export const Page = ({ children }) =>
+
+
+
+
+```
+
+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:
+
+```html title=components/Avatar.vue
+
+
+ ![Avatar]()
+
+
+
+
+
+
+```
+
+### Add the new widget
+
+And then we can add the widget to the Account page:
+
+```html title=components/Account.vue
+
+
+
+
+
+```
+
+That is it! You should now be able to upload a profile photo to Supabase Storage.
+
+## 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)
+
+export const Page = ({ children }) =>
+
+
+
+
+
+ )
+}
+```
+
+### 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=src/Account.js
+import { useState, useEffect } from 'react'
+import { supabase } from './supabaseClient'
+
+const 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])
+
+ const getProfile = async () => {
+ try {
+ setLoading(true)
+ const { user } = session
+
+ 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)
+ }
+ }
+
+ const updateProfile = async (e) => {
+ e.preventDefault()
+
+ try {
+ setLoading(true)
+ const { user } = session
+
+ 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 (
+
+
+ Supabase + React
+Sign in via magic link with your email below
+ {loading ? ( + 'Sending magic link...' + ) : ( + + )} +
+ {loading ? (
+ 'Saving ...'
+ ) : (
+
+ )}
+
+
+ )
}
+export default Account
+```
+
+### Launch!
+
+Now that we have all the components in place, let's update `App.js`:
+
+```jsx title=src/App.js
+import './index.css'
+import { useState, useEffect } from 'react'
+import { supabase } from './supabaseClient'
+import Auth from './Auth'
+import Account from './Account'
+
+export default 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 ?
+ )
+}
+```
+
+Once that's done, run this in a terminal window:
+
+```bash
+npm start
+```
+
+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=src/Avatar.js
+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])
+
+ const downloadImage = async (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)
+ }
+ }
+
+ const uploadAvatar = async (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 (
+
+ 
+ {uploading ? (
+ 'Uploading...'
+ ) : (
+ <>
+
+
+ )
+}
+```
+
+### Add the new widget
+
+And then we can add the widget to the Account page:
+
+```jsx title=src/Account.js
+// Import the new component
+import Avatar from './Avatar'
+
+// ...
+
+return (
+
+
+
+
+ )}
+
+ {/* Add to the body */}
+ {
+ setAvatarUrl(url)
+ updateProfile({ username, website, avatar_url: url })
+ }}
+ />
+ {/* ... */}
+
+)
+```
+
+## 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)
+
+export const Page = ({ children }) =>
+
+ )
+}
+
+export default Auth
+```
+
+### Set up an Account component
+
+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`.
+
+```bash
+yarn rw g component account
+
+ ✔ Generating component files...
+ ✔ Successfully wrote file `./web/src/components/Account/Account.test.js`
+ ✔ Successfully wrote file `./web/src/components/Account/Account.stories.js`
+ ✔ Successfully wrote file `./web/src/components/Account/Account.js`
+```
+
+And then update the file to contain:
+
+```jsx title=web/src/components/Account/Account.js
+import { useState, useEffect } from 'react'
+import { useAuth } from '@redwoodjs/auth'
+
+const Account = () => {
+ const { client: supabase, currentUser, logOut } = useAuth()
+ const [loading, setLoading] = useState(true)
+ const [username, setUsername] = useState(null)
+ const [website, setWebsite] = useState(null)
+ const [avatar_url, setAvatarUrl] = useState(null)
+
+ useEffect(() => {
+ getProfile()
+ }, [supabase.auth.session])
+
+ async function getProfile() {
+ try {
+ setLoading(true)
+ const user = supabase.auth.user()
+
+ 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 = supabase.auth.user()
+
+ const updates = {
+ id: user.id,
+ username,
+ website,
+ avatar_url,
+ updated_at: new Date(),
+ }
+
+ let { error } = await supabase.from('profiles').upsert(updates, {
+ returning: 'minimal', // Don't return the value after inserting
+ })
+
+ if (error) {
+ throw error
+ }
+
+ alert('Updated profile!')
+ } catch (error) {
+ alert(error.message)
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ return (
+
+
+ Supabase + RedwoodJS
+Sign in via magic link with your email below
+
+ setEmail(e.target.value)}
+ />
+
+
+
+
+
+
+ )
+}
+
+export default Account
+```
+
+
+
+ Supabase + RedwoodJS
+Your profile
+
+
+
+
+
+
+
+
+ setUsername(e.target.value)}
+ />
+
+
+
+ setWebsite(e.target.value)}
+ />
+
+
+
+
+
+
+
+
+
+
+ {avatarUrl ? (
+
+ ) : (
+
+ )}
+
+ )
+}
+
+export default Avatar
+```
+
+### Add the new widget
+
+And then we can add the widget to the Account component:
+
+```jsx title=web/src/components/Account/Account.js
+// Import the new component
+import Avatar from 'src/components/Avatar'
+
+// ...
+
+return (
+
+
+
+
+
+ {/* Add to the body */}
+ {
+ setAvatarUrl(url)
+ updateProfile({ username, website, avatar_url: url })
+ }}
+ />
+ {/* ... */}
+
+)
+```
+
+## 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)
+- Learn more about [RedwoodJS](https://redwoodjs.com)
+- Visit the [RedwoodJS Discourse Community](https://community.redwoodjs.com)
+
+export const Page = ({ children }) =>
+
+
+ )
+}
+```
+
+### 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.tsx`.
+
+```jsx title=src/Account.tsx
+import { AuthSession } from '@supabase/supabase-js'
+import { Component, createEffect, createSignal } from 'solid-js'
+import { supabase } from './supabaseClient'
+
+interface Props {
+ session: AuthSession;
}
+const Account: Component
+
+
+ )
+}
+
+export default Account
+```
+
+### Launch!
+
+Now that we have all the components in place, let's update `App.tsx`:
+
+```jsx title=src/App.tsx
+import { Component, createEffect, createSignal } from 'solid-js'
+import { supabase } from './supabaseClient'
+import { AuthSession } from '@supabase/supabase-js'
+import Account from './Account'
+import Auth from './Auth'
+
+const App: Component = () => {
+ const [session, setSession] = createSignal
+ {!session() ?
+ )
+}
+
+export default App
+```
+
+Once that's done, run this in a terminal window:
+
+```bash
+npm start
+```
+
+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=src/Avatar.tsx
+import { Component, createEffect, createSignal, JSX } from 'solid-js'
+import { supabase } from './supabaseClient'
+
+interface Props {
+ size: number
+ url: string | null
+ onUpload: (event: Event, filePath: string) => void
+}
+
+const Avatar: Component
+ {avatarUrl() ? (
+ !})
+ ) : (
+
+ )}
+
+ )
+}
+
+export default Avatar
+```
+
+### Add the new widget
+
+And then we can add the widget to the Account page:
+
+```jsx title=src/Account.tsx
+// Import the new component
+import Avatar from './Avatar'
+
+// ...
+
+return (
+
+
+
+
+