diff --git a/apps/docs/content/_partials/api_settings.mdx b/apps/docs/content/_partials/api_settings.mdx
index dca5688a908..1ff65a3332f 100644
--- a/apps/docs/content/_partials/api_settings.mdx
+++ b/apps/docs/content/_partials/api_settings.mdx
@@ -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>
diff --git a/apps/docs/content/_partials/api_settings_steps.mdx b/apps/docs/content/_partials/api_settings_steps.mdx
index 84228d1cbd9..50d45feb465 100644
--- a/apps/docs/content/_partials/api_settings_steps.mdx
+++ b/apps/docs/content/_partials/api_settings_steps.mdx
@@ -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>
diff --git a/apps/docs/content/_partials/auth_methods.mdx b/apps/docs/content/_partials/auth_methods.mdx
new file mode 100644
index 00000000000..f8ab5ddbad6
--- /dev/null
+++ b/apps/docs/content/_partials/auth_methods.mdx
@@ -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.
diff --git a/apps/docs/content/guides/getting-started/tutorials/with-angular.mdx b/apps/docs/content/guides/getting-started/tutorials/with-angular.mdx
index 5bfa9c9faf3..9ad548dfa13 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-angular.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-angular.mdx
@@ -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
diff --git a/apps/docs/content/guides/getting-started/tutorials/with-expo-react-native.mdx b/apps/docs/content/guides/getting-started/tutorials/with-expo-react-native.mdx
index 0e7a738170c..1aa5d7e3fca 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-expo-react-native.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-expo-react-native.mdx
@@ -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.
 
diff --git a/apps/docs/content/guides/getting-started/tutorials/with-ionic-angular.mdx b/apps/docs/content/guides/getting-started/tutorials/with-ionic-angular.mdx
index ccc1ffdf8e6..0148facc6db 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-ionic-angular.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-ionic-angular.mdx
@@ -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
diff --git a/apps/docs/content/guides/getting-started/tutorials/with-ionic-react.mdx b/apps/docs/content/guides/getting-started/tutorials/with-ionic-react.mdx
index 0f5b6ecaee8..fac23b6ec1e 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-ionic-react.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-ionic-react.mdx
@@ -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"
 />
 
diff --git a/apps/docs/content/guides/getting-started/tutorials/with-ionic-vue.mdx b/apps/docs/content/guides/getting-started/tutorials/with-ionic-vue.mdx
index 70c84bdae8d..baff725b244 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-ionic-vue.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-ionic-vue.mdx
@@ -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!
diff --git a/apps/docs/content/guides/getting-started/tutorials/with-nextjs.mdx b/apps/docs/content/guides/getting-started/tutorials/with-nextjs.mdx
index 5144851b5cf..6487f311807 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-nextjs.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-nextjs.mdx
@@ -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
diff --git a/apps/docs/content/guides/getting-started/tutorials/with-nuxt-3.mdx b/apps/docs/content/guides/getting-started/tutorials/with-nuxt-3.mdx
index 88868969d72..fc1bdb68c77 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-nuxt-3.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-nuxt-3.mdx
@@ -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.
-
-![Supabase Nuxt 3](/docs/img/supabase-vue-3-demo.png)
-
-## 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.
+
+![Supabase Nuxt 3](/docs/img/supabase-vue-3-demo.png)
+
+At this stage you have a fully functional application!
diff --git a/apps/docs/content/guides/getting-started/tutorials/with-react.mdx b/apps/docs/content/guides/getting-started/tutorials/with-react.mdx
index 8f656779f11..f740c3a7c8e 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-react.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-react.mdx
@@ -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.
 
-![Supabase React](/docs/img/supabase-react-demo.png)
+![Screenshot of the Supabase React application running in a browser](/docs/img/supabase-react-demo.png)
 
 At this stage you have a fully functional application!
