mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 01:15:03 +03:00
docs: tutorials using auth methods to explain differences (#45539)
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Documentation** * Clarified API key changes (new publishable/secret scheme, where to obtain each, legacy keys valid through end of 2026) and updated many getting-started tutorials with clearer setup, flow, and auth guidance. * **New Features** * Added/expanded profile photo/avatar upload and account integration steps across multiple tutorials. * **Guides** * Added guidance on auth helper methods and when to use them. * **Examples** * Example app updated to use token claims for auth state. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Katerina Skroumpelou <mandarini@users.noreply.github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
This commit is contained in:
21 files changed
+450
-513
No files matched your search
@@ -8,12 +8,13 @@ To do this, you need to get the Project URL and key from [the project **Connect*
|
||||
|
||||
<Admonition type="note" title="Changes to API keys">
|
||||
|
||||
Supabase is changing the way keys work to improve project security and developer experience. You can [read the full announcement](https://github.com/orgs/supabase/discussions/29260), but in the transition period, you can use both the current `anon` and `service_role` keys and the new publishable key with the form `sb_publishable_xxx` which will replace the older keys.
|
||||
Supabase is changing the way keys work to improve project security and developer experience. You can [read the full announcement on GitHub](https://github.com/orgs/supabase/discussions/29260).
|
||||
|
||||
**The legacy keys will be deprecated shortly, so we strongly encourage switching to and using the new publishable and secret API keys**.
|
||||
The older `anon` and `service_role` keys will work until the end of 2026 but **we strongly encourage switching to and using** the new publishable (`sb_publishable_xxx`) and secret (`sb_secret_xxx`) keys now.
|
||||
|
||||
In most cases, you can get the correct key from [the Project's **Connect** dialog](/dashboard/project/\_?showConnect=true&connectTab={{ .tab }}&framework={{ .framework }}), but if you want a specific key, you can find all keys in [the API Keys section of a Project's Settings page](/dashboard/project/_/settings/api-keys/):
|
||||
In most cases, you can get keys from [the Project's **Connect** dialog](/dashboard/project/\_?showConnect=true&connectTab={{ .tab }}&framework={{ .framework }}), but if you want a specific key, you can find them in the [**Settings > API Keys**](/dashboard/project/_/settings/api-keys/) section of the Dashboard.
|
||||
|
||||
**For new keys**, open the **API Keys** tab, if you don't have a publishable key already, click **Create new API Keys**, and copy the value from the **Publishable key** section.
|
||||
- **For legacy keys**, copy the `anon` key for client-side operations and the `service_role` key for server-side operations from the **Legacy API Keys** tab.
|
||||
- **For new keys**, open the **API Keys** tab, if you don't have a publishable key already, click **Create new API Keys**, and copy the value from the **Publishable key** section.
|
||||
|
||||
</Admonition>
|
||||
@@ -1,7 +1,5 @@
|
||||
{/* TODO: How to completely consolidate partials? */}
|
||||
|
||||
You can also get the Project URL and key from [the project's **Connect** dialog](/dashboard/project/\_?showConnect=true&connectTab={{ .tab }}&framework={{ .framework }}).
|
||||
|
||||
### Get API details
|
||||
|
||||
Now that you've created some database tables, you are ready to insert data using the auto-generated API.
|
||||
@@ -12,12 +10,13 @@ To do this, you need to get the Project URL and key from [the project **Connect*
|
||||
|
||||
<Admonition type="note" title="Changes to API keys">
|
||||
|
||||
Supabase is changing the way keys work to improve project security and developer experience. You can [read the full announcement](https://github.com/orgs/supabase/discussions/29260), but in the transition period, you can use both the current `anon` and `service_role` keys and the new publishable key with the form `sb_publishable_xxx` which will replace the older keys.
|
||||
Supabase is changing the way keys work to improve project security and developer experience. You can [read the full announcement on GitHub](https://github.com/orgs/supabase/discussions/29260).
|
||||
|
||||
**The legacy keys will be deprecated shortly, so we strongly encourage switching to and using the new publishable and secret API keys**.
|
||||
The older `anon` and `service_role` keys will work until the end of 2026 but **we strongly encourage switching to and using** the new publishable (`sb_publishable_xxx`) and secret (`sb_secret_xxx`) keys now.
|
||||
|
||||
In most cases, you can get the correct key from [the Project's **Connect** dialog](/dashboard/project/\_?showConnect=true&connectTab={{ .tab }}&framework={{ .framework }}), but if you want a specific key, you can find all keys in [the API Keys section of a Project's Settings page](/dashboard/project/_/settings/api-keys/):
|
||||
In most cases, you can get keys from [the Project's **Connect** dialog](/dashboard/project/\_?showConnect=true&connectTab={{ .tab }}&framework={{ .framework }}), but if you want a specific key, you can find them in the [**Settings > API Keys**](/dashboard/project/_/settings/api-keys/) section of the Dashboard.
|
||||
|
||||
**For new keys**, open the **API Keys** tab, if you don't have a publishable key already, click **Create new API Keys**, and copy the value from the **Publishable key** section.
|
||||
- **For legacy keys**, copy the `anon` key for client-side operations and the `service_role` key for server-side operations from the **Legacy API Keys** tab.
|
||||
- **For new keys**, open the **API Keys** tab, if you don't have a publishable key already, click **Create new API Keys**, and copy the value from the **Publishable key** section.
|
||||
|
||||
</Admonition>
|
||||
@@ -0,0 +1,9 @@
|
||||
The Supabase Auth SDK contains three different functions for authenticating user access to applications:
|
||||
|
||||
### Summary of the methods
|
||||
|
||||
- Use [`getClaims`](/docs/reference/javascript/auth-getclaims) to protect pages and user data. It reads the access token from storage and verifies it. Locally via the [WebCrypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) and a cached JWKS endpoint when the project uses asymmetric signing keys (the default for new projects), or by calling `getUser` solely to validate when symmetric keys are in use. The returned claims always come from decoding the JWT, not from a user lookup.
|
||||
- [`getUser`](/docs/reference/javascript/auth-getuser) makes a network call to the project's Auth instance to get the user record, which includes the most up-to-date information about the user at the cost of a network call.
|
||||
- [`getSession`](/docs/reference/javascript/auth-getsession) when you need the raw session (the access token, refresh token, and expiry). For example to forward the access token to another service. The session is loaded directly from local storage and isn't re-validated against the Auth server, so the embedded user object shouldn't be trusted on its own when storage is shared with the client (cookies, request headers). To verify identity, validate the access token with `getClaims`, or call `getUser` for a fresh, server-confirmed user record.
|
||||
|
||||
**In summary**: use `getClaims` to verify identity (typically for protecting pages and data), `getUser` when you need an up-to-date user record from the Auth server, and `getSession` when you need the access or refresh token directly, but don't rely on the user object it returns for authorization decisions.
|
||||
@@ -9,7 +9,7 @@ description: 'Learn how to use Supabase in your Angular App.'
|
||||
|
||||
<Admonition type="note">
|
||||
|
||||
If you get stuck while working through this guide, refer to the [full example on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/angular-user-management).
|
||||
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/angular-user-management).
|
||||
|
||||
</Admonition>
|
||||
|
||||
@@ -21,24 +21,22 @@ Start with building the Angular app from scratch.
|
||||
|
||||
### Initialize an Angular app
|
||||
|
||||
You can use the [Angular CLI](https://angular.io/cli) to initialize an app called `supabase-angular`.
|
||||
The command sets some defaults, that you change to suit your needs:
|
||||
Use the [Angular CLI](https://angular.io/cli) to initialize an app called `supabase-angular` setting some defaults that you can change to suit your needs:
|
||||
|
||||
```bash
|
||||
npx ng new supabase-angular --routing false --style css --standalone false --ssr false
|
||||
cd supabase-angular
|
||||
```
|
||||
|
||||
Then, install the only additional dependency: [supabase-js](https://github.com/supabase/supabase-js)
|
||||
Install [supabase-js](https://github.com/supabase/supabase-js):
|
||||
|
||||
```bash
|
||||
npm install @supabase/supabase-js
|
||||
```
|
||||
|
||||
Finally, save the environment variables in a new `src/environments/environment.ts` file.
|
||||
You need to create the `src/environments` directory first.
|
||||
All you need are the API URL and the key that you copied [earlier](#get-api-details).
|
||||
The application exposes these variables in the browser, and that's fine as you have [Row Level Security](/docs/guides/auth#row-level-security) enabled on the Database.
|
||||
Create a `src/environments` directory and save API URL and key that you copied [earlier](#get-api-details) as environment variables in a new `src/environments/environment.ts` file.
|
||||
|
||||
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.
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/angular-user-management/src/environments/environment.ts"
|
||||
@@ -48,8 +46,6 @@ meta="name=src/environments/environment.ts"
|
||||
|
||||
With the API credentials in place, create a `SupabaseService` with `ng g s supabase` and add the following code to initialize the Supabase client and implement functions to communicate with the Supabase API.
|
||||
|
||||
This uses the [`getUser`](/docs/reference/javascript/auth-getuser) method to get the current user details if there is an existing session. This method performs a network request to the Supabase Auth server.
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/angular-user-management/src/app/supabase.service.ts"
|
||||
lines={[[1, -1]]}
|
||||
@@ -60,7 +56,13 @@ Optionally, update `src/styles.css` to style the app. You can find the full cont
|
||||
|
||||
### Set up a login component
|
||||
|
||||
Next, set up an Angular component to manage logins and sign ups. The component uses [Magic Links](/docs/guides/auth/auth-email-passwordless#with-magic-link), so users can sign in with their email without using passwords.
|
||||
You need an Angular component to manage logins and sign ups. The component 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" label="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 an `AuthComponent` with the `ng g c auth` Angular CLI command and add the following code.
|
||||
|
||||
@@ -82,20 +84,19 @@ meta="name=src/app/auth/auth.component.html"
|
||||
|
||||
### Account page
|
||||
|
||||
Users also need a way to edit their profile details and manage their accounts after signing in.
|
||||
Create an `AccountComponent` with the `ng g c account` Angular CLI command and add the following code.
|
||||
Users also need a way to edit their profile details and manage their accounts after signing in. Create an `AccountComponent` with the `ng g c account` Angular CLI command and add the following code.
|
||||
|
||||
<$CodeTabs>
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/angular-user-management/src/app/account/account.component.ts"
|
||||
lines={[[1, -1]]}
|
||||
lines={[[1, 16], [27, -1]]}
|
||||
meta="name=src/app/account/account.component.ts"
|
||||
/>
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/angular-user-management/src/app/account/account.component.html"
|
||||
lines={[[1, -1]]}
|
||||
lines={[[1, 1], [3, -1]]}
|
||||
meta="name=src/app/account/account.component.html"
|
||||
/>
|
||||
|
||||
@@ -103,12 +104,11 @@ meta="name=src/app/account/account.component.html"
|
||||
|
||||
## Profile photos
|
||||
|
||||
Every Supabase project is configured with [Storage](/docs/guides/storage) for managing large files like photos and videos.
|
||||
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 an avatar for the user so that they can upload a profile photo.
|
||||
Create an `AvatarComponent` with `ng g c avatar` Angular CLI command and add the following code.
|
||||
Create an `AvatarComponent` with the `ng g c avatar` Angular CLI command and add the following code.
|
||||
|
||||
<$CodeTabs>
|
||||
|
||||
@@ -126,9 +126,39 @@ meta="name=src/app/avatar/avatar.component.html"
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
### Update the Account component
|
||||
|
||||
With the Avatar component created, update `AccountComponent` to include it:
|
||||
|
||||
<$CodeTabs>
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/angular-user-management/src/app/account/account.component.ts"
|
||||
lines={[[1, -1]]}
|
||||
meta="name=src/app/account/account.component.ts"
|
||||
/>
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/angular-user-management/src/app/account/account.component.html"
|
||||
lines={[[1, -1]]}
|
||||
meta="name=src/app/account/account.component.html"
|
||||
/>
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
You also need to change `app.module.ts` to include the `ReactiveFormsModule` from the `@angular/forms` package.
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/angular-user-management/src/app/app.module.ts"
|
||||
lines={[[1, -1]]}
|
||||
meta="name=src/app/app.module.ts"
|
||||
/>
|
||||
|
||||
### Launch!
|
||||
|
||||
Now you have all the components in place, update `AppComponent`:
|
||||
With all the components in place, change the contents of `AppComponent` to include the new components and Auth logic:
|
||||
|
||||
<$Partial path="auth_methods.mdx" />
|
||||
|
||||
<$CodeTabs>
|
||||
|
||||
@@ -146,15 +176,7 @@ meta="name=src/app/app.component.html"
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
You also need to change `app.module.ts` to include the `ReactiveFormsModule` from the `@angular/forms` package.
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/angular-user-management/src/app/app.module.ts"
|
||||
lines={[[1, -1]]}
|
||||
meta="name=src/app/app.module.ts"
|
||||
/>
|
||||
|
||||
Once that's done, run the application in a terminal:
|
||||
Now run the application in a terminal:
|
||||
|
||||
```bash
|
||||
npm run start
|
||||
|
||||
@@ -193,7 +193,7 @@ Create a new component for that called `Account.tsx`.
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/expo-user-management/components/Account.tsx"
|
||||
lines={[[1, -1]]}
|
||||
lines={[[1, 4], [6, 79], [90, -1]]}
|
||||
meta="name=components/Account.tsx"
|
||||
/>
|
||||
|
||||
@@ -241,7 +241,13 @@ meta="name=components/Avatar.tsx"
|
||||
|
||||
### Add the new widget
|
||||
|
||||
And then add the widget to the Account page. The `Account.tsx` component [shown earlier](#account-page) already includes the `Avatar` component when using the full example code.
|
||||
And then add the widget to the Account page:
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/expo-user-management/components/Account.tsx"
|
||||
lines={[[1, -1]]}
|
||||
meta="name=components/Account.tsx"
|
||||
/>
|
||||
|
||||
Now run the prebuild command to get the application working on your chosen platform.
|
||||
|
||||
|
||||
@@ -87,7 +87,7 @@ meta="name=src/app/account/account.page.ts"
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/ionic-angular-user-management/src/app/account/account.page.html"
|
||||
lines={[[1, -1]]}
|
||||
lines={[[1, 7], [13, -1]]}
|
||||
meta="name=src/app/account/account.page.html"
|
||||
/>
|
||||
|
||||
@@ -169,6 +169,16 @@ lines={[[1, -1]]}
|
||||
meta="name=src/app/avatar/avatar.component.scss"
|
||||
/>
|
||||
|
||||
### Update the account page
|
||||
|
||||
With the Avatar component created, update the account page template to include it:
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/ionic-angular-user-management/src/app/account/account.page.html"
|
||||
lines={[[1, -1]]}
|
||||
meta="name=src/app/account/account.page.html"
|
||||
/>
|
||||
|
||||
At this stage, you have a fully functional application!
|
||||
|
||||
## See also
|
||||
|
||||
@@ -74,7 +74,7 @@ Create a new component for that called `Account.tsx`.
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/ionic-react-user-management/src/pages/Account.tsx"
|
||||
lines={[[1, -1]]}
|
||||
lines={[[1, 15], [17, 124], [129, -1]]}
|
||||
meta="name=src/pages/Account.tsx"
|
||||
/>
|
||||
|
||||
@@ -136,7 +136,7 @@ And then add the widget to the Account page:
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/ionic-react-user-management/src/pages/Account.tsx"
|
||||
lines={[[16, 16], [101, 110]]}
|
||||
lines={[[1, -1]]}
|
||||
meta="name=src/pages/Account.tsx"
|
||||
/>
|
||||
|
||||
|
||||
@@ -70,7 +70,7 @@ After a user has signed in, let them edit their profile details and manage their
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/ionic-vue-user-management/src/views/Account.vue"
|
||||
lines={[[1, -1]]}
|
||||
lines={[[1, 9], [11, 67], [69, -1]]}
|
||||
meta="name=src/views/Account.vue"
|
||||
/>
|
||||
|
||||
@@ -134,6 +134,12 @@ meta="name=src/components/Avatar.vue"
|
||||
|
||||
### Add the new widget
|
||||
|
||||
Add the widget to the Account page (already included in the Account.vue code above since the example includes the Avatar component by default).
|
||||
And then add the widget to the Account page:
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/ionic-vue-user-management/src/views/Account.vue"
|
||||
lines={[[1, -1]]}
|
||||
meta="name=src/views/Account.vue"
|
||||
/>
|
||||
|
||||
At this stage you have a fully functional application!
|
||||
@@ -10,7 +10,7 @@ description: 'Learn how to use Supabase in your Next.js App.'
|
||||
|
||||
<Admonition type="note">
|
||||
|
||||
If you get stuck while working through this guide, refer to the [full example on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/nextjs-user-management).
|
||||
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/nextjs-user-management).
|
||||
|
||||
</Admonition>
|
||||
|
||||
@@ -29,7 +29,7 @@ npx create-next-app@latest --ts --use-npm supabase-nextjs
|
||||
cd supabase-nextjs
|
||||
```
|
||||
|
||||
Then install the Supabase client library: [supabase-js](https://github.com/supabase/supabase-js)
|
||||
Install [supabase-js](https://github.com/supabase/supabase-js):
|
||||
|
||||
```bash
|
||||
npm install @supabase/supabase-js
|
||||
@@ -37,6 +37,8 @@ npm install @supabase/supabase-js
|
||||
|
||||
Save the environment variables in a `.env.local` file at the root of the project, and paste the API URL and the key that you copied [earlier](#get-api-details).
|
||||
|
||||
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.
|
||||
|
||||
```bash .env.local
|
||||
NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
|
||||
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=YOUR_SUPABASE_PUBLISHABLE_KEY
|
||||
@@ -47,11 +49,11 @@ NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=YOUR_SUPABASE_PUBLISHABLE_KEY
|
||||
An optional step is to update the CSS file `app/globals.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/nextjs-user-management/app/globals.css).
|
||||
|
||||
### Supabase Server-Side Auth
|
||||
### Supabase Server-Side Auth package
|
||||
|
||||
Next.js is a highly versatile framework offering pre-rendering at build time (SSG), server-side rendering at request time (SSR), API routes, and proxy edge-functions.
|
||||
Next.js is a versatile framework offering pre-rendering at build time (SSG), server-side rendering at request time (SSR), API routes, and proxy edge-functions.
|
||||
|
||||
To better integrate with the framework, we've created the `@supabase/ssr` package for Server-Side Auth. It has all the functionalities to quickly configure your Supabase project to use cookies for storing user sessions. Read the [Next.js Server-Side Auth guide](/docs/guides/auth/server-side/nextjs) for more information.
|
||||
To better integrate with the framework, we've created the `@supabase/ssr` package for Server-Side Auth. It has all the functionalities to quickly configure your Supabase project to use cookies for storing user sessions. Read the [Next.js Server-Side Auth guide](/docs/guides/auth/server-side/creating-a-client?queryGroups=package-manager&package-manager=npm&queryGroups=framework&framework=nextjs) for more information.
|
||||
|
||||
Install the package for Next.js.
|
||||
|
||||
@@ -66,9 +68,9 @@ There are two different types of clients in Supabase:
|
||||
1. **Client Component client** - To access Supabase from Client Components, which run in the browser.
|
||||
2. **Server Component client** - To access Supabase from Server Components, Server Actions, and Route Handlers, which run only on the server.
|
||||
|
||||
We recommend creating the following essential utilities files for creating clients, and organize them within `lib/supabase` at the root of the project.
|
||||
We recommend creating the following utilities files for creating clients, and organize them within `lib/supabase` at the root of the project.
|
||||
|
||||
Create a `client.ts` and a `server.ts` with the following functionalities for client-side Supabase and server-side Supabase, respectively.
|
||||
Create a `client.ts` and a `server.ts` with the following code for client-side Supabase and server-side Supabase, respectively.
|
||||
|
||||
<$CodeTabs>
|
||||
|
||||
@@ -90,7 +92,7 @@ meta="name=lib/supabase/server.ts"
|
||||
|
||||
Since Server Components can't write cookies, you need [Proxy](https://nextjs.org/docs/app/getting-started/proxy) to refresh expired Auth tokens and store them.
|
||||
|
||||
You can accomplish this by:
|
||||
You accomplish this by:
|
||||
|
||||
- Refreshing the Auth token with the call to `supabase.auth.getClaims`.
|
||||
- Passing the refreshed Auth token to Server Components through `request.cookies.set`, so they don't attempt to refresh the same token themselves.
|
||||
@@ -102,14 +104,10 @@ You could also add a matcher, so that the Proxy only runs on routes that access
|
||||
|
||||
Be careful when protecting pages. The server gets the user session from the cookies, which anyone can spoof.
|
||||
|
||||
Most of the time, use `supabase.auth.getClaims()` to protect pages and user data.
|
||||
|
||||
_Never_ trust `supabase.auth.getSession()` inside server code such as proxy. It isn't guaranteed to revalidate the Auth token.
|
||||
|
||||
It's safe to trust `getClaims()` because it validates the token in storage, either directly or by calling `getUser()` solely to check the result. It doesn't use the response from `getUser()` itself, only whether the validation succeeded.
|
||||
|
||||
</Admonition>
|
||||
|
||||
<$Partial path="auth_methods.mdx" />
|
||||
|
||||
Create a `proxy.ts` file at the project root and another one within the `lib/supabase` folder. The `lib/supabase` file contains the logic for updating the session. The `proxy.ts` file uses this, which is a Next.js convention.
|
||||
|
||||
<$CodeTabs>
|
||||
@@ -128,13 +126,11 @@ meta="name=lib/supabase/proxy.ts"
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
## Set up a login page
|
||||
### Set up a login page
|
||||
|
||||
### Login and signup form
|
||||
#### Login and signup form
|
||||
|
||||
In order to add login/signup page for your application:
|
||||
|
||||
Create a new folder named `login`, containing a `page.tsx` file with a login/signup form.
|
||||
To add login/signup page for your application, create a new folder named `login`, containing a `page.tsx` file with the following code for a login/signup form:
|
||||
|
||||
<$CodeTabs>
|
||||
|
||||
@@ -146,20 +142,12 @@ meta="name=app/login/page.tsx"
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
Next, you need to create the login/signup actions to hook up the form to the function. Which does the following:
|
||||
Create the login/signup actions to hook up the form to the function which does the following:
|
||||
|
||||
- Retrieve the user's information.
|
||||
- Send that information to Supabase as a signup request, which in turns sends a confirmation email.
|
||||
- Send that information to Supabase as a signup request, which in turns sends a confirmation email. It uses [Magic Links](/docs/guides/auth/auth-email-passwordless#with-magic-link), so users can sign in with their email without using passwords.
|
||||
- Handle any error that arises.
|
||||
|
||||
<Admonition type="caution">
|
||||
|
||||
The `cookies` method is called before any calls to Supabase, which takes fetch calls out of Next.js's caching. This is important for authenticated data fetches, to ensure that users get access only to their own data.
|
||||
|
||||
Read the Next.js docs to learn more about [opting out of data caching](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#opting-out-of-data-caching).
|
||||
|
||||
</Admonition>
|
||||
|
||||
Create the `action.ts` file in the `app/login` folder, which contains the login and signup functions and the `error/page.tsx` file, which displays an error message if the login or signup fails.
|
||||
|
||||
<$CodeTabs>
|
||||
@@ -178,7 +166,15 @@ meta="name=app/error/page.tsx"
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
### Email template
|
||||
<Admonition type="caution">
|
||||
|
||||
The `cookies` method is called before any calls to Supabase, which takes fetch calls out of Next.js's caching. This is important for authenticated data fetches, to ensure that users get access only to their own data.
|
||||
|
||||
Read the Next.js docs to learn more about [opting out of data caching](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#opting-out-of-data-caching).
|
||||
|
||||
</Admonition>
|
||||
|
||||
#### Email template
|
||||
|
||||
Before proceeding, change the email template to support a server-side authentication flow that sends a token hash:
|
||||
|
||||
@@ -188,11 +184,11 @@ Before proceeding, change the email template to support a server-side authentica
|
||||
|
||||
<Admonition type="tip" label="Did you know?">
|
||||
|
||||
You can also customize other emails sent out to new users, including the email's looks, content, and query parameters. Check out the [settings of your project](/dashboard/project/_/auth/templates).
|
||||
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>
|
||||
|
||||
### Confirmation endpoint
|
||||
#### Confirmation endpoint
|
||||
|
||||
As you are working in a server-side rendering (SSR) environment, you need to create a server endpoint responsible for exchanging the `token_hash` for a session.
|
||||
|
||||
@@ -210,13 +206,13 @@ meta="name=app/auth/confirm/route.ts"
|
||||
|
||||
### Account page
|
||||
|
||||
After a user signs in, allow them to edit their profile details and manage their account.
|
||||
After a user signs in, they need a way to edit their profile details and manage their accounts.
|
||||
|
||||
Create a new component for that called `AccountForm` within the `app/account` folder.
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/nextjs-user-management/app/account/account-form.tsx"
|
||||
lines={[[1, 4], [7, 78], [88, -1]]}
|
||||
lines={[[1, 4], [7, 78], [88, 89], [99, -1]]}
|
||||
meta="name=app/account/account-form.tsx"
|
||||
/>
|
||||
|
||||
@@ -238,9 +234,33 @@ lines={[[1, -1]]}
|
||||
meta="name=app/auth/signout/route.ts"
|
||||
/>
|
||||
|
||||
## Profile photos
|
||||
|
||||
Next, 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
|
||||
|
||||
Start by creating a new component:
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/nextjs-user-management/app/account/avatar.tsx"
|
||||
lines={[[1, -1]]}
|
||||
meta="name=app/account/avatar.tsx"
|
||||
/>
|
||||
|
||||
### Update the account form
|
||||
|
||||
With the Avatar component created, update `app/account/account-form.tsx` to include it:
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/nextjs-user-management/app/account/account-form.tsx"
|
||||
lines={[[1, -1]]}
|
||||
meta="name=app/account/account-form.tsx"
|
||||
/>
|
||||
|
||||
### Launch
|
||||
|
||||
Now you have all the pages, route handlers, and components in place, run the following in a terminal window:
|
||||
With all the pages, route handlers, and components in place, run the following in a terminal window:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
@@ -250,31 +270,6 @@ And then open the browser to [localhost:3000/login](http://localhost:3000/login)
|
||||
|
||||
When you enter your email and password, you will receive an email with the title **Confirm Your Signup**. Congrats 🎉!!!
|
||||
|
||||
## 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
|
||||
|
||||
Create an avatar widget for the user so that they can upload a profile photo. Start by creating a new component:
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/nextjs-user-management/app/account/avatar.tsx"
|
||||
lines={[[1, -1]]}
|
||||
meta="name=app/account/avatar.tsx"
|
||||
/>
|
||||
|
||||
### Add the new widget
|
||||
|
||||
Then add the widget to the `AccountForm` component:
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/nextjs-user-management/app/account/account-form.tsx"
|
||||
lines={[[5, 5], [77, 87], [137, -1]]}
|
||||
meta="name=app/account/account-form.tsx"
|
||||
/>
|
||||
|
||||
At this stage you have a fully functional application!
|
||||
|
||||
## See also
|
||||
|
||||
@@ -10,7 +10,7 @@ description: 'Learn how to use Supabase in your Nuxt 3 App.'
|
||||
|
||||
<Admonition type="note">
|
||||
|
||||
If you get stuck while working through this guide, refer to the [full example on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/nuxt3-user-management).
|
||||
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/nuxt3-user-management).
|
||||
|
||||
</Admonition>
|
||||
|
||||
@@ -54,8 +54,8 @@ No need to initialize Supabase. The library will take care of it automatically.
|
||||
|
||||
### App styling (optional)
|
||||
|
||||
An optional step is to update the CSS file `assets/main.css` to make the app look nice.
|
||||
You can find the full contents of this file [here](https://github.com/supabase-community/nuxt3-quickstarter/blob/main/assets/main.css).
|
||||
An optional step is to update the CSS file `assets/main.css` to make the app look better.
|
||||
You can find the full contents of this file [in the example repository](https://github.com/supabase-community/nuxt3-quickstarter/blob/main/assets/main.css).
|
||||
|
||||
<$CodeTabs>
|
||||
|
||||
@@ -229,44 +229,13 @@ async function signOut() {
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
### Launch!
|
||||
## Profile photos
|
||||
|
||||
Now that we have all the components in place, let's update `app.vue`:
|
||||
|
||||
<$CodeTabs>
|
||||
|
||||
```vue name=app.vue
|
||||
<script setup>
|
||||
const user = useSupabaseUser()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container" style="padding: 50px 0 100px 0">
|
||||
<Account v-if="user" />
|
||||
<Auth v-else />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
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.
|
||||
Next, 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
|
||||
|
||||
Let's create an avatar for the user so that they can upload a profile photo. We can start by creating a new component:
|
||||
Start by creating a new component:
|
||||
|
||||
<$CodeTabs>
|
||||
|
||||
@@ -359,108 +328,35 @@ watch(path, () => {
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
### Add the new widget
|
||||
### Launch!
|
||||
|
||||
And then we can add the widget to the Account page:
|
||||
With all the components in place, update `app.vue`:
|
||||
|
||||
<$CodeTabs>
|
||||
|
||||
```vue name=components/Account.vue
|
||||
```vue name=app.vue
|
||||
<script setup>
|
||||
const supabase = useSupabaseClient()
|
||||
|
||||
const loading = ref(true)
|
||||
const username = ref('')
|
||||
const website = ref('')
|
||||
const avatar_path = ref('')
|
||||
|
||||
loading.value = true
|
||||
const user = useSupabaseUser()
|
||||
|
||||
const { data } = await supabase
|
||||
.from('profiles')
|
||||
.select(`username, website, avatar_url`)
|
||||
.eq('id', user.value.id)
|
||||
.single()
|
||||
|
||||
if (data) {
|
||||
username.value = data.username
|
||||
website.value = data.website
|
||||
avatar_path.value = data.avatar_url
|
||||
}
|
||||
|
||||
loading.value = false
|
||||
|
||||
async function updateProfile() {
|
||||
try {
|
||||
loading.value = true
|
||||
const user = useSupabaseUser()
|
||||
|
||||
const updates = {
|
||||
id: user.value.id,
|
||||
username: username.value,
|
||||
website: website.value,
|
||||
avatar_url: avatar_path.value,
|
||||
updated_at: new Date(),
|
||||
}
|
||||
|
||||
const { error } = await supabase.from('profiles').upsert(updates, {
|
||||
returning: 'minimal', // Don't return the value after inserting
|
||||
})
|
||||
|
||||
if (error) throw error
|
||||
} catch (error) {
|
||||
alert(error.message)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function signOut() {
|
||||
try {
|
||||
loading.value = true
|
||||
const { error } = await supabase.auth.signOut()
|
||||
if (error) throw error
|
||||
} catch (error) {
|
||||
alert(error.message)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form class="form-widget" @submit.prevent="updateProfile">
|
||||
<Avatar v-model:path="avatar_path" @upload="updateProfile" />
|
||||
<div>
|
||||
<label for="email">Email</label>
|
||||
<input id="email" type="text" :value="user.email" disabled />
|
||||
</div>
|
||||
<div>
|
||||
<label for="username">Name</label>
|
||||
<input id="username" type="text" v-model="username" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="website">Website</label>
|
||||
<input id="website" type="url" v-model="website" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input
|
||||
type="submit"
|
||||
class="button primary block"
|
||||
:value="loading ? 'Loading ...' : 'Update'"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="button block" @click="signOut" :disabled="loading">Sign Out</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="container" style="padding: 50px 0 100px 0">
|
||||
<Account v-if="user" />
|
||||
<Auth v-else />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
That is it! You should now be able to upload a profile photo to Supabase Storage and you have a fully functional application.
|
||||
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.
|
||||
|
||||
|
||||
|
||||
At this stage you have a fully functional application!
|
||||
@@ -10,7 +10,7 @@ description: 'Learn how to use Supabase in your React App.'
|
||||
|
||||
<Admonition type="note">
|
||||
|
||||
If you get stuck while working through this guide, refer to the [full example on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/react-user-management).
|
||||
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>
|
||||
|
||||
@@ -29,14 +29,13 @@ npm create vite@latest supabase-react -- --template react
|
||||
cd supabase-react
|
||||
```
|
||||
|
||||
Install the only additional dependency: [supabase-js](https://github.com/supabase/supabase-js).
|
||||
Install [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.
|
||||
Use the Project URL and the key that you copied [earlier](#get-api-details).
|
||||
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"
|
||||
@@ -44,8 +43,7 @@ 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](/docs/guides/auth#row-level-security) enabled on the Database.
|
||||
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`:
|
||||
|
||||
@@ -57,12 +55,18 @@ 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](https://raw.githubusercontent.com/supabase/supabase/master/examples/user-management/react-user-management/src/index.css).
|
||||
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
|
||||
|
||||
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.
|
||||
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" label="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`:
|
||||
|
||||
@@ -74,15 +78,23 @@ meta="name=src/Auth.jsx"
|
||||
|
||||
### Account page
|
||||
|
||||
Users also need a way to edit their profile details and manage their accounts after signing in.
|
||||
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
|
||||
|
||||
Every Supabase project is configured with [Storage](/docs/guides/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`:
|
||||
Create `src/Avatar.jsx` and add the following code:
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/react-user-management/src/Avatar.jsx"
|
||||
@@ -90,9 +102,9 @@ 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.
|
||||
### Update the Account component
|
||||
|
||||
Create a new component for that called `src/Account.jsx` and also add the `Avatar` component created earlier.
|
||||
With the Avatar component created, update `src/Account.jsx` to include it:
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/react-user-management/src/Account.jsx"
|
||||
@@ -102,7 +114,9 @@ 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`](/docs/reference/javascript/auth-getuser) method if there is an existing session. This method performs a network request to the Supabase Auth server.
|
||||
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"
|
||||
@@ -118,6 +132,6 @@ 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!
|
||||
@@ -9,7 +9,7 @@ description: 'Learn how to use Supabase in your RedwoodJS App.'
|
||||
|
||||
<Admonition type="note">
|
||||
|
||||
If you get stuck while working through this guide, refer to the [full example on GitHub](https://github.com/redwoodjs/redwoodjs-supabase-quickstart).
|
||||
If you get stuck while working through this guide, you can find the [full example on GitHub](https://github.com/redwoodjs/redwoodjs-supabase-quickstart).
|
||||
|
||||
</Admonition>
|
||||
|
||||
@@ -169,8 +169,8 @@ export default App
|
||||
|
||||
### App styling (optional)
|
||||
|
||||
An optional step is to update the CSS file `web/src/index.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/react-user-management/src/index.css).
|
||||
An optional step is to update the CSS file `web/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).
|
||||
|
||||
### Start RedwoodJS and your first page
|
||||
|
||||
@@ -457,7 +457,7 @@ of the Supabase client to interact with your API.
|
||||
|
||||
### Update home page
|
||||
|
||||
Now that we have all the components in place, let's update your `HomePage` page to use them:
|
||||
With all the components in place, update your `HomePage` page to use them:
|
||||
|
||||
<$CodeTabs>
|
||||
|
||||
@@ -490,21 +490,9 @@ What we're doing here is showing the sign in form if you aren't logged in and yo
|
||||
|
||||
</Admonition>
|
||||
|
||||
### Launch!
|
||||
## Profile photos
|
||||
|
||||
Once that's done, run this in a terminal window to launch the `dev` server:
|
||||
|
||||
```bash
|
||||
yarn rw dev
|
||||
```
|
||||
|
||||
And then open the browser to [localhost:8910](http://localhost:8910) 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.
|
||||
Next, 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
|
||||
|
||||
@@ -613,35 +601,17 @@ export default Avatar
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
### Add the new widget
|
||||
### Launch!
|
||||
|
||||
And then we can add the widget to the Account component:
|
||||
Once that's done, run this in a terminal window to launch the `dev` server:
|
||||
|
||||
<$CodeTabs>
|
||||
|
||||
```jsx name=web/src/components/Account/Account.js
|
||||
// Import the new component
|
||||
import Avatar from 'src/components/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>
|
||||
)
|
||||
```bash
|
||||
yarn rw dev
|
||||
```
|
||||
|
||||
</$CodeTabs>
|
||||
And then open the browser to [localhost:8910](http://localhost:8910) and you should see the completed app.
|
||||
|
||||
|
||||
|
||||
At this stage you have a fully functional application!
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ description: 'Learn how to use Supabase in your Refine App.'
|
||||
|
||||
<Admonition type="note">
|
||||
|
||||
If you get stuck while working through this guide, refer to the [full example on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/refine-user-management).
|
||||
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/refine-user-management).
|
||||
|
||||
</Admonition>
|
||||
|
||||
@@ -65,13 +65,15 @@ VITE_SUPABASE_PUBLISHABLE_KEY=YOUR_SUPABASE_PUBLISHABLE_KEY
|
||||
|
||||
The `supabaseClient` fetches calls to Supabase endpoints from the app. The client is instrumental in implementing authentication using Refine's auth provider methods and CRUD actions with appropriate data provider methods.
|
||||
|
||||
One optional step is to update the CSS file `src/App.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/refine-user-management/src/App.css).
|
||||
### App styling (optional)
|
||||
|
||||
In order to add login and user profile pages in this App, tweak the `<Refine />` component inside `App.tsx`.
|
||||
An optional step is to update the CSS file `src/App.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/refine-user-management/src/App.css).
|
||||
|
||||
### The `<Refine />` component
|
||||
|
||||
In order to add login and user profile pages in this App, tweak the `<Refine />` component inside `App.tsx`.
|
||||
|
||||
The `App.tsx` file initially looks like this:
|
||||
|
||||
<$CodeTabs>
|
||||
@@ -122,7 +124,7 @@ export default App
|
||||
|
||||
Focus on the [`<Refine />`](https://refine.dev/docs/api-reference/core/components/refine-config/) component, which comes with props passed to it. Notice the `dataProvider` prop. It uses a `dataProvider()` function with `supabaseClient` passed as argument to generate the data provider object. The `authProvider` object also uses `supabaseClient` in implementing its methods. You can look it up in `src/authProvider.ts` file.
|
||||
|
||||
## Customize `authProvider`
|
||||
### Customize `authProvider`
|
||||
|
||||
If you examine the `authProvider` object you can notice that it has a `login` method that implements an OAuth and Email / Password strategy for authentication. This tutorial instead removes them and use Magic Links to allow users sign in with their email without using passwords.
|
||||
|
||||
@@ -195,9 +197,35 @@ This uses three Refine hooks, namely the [`useGetIdentity()`](https://refine.dev
|
||||
|
||||
The `useForm()` hook is a higher-level hook built on top of Refine's `useForm()` core hook. It fully supports form state management, field validation and submission using React Hook Form. Behind the scenes, it invokes the `dataProvider.getOne` method to get the user profile data from the Supabase `/profiles` endpoint and also invokes `dataProvider.update` method when `onFinish()` is called.
|
||||
|
||||
## Profile photos
|
||||
|
||||
Next, 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
|
||||
|
||||
Add a new component:
|
||||
|
||||
Create and edit `src/components/avatar.tsx`:
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/refine-user-management/src/components/avatar.tsx"
|
||||
lines={[[1, -1]]}
|
||||
meta="name=src/components/avatar.tsx"
|
||||
/>
|
||||
|
||||
### Update the Account component
|
||||
|
||||
With the Avatar component created, update `src/components/account.tsx` to include it:
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/refine-user-management/src/components/account.tsx"
|
||||
lines={[[1, -1]]}
|
||||
meta="name=src/components/account.tsx"
|
||||
/>
|
||||
|
||||
### Launch!
|
||||
|
||||
Now that you have all the components in place, define the routes for the pages in which they should be rendered.
|
||||
With all the components in place, define the routes for the pages in which they should be rendered.
|
||||
|
||||
Add the routes for `/login` with the `<Auth />` component and the routes for `index` path with the `<Account />` component. So, the final `App.tsx`:
|
||||
|
||||
@@ -217,30 +245,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
|
||||
|
||||
Create an avatar for the user so that they can upload a profile photo. Add a new component:
|
||||
|
||||
Create and edit `src/components/avatar.tsx`:
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/refine-user-management/src/components/avatar.tsx"
|
||||
lines={[[1, -1]]}
|
||||
meta="name=src/components/avatar.tsx"
|
||||
/>
|
||||
|
||||
### Add the new widget
|
||||
|
||||
And then add the widget to the Account page at `src/components/account.tsx`:
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/refine-user-management/src/components/account.tsx"
|
||||
lines={[[1, -1]]}
|
||||
meta="name=src/components/account.tsx"
|
||||
/>
|
||||
|
||||
At this stage, you have a fully functional application!
|
||||
@@ -9,7 +9,7 @@ description: 'Learn how to use Supabase in your SolidJS App.'
|
||||
|
||||
<Admonition type="note">
|
||||
|
||||
If you get stuck while working through this guide, refer to the [full example on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/solid-user-management).
|
||||
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/solid-user-management).
|
||||
|
||||
</Admonition>
|
||||
|
||||
@@ -62,7 +62,7 @@ meta="name=src/supabaseClient.tsx"
|
||||
### 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 [here](https://raw.githubusercontent.com/supabase/supabase/master/examples/user-management/solid-user-management/src/index.css).
|
||||
You can find the full contents of this file [in the example repository](https://raw.githubusercontent.com/supabase/supabase/master/examples/user-management/solid-user-management/src/index.css).
|
||||
|
||||
### Set up a login component
|
||||
|
||||
@@ -94,9 +94,41 @@ meta="name=src/Account.tsx"
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
## Profile photos
|
||||
|
||||
Next, 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
|
||||
|
||||
Start by creating a new component:
|
||||
|
||||
<$CodeTabs>
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/solid-user-management/src/Avatar.tsx"
|
||||
lines={[[1, -1]]}
|
||||
meta="name=src/Avatar.tsx"
|
||||
/>
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
### Update the Account component
|
||||
|
||||
With the Avatar component created, update `src/Account.tsx` to include it:
|
||||
|
||||
<$CodeTabs>
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/solid-user-management/src/Account.tsx"
|
||||
lines={[[1, -1]]}
|
||||
meta="name=src/Account.tsx"
|
||||
/>
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
### Launch!
|
||||
|
||||
Now that you have all the components in place, update `App.tsx`:
|
||||
With all the components in place, update `App.tsx`:
|
||||
|
||||
<$CodeTabs>
|
||||
|
||||
@@ -118,36 +150,4 @@ And then open the browser to [localhost:3000](http://localhost:3000) 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
|
||||
|
||||
Create an avatar for the user so that they can upload a profile photo. Start by creating a new component:
|
||||
|
||||
<$CodeTabs>
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/solid-user-management/src/Avatar.tsx"
|
||||
lines={[[1, -1]]}
|
||||
meta="name=src/Avatar.tsx"
|
||||
/>
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
### Add the new widget
|
||||
|
||||
And then add the widget to the Account page:
|
||||
|
||||
<$CodeTabs>
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/solid-user-management/src/Account.tsx"
|
||||
lines={[[1, 3], [76, 88]]}
|
||||
meta="name=src/Account.tsx"
|
||||
/>
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
At this stage you have a fully functional application!
|
||||
@@ -9,7 +9,7 @@ description: 'Learn how to use Supabase in your Svelte App.'
|
||||
|
||||
<Admonition type="note">
|
||||
|
||||
If you get stuck while working through this guide, refer to the [full example on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/svelte-user-management).
|
||||
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/svelte-user-management).
|
||||
|
||||
</Admonition>
|
||||
|
||||
@@ -50,21 +50,21 @@ VITE_SUPABASE_PUBLISHABLE_KEY=YOUR_SUPABASE_PUBLISHABLE_KEY
|
||||
Now you have 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 since you have [Row Level Security](/docs/guides/auth#row-level-security) enabled on the Database.
|
||||
|
||||
<$CodeSample
|
||||
path="user-management/svelte-user-management/src/supabaseClient.ts"
|
||||
path="/user-management/svelte-user-management/src/supabaseClient.ts"
|
||||
meta="name=src/supabaseClient.ts"
|
||||
/>
|
||||
|
||||
### App styling (optional)
|
||||
|
||||
Optionally, update the CSS file `src/app.css` to make the app look nice.
|
||||
You can find the full contents of this file [on GitHub](https://raw.githubusercontent.com/supabase/supabase/master/examples/user-management/svelte-user-management/src/app.css).
|
||||
Optionally, update the CSS file `src/app.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/svelte-user-management/src/app.css).
|
||||
|
||||
### Set up a login component
|
||||
|
||||
Set up a Svelte component to manage logins and sign ups. It uses Magic Links, so users can sign in with their email without using passwords.
|
||||
|
||||
<$CodeSample
|
||||
path="user-management/svelte-user-management/src/lib/Auth.svelte"
|
||||
path="/user-management/svelte-user-management/src/lib/Auth.svelte"
|
||||
meta="name=src/lib/Auth.svelte"
|
||||
/>
|
||||
|
||||
@@ -75,16 +75,40 @@ Create a new component for that called `Account.svelte`.
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/svelte-user-management/src/lib/Account.svelte"
|
||||
lines={[[1, 4], [7, 11], [14, 33], [34,53], [55,73], [75,-1]]}
|
||||
lines={[[1, 4], [6, 79], [81, -1]]}
|
||||
meta="src/lib/Account.svelte"
|
||||
/>
|
||||
|
||||
## Profile photos
|
||||
|
||||
Next, 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
|
||||
|
||||
Start by creating a new component:
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/svelte-user-management/src/lib/Avatar.svelte"
|
||||
lines={[[1, -1]]}
|
||||
meta="name=src/lib/Avatar.svelte"
|
||||
/>
|
||||
|
||||
### Update the account component
|
||||
|
||||
With the Avatar component created, update `src/lib/Account.svelte` to include it:
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/svelte-user-management/src/lib/Account.svelte"
|
||||
lines={[[1, -1]]}
|
||||
meta="name=src/lib/Account.svelte"
|
||||
/>
|
||||
|
||||
### Launch!
|
||||
|
||||
Now that you have all the components in place, update `App.svelte`:
|
||||
With all the components in place, update `App.svelte`:
|
||||
|
||||
<$CodeSample
|
||||
path="user-management/svelte-user-management/src/App.svelte"
|
||||
path="/user-management/svelte-user-management/src/App.svelte"
|
||||
meta="name=src/App.svelte"
|
||||
/>
|
||||
|
||||
@@ -104,27 +128,4 @@ Svelte uses Vite and the default port is `5173`, Supabase uses `port 3000`. To c
|
||||
|
||||
|
||||
|
||||
## 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
|
||||
|
||||
Create an avatar for the user so that they can upload a profile photo. Start by creating a new component:
|
||||
|
||||
<$CodeSample
|
||||
path="user-management/svelte-user-management/src/lib/Avatar.svelte"
|
||||
meta="name=src/lib/Avatar.svelte"
|
||||
/>
|
||||
|
||||
### Add the new widget
|
||||
|
||||
And then you can add the widget to the Account page:
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/svelte-user-management/src/lib/Account.svelte"
|
||||
lines={[[1,1], [5,5], [71,73], [74,74], [92,-1]]}
|
||||
meta="src/lib/Account.svelte"
|
||||
/>
|
||||
|
||||
At this stage you have a fully functional application!
|
||||
@@ -9,7 +9,7 @@ description: 'Learn how to use Supabase in your SvelteKit App.'
|
||||
|
||||
<Admonition type="note">
|
||||
|
||||
If you get stuck while working through this guide, refer to the [full example on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/sveltekit-user-management).
|
||||
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/sveltekit-user-management).
|
||||
|
||||
</Admonition>
|
||||
|
||||
@@ -132,7 +132,7 @@ meta="name=src/routes/+layout.svelte"
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
## Set up a login page
|
||||
### Set up a login page
|
||||
|
||||
Create a magic link login/signup page for your application by updating the `routes/+page.svelte` file:
|
||||
|
||||
@@ -158,7 +158,7 @@ meta="name=src/routes/+page.server.ts"
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
### Email template
|
||||
#### Email template
|
||||
|
||||
Change the email template to support a server-side authentication flow.
|
||||
|
||||
@@ -175,7 +175,7 @@ You can also customize emails sent out to new users, including the email's looks
|
||||
|
||||
</Admonition>
|
||||
|
||||
### Confirmation endpoint
|
||||
#### Confirmation endpoint
|
||||
|
||||
As this is a server-side rendering (SSR) environment, you need to create a server endpoint responsible for exchanging the `token_hash` for a session.
|
||||
|
||||
@@ -195,7 +195,7 @@ meta="name=src/routes/auth/confirm/+server.ts"
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
### Authentication error page
|
||||
#### Authentication error page
|
||||
|
||||
If there is an error with confirming the token, redirect the user to an error page.
|
||||
|
||||
@@ -208,7 +208,7 @@ meta="name=src/routes/auth/error/+page.svelte"
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
### Account page
|
||||
#### Account page
|
||||
|
||||
After a user signs in, they need to be able to edit their profile details page.
|
||||
Create a new `src/routes/account/+page.svelte` file with the content below.
|
||||
@@ -217,7 +217,7 @@ Create a new `src/routes/account/+page.svelte` file with the content below.
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/sveltekit-user-management/src/routes/account/+page.svelte"
|
||||
lines={[[1, 3],[6,12],[15,38],[47,-1]]}
|
||||
lines={[[1, 3],[6,12],[15,38],[49,-1]]}
|
||||
meta="name=src/routes/account/+page.svelte"
|
||||
/>
|
||||
|
||||
@@ -232,6 +232,38 @@ lines={[[1, -1]]}
|
||||
meta="name=src/routes/account/+page.server.ts"
|
||||
/>
|
||||
|
||||
## Profile photos
|
||||
|
||||
Next, 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
|
||||
|
||||
Start by creating a new component called `Avatar.svelte` in the `src/routes/account` directory:
|
||||
|
||||
<$CodeTabs>
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/sveltekit-user-management/src/routes/account/Avatar.svelte"
|
||||
lines={[[1, -1]]}
|
||||
meta="name=src/routes/account/Avatar.svelte"
|
||||
/>
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
### Update the account page
|
||||
|
||||
With the Avatar component created, update `src/routes/account/+page.svelte` to include it:
|
||||
|
||||
<$CodeTabs>
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/sveltekit-user-management/src/routes/account/+page.svelte"
|
||||
lines={[[1, -1]]}
|
||||
meta="name=src/routes/account/+page.svelte"
|
||||
/>
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
### Launch!
|
||||
|
||||
With all the pages in place, run this command in a terminal:
|
||||
@@ -244,36 +276,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
|
||||
|
||||
Create an avatar for the user so that they can upload a profile photo. Start by creating a new component called `Avatar.svelte` in the `src/routes/account` directory:
|
||||
|
||||
<$CodeTabs>
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/sveltekit-user-management/src/routes/account/Avatar.svelte"
|
||||
lines={[[1, -1]]}
|
||||
meta="name=src/routes/account/Avatar.svelte"
|
||||
/>
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
### Add the new widget
|
||||
|
||||
Add the widget to the Account page:
|
||||
|
||||
<$CodeTabs>
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/sveltekit-user-management/src/routes/account/+page.svelte"
|
||||
lines={[[1, 1], [4,4], [31,31],[39,46],[82,82]]}
|
||||
meta="name=src/routes/account/+page.svelte"
|
||||
/>
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
At this stage you have a fully functional application!
|
||||
@@ -9,7 +9,7 @@ description: 'Learn how to use Supabase in your SwiftUI App.'
|
||||
|
||||
<Admonition type="note">
|
||||
|
||||
If you get stuck while working through this guide, refer to the [full example on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/swift-user-management).
|
||||
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/swift-user-management).
|
||||
|
||||
</Admonition>
|
||||
|
||||
@@ -273,47 +273,9 @@ struct UpdateProfileParams: Encodable {
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
### Launch!
|
||||
## Profile photos
|
||||
|
||||
Now that you've created all the views, add an entry point for the application. This will verify if the user has a valid session and route them to the authenticated or non-authenticated state.
|
||||
|
||||
Add a new `AppView.swift` file.
|
||||
|
||||
<$CodeTabs>
|
||||
|
||||
```swift name=AppView.swift
|
||||
import SwiftUI
|
||||
|
||||
struct AppView: View {
|
||||
@State var isAuthenticated = false
|
||||
|
||||
var body: some View {
|
||||
Group {
|
||||
if isAuthenticated {
|
||||
ProfileView()
|
||||
} else {
|
||||
AuthView()
|
||||
}
|
||||
}
|
||||
.task {
|
||||
for await state in supabase.auth.authStateChanges {
|
||||
if [.initialSession, .signedIn, .signedOut].contains(state.event) {
|
||||
isAuthenticated = state.session != nil
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
Update the entry point to the newly created `AppView`. Run in Xcode to launch your application in the simulator.
|
||||
|
||||
## Bonus: Profile photos
|
||||
|
||||
Every Supabase project is configured with [Storage](/docs/guides/storage) for managing large files like
|
||||
photos and videos.
|
||||
Next, 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.
|
||||
|
||||
{/* supa-mdx-lint-disable-next-line Rule001HeadingCase */}
|
||||
|
||||
@@ -562,4 +524,41 @@ struct Profile: Codable {
|
||||
|
||||
You no longer need the `UpdateProfileParams` struct, as you can now reuse the `Profile` struct for both request and response calls.
|
||||
|
||||
### Launch!
|
||||
|
||||
With all the views in place, add an entry point for the application.
|
||||
|
||||
Add a new `AppView.swift` file.
|
||||
|
||||
<$CodeTabs>
|
||||
|
||||
```swift name=AppView.swift
|
||||
import SwiftUI
|
||||
|
||||
struct AppView: View {
|
||||
@State var isAuthenticated = false
|
||||
|
||||
var body: some View {
|
||||
Group {
|
||||
if isAuthenticated {
|
||||
ProfileView()
|
||||
} else {
|
||||
AuthView()
|
||||
}
|
||||
}
|
||||
.task {
|
||||
for await state in supabase.auth.authStateChanges {
|
||||
if [.initialSession, .signedIn, .signedOut].contains(state.event) {
|
||||
isAuthenticated = state.session != nil
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</$CodeTabs>
|
||||
|
||||
Update the entry point to the newly created `AppView`. Run in Xcode to launch your application in the simulator.
|
||||
|
||||
At this stage you have a fully functional application!
|
||||
@@ -10,7 +10,7 @@ description: 'Learn how to use Supabase in your Vue 3 App.'
|
||||
|
||||
<Admonition type="note">
|
||||
|
||||
If you get stuck while working through this guide, refer to the [full example on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/vue3-user-management).
|
||||
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/vue3-user-management).
|
||||
|
||||
</Admonition>
|
||||
|
||||
@@ -61,7 +61,10 @@ lines={[[1, -1]]}
|
||||
meta="name=src/supabase.js"
|
||||
/>
|
||||
|
||||
Optionally, update [src/style.css](https://raw.githubusercontent.com/supabase/supabase/master/examples/user-management/vue3-user-management/src/style.css) to style the app.
|
||||
### App styling (optional)
|
||||
|
||||
An optional step is to update the CSS file `src/style.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/vue3-user-management/src/style.css).
|
||||
|
||||
### Set up a login component
|
||||
|
||||
@@ -78,6 +81,30 @@ meta="name=src/components/Auth.vue"
|
||||
After a user signs in, allow them to edit their profile details and manage their account.
|
||||
Create a new `src/components/Account.vue` component to handle this.
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/vue3-user-management/src/components/Account.vue"
|
||||
lines={[[1, 3], [5, 76], [78, -1]]}
|
||||
meta="name=src/components/Account.vue"
|
||||
/>
|
||||
|
||||
## Profile photos
|
||||
|
||||
Next, 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 a new `src/components/Avatar.vue` component that allows users to upload profile photos:
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/vue3-user-management/src/components/Avatar.vue"
|
||||
lines={[[1, -1]]}
|
||||
meta="name=src/components/Avatar.vue"
|
||||
/>
|
||||
|
||||
### Update the Account component
|
||||
|
||||
With the Avatar component created, update `src/components/Account.vue` to include it:
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/vue3-user-management/src/components/Account.vue"
|
||||
lines={[[1, -1]]}
|
||||
@@ -104,24 +131,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
|
||||
|
||||
Create a new `src/components/Avatar.vue` component that allows users to upload profile photos:
|
||||
|
||||
<$CodeSample
|
||||
path="/user-management/vue3-user-management/src/components/Avatar.vue"
|
||||
lines={[[1, -1]]}
|
||||
meta="name=src/components/Avatar.vue"
|
||||
/>
|
||||
|
||||
### Add the new widget
|
||||
|
||||
Finally, add the widget to the Account page.
|
||||
|
||||
The `Account.vue` component [shown earlier](#account-page) already includes the `Avatar` component.
|
||||
|
||||
At this stage you have a fully functional application!
|
||||
@@ -1,30 +1,28 @@
|
||||
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)
|
||||
const [claims, setClaims] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
supabase.auth.getUser().then(({ data: { user } }) => {
|
||||
setUser(user)
|
||||
const loadClaims = async () => {
|
||||
const {
|
||||
data: { claims },
|
||||
} = await supabase.auth.getClaims()
|
||||
setClaims(claims)
|
||||
}
|
||||
|
||||
loadClaims()
|
||||
|
||||
const {
|
||||
data: { subscription },
|
||||
} = supabase.auth.onAuthStateChange(() => {
|
||||
loadClaims()
|
||||
})
|
||||
|
||||
supabase.auth.onAuthStateChange(async () => {
|
||||
const {
|
||||
data: { user },
|
||||
} = await supabase.auth.getUser()
|
||||
setUser(user)
|
||||
})
|
||||
return () => subscription.unsubscribe()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="container" style={{ padding: '50px 0 100px 0' }}>
|
||||
{!user ? <Auth /> : <Account key={user.id} user={user} />}
|
||||
{!claims ? <Auth /> : <Account key={claims.sub} claims={claims} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
@@ -5,6 +5,7 @@
|
||||
may_uppercase = [
|
||||
"[A-Z0-9]{2,5}s?",
|
||||
"Option [A-Z]",
|
||||
"Account component",
|
||||
"APIs",
|
||||
"Add-ons?",
|
||||
"Amazon RDS",
|
||||
|
||||
@@ -470,6 +470,7 @@ allow_list = [
|
||||
"vecs",
|
||||
"vs",
|
||||
"watchOS",
|
||||
"WebCrypto",
|
||||
"[Xx]min",
|
||||
]
|
||||
|
||||
|
||||
Reference in new issue
Block a user