diff --git a/apps/docs/content/guides/getting-started/tutorials/with-redwoodjs.mdx b/apps/docs/content/guides/getting-started/tutorials/with-redwoodjs.mdx
index 09ccbd9d1bb..18f4af41521 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-redwoodjs.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-redwoodjs.mdx
@@ -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.
-
-![Supabase RedwoodJS](/docs/img/supabase-redwoodjs-demo.png)
-
-## 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.
+
+![Supabase RedwoodJS](/docs/img/supabase-redwoodjs-demo.png)
 
 At this stage you have a fully functional application!
 
diff --git a/apps/docs/content/guides/getting-started/tutorials/with-refine.mdx b/apps/docs/content/guides/getting-started/tutorials/with-refine.mdx
index 553d0f02105..62b3582985c 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-refine.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-refine.mdx
@@ -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
 
 ![Supabase Refine](/docs/img/supabase-refine-demo.png)
 
-## 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!
diff --git a/apps/docs/content/guides/getting-started/tutorials/with-solidjs.mdx b/apps/docs/content/guides/getting-started/tutorials/with-solidjs.mdx
index 9b8f37a9bb4..7cda94c9d61 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-solidjs.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-solidjs.mdx
@@ -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
 
 ![Supabase SolidJS](/docs/img/supabase-solidjs-demo.png)
 
-## 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!
diff --git a/apps/docs/content/guides/getting-started/tutorials/with-svelte.mdx b/apps/docs/content/guides/getting-started/tutorials/with-svelte.mdx
index 15c69b1c2fe..0ec26c0f8d1 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-svelte.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-svelte.mdx
@@ -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
 
 ![Supabase Svelte](/docs/img/supabase-svelte-demo.png)
 
-## 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!
diff --git a/apps/docs/content/guides/getting-started/tutorials/with-sveltekit.mdx b/apps/docs/content/guides/getting-started/tutorials/with-sveltekit.mdx
index 08d723c8ce0..a6f8b9bd743 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-sveltekit.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-sveltekit.mdx
@@ -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
 
 ![Supabase Svelte](/docs/img/supabase-svelte-demo.png)
 
-## 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!
diff --git a/apps/docs/content/guides/getting-started/tutorials/with-swift.mdx b/apps/docs/content/guides/getting-started/tutorials/with-swift.mdx
index 89177e8ea8b..4e240e1d969 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-swift.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-swift.mdx
@@ -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!
diff --git a/apps/docs/content/guides/getting-started/tutorials/with-vue-3.mdx b/apps/docs/content/guides/getting-started/tutorials/with-vue-3.mdx
index a14fd0f2b91..3013377e7a1 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-vue-3.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-vue-3.mdx
@@ -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
 
 ![Supabase Vue 3](/docs/img/supabase-vue-3-demo.png)
 
-## 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!
diff --git a/examples/user-management/react-user-management/src/App.jsx b/examples/user-management/react-user-management/src/App.jsx
index dd3f856e181..e164e4a3109 100644
--- a/examples/user-management/react-user-management/src/App.jsx
+++ b/examples/user-management/react-user-management/src/App.jsx
@@ -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
diff --git a/supa-mdx-lint/Rule001HeadingCase.toml b/supa-mdx-lint/Rule001HeadingCase.toml
index c10782522a2..31086f63403 100644
--- a/supa-mdx-lint/Rule001HeadingCase.toml
+++ b/supa-mdx-lint/Rule001HeadingCase.toml
@@ -5,6 +5,7 @@
 may_uppercase = [
     "[A-Z0-9]{2,5}s?",
     "Option [A-Z]",
+    "Account component",
     "APIs",
     "Add-ons?",
     "Amazon RDS",
diff --git a/supa-mdx-lint/Rule003Spelling.toml b/supa-mdx-lint/Rule003Spelling.toml
index 41446d829e9..6d6937c8b11 100644
--- a/supa-mdx-lint/Rule003Spelling.toml
+++ b/supa-mdx-lint/Rule003Spelling.toml
@@ -470,6 +470,7 @@ allow_list = [
     "vecs",
     "vs",
     "watchOS",
+    "WebCrypto",
     "[Xx]min",
 ]