Merge pull request #670 from nhost/changeset-release/main

chore: update versions

README.md

@@ -1,4 +1,4 @@
-![Nhost](https://imgur.com/fGo6E4d.png)
+![Nhost](https://i.imgur.com/ZenoUlM.png)
 
 <div align="center">
 
@@ -20,12 +20,12 @@
   <hr />
 </div>
 
-**Nhost is an open-source GraphQL backend,** built with the following things in mind:
+**Nhost is an open source Firebase alternative with GraphQL,** built with the following things in mind:
 
-- Open-Source
-- Developer Productivity
-- SQL
+- Open Source
 - GraphQL
+- SQL
+- Great Developer Experience
 
 Nhost consists of open source software:
 
@@ -47,19 +47,19 @@ Nhost consists of open source software:
 
 Visit [https://docs.nhost.io](http://docs.nhost.io) for the complete documentation.
 
-# How to get started
+# Get Started
 
-### Option 1: One-click deployment with Nhost (recommended)
+## Option 1: Nhost Hosted Platform
 
-1. Create [Nhost account](https://app.nhost.io) (you can use GitHub to sign up)
-2. Create Nhost app
-3. Done!
+1. Sign in to [Nhost](https://app.nhost.io).
+2. Create Nhost app.
+3. Done.
 
-### Option 2: Self-hosting
+## Option 2: Self-hosting
 
 Since Nhost is 100% open source, you can self-host the whole Nhost stack. Check out the example [docker-compose file](https://github.com/nhost/nhost/tree/main/examples/docker-compose) to self-host Nhost.
 
-## Sign in a user and make your first GraphQL query
+## Sign In and Make a Graphql Request
 
 Install the `@nhost/nhost-js` package and start build your app:
 
@@ -103,6 +103,7 @@ Nhost libraries and tools
 - [Nhost CLI](https://docs.nhost.io/reference/cli)
 - [Nhost React](https://docs.nhost.io/reference/react)
 - [Nhost Next.js](https://docs.nhost.io/reference/nextjs)
+- [Nhost Vue](https://docs.nhost.io/reference/vue)
 
 ## Community ❤️
 
@@ -198,12 +199,27 @@ Here are some ways of contributing to making Nhost better:
             <sub><b>Vadim Smirnov</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/macmac49">
+            <img src="https://avatars.githubusercontent.com/u/831190?v=4" width="100;" alt="macmac49"/>
+            <br />
+            <sub><b>Macmac49</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/subhendukundu">
             <img src="https://avatars.githubusercontent.com/u/20059141?v=4" width="100;" alt="subhendukundu"/>
             <br />
             <sub><b>Subhendu Kundu</b></sub>
         </a>
+    </td></tr>
+<tr>
+    <td align="center">
+        <a href="https://github.com/heygambo">
+            <img src="https://avatars.githubusercontent.com/u/449438?v=4" width="100;" alt="heygambo"/>
+            <br />
+            <sub><b>Christian Gambardella</b></sub>
+        </a>
     </td>
     <td align="center">
         <a href="https://github.com/chrtze">
@@ -211,8 +227,7 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Christopher Möller</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/dbarrosop">
             <img src="https://avatars.githubusercontent.com/u/6246622?v=4" width="100;" alt="dbarrosop"/>
@@ -240,7 +255,8 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Jerry Jäppinen</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/mustafa-hanif">
             <img src="https://avatars.githubusercontent.com/u/30019262?v=4" width="100;" alt="mustafa-hanif"/>
@@ -248,14 +264,20 @@ Here are some ways of contributing to making Nhost better:
             <sub><b>Mustafa Hanif</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/nbourdin">
+            <img src="https://avatars.githubusercontent.com/u/5602476?v=4" width="100;" alt="nbourdin"/>
+            <br />
+            <sub><b>Nicolas Bourdin</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/timpratim">
             <img src="https://avatars.githubusercontent.com/u/32492961?v=4" width="100;" alt="timpratim"/>
             <br />
             <sub><b>Pratim</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/Savinvadim1312">
             <img src="https://avatars.githubusercontent.com/u/16936043?v=4" width="100;" alt="Savinvadim1312"/>
@@ -276,12 +298,13 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Anders Kjær Damgaard</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
-        <a href="https://github.com/heygambo">
-            <img src="https://avatars.githubusercontent.com/u/449438?v=4" width="100;" alt="heygambo"/>
+        <a href="https://github.com/Sonichigo">
+            <img src="https://avatars.githubusercontent.com/u/53110238?v=4" width="100;" alt="Sonichigo"/>
             <br />
-            <sub><b>Christian Gambardella</b></sub>
+            <sub><b>Animesh Pathak</b></sub>
         </a>
     </td>
     <td align="center">
@@ -297,8 +320,7 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Dominic Garms</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/gaurav1999">
             <img src="https://avatars.githubusercontent.com/u/20752142?v=4" width="100;" alt="gaurav1999"/>
@@ -319,6 +341,14 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Hoang Do</b></sub>
         </a>
+    </td></tr>
+<tr>
+    <td align="center">
+        <a href="https://github.com/MelodicCrypter">
+            <img src="https://avatars.githubusercontent.com/u/18341500?v=4" width="100;" alt="MelodicCrypter"/>
+            <br />
+            <sub><b>Hugh Caluscusin</b></sub>
+        </a>
     </td>
     <td align="center">
         <a href="https://github.com/jladuval">
@@ -340,8 +370,7 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Max Reynolds</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/ghoshnirmalya">
             <img src="https://avatars.githubusercontent.com/u/6391763?v=4" width="100;" alt="ghoshnirmalya"/>
@@ -355,6 +384,14 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Quentin Decré</b></sub>
         </a>
+    </td></tr>
+<tr>
+    <td align="center">
+        <a href="https://github.com/atapas">
+            <img src="https://avatars.githubusercontent.com/u/3633137?v=4" width="100;" alt="atapas"/>
+            <br />
+            <sub><b>Tapas Adhikary</b></sub>
+        </a>
     </td>
     <td align="center">
         <a href="https://github.com/komninoschat">

config/.eslintrc.vue.js

@@ -6,5 +6,8 @@ module.exports = {
   parserOptions: {
     ...base.parserOptions,
     parser: '@typescript-eslint/parser'
+  },
+  rules: {
+    'vue/html-self-closing': 'off'
   }
 }

config/vite.lib.config.js

@@ -14,9 +14,6 @@ const entry = fs.existsSync(tsEntry) ? tsEntry : tsEntry.replace('.ts', '.tsx')
 const deps = [...Object.keys(Object.assign({}, pkg.peerDependencies, pkg.dependencies))]
 
 export default defineConfig({
-  optimizeDeps: {
-    include: ['react/jsx-runtime']
-  },
   plugins: [
     tsconfigPaths(),
     dts({
@@ -44,17 +41,18 @@ export default defineConfig({
     lib: {
       entry,
       name: pkg.name,
-      fileName: 'index',
+      fileName: (format) => (format === 'cjs' ? `index.cjs.js` : `index.esm.js`),
       formats: ['cjs', 'es']
     },
     rollupOptions: {
       external: (id) => deps.some((dep) => id.startsWith(dep)),
       output: {
         globals: {
-          'graphql/language/printer': 'graphql/language/printer',
+          graphql: 'graphql',
           '@apollo/client': '@apollo/client',
           '@apollo/client/core': '@apollo/client/core',
           '@apollo/client/link/context': '@apollo/client/link/context',
+          '@apollo/client/react': '@apollo/client/react',
           '@apollo/client/link/subscriptions': '@apollo/client/link/subscriptions',
           '@apollo/client/utilities': '@apollo/client/utilities',
           'graphql-ws': 'graphql-ws',
@@ -64,7 +62,9 @@ export default defineConfig({
           react: 'React',
           'react-dom': 'ReactDOM',
           'react/jsx-runtime': '_jsx',
-          '@nhost/react': '@nhost/react'
+          '@nhost/react': '@nhost/react',
+          vue: 'Vue',
+          'vue-demi': 'vue-demi'
         }
       }
     }

config/vite.lib.umd.config.js

@@ -1,8 +1,6 @@
-import fs from 'fs'
 import path from 'path'
 
 import { defineConfig } from 'vite'
-import dts from 'vite-plugin-dts'
 import tsconfigPaths from 'vite-tsconfig-paths'
 
 import baseLibConfig from './vite.lib.config'
@@ -13,19 +11,7 @@ const pkg = require(path.join(PWD, 'package.json'))
 const deps = [...Object.keys(Object.assign({}, pkg.peerDependencies))]
 
 export default defineConfig({
-  plugins: [
-    tsconfigPaths(),
-    dts({
-      exclude: ['**/*.spec.ts', '**/*.test.ts', '**/tests/**'],
-      afterBuild: () => {
-        const types = fs.readdirSync(path.join(PWD, 'umd/src'))
-        types.forEach((file) => {
-          fs.renameSync(path.join(PWD, 'umd/src', file), path.join(PWD, 'umd', file))
-        })
-        fs.rmdirSync(path.join(PWD, 'umd/src'))
-      }
-    })
-  ],
+  plugins: [tsconfigPaths()],
   build: {
     ...(baseLibConfig.build || {}),
     outDir: 'umd',

config/vite.react.config.js

@@ -6,5 +6,8 @@ import baseLibConfig from './vite.lib.config'
 
 export default defineConfig({
   ...baseLibConfig,
-  plugins: [react(), ...baseLibConfig.plugins]
+  optimizeDeps: {
+    include: ['react/jsx-runtime']
+  },
+  plugins: [react({ jsxRuntime: 'classic' }), ...baseLibConfig.plugins]
 })

config/vite.react.umd.config.js

@@ -1,8 +1,6 @@
-import fs from 'fs'
 import path from 'path'
 
 import { defineConfig } from 'vite'
-import dts from 'vite-plugin-dts'
 import tsconfigPaths from 'vite-tsconfig-paths'
 
 import react from '@vitejs/plugin-react'
@@ -15,20 +13,7 @@ const pkg = require(path.join(PWD, 'package.json'))
 const deps = [...Object.keys(Object.assign({}, pkg.peerDependencies))]
 
 export default defineConfig({
-  plugins: [
-    react(),
-    tsconfigPaths(),
-    dts({
-      exclude: ['**/*.spec.ts', '**/*.test.ts', '**/tests/**'],
-      afterBuild: () => {
-        const types = fs.readdirSync(path.join(PWD, 'umd/src'))
-        types.forEach((file) => {
-          fs.renameSync(path.join(PWD, 'umd/src', file), path.join(PWD, 'umd', file))
-        })
-        fs.rmdirSync(path.join(PWD, 'umd/src'))
-      }
-    })
-  ],
+  plugins: [react(), tsconfigPaths()],
   build: {
     ...(baseLibConfig.build || {}),
     outDir: 'umd',

config/vite.vue.umd.config.js

@@ -1,8 +1,6 @@
-import fs from 'fs'
 import path from 'path'
 
 import { defineConfig } from 'vite'
-import dts from 'vite-plugin-dts'
 import tsconfigPaths from 'vite-tsconfig-paths'
 
 import vue from '@vitejs/plugin-vue'
@@ -15,20 +13,7 @@ const pkg = require(path.join(PWD, 'package.json'))
 const deps = [...Object.keys(Object.assign({}, pkg.peerDependencies))]
 
 export default defineConfig({
-  plugins: [
-    vue(),
-    tsconfigPaths(),
-    dts({
-      exclude: ['**/*.spec.ts', '**/*.test.ts', '**/tests/**'],
-      afterBuild: () => {
-        const types = fs.readdirSync(path.join(PWD, 'umd/src'))
-        types.forEach((file) => {
-          fs.renameSync(path.join(PWD, 'umd/src', file), path.join(PWD, 'umd', file))
-        })
-        fs.rmdirSync(path.join(PWD, 'umd/src'))
-      }
-    })
-  ],
+  plugins: [vue(), tsconfigPaths()],
   build: {
     ...(baseLibConfig.build || {}),
     outDir: 'umd',

docs/docs/index.mdx

@@ -2,6 +2,7 @@
 title: 'Introduction to Nhost'
 sidebar_label: Introduction
 sidebar_position: 1
+image: /img/og/platform/introduction-to-nhost.png
 ---
 
 Nhost is the open source GraphQL backend (Firebase Alternative) and a development platform. Nhost is doing for the backend, what [Netlify](https://netlify.com/) and [Vercel](https://vercel.com/) are doing for the frontend.
@@ -16,6 +17,7 @@ Get started quickly by following one of our quickstart guides:
 
 - [Next.js](/platform/quickstarts/nextjs)
 - [React](/platform/quickstarts/react)
+- [RedwoodJS](/platform/quickstarts/redwoodjs)
 - [Vue](/platform/quickstarts/vue)
 
 ## Products and features

docs/docs/platform/authentication/email-templates.md

@@ -1,93 +1,108 @@
 ---
-title: 'Email templates'
+title: 'Email Templates'
 sidebar_position: 4
 ---
 
-The following emails can be sent as part of the authentication flow:
+Nhost Auth sends out transactional emails as part of the authentication service. These emails can be modified using email templates.
 
-- Sign up confirmation email (when using email + password)
-- Reset password email (when using email + password)
-- Passwordless login email (when using Magic Link)
-- Confirm email change (any sign-up method)
+The following email templates are available:
 
----
+- **email-verify** - Verify email address
+- **email-confirm-change** - Confirm email change to a new email address.
+- **signin-passwordless** - Magic Link
+- **password-reset** - Reset password
 
-## Enabling custom email templates
+Changing email templates is only available for apps on the [Pro and Enterprise plan](https://nhost.io/pricing).
 
-If you have developed custom email templates, you must make them available over HTTP and then point Nhost to them. You can host the templates on your server, or use a public repository on GitHub.
+## Update Email Templates
 
-Go to **Users -> Login settings** and scroll down to **Custom email templates**, and set the URL to where your templates are located:
+Your app must be connected to a GitHub repository using the [GitHub Integration](/platform/github-integration) to be able to change the email templates.
 
-![Email templates](/img/platform/email-templates.svg)
+Email templates are automatically deployed during a deployment, just like database migrations, Hasura metadata, and Serverless Functions.
 
-You only need to define the base URL to point to your hosted templates. The UI will give you a hint about where Nhost will look for your actual template files.
+## File Structure
 
----
+Emails are located in the `nhost/` folder like this:
 
-## File structure
+The email templates should be provided as body.html and subject.txt files in this predefined folder structure.
 
-The email templates should be provided as body.html and subject.txt files in this predefined folder structure:
+**Example:** Email templates for `en` (English) and `es` (Spanish):
 
 ```txt
-// At base URL (e.g. https://yourapp.com/email-templates/)
-en/
-  email-confirm-change/
-    body.html
-    subject.txt
-  email-verify/
-    body.html
-    subject.txt
-  password-reset/
-    body.html
-    subject.txt
-  signin-passwordless/
-    body.html
-    subject.txt
-
-// Other language versions
-fr/
-  /* ... */
-se/
-  /* ... */
+my-nhost-app/
+└── nhost/
+    ├── config.yaml
+    ├── emails/
+    │   ├── en/
+    │   │   ├── email-verify/
+    │   │   │   ├── subject.txt
+    │   │   │   └── body.html
+    │   │   ├── email-confirm-change/
+    │   │   │   ├── subject.txt
+    │   │   │   └── body.html
+    │   │   ├── signin-passwordless/
+    │   │   │   ├── subject.txt
+    │   │   │   └── body.html
+    │   │   └── password-reset/
+    │   │       ├── subject.txt
+    │   │       └── body.html
+    │   └── es/
+    │       ├── email-verify/
+    │       │   ├── subject.txt
+    │       │   └── body.html
+    │       ├── email-confirm-change/
+    │       │   ├── subject.txt
+    │       │   └── body.html
+    │       ├── signin-passwordless/
+    │       │   ├── subject.txt
+    │       │   └── body.html
+    │       └── password-reset/
+    │           ├── subject.txt
+    │           └── body.html
+    ├── migrations/
+    ├── metadata/
+    └── seeds
 ```
 
-You don’t have to provide all templates - only the one you wish to use and customize. For the templates you do provide, you must provide both body.html and subject.txt.
+As you see, the format is:
 
-[View example on GitHub](https://github.com/nhost/nhost/tree/main/examples/custom-email-templates)
-
----
-
-## Localisation
-
-If Nhost finds a template that matches the recipent user’s locale, the email will be sent in that language. Use two-letter language codes to set the locale.
-English will always be used as the default if another language version is not found.
-
----
-
-## Template variables
-
-Use variables like `${displayName}` to make your templates more dynamic:
-
-```html
-<!-- https://yourapp.com/email-templates/en/email-verify/body.html -->
-<h2>Confirm Email Change</h2>
-
-<p>Hi, ${displayName}! Please click this link to verify your email:</p>
-
-<p>
-  <a href="${displayName}">Verify new email</a>
-</p>
+```
+nhost/emails/{two-letter-language-code}/{email-template}/[subject.txt, body.html]
 ```
 
-These variables can be used either in the template subject or body. The following variables are supported:
+Default templates for English (`en`) and French (`fr`) are automatically generated when the app is initialized with the [CLI](/platform/cli).
+
+## Languages
+
+The user's language is what decides what template to send. The user's language is stored in the `auth.users` table in the `locale` column. This `locale` column contains a two-letter language code in [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) format.
+
+This value is `en` by default for new users.
+
+## Variables
+
+The following variables are available to use in the email templates:
 
 | Variable    | Description                                                                                                                        |
 | ----------- | ---------------------------------------------------------------------------------------------------------------------------------- |
 | link        | The full URL to the target of the transaction. This should be used in the main call to action. This is available in all templates. |
+| serverUrl   | URL of the authentication server                                                                                                   |
+| clientUrl   | URL to your frontend app                                                                                                           |
+| redirectTo  | URL where the user will be redirected to after clicking the link and finishing the action of the email                             |
+| ticket      | Ticket that is used to authorize the link request                                                                                  |
 | displayName | The display name of the user.                                                                                                      |
 | email       | The email of the user.                                                                                                             |
 | locale      | Locale of the user as a two-letter language code. E.g. "en".                                                                       |
 
----
+Use variables like this: `${displayName}` in the email templates.
 
-<!-- ## Developing emails templates locally -->
+**Example:** A email template to verify users' emails:
+
+```html title="nhost/emails/en/email-verify/body.html"
+<h2>Verify You Email</h2>
+
+<p>Hi, ${displayName}! Please click the link to verify your email:</p>
+
+<p>
+  <a href="${link}">Verify Email</a>
+</p>
+```

docs/docs/platform/authentication/index.md

@@ -1,75 +1,28 @@
 ---
-title: Authentication
+title: Nhost Authentication
+sidebar_label: Authentication
 sidebar_position: 1
+image: /img/og/platform/authentication.png
 ---
 
-# Authentication
+Nhost Authentication is a ready-to-use authentication service that is integrated with the [GraphQL API](/platform/graphql) and its permission system from Hasura.
 
-Nhost provides a ready-to-use authentication service, integrated with Nhost JavaScript SDK. This makes it easy to build login flows with multiple sign-in methods.
+Nhost Authentication lets you authenticate users to your app using different sign-in methods:
 
-## Getting Started
-
-Sign up a user with the [Nhost JavaScript SDK](/reference/javascript):
-
-```js
-import { NhostClient } from '@nhost/nhost-js';
-
-const nhost = new NhostClient({
-  backendUrl: 'https://[app-subdomain].nhost.run',
-});
-
-await nhost.auth.signUp({
-  email: 'joe@nhost.io',
-  password: 'secret-password',
-});
-```
+- [Email and Password](/platform/authentication/sign-in-with-email-and-password)
+- [Magic Link](/platform/authentication/sign-in-with-magic-link)
+- [Phone Number (SMS)](/platform/authentication/sign-in-with-phone-number-sms)
+- [Google](/platform/authentication/sign-in-with-google)
+- [Facebook](/platform/authentication/sign-in-with-facebook)
+- [GitHub](/platform/authentication/sign-in-with-github)
+- [LinkedIn](/platform/authentication/sign-in-with-linkedin)
+- [Spotify](/platform/authentication/sign-in-with-spotify)
 
 ## How it works
 
-1. A user signs up and the user information is added to the `auth.users` table.
-2. Nhost returns an [access token](#access-tokens) (JWT token) and the user's information.
-3. The user sends a request to the GraphQL API together with the access token.
-4. The GraphQL API reviews the access token to ensure the user is authorized to send the request.
+1. When a user signs up or is created, the user's information is inserted into the `auth.users` table in your database.
+2. Nhost returns an access token and a refresh token, together with the user's information.
+3. The user sends requests to Nhost services (GraphQL API, Authentication, Storage, Functions) with the access token as a header.
+4. The Nhost services use the user's access token to authorize the requests.
 
-Nhost's authentication service is integrated with your database. All users are stored in the app's database under the `auth` schema and can be accessed using GraphQL:
-
-```graphql
-query {
-  users {
-    id
-    displayName
-    avatarUrl
-    email
-  }
-}
-```
-
-## Tokens
-
-Nhost authentication uses two tokens: Access tokens and refresh tokens.
-
-[Nhost JavaScript SDK](/reference/javascript) automatically handles access and refresh tokens.
-
-### Access tokens
-
-An access token is used to authenticate and authorize a user when doing a GraphQL request.
-
-Access tokens are cryptographically signed and cannot be revoked. They are only valid for 15 minutes. Users can request a new valid access token with a refresh token.
-
-An access token includes a user's ID and roles. Here's an example:
-
-```json
-{
-  "https://hasura.io/jwt/claims": {
-    "x-hasura-user-id": "c8ee8353-b886-4530-9089-631ea7fd4c8a",
-    "x-hasura-default-role": "user",
-    "x-hasura-allowed-roles": ["user", "me"]
-  },
-  "iat": 1595146465,
-  "exp": 1595147365
-}
-```
-
-### Refresh tokens
-
-A refresh token is used to request a new access token. Refresh tokens are long-lived tokens stored in the database.
+Nhost's authentication service is integrated with your database. All users are stored in the `users` table under the `auth` schema.

docs/docs/platform/authentication/oauth-providers/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "OAuth providers",
-  "position": 3
-}

docs/docs/platform/authentication/sign-in-methods.md

@@ -1,86 +0,0 @@
----
-title: 'Sign-in methods'
-sidebar_position: 2
----
-
-Nhost supports a variety of sign-in methods:
-
----
-
-## Email + password
-
-To sign in a user with email and password, the user must first sign up:
-
-```js
-await nhost.auth.signUp({
-  email: 'joe@nhost.io',
-  password: 'secret-password',
-});
-```
-
-If you've turned on email verification in your app's **login settings**, a user will be sent a verification email upon signup. The user must click the verification link in the email before they can log in.
-
-Once a user has been signed up (and optionally verified), you can sign them in:
-
-```js
-await nhost.auth.signIn({
-  email: 'joe@nhost.io',
-  password: 'secret-password',
-});
-```
-
----
-
-## Passwordless email (magic link)
-
-Users can sign in with passwordless email, also called magic link.
-
-When a user signs in with passwordless email, Nhost will create the user if they don't already exist and send an email to the user.
-
-When a user clicks the link in the email, they will be redirected to your app and automatically signed in.
-
-Example in JavaScript:
-
-```js
-await nhost.auth.signIn({
-  email: 'joe@nhost.io',
-});
-```
-
----
-
-## Passwordless SMS
-
-Users can sign in with passwordless SMS. The passwordless SMS sign in method has a flow:
-
-First, "sign in" the user with a phone number.
-
-```js
-await nnhost.auth.signIn({
-  phoneNumber: '+467610337135',
-});
-```
-
-This will create the user if the user does not already exist, and send a One Time Password (OTP) to the user's
-phone number.
-
-Use the OTP to finalize the sign-in:
-
-```js
-await nhost.auth.signIn({
-  phoneNumber: '+467610337135',
-  otp: 'otp-from-sms',
-});
-```
-
----
-
-## Anonymous
-
-A user can be created anonymously. This is useful for offering a limited version of your application to your users without having them sign in first.
-
-An anonymous user gets a user ID with the `anonymous` role. This role can be used to [set permissions in Hasura](/platform/graphql/permissions).
-
-### Deanonymize users
-
-Anonymous users can be converted to "normal" users by deanonymize the user.

docs/docs/platform/authentication/sign-in-methods/1-email-password.mdx

@@ -0,0 +1,44 @@
+---
+title: Sign In with Email and Password
+sidebar_label: Email and Password
+slug: /platform/authentication/sign-in-with-email-and-password
+image: /img/og/platform/sign-in-with-email-and-password.png
+---
+
+Follow this guide to sign in users with email and password.
+
+The email and password sign-in method is enabled by default for all Nhost apps.
+
+## Sign Up
+
+Users must first sign up to be able to sign in with Email and Password.
+
+**Example:** Sign up users using the [Nhost JavaScript client](/reference/javascript).
+
+```js
+await nhost.auth.signUp({
+  email: 'joe@example.com',
+  password: 'secret-password'
+})
+```
+
+If you've turned on email verification in your app's **login settings**, a user will be sent a verification email upon signup. The user must click the verification link in the email before they can sign in.
+
+## Sign In
+
+Once a user has been signed up (and optionally verified), you can sign them in.
+
+**Example:** Sign in users using the [Nhost JavaScript client](/reference/javascript).
+
+```js
+await nhost.auth.signIn({
+  email: 'joe@example.com',
+  password: 'secret-password'
+})
+```
+
+## Verified Emails
+
+You can decide if only verified emails should be able to sign in or not. Modify the **Only allow login for verified emails.** setting in the **Login Settings** section under **Users** in your Nhost app.
+
+An email-verification email is automatically sent to the user during sign-up if your app only allows to sign in users with verified emails. You can also manually send the verification email to the user using [`nhost.auth.sendVerificationEmail()`](/reference/javascript/auth/send-verification-email).

docs/docs/platform/authentication/sign-in-methods/2-magic-link.mdx

@@ -0,0 +1,33 @@
+---
+title: Sign In with Magic Link
+sidebar_label: Magic Link
+slug: /platform/authentication/sign-in-with-magic-link
+image: /img/og/platform/sign-in-with-magic-link.png
+---
+
+Follow this guide to sign in users with Magic Link, also called passwordless email.
+
+The Magic Link sign-in method enables you to sign in users to your app using an email address, without requiring a password.
+
+## Setup
+
+Enable the Magic Link sign-in method in the Nhost dashboard under **Users** -> **Login settings** -> **Magic Link**.
+
+![Magic Link Setup with Nhost](/img/platform/authentication/sign-in-methods/magic-link/magic-link-setup.png)
+
+## Sign In
+
+To sign in users with Magic Link is a two-step process:
+
+1. Send a Magic Link to the user's email address.
+2. The user clicks the Magic Link in their email to sign in to your app.
+
+Use the [Nhost JavaScript client](/reference/javascript) to sign up users with Magic Link in your app:
+
+```js
+nhost.auth.signIn({
+  email: 'joe@example.com'
+})
+```
+
+If you want to change the email for your magic link emails, you can do so by changing the [email templates](/platform/authentication/email-templates).

docs/docs/platform/authentication/sign-in-methods/3-phone-number.mdx

@@ -0,0 +1,59 @@
+---
+title: Sign In with Phone Number (SMS)
+sidebar_label: Phone Number (SMS)
+slug: /platform/authentication/sign-in-with-phone-number-sms
+image: /img/og/platform/sign-in-with-phone-number-sms.png
+---
+
+Follow this guide to sign in users with a phone number (SMS).
+
+## Setup
+
+You need a [Twilio account](https://www.twilio.com/try-twilio) to use this feature because all SMS are sent through Twilio.
+
+Enable the Phone Number (SMS) sign-in method in the Nhost dashboard under **Users** -> **Login settings** -> **Passwordless SMS**.
+
+You need to insert the following settings in the Nhost dashboard from Twilio:
+
+- Account SID
+- Auth Token
+- Messaging Service SID (or a Twilio phone number)
+
+<video width="99%" autoPlay muted loop controls="true" style={{marginBottom: '15px'}}>
+  <source src="/videos/enable-sms-sign-in.mp4" type="video/mp4" />
+</video>
+
+
+## Sign In
+
+To sign in users with a phone number is a two-step process:
+
+1. Send a one-time password (OTP) to the user's phone number.
+2. The user uses the OTP to sign in.
+
+```js
+// Step 1: Send OTP to the user's phone number
+await nhost.auth.signIn({
+  phoneNumber: '+11233213123'
+})
+
+// Step 2: Sign in user using their phone number and OTP
+await nhost.auth.signIn({
+  phoneNumber: '+11233213123'
+  // highlight-next-line
+  otp: '123456',
+})
+```
+
+The first time a user signs in using a phone number, the user is created. That means you don't need to sign up the user before signin in the user.
+
+:::info
+
+Phone numbers should start with `+` (not `00`) to follow the [E.164 formatting standard](https://en.wikipedia.org/wiki/E.164).
+
+:::
+
+
+## Other SMS Providers
+
+We only support Twilio for now. If you want support for another SMS provider, please create an issue on [GitHub](https://github.com/nhost/nhost).

docs/docs/platform/authentication/sign-in-methods/5-google.mdx

@@ -1,7 +1,8 @@
 ---
-title: Sign in with Google
-sidebar_position: 1
+title: Sign In with Google
+sidebar_label: Google
 slug: /platform/authentication/sign-in-with-google
+image: /img/og/platform/sign-in-with-google.png
 ---
 
 Follow this guide to sign in users with Google with your Nhost App.
@@ -15,17 +16,17 @@ Follow this guide to sign in users with Google with your Nhost App.
   />
 </p>
 
-## Sign up for Google
+## Sign Up for Google
 
-- Sign up for [Google Cloud](https://cloud.google.com/free) if you don’t have one already.
+- Sign up for [Google Cloud](https://cloud.google.com/free) if you don't have one already.
 
 ## Create a Google Cloud Project
 
 > 💡 You can skip this step if you already have a Google Cloud project you want to use.
 
-- Create a new Google Cloud project if you don’t already have a project you want to use.
+- Create a new Google Cloud project if you don't already have a project you want to use.
 
-## Configure OAuth consent screen
+## Configure OAuth Consent Screen
 
 - Search for **OAuth consent screen** in the top search bar in the Google Cloud Console.
 - Click on **OAuth consent screen** in the search results.
@@ -33,16 +34,16 @@ Follow this guide to sign in users with Google with your Nhost App.
 
 ## **Edit app registration**
 
-### OAuth consent screen
+### OAuth Consent Screen
 
 - Fill in your App information.
-- Click **SAVE AND CONTINUE.**
+- Click **SAVE AND CONTINUE**.
 
 ### Scopes
 
 - Click **SAVE AND CONTINUE**.
 
-### Test user
+### Test User
 
 - Click **SAVE AND CONTINUE**.
 
@@ -50,7 +51,7 @@ Follow this guide to sign in users with Google with your Nhost App.
 
 - Click **BACK TO DASHBOARD**.
 
-## Create credentials
+## Create Credentials
 
 - Click on **Credentials** under **APIs & Services** in the left menu.
 - Click **+ CREATE CREDENTIALS** and then **OAuth client ID** in the top menu.
@@ -60,17 +61,17 @@ Follow this guide to sign in users with Google with your Nhost App.
 
 ## Configure Nhost
 
-- A modal appears with your Google Client ID and Client secret.
+- A modal appears with your Google Client ID and Client Secret.
 - Copy and paste the **Client ID** and **Client Secret** from Google to your Nhost OAuth settings for Google. Make sure the OAuth provider is enabled in Nhost.
 - Click the checkbox “**I have pasted the redirect URI into Google”**.
 - Click **Confirm settings**.
 
-## Sign In users in your app
+## Sign In Users
 
 Use the Nhost JavaScript client to sign in users in your app:
 
 ```js
 nhost.auth.signIn({
-  provider: 'google',
-});
+  provider: 'google'
+})
 ```

docs/docs/platform/authentication/sign-in-methods/6-facebook.mdx

@@ -1,7 +1,8 @@
 ---
-title: Sign in with Facebook
-sidebar_position: 2
+title: Sign In with Facebook
+sidebar_label: Facebook
 slug: /platform/authentication/sign-in-with-facebook
+image: /img/og/platform/sign-in-with-facebook.png
 ---
 
 Follow this guide to sign in users with Facebook with your Nhost App.
@@ -15,53 +16,53 @@ Follow this guide to sign in users with Facebook with your Nhost App.
   />
 </p>
 
-## Create Facebook account
+## Create Facebook Account
 
 - Create a new [Facebook account](https://www.facebook.com/) if you don't have one already.
 
 ## Create Facebook App
 
 - Go to [Meta for Developers](https://developers.facebook.com/).
-- Click **My Apps** in the top right
+- Click **My Apps** in the top right.
 - Click **Create App** in the top right.
 - Select your **app type** (e.g. Consumer).
 - Click **Next**.
-- Fill in the **Display name.**
+- Fill in the **Display name**.
 - Click **Create app**.
 
 ## Set up Facebook Login
 
-- Click on Add Product in the left menu.
-- Click on Setup in the Facebook login card.
+- Click on **Add Product** in the left menu.
+- Click on **Setup** on the Facebook login card.
 - **Don't** complete the quickstart. Instead, follow the next step.
 - Click on **Settings** under **Facebook Login** in the left menu.
 - Make sure **Embedded Browser OAuth Login** is set to **Yes**.
 - Fill in **Valid OAuth Redirect URIs** with your **OAuth Callback URL** from Nhost.
 - Click **Save changes**.
 
-## Activate Facebook permissions and features
+## Activate Facebook Permissions and Features
 
 To make sure we can fetch all user data (email, profile picture and name). For that we need to enable **email** and **public_profile** permissions.
 
-- Click on App Review and Permission and Features in the left menu
-- Search and for **email** in the **Search Permissions and Features** search box**.**
+- Click on App Review and Permission and Features in the left menu.
+- Search for **email** in the **Search Permissions and Features** search box.
 - Click on Request advanced access and complete the steps.
-- Search and for **public_profile** in the **Search Permissions and Features** search box**.**
+- Search for **public_profile** in the **Search Permissions and Features** search box.
 - Click on **Request advanced access** and complete the steps.
 
 ## Configure Nhost
 
 - Click **Settings** and then **Basic** in the left menu.
-- Copy and paste the **App ID (Client ID)** and **App secret (Client Secret)** from Facebook to your Nhost OAuth settings for Facebook. Make sure the [OAuth provider is enabled in Nhost](/platform/authentication/social-sign-in#enabling-social-sign-in-provider).
+- Copy and paste the **App ID (Client ID)** and **App secret (Client Secret)** from Facebook to your Nhost OAuth settings for Facebook. Make sure the OAuth provider is enabled in Nhost.
 - Click the checkbox “**I have pasted the redirect URI into Facebook”**.
 - Click **Confirm settings**.
 
-## Sign In users in your app
+## Sign In Users
 
 Use the [Nhost JavaScript client](/reference/javascript) to sign in users in your app:
 
 ```js
 nhost.auth.signIn({
-  provider: 'facebook',
-});
+  provider: 'facebook'
+})
 ```

docs/docs/platform/authentication/sign-in-methods/7-github.mdx

@@ -1,7 +1,8 @@
 ---
-title: Sign in with GitHub
-sidebar_position: 3
+title: Sign In with GitHub
+sidebar_label: GitHub
 slug: /platform/authentication/sign-in-with-github
+image: /img/og/platform/sign-in-with-github.png
 ---
 
 Follow this guide to sign in users with GitHub with your Nhost App.
@@ -15,7 +16,7 @@ Follow this guide to sign in users with GitHub with your Nhost App.
   />
 </p>
 
-## Create GitHub account
+## Create GitHub Account
 
 - Create a new [GitHub account](https://github.com/signup) if you don't have one already.
 
@@ -23,30 +24,30 @@ Follow this guide to sign in users with GitHub with your Nhost App.
 
 - Create a new OAuth application [(direct link)](https://github.com/settings/applications/new) by:
   - Click on your profile photo in the top right.
-  - Click on Settings
+  - Click on Settings.
   - In the left menu, click Developer settings at the bottom.
-  - Click on Oauth Apps in the left menu
-  - Click on New OAuth App button in the top right
+  - Click on Oauth Apps in the left menu.
+  - Click on New OAuth App button in the top right.
 
-## GitHub OAuth App information
+## GitHub OAuth App Information
 
-- Fill in Application Name
-- Fill in Homepage URL
-- Fill in **Authorization callback URL** with your OAuth Callbacke URL from Nhost
+- Fill in Application Name.
+- Fill in Homepage URL.
+- Fill in **Authorization callback URL** with your OAuth Callbacke URL from Nhost.
 
 ## Configure Nhost
 
-- Click Generate a new client secret to generate a OAuth client secret.
-- Copy and paste the **Client ID** and **Client Secret** from GitHub to your Nhost OAuth settings for GitHub. Make sure the [OAuth provider is enabled in Nhost](/platform/authentication/social-sign-in#enabling-social-sign-in-provider).
+- Click Generate a new client secret to generate an OAuth client secret.
+- Copy and paste the **Client ID** and **Client Secret** from GitHub to your Nhost OAuth settings for GitHub. Make sure the OAuth provider is enabled in Nhost.
 - Click the checkbox “**I have pasted the redirect URI into GitHub”**.
 - Click **Confirm settings**.
 
-## Sign In users in your app
+## Sign In Users
 
 Use the [Nhost JavaScript client](/reference/javascript) to sign in users in your app:
 
 ```js
 nhost.auth.signIn({
-  provider: 'github',
-});
+  provider: 'github'
+})
 ```

docs/docs/platform/authentication/sign-in-methods/8-linkedin.mdx

@@ -1,7 +1,8 @@
 ---
-title: Sign in with LinkedIn
-sidebar_position: 4
+title: Sign In with LinkedIn
+sidebar_label: LinkedIn
 slug: /platform/authentication/sign-in-with-linkedin
+image: /img/og/platform/sign-in-with-linkedin.png
 ---
 
 Follow this guide to sign in users with LinkedIn with your Nhost App.
@@ -15,11 +16,11 @@ Follow this guide to sign in users with LinkedIn with your Nhost App.
   />
 </p>
 
-## Create LinkedIn account
+## Create LinkedIn Account
 
 - Create a [LinkedIn account](https://linkedin.com/) if you don't have one already.
 
-## Create LinkedIn OAuth App
+## Create a LinkedIn OAuth App
 
 - Go to the [LinkedIn Developer Dashboard](https://www.linkedin.com/developers/apps).
 - Click on Create App in the top right.
@@ -27,10 +28,10 @@ Follow this guide to sign in users with LinkedIn with your Nhost App.
 - Click **“I have read and agree to these terms”**.
 - Click **Create app** in the bottom right.
 
-## LinkedIn OAuth App information
+## LinkedIn OAuth App Information
 
 - Click on **Auth** in the top menu.
-- Click on the **pen icon** under **OAuth 2.0 settings** and right next to **Authorized redirect URLs for your app.**
+- Click on the **pen icon** under **OAuth 2.0 settings** and right next to **Authorized redirect URLs for your app**.
 - Click **Add redirect URL**.
 - Copy and past the **OAuth Callback URL** from Nhost.
 - Click **Update**.
@@ -43,17 +44,17 @@ Follow this guide to sign in users with LinkedIn with your Nhost App.
 
 ## Enable Auth for your LinkedIn OAuth App
 
-- Click on **Products** in the top menu
+- Click on **Products** in the top menu.
 - Click Select on the **Sign In with LinkedIn**.
-- Check the checkbox **I have read and agree to these terms.**
+- Check the checkbox **I have read and agree to these terms**.
 - Click **Add product**.
 
-## Sign In users in your app
+## Sign In Users
 
 Use the [Nhost JavaScript client](/reference/javascript) to sign in users in your app:
 
 ```js
 nhost.auth.signIn({
-  provider: 'linkedin',
-});
+  provider: 'linkedin'
+})
 ```

docs/docs/platform/authentication/sign-in-methods/9-spotify.mdx

@@ -1,7 +1,8 @@
 ---
-title: Sign in with Spotify
-sidebar_position: 5
+title: Sign In with Spotify
+sidebar_label: Spotify
 slug: /platform/authentication/sign-in-with-spotify
+image: /img/og/platform/sign-in-with-spotify.png
 ---
 
 Follow this guide to sign in users with Spotify with your Nhost App.
@@ -15,7 +16,7 @@ Follow this guide to sign in users with Spotify with your Nhost App.
   />
 </p>
 
-## Create Spotify account
+## Create Spotify Account
 
 - Create a new [Spotify account](https://www.spotify.com/) if you don't have one already.
 
@@ -23,13 +24,13 @@ Follow this guide to sign in users with Spotify with your Nhost App.
 
 - Go to the [Spotify Developer Dashboard](https://developer.spotify.com/dashboard/).
 - Click on CREATE AN APP.
-- Fill in a App name and App description
-- Check the box to aggre Spotify's [Developer Terms of Service](https://developer.spotify.com/terms) and [Branding Guidelines](https://developer.spotify.com/branding-guidelines).
+- Fill in an App name and App description.
+- Check the box to agree Spotify's [Developer Terms of Service](https://developer.spotify.com/terms) and [Branding Guidelines](https://developer.spotify.com/branding-guidelines).
 
 ## Configure OAuth Callback URL
 
-- Click EDIT SETTINGS
-- A modal appears
+- Click EDIT SETTINGS.
+- A modal appears.
 - Fill in **Redirect URIs** with your **OAuth Callback URL** from Nhost.
 - Click ADD to add the OAuth callback URL.
 - Click SAVE.
@@ -41,12 +42,12 @@ Follow this guide to sign in users with Spotify with your Nhost App.
 - Click the checkbox “**I have pasted the redirect URI into Spotify”**.
 - Click **Confirm settings**.
 
-## Sign In users in your app
+## Sign In Users
 
 Use the [Nhost JavaScript client](/reference/javascript) to sign in users in your app:
 
 ```js
 nhost.auth.signIn({
-  provider: 'spotify',
-});
+  provider: 'spotify'
+})
 ```

docs/docs/platform/authentication/sign-in-methods/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Sign-In Methods",
+  "position": 2
+}

docs/docs/platform/authentication/sign-in-methods/index.md

@@ -1,25 +1,25 @@
 ---
-title: 'OAuth Providers'
-slug: /platform/authentication/social-sign-in
+title: 'Sign-In Methods'
+slug: /platform/authentication/sign-in-methods
+image: /img/og/platform/sign-in-methods.png
 ---
 
-Nhost Auth supports the following social sign-in providers:
+Nhost Authentication support the following sign-in methods:
 
+- [Email and Password](/platform/authentication/sign-in-with-email-and-password)
+- [Magic Link](/platform/authentication/sign-in-with-magic-link)
+- [Phone Number (SMS)](/platform/authentication/sign-in-with-phone-number-sms)
 - [Google](/platform/authentication/sign-in-with-google)
 - [Facebook](/platform/authentication/sign-in-with-facebook)
 - [GitHub](/platform/authentication/sign-in-with-github)
 - [LinkedIn](/platform/authentication/sign-in-with-linkedin)
 - [Spotify](/platform/authentication/sign-in-with-spotify)
 
----
-
 ## Enabling Social Sign-In Provider
 
 To start with social sign-in, select your app in Nhost Console and go to **Users** → **Login settings**.
 
-You need to set client ID and client secret for each provider that you want to enable.
-
----
+You need to set the Client ID and Client Secret for each provider that you want to enable.
 
 ## Implementing sign-in experience
 
@@ -29,19 +29,17 @@ Here's an example of how to implement sign-in with GitHub:
 
 ```js
 nhost.auth.signIn({
-  provider: 'github',
-});
+  provider: 'github'
+})
 ```
 
-Users are redirected to your Nhost app's **client URL** by default. By default your Nhost app's client URL is set to `http://localhost:3000`. You can change the value of your client URL in the Nhost console by going to **Users** → **Login settings** → **Client URL**.
-
----
+Users are redirected to your Nhost app's **client URL** by default. By default, your Nhost app's client URL is set to `http://localhost:3000`. You can change the value of your client URL in the Nhost console by going to **Users** → **Login settings** → **Client URL**.
 
 ## Provider OAuth scopes
 
 Scopes are a mechanism in OAuth to allow or limit an application's access to a user's account.
 
-By default, Nhost sets the scope to get the name, email and avatar for each user. Editing scope is not currently supported.
+By default, Nhost sets the scope to get the name, email, and avatar url for each user. Editing scope is not currently supported.
 
 ## Provider OAuth Tokens
 

docs/docs/platform/authentication/tokens.mdx

@@ -0,0 +1,74 @@
+---
+title: Tokens
+sidebar_label: Tokens
+sidebar_position: 10
+image: /img/og/platform/tokens.png
+---
+
+Nhost Authentication makes use of two types of tokens:
+
+- **Access token** - used to authenticate a user and access APIs.
+- **Refresh token** - used to get a new access token.
+
+Users get both an access token and a refresh token when they sign in.
+
+:::info
+If you're using the [Nhost JavaScript client](/reference/javascript), all tokens are automatically set and updated for you. But it can still be good to understand how they work.
+:::
+
+## Access Token
+
+An access token (also called [JSON Web Token or JWT](https://en.wikipedia.org/wiki/JSON_Web_Token)) contains information about the user such as the user id. Users send this token to the Nhost services (GraphQL, Auth, Storage, Serverless Functions) to let the services know who's making the request so the services can verify the user's identity and resolve the correct permissions.
+
+The access token is added as an `Authorization` header when making a request, like this:
+
+```http title="Header"
+Authorization: Bearer <access_token>
+```
+
+Here's an example of an encoded access token:
+
+```
+eyJhbGciOiJIUzI1NiJ9.eyJodHRwczovL2hhc3VyYS5pby9qd3QvY2xhaW1zIjp7IngtaGFzdXJhLWFsbG93ZWQtcm9sZXMiOlsibWUiLCJ1c2VyIl0sIngtaGFzdXJhLWRlZmF1bHQtcm9sZSI6InVzZXIiLCJ4LWhhc3VyYS11c2VyLWlkIjoiMTUzODYzZjktZTQwMC00Njg2LTgyMTEtMzI0OGNjYWY2MGJhIiwieC1oYXN1cmEtdXNlci1pcy1hbm9ueW1vdXMiOiJmYWxzZSJ9LCJzdWIiOiIxNTM4NjNmOS1lNDAwLTQ2ODYtODIxMS0zMjQ4Y2NhZjYwYmEiLCJpc3MiOiJoYXN1cmEtYXV0aCIsImlhdCI6MTY1Mzg5MjA5NCwiZXhwIjoxNjUzODkyOTk0fQ.9nVL2Lj8KWBW3WrjJr4tPNH3_29qJKKKSDRNYebhiHI
+```
+
+The decoded payload of this access token is a JSON object that looks like this:
+
+```json
+{
+  "https://hasura.io/jwt/claims": {
+    "x-hasura-allowed-roles": ["me", "user"],
+    "x-hasura-default-role": "user",
+    "x-hasura-user-id": "153863f9-e400-4686-8211-3248ccaf60ba",
+    "x-hasura-user-is-anonymous": "false"
+  },
+  "sub": "153863f9-e400-4686-8211-3248ccaf60ba",
+  "iss": "hasura-auth",
+  "iat": 1653892094,
+  "exp": 1653892994
+}
+```
+
+The token contains information about the user id, default role, allowed roles, if the user is anonymous or not, and other metadata.
+
+The claims under `https://hasura.io/jwt/claims` are the same claims that are used by the GraphQL API to create [permissions](/platform/graphql/permissions). The claims (`x-hasura-*`) are also called permission variables. It's possible to add custom [permission variables](/platform/graphql/permissions#custom-permission-variables).
+
+:::info
+You can manually decode an access token using [JWT.io](https://jwt.io/).
+:::
+
+The token is cryptographically signed by Nhost Authentication, which means that all other Nhost services can trust the information in the token.
+
+:::info
+Use the `NHOST_JWT_SECRET` [system environment variable](/platform/environment-variables#system-environment-variables) to verify access tokens in [Serverless Functions](/platform/serverless-functions). Here's a guide on how to [Get the authenticated user in a Serverless Function](https://github.com/nhost/nhost/discussions/278).
+:::
+
+The access token can not be revoked. Instead, the token is only valid for 15 minutes. The user can get a new access token by using the refresh token.
+
+## Refresh Token
+
+A refresh token is used to request a new access token. Refresh tokens are long-lived tokens stored in the database in the `auth.refresh_tokens` table.
+
+Refresh tokens are valid for 30 days.
+
+To revoke a refresh token, simply delete it from the database.

docs/docs/platform/authentication/user-management.md

@@ -1,94 +0,0 @@
----
-title: 'User management'
-sidebar_position: 1
----
-
-Users are saved in the database in the `auth.users` table and are accessible via the GraphQL API.
-
----
-
-## Querying users
-
-Example of getting all users in GraphQL:
-
-```graphql
-query {
-  users {
-    id
-    displayName
-    email
-    metadata
-  }
-}
-```
-
-Example of getting one user in GraphQL:
-
-```graphql
-query {
-  user(id: "<user-id>") {
-    id
-    displayName
-    email
-    metadata
-  }
-}
-```
-
----
-
-## Creating users
-
-Users should be created using the sign-up or sign-in flows as described under [sign-in methods](/platform/authentication/sign-in-methods).
-
-**Never** create users directly via GraphQL or database. **Never** modify the `auth.users` table. **Never** modify the GraphQL root queries.
-
-You can update the permissions of the `auth.users` table.
-
----
-
-## Roles
-
-Each user can have one or multiple roles for API requests. You can see the roles of a user and set a default role in Nhost Console under **Users**.
-
-Every GraphQL request is made with a specific role. This role will be used to resolve permissions when querying the database. In other words, every user can have multiple roles, but only one role will be applied for any given GraphQL request.
-
-### Defaults
-
-For new apps, the following roles are available:
-
-- Available roles: `user` and `me`
-- Default role: `user`
-
-### Public role
-
-If the user is not signed in, the `public` role will be used.
-
-### Set request role in GraphQL
-
-When no request role is specified, the user's default role will be used:
-
-```js
-await nhost.graphql.request(QUERY, {});
-```
-
-Make a GraphQL request with the `me` role:
-
-```js
-await nhost.graphql.request(
-  QUERY,
-  {},
-  {
-    headers: {
-      'x-hasura-role': 'me',
-    },
-  },
-);
-```
-
-If the request is not part of the user's roles, the request will fail.
-
----
-## Metadata
-
-Custom additional user information stored in the `metadata` column. Can be any JSON object.

docs/docs/platform/authentication/users.mdx

@@ -0,0 +1,114 @@
+---
+title: Users
+sidebar_label: Users
+sidebar_position: 1
+image: /img/og/platform/users.png
+---
+
+Users are stored in the database in the `users` table in the `auth` schema.
+
+## Get User Information using GraphQL
+
+**Example:** Get all users.
+
+```graphql
+query {
+  users {
+    id
+    displayName
+    email
+    metadata
+  }
+}
+```
+
+**Example:** Get a single user.
+
+```graphql
+query {
+  user(id: "<user-id>") {
+    id
+    displayName
+    email
+    metadata
+  }
+}
+```
+
+## Creating Users
+
+Users should be created using the sign-up or sign-in flows as described under [sign-in methods](/platform/authentication/sign-in-methods).
+
+- **Never** create users directly via GraphQL or database.
+- **Never** modify the `auth.users` table.
+- **Never** modify the GraphQL root queries or fields for any of the tables in the `auth` schema.
+
+You're allowed to:
+
+- Add and remove your GraphQL relationships for the `users` table and other tables in the `auth` schema.
+- Create, edit and delete permissions for the `users` table and other tables in the `auth` schema.
+
+## Roles
+
+Each user can have one or multiple roles for API requests. You can see the roles of a user and set a default role in Nhost Console under **Users**.
+
+Every GraphQL request is made with a specific role. This role will be used to resolve permissions when querying the database. In other words, every user can have multiple roles, but only one role will be applied for any given GraphQL request.
+
+### Default Role
+
+The default role is used when no role is specified in the GraphQL request. By default, users' default role is `user`.
+
+### Allowed Roles
+
+By default, users have two allowed roles:
+
+- `user`
+- `me`
+
+### Public Role
+
+The `public` role is used to resolve GraphQL permissions for unauthenticated users.
+
+### Set Role for GraphQL Requests
+
+When no request role is specified, the user's default role will be used:
+
+```js
+await nhost.graphql.request(QUERY, {})
+```
+
+Make a GraphQL request with the `me` role:
+
+```js
+await nhost.graphql.request(
+  QUERY,
+  {},
+  {
+    headers: {
+      'x-hasura-role': 'me'
+    }
+  }
+)
+```
+
+If the request is not part of the user's allowed roles, the request will fail.
+
+## Metadata
+
+You can store custom information about the user in the `metadata` column of the `users` table. The `metadata` column is of type JSONB so any JSON data can be stored.
+
+This is how you attach custom metadata to a user during sign-up:
+
+```js
+await nhost.auth.signUp({
+  email: 'joe@example.com',
+  password: 'secret-password',
+  options: {
+    metadata: {
+      birthYear: 1989,
+      town: 'Stockholm',
+      likes: ['Postgres', 'GraphQL', 'Hasura', 'Authentication', 'Storage', 'Serverless Functions']
+    }
+  }
+})
+```

docs/docs/platform/cli.mdx

@@ -1,6 +1,7 @@
 ---
 title: 'CLI'
 sidebar_position: 11
+image: /img/og/platform/cli.png
 ---
 
 import Tabs from '@theme/Tabs'

docs/docs/platform/database/event-triggers.mdx

@@ -1,6 +1,7 @@
 ---
 title: 'Event triggers'
 sidebar_position: 2
+image: /img/og/platform/event-triggers.png
 ---
 
 Event Triggers enable you to invoke webhooks when a database event happens. Event Triggers are typically used to do post-processing tasks, using custom backend code, based on database events.

docs/docs/platform/database/index.mdx

@@ -1,6 +1,7 @@
 ---
 title: 'Database'
 sidebar_position: 1
+image: /img/og/platform/database.png
 ---
 
 import Tabs from '@theme/Tabs'

docs/docs/platform/environment-variables.md

@@ -1,15 +1,25 @@
 ---
-title: 'Environment variables'
+title: 'Environment Variables'
 sidebar_position: 9
+image: /img/og/platform/environment-variables.png
 ---
 
-Environment variables are key-value pairs configured outside your source code. They are used to store environment-specific values such as API keys.
+Environment Variables are key-value pairs configured outside your source code. They are used to store environment-specific values such as API keys.
 
----
+You can manage your app's environment variables in Nhost Console under **Variables**. When you define a new variable, you can set one value for **production** and one for **development**.
 
-## System environment variables
+![Environment Variables](/img/platform/environment-variables/environment-variables.png)
 
-System environment variables are automatically available in production and local development. The following system environment variables are available:
+When an environment variable is changed, you must deploy your app again using the [GitHub integration](/platform/github-integration) for the changes to take effect.
+
+Environment Variables are available in:
+
+- Hasura
+- Serverless Functions
+
+## System Environment Variables
+
+System environment variables are automatically available in production and during development. The following system environment variables are available:
 
 - `NHOST_ADMIN_SECRET`
 - `NHOST_WEBHOOK_SECRET`
@@ -26,19 +36,9 @@ jwrsszdp2dhkjxsh4df69pzm3ja6ukedx8ja43zdt6q9kgbgg2w9vh2sedeppukud9a2qzy29v3afdn7
 NHOST_BACKEND_URL=https://xxxxxxx.nhost.run
 ```
 
----
+## Development Environment Variables
 
-## Custom environment variables
-
-You can manage your app's environment variables in Nhost Console under **Variables**. When you define a new variable, you can set a different value for production and local development.
-
-When an environment variable is changed, you must deploy your app again for the changes to take effect.
-
----
-
-## Local environment variables
-
-When developing locally, environment variables set in `.env.development` are available in your local environment. There are two ways to manage them:
+When developing locally using the [CLI](/platform/cli), environment variables set in `.env.development` are available in your local environment. There are two ways to manage them:
 
 1. Edit the `.env.development` file manually.
 2. Add development environment variables in the Nhost Console and use `nhost env pull` to sync them. This way, your team members will also have access to the same variables.

docs/docs/platform/github-integration.md

@@ -1,36 +0,0 @@
----
-title: 'GitHub integration'
-sidebar_position: 10
----
-
-You can connect your Nhost app to a GitHub repository. When you do this, any updates you push to your code will automatically be deployed.
-
----
-
-## Production branch
-
-Nhost will only deploy your production branch. By default this will match the default branch set on GitHub (usually `main`). You can change this option on Nhost Console.
-
-Specifically, the following will be deployed:
-
-- Database migrations
-- Hasura metadata
-- Serverless functions
-
----
-
-## Workflow
-
-Create a new Nhost app. Then use [Nhost CLI](/platform/cli) to initialize your Nhost app locally.
-
-The workflow is as follows:
-
-1. Make local changes (migrations, metadata, functions)
-2. Push changes to GitHub
-3. Nhost automatically applies changes to production
-
-**You should always follow this workflow.** Never change things in production directly because that will make the local and production state to be out of sync.
-
-### Local and production branches out of sync
-
-If you do changes directly in your production backend, say you add a new table in production, your migrations in your repository will be out of sync. In such a case, we recommend to start over with `nhost init --remote` to get into a consistent state.

docs/docs/platform/github-integration.mdx

@@ -0,0 +1,57 @@
+---
+title: 'GitHub Integration'
+sidebar_position: 10
+image: /img/og/platform/github-integration.png
+---
+
+The GitHub integration allows you to automatically deploy your Nhost app when on push and merge to a GitHub repository that is connected to your Nhost app.
+
+When a GitHub repository is connected to a Nhost app, Nhost automatically deploys changes when you push code to the repo.
+
+The following things are deployed:
+
+- Database migrations
+- Hasura metadata
+- Serverless Functions
+
+:::info
+Settings in `nhost/config.yaml` are **not** deployed. That means you need to manually sync settings between local and remote environments between the CLI and Nhost Cloud.
+:::
+
+## Connecting a GitHub repository
+
+1. From your Nhost app, click **Connect to Github**.
+
+![Connect to GitHub](/img/architecture/cli/connect-repo-step-1.png)
+
+2. **Install the Nhost app** on your Github account.
+
+![Install the Nhost GitHub App](/img/architecture/cli/connect-repo-step-2.png)
+
+3. **Connect** your Github repository.
+
+![Select reopsitoru](/img/architecture/cli/connect-repo-step-3.png)
+
+## Deployment Branch
+
+Nhost only deploys your **deployment branch**. By default, your deployment branch matches the default branch set on GitHub (usually `main`).
+
+You can change the deployment branch by clicking **Edit** next to the repository in your Nhost app's dashboard.
+
+You can have multiple Nhost apps connected to the same GitHub repository and use different deployment branches (e.g., `main` and `staging`).
+
+<center>
+  <img src="/img/platform/github-integration/deployment-branch.png" alt="drawing" width="50%" />
+</center>
+
+## Base Directory
+
+If your Nhost app is not at the root of your git repository, you can set a custom base directory. The base directory is where the `nhost` and `functions` directories are located. In other words, the base directory is the **parent directory** of the `nhost` and `functions` directories.
+
+<center>
+  <img src="/img/platform/github-integration/base-directory.png" alt="drawing" width="50%" />
+</center>
+
+## Next Steps
+
+- Learn how to [use the CLI to deploy your Nhost app](/platform/overview/get-started-with-nhost-cli).

docs/docs/platform/graphql/index.md

@@ -1,43 +1,55 @@
 ---
 title: 'GraphQL'
 sidebar_position: 1
+image: /img/og/platform/graphql.png
 ---
 
-Every Nhost app has its own autogenerated GraphQL API. The GraphQL API is based on the tables and columns in the [Postgres database](/platform/database) and is instantly available. It's [Hasura GraphQL engine](https://github.com/hasura/graphql-engine) that powers the GraphQL API.
+A GraphQL API is automatically and instantly available based on the tables and columns in your [database](/platform/database).
 
-The GraphQL API is available at: `https://[subdomain].nhost.run/v1/graphql`.
+The GraphQL API has instant support for inserting, selecting, updating, and deleting data, which usually account for 80% of all operations you need in your app.
+
+It's the [Hasura GraphQL engine](https://github.com/hasura/graphql-engine) that powers the GraphQL API which means that all documentation about [queries](https://hasura.io/docs/latest/graphql/core/databases/postgres/queries/index/), [mutations](https://hasura.io/docs/latest/graphql/core/databases/postgres/mutations/index/), and [subscriptions](https://hasura.io/docs/latest/graphql/core/databases/postgres/subscriptions/index/) from Hasura's documentation is applicable.
 
 ## What is GraphQL
 
-GraphQL is a query language for APIs that prioritize developer experience. The GraphQL API can be used to both fetch (query) and modify (mutation) data. GraphQL is especially powerful for frontend developers who wants to build products fast.
+GraphQL is a query language for APIs that prioritize developer experience. The GraphQL API can be used to both fetch (query) and modify (mutation) data. GraphQL is especially powerful for frontend developers who want to build products fast.
 
-### GraphQL clients for JavaScript
+GraphQL has grown rapidly in popularity in the last years and has been adopted by almost all major tech companies such as Facebook, GitHub, and Stripe.
 
-To interact with the GraphQL API it's recommended to use a GraphQL client:
+Building your GraphQL API is a lot of work, but with Nhost it's easy because every table and column is instantly available in your GraphQL API.
 
-- [Apollo Client](https://www.apollographql.com/docs/react/)
+## Endpoint
+
+The GraphQL API is available at `https://[subdomain].nhost.run/v1/graphql` When using the [CLI](/platform/cli) the GraphQL API is available at `http://localhost:1337/v1/graphql`.
+
+## GraphQL Clients for JavaScript
+
+The Nhost JavaScript client comes with a simple [GraphQL client](/reference/javascript/nhost-js/graphql) that works well for the backend or simple applications.
+
+When building more complex frontend applications, we recommend using a more advanced GraphQL client such as:
+
+- [Apollo Client](https://www.apollographql.com/docs/react/):
+  - [Nhost Apollo Client for React](/reference/react/apollo)
+  - [Nhost Apollo Client for Vue](/reference/vue/apollo)
 - [URQL](https://formidable.com/open-source/urql/)
 - [React Query](https://react-query.tanstack.com/graphql)
 - [SWR](https://swr.vercel.app/docs/data-fetching#graphql)
 
-It's also possible to use the built-in [GraphQL client](/reference/javascript/nhost-js/graphql) in the Nhost JavaScript client.
-
----
-
-## GraphQL Query
+## Queries
 
 A GraphQL query is used to fetch data from the database.
 
-Here is a GraphQL query that selects `title`, `body`, and `isCompleted` for every row in a `todos` table.
+:::tip
+The [Queries documentation from Hasura](https://hasura.io/docs/latest/graphql/core/databases/postgres/queries/index/) is applicable since Nhost uses Hasura's GraphQL Engine for your app.
+:::
 
-**Example:**
+**Example:** A GraphQL query to select `title`, `body`, and `isCompleted` for every row in the `todos` table.
 
-```graphql
+```graphql title=GraphQL
 query GetTodos {
   todos {
     title
     body
-    done
     isCompleted
   }
 }
@@ -45,7 +57,7 @@ query GetTodos {
 
 **Response:**
 
-```json
+```json title=Response
 {
   "data": {
     "todos": [
@@ -61,11 +73,11 @@ query GetTodos {
 
 #### Filtering and sorting
 
-GraphQL queries More complex queries utilize filters, limits, sorting and aggregation.
+More complex queries utilize filters, limits, sorting, and aggregation.
 
-This GraphQL query selects all items in the todo table that aren't done, with the total number of comments and the last five comments:
+Here's an example of a more complex GraphQL query that selects all items in the `todos` table that aren not completed, with the total number of comments and the last five comments:
 
-```graphql
+```graphql title=GraphQL
 query GetTodosWithLatestComments {
   todos(where: { isCompleted: { _eq: false } }) {
     title
@@ -84,15 +96,13 @@ query GetTodosWithLatestComments {
 }
 ```
 
-Response:
-
-```json
+```json title=Response
 {
   "data": {
     "todos": [
       {
         "title": "Delete Firebase account",
-        "body": "Migrate to nhost.io",
+        "body": "Migrate to Nhost",
         "comments": [
           {
             "comment": "Let's do this",
@@ -116,137 +126,121 @@ Response:
 }
 ```
 
-:::tip
-Check out Hasura's documentation for full documentation for GraphQL queries.
+## Mutations
 
-[Hasura GraphQL queries](https://hasura.io/docs/latest/graphql/core/databases/postgres/queries/index/)
+A GraphQL mutation is used to insert, upsert, update, or delete data.
+
+:::tip
+The [Mutations documentation from Hasura](https://hasura.io/docs/latest/graphql/core/databases/postgres/mutations/index/) is applicable since Nhost uses Hasura's GraphQL Engine for your app.
 :::
 
----
+### Insert Data
 
-## GraphQL mutations
+**Example:** A GraphQL mutation to insert data:
 
-Mutations are used to insert, update or delete data.
-
-### Inserting data
-
-GraphQL mutation to insert data looks like this:
-
-```graphql
+```graphql title=GraphQL
 mutation InsertTodo {
   insert_todos(
-    objects: [
-      {
-        title: "Delete Firebase account"
-        body: "Migrate to nhost.io"
-        done: false
-      }
-    ]
+    objects: [{ title: "Delete Firebase account", body: "Migrate to Nhost", isCompleted: false }]
   ) {
     returning {
       id
       title
       body
-      done
+      isCompleted
     }
   }
 }
 ```
 
-Response:
-
-```json
+```json title=Reponse
 {
   "data": {
     "insert_todos": [
       {
         "id": "bf4b01ec-8eb6-451b-afac-81f5058ce852",
         "title": "Delete Firebase account",
-        "body": "Migrate to nhost.io",
-        "done": true
+        "body": "Migrate to Nhost",
+        "isCompleted": true
       }
     ]
   }
 }
 ```
 
-### Inserting multiple rows
+#### Insert Multiple Rows
 
-Multiple rows can be inserted with an array as the objects property. This can be useful for migrating data.
+Use an array of objects to insert multiple rows at the same time.
 
-```graphql
+**Example:** Insert multiple Todos at the same time:
+
+```graphql title=GraphQL
 mutation InsertMultipleTodos {
   insert_todos(
     objects: [
-      {
-        title: "Build the front end"
-        body: "Mobile app or website first?"
-        done: false
-      }
-      { title: "Launch 🚀", body: "That was easy", done: false }
+      { title: "Build the front end", body: "Mobile app or website first?", isCompleted: false }
+      { title: "Launch 🚀", body: "That was easy", isCompleted: false }
     ]
   ) {
     returning {
       id
       title
       body
-      done
+      isCompleted
     }
   }
 }
 ```
 
----
-
-## Updating data
+### Update Data
 
 You can update existing data with an update mutation. You can update multiple rows at once.
 
-To mark a todo as done, you would use a mutation like this:
+**Example:** A GraphQL mutation to mark a atodo item as completed:
 
-```graphql
-mutation UpdateTodoStatus($id: uuid, $done: Boolean) {
-  update_todos(_set: { done: $done }, where: { id: { _eq: $id } }) {
+```graphql title=GraphQL
+mutation UpdateTodoStatus($id: uuid, $isCompleted: Boolean) {
+  update_todos(_set: { isCompleted: $isCompleted }, where: { id: { _eq: $id } }) {
     returning {
       body
-      done
+      isCompleted
       title
     }
   }
 }
 ```
 
-Notice how we are using variables as the `id` and `done` variables, which lets us mark any todo as done or not done with the same mutation.
+Notice how we are using variables as the `id` and `isDone` variables, which lets us mark any todo as completed or not completed with the same mutation.
 
-### Upsert
+### Upsert Data
 
-When you're not sure if a piece of data already exists, use an upsert mutation. It will either insert an object into the database if it doesn't exist, or update the fields of an existing object.
+When you're not sure if a piece of data already exists, use an upsert mutation. It will either insert an object into the database if it doesn't exist or update the fields of an existing object.
 
 Unlike for update mutations, you must pass all columns to an upsert mutation.
 
-In order to convert your insert mutation to an upsert, you need to add an `on_conflict` property. This tells Hasura which fields it should use to find duplicates.
+To convert your insert mutation to an upsert, you need to add an `on_conflict` property for the GraphQL API to know which fields it should use to find duplicates.
 
 The `on_conflict` key must be a unique key in your database:
 
-```graphql
+```graphql title=GraphQL
 mutation UpsertTodo {
   insert_todos(
-    objects: { title: "Delete Firebase account", body: "...", done: false }
-    on_conflict: { constraint: todos_title_key, update_columns: [title, done] }
+    objects: { title: "Delete Firebase account", body: "...", isCompleted: false }
+    on_conflict: { constraint: todos_title_key, update_columns: [title, isCompleted] }
   ) {
     returning {
       id
       title
       body
-      done
+      isCompleted
     }
   }
 }
 ```
 
-This will update the body and done properties of the todo titled `"Delete Firebase account"`.
+This will update `body` and `done` of the todos with the title "Delete Firebase account".
 
-### Conditional upsert
+#### Conditional upsert
 
 Inserts a new object into a table, or if the primary key already exists, updates columns if the `where` condition is met.
 
@@ -272,7 +266,7 @@ mutation UpsertTodo {
 }
 ```
 
-### Ignore mutation on conflict
+#### Ignore mutation on conflict
 
 If `update_columns` is empty, the mutation will be ignored if the object already exists.
 
@@ -296,13 +290,11 @@ mutation InsertTodo {
 
 In this case, the insert mutation is ignored because a todo with the `title` `"Delete Firebase account"` already exists, and `update_columns` is empty.
 
----
-
-## Deleting data
+### Delete Data
 
 To delete your data, use a delete mutation. This mutation will delete all `todos` where `done` is `true`:
 
-```graphql
+```graphql title="GraphQL mutation"
 mutation DeleteDoneTodos {
   delete_todos(where: { done: { _eq: true } }) {
     affected_rows
@@ -316,9 +308,9 @@ If you have set up foreign keys which will restrict a delete violation, you will
 
 ## Subscriptions
 
-GraphQL subscriptions are queries that use WebSockets to keep the data up to date in your app in real time:
+GraphQL subscriptions are queries that use WebSockets to keep the data up to date in your app in real-time. You only have to change `query` to `subscription` when constructing the GraphQL document:
 
-```graphql
+```graphql title="GraphQL subscription"
 subscription GetTodos {
   todos {
     title

docs/docs/platform/graphql/permissions.md

@@ -1,35 +1,102 @@
 ---
 title: 'Permissions'
 sidebar_position: 1
+image: /img/og/platform/permissions.png
 ---
 
-The GraphQL API is protected by a role-based permission system based on access tokens. Permissions are handled on a per-table basis in Hasura Console.
+The GraphQL API is protected by a role-based permission system.
 
----
+For each **role**, you create **rules** for the **select**, **insert**, **update**, and **delete** operations.
 
-## How it works
+**Example:** Let's say you have a `posts` table, and you want users to only access their own posts. This is how you would do it:
 
-Upon login a user gets an access token which is then being sent with every GraphQL API request to authenticate the user and apply the correct permissions when reading and writing data.
+```sql title="Posts Table"
+CREATE TABLE "public"."posts" (
+  "id" serial NOT NULL PRIMARY KEY,
+  "title" text NOT NULL,
+  "user_id" uuid NOT NULL,
+);
+```
 
-In Hasura you can specify what a user is allowed to do. A common use case is to allow a user to read something if `user_id` in the database is equal to the user ID in the access token.
+```json title="Hasura Permission Rule"
+{
+  "user_id": {
+    "_eq": "X-Hasura-User-Id"
+  }
+}
+```
 
-Access token data is included as headers with every API request. By default, every user has the following session variables that can be used when creating permission rules:
+The rule above make it so users can only select posts where the value of `user_id` is equal (`_eq`) to their user ID (`x-hasura-user-id`).
 
-- `x-hasura-user-id`
-- `x-hasura-allowed-roles`
-- `x-hasura-default-role`
+## What is `x-hasura-user-id`?
 
-The default role for users is `user`.
+`x-hasura-user-id` is a permission variable that is used to create permission rules in Hasura. The permission variable comes from the [access token](platform/authentication#access-tokens) that signed-in users have.
 
-> You can also [add custom permission](#add-permission-variables) varaibles if you need to.
+The `x-hasura-user-id` permission variable is always available for all signed-in users. You can add [custom permission variables](#custom-permission-variables) to create more complex permission rules unique to your app.
 
----
+## Custom Permission Variables
 
-## Select permissions
+You can add custom permission variables in the Nhost console under **Users** and then **Roles and permissions**. These permission variables are then available when creating permissions for your GraphQL API in the Hasura console.
+
+![Permission Variables](/img/platform/permission-variables-preview.svg)
+
+**Example:**: Let's say you add a new permission variable `x-hasura-organisation-id` with path `user.profile.organisation.id`. This means that Nhost Auth will get the value for `x-hasura-organisation-id` by internally generating the following GraphQL query:
+
+```graphql
+query {
+  user(id: "<User's ID>") {
+    profile {
+      organisation {
+        id
+      }
+    }
+  }
+}
+```
+
+## Roles
+
+Every GraphQL request is resolved based on a **single role**. Roles are added in the Hasura Console when selecting a table and clicking **Permisisons**.
+
+If the user is not signed in, the GraphQL API resolves permissions using the `public` role.
+
+### Default Role
+
+Every user have one **default role**. The default role is used to resolve permissions if no other role is specified using the `x-hasura-role` header in the GraphQL request. By default, the default role is `user` for signed-in users.
+
+### Allowed Roles
+
+Every user also has a one or more **allowed roles**. Allowed roles are roles that the user is allowed to use to override the default role when making a GraphQL request. To override the default role, add a header `x-hasura-role = <role>` to the GraphQL request.
+
+## Public Access
+
+GraphQL requests from unauthenticated users are resolved using the `public` role.
+
+## Insert permissions
+
+![Insert permissions](/img/graphql/permissions/insert-permissions.png)
+
+Here is a popular approach for insert permission for signed-in users.
+
+1. At the top of the page, click **"insert"** on the **"user"** role.
+2. Select **"Without any checks"**.
+3. Select the columns you want to allow users to insert.
+
+In our example, we only mark `title`, because the other columns should not be inserted by the user.
+
+We also want every new record's `user_id` value to be set to the ID of the user making the request. We can tell Hasura to do this using **Column presets**.
+
+4. Under **Column presets**, set `user_id` to `x-hasura-user-id`.
+
+Now, users who are signed-in can insert posts. Users can add a title when inserting a post. The post's `id` is automatically generated by the database and the `user_id` is automatically set to the user's id using the `user_id = x-hasura-user-id` column preset.
+
+## Select, Update and Delete Permissions
+
+Select, update, and delete permissions usually follows the same pattern. Here's an example of how to add select permissions:
 
 ![Select permissions](/img/platform/permission-select.png)
 
-One of the most common permission requirements is that logged-in users should only be able to read their own data. This is how it can be achieved with Hasura.
+One of the most common permission requirements is that signed-in users should only be able to read their own data. This is how to do that:
 
 1. Go to **Hasura Console**
 1. Select your table and open the **Permissions** tab
@@ -46,40 +113,14 @@ To further refine this rule, do the following:
 
 Note that if you add columns to your table table later, you must check new columns here to let users read them.
 
----
+## Next Steps
 
-## Insert permissions
+Hasura has more in-depth documentation related to permissions that you can learn from:
 
-![Insert permissions](/img/platform/permission-insert.png)
-
-Here is a popular approach for insert permission for logged in users.
-
-1. At the top of the page, click **"insert"** on the **"user"** role.
-1. Select **"Without any checks"**.
-1. Select the columns you want to allow users to insert.
-
-In our example, we only select `name`, because we want all other other columns to be filled with default values.
-
-We also want every new record's `user_id` value to be set to the ID of the user making the request. We can tell Hasura to do this with **column presets**.
-
-1. Under column presets, set `user_id` to `x-hasura-user-id`.
-
-## Add Permission Variables
-
-You can add extra permission variables in the Nhost console under **Users** and then **Roles and permissions**. These permission variables are then available when creating permissions for your GraphQL API in the Hasura console.
-
-![Permission Variables](/img/platform/permission-variables-preview.svg)
-
-As an example, let's say you add a new permission variable `x-hasura-organisation-id` with path `user.profile.organisation.id`. This means that Nhost Auth will get the value for `x-hasura-organisation-id` by internally generating the following GraphQL query:
-
-```graphql
-query {
-  user(id: "<user-id>") {
-    profile {
-      organisation {
-        id
-      }
-    }
-  }
-}
-```
+- [Authorization / Access control](https://hasura.io/docs/latest/graphql/core/auth/authorization/index/)
+- [Access control basics](https://hasura.io/docs/latest/graphql/core/auth/authorization/basics/)
+- [Roles & Session variables](https://hasura.io/docs/latest/graphql/core/auth/authorization/roles-variables/)
+- [Inherited roles](https://hasura.io/docs/latest/graphql/core/auth/authorization/inherited-roles/)
+- [Configuring permission rules](https://hasura.io/docs/latest/graphql/core/auth/authorization/permission-rules/)
+- [Access control examples](https://hasura.io/docs/latest/graphql/core/auth/authorization/common-roles-auth-examples/)
+- [Multiple column + row permissions for the same role](https://hasura.io/docs/latest/graphql/core/auth/authorization/role-multiple-rules/)

docs/docs/platform/overview/architecture.md

@@ -1,6 +1,7 @@
 ---
 title: 'Architecture'
 sidebar_position: 2
+image: /img/og/platform/architecture.png
 ---
 
 Nhost is a backend as a service built with open source tools to provide developers the general building blocks required to build fantastic digital apps and products.

docs/docs/platform/overview/get-started-with-nhost-cli.md

@@ -1,6 +1,7 @@
 ---
 title: 'Get Started with Nhost CLI'
 sidebar_position: 2
+image: /img/og/platform/get-started-with-nhost-cli.png
 ---
 
 # Get started with Nhost CLI

docs/docs/platform/quickstarts/nextjs.mdx

@@ -1,6 +1,7 @@
 ---
 title: 'Quickstart: Next.js'
 sidebar_position: 2
+image: /img/og/platform/quickstart-nextjs.png
 ---
 
 import Tabs from '@theme/Tabs'
@@ -672,7 +673,8 @@ export function UserProvider({ children = null }) {
   const id = useUserId()
   // highlight-start
   const { loading, error, data } = useQuery(GET_USER_QUERY, {
-    variables: { id }
+    variables: { id },
+    skip: !id
   })
   const user = data?.user
   // highlight-end

docs/docs/platform/quickstarts/react.mdx

@@ -1,6 +1,7 @@
 ---
 title: 'Quickstart: React'
 sidebar_position: 1
+image: /img/og/platform/quickstart-react.png
 ---
 
 import Tabs from '@theme/Tabs'
@@ -35,6 +36,7 @@ You'll need **Node.js** version 14 or later: [install it from here](https://node
 import CreateApp from '@site/src/components/create-nhost-app.mdx'
 
 <CreateApp />
+
 :::info
 You can also connect your Nhost app to a GitHub repository. When you do this, any updates you push to your code will automatically be deployed. [Learn more](https://docs.nhost.io/platform/github-integration).
 :::
@@ -636,7 +638,8 @@ const Layout = () => {
   const id = useUserId()
   // highlight-start
   const { loading, error, data } = useQuery(GET_USER_QUERY, {
-    variables: { id }
+    variables: { id },
+    skip: !id
   })
   const user = data?.user
   // highlight-end

docs/docs/platform/quickstarts/redwoodjs.mdx

@@ -1,6 +1,7 @@
 ---
 title: 'Quickstart: RedwoodJS'
 sidebar_position: 3
+image: /img/og/platform/quickstart-redwoodjs.png
 ---
 
 import Tabs from '@theme/Tabs'
@@ -1089,7 +1090,8 @@ export function UserProvider({ children = null }) {
   const { userMetadata } = useAuth()
 
   const { loading, error, data } = useQuery(GET_USER_QUERY, {
-    variables: { id: userMetadata?.id }
+    variables: { id: userMetadata?.id },
+    skip: !userMetadata?.id
   })
   const user = data?.user
 

docs/docs/platform/quickstarts/vue.mdx

@@ -1,6 +1,7 @@
 ---
 title: 'Quickstart: Vue'
 sidebar_position: 3
+image: /img/og/platform/quickstart-vue.png
 ---
 
 import Tabs from '@theme/Tabs'

docs/docs/platform/serverless-functions.mdx

@@ -1,6 +1,7 @@
 ---
 title: 'Serverless Functions'
 sidebar_position: 8
+image: /img/og/platform/serverless-functions.png
 ---
 
 import Tabs from '@theme/Tabs'
@@ -55,7 +56,7 @@ You **MUST** install `express` locally in the base directory of your Nhost app.
 ```bash
 npm install -d express
 # or yarn
-yarn add -d express
+yarn add -D express
 ```
 
 :::
@@ -80,7 +81,7 @@ Here's an example of four serverless functions with their files and their HTTP e
 | `functions/index.js`        | `https://[app-subdomain].nhost.run/v1/functions/`             |
 | `functions/users/index.ts`  | `https://[app-subdomain].nhost.run/v1/functions/users`        |
 | `functions/users/active.ts` | `https://[app-subdomain].nhost.run/v1/functions/users/active` |
-| `functions/my-copmany.js`   | `https://[app-subdomain].nhost.run/v1/functions/my-company`   |
+| `functions/my-company.js`   | `https://[app-subdomain].nhost.run/v1/functions/my-company`   |
 
 ---
 

docs/docs/platform/storage.md

@@ -1,101 +0,0 @@
----
-title: 'Storage'
-sidebar_position: 7
----
-
-Nhost stores and serves files of any type in your backend.
-
-The metadata for files hosted on Nhost is available in the `storage.files` table of your database, and thus is also accessible in the GraphQL API. This allows you to fetch a list of files to display in your frontend, for example.
-
----
-
-## Buckets
-
-Buckets are used to organize files and group permissions for files. Buckets are stored in the `storage.buckets` table in your database, and accessible via `buckets` in your GraphQL API.
-
-Buckets are a way to segment permissions for file type, minimum and maximum file size, cache control, download expiration, and if pre-signed URLs are allowed.
-
----
-
-## Permissions
-
-Upload, read and delete permissions for files are managed through Hasura's permission system, just like other permissions.
-
-### Upload
-
-To upload a file, a user must have the `insert` permission to the `storage.files` table. The following columns must be checked:
-
-- `id`
-- `bucket_id`
-- `name`
-- `mime_type`
-
-### Select
-
-To read and download a file, a user must have the `select` permission to the `storage.files` table. Only the `id` column is required, but as a best practice you should allow reading all columns.
-
-### Delete
-
-To delete a file, a user must have the `delete` permission to the `storage.files` table.
-
-> Updating an existing file is not supported. Delete and upload a new file instead.
-
----
-
-## Accessing files
-
-To access a file, make an HTTP GET request to `/v1/storage/files/{id}` with the `Authorization` header set with the access token returned by Nhost Auth. Alternatively, you can create a pre-signed URL by making an HTTP GET request to `/v1/storage/files/{id}/presignedurl` with the `Authorization` header set with the access token returned by Nhost Auth.
-
-If the file is publicly accessible, there is no need to set the `Authorization` header. The file is publicly accessible if the permission for the `public` role is set to allow reading the file metadata in Hasura for the `storage.files` table.
-
-### Pre-signed URL
-
-A pre-signed URL is a unique URL that is used to access the file. Anyone with the pre-signed URL can access the file without exceptions. The URL is generated by Nhost Storage API and is valid for a limited time. The time limit of the pre-signed URL is determined by the `download_expiration` column in the bucket where the file is.
-
-Using pre-signed URL is a good way to share files to people who don't have access to the file directly, or to access the file without setting the `Authorization` headers, for example when displaying the file in an `img` tag.
-
-## Example with GraphQL
-
-Let's say we're building a CRM and we want to store files for each customer.
-
-In our CRM, we have the following two tables:
-
-- `customers`
-  - `id`
-  - `name`
-  - `address`
-- `customer_files`
-  - `id`
-  - `customer_id` (foreign key to `customers.id`)
-  - `file_id` (foreign key to `storage.files.id`)
-
-We also have created relationships between `customers` and `customer_files` and between `customer_files` and `storage.files`.
-
-We can now query the data with the following query:
-
-```graphql
-query {
-  customer {
-    # customer table
-    id
-    name
-    customer_files {
-      # customer_files table
-      id
-      file {
-        # storage.files table
-        id
-        name
-        size
-        mime_type
-      }
-    }
-  }
-}
-```
-
-To upload a file, this is what we do;
-
-1. Upload a file
-2. Get the `id` of the file. The server returns this.
-3. Insert the `id` of the file together with the customer's id into the `customer_files` table.

docs/docs/platform/storage.mdx

@@ -0,0 +1,244 @@
+---
+title: 'Storage'
+sidebar_position: 7
+image: /img/og/platform/storage.png
+---
+
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
+
+Nhost Storage enables you to let your users upload and download files. Nhost Storage is integrated with the [GraphQL API](/platform/graphql) and its permission system from Hasura.
+
+## Files
+
+Files can be of any type, such as images, documents, videos, etc.
+
+File metadata is stored in your database in the `files` table in the `storage` schema. This means that file metadata is available in your GraphQL API, which makes it easy to:
+
+- Read file metadata via GraphQL.
+- Manage file permissions (in Hasura).
+- Create GraphQL relationships between files and your database tables.
+
+:::warning
+Don't modify the database schema, nor GraphQL root fields in any of the tables in the `storage` schema. 
+:::
+
+:::tip
+You're allowed to add and modify the following:
+
+- GraphQL Relationships
+- Permissions
+:::
+
+
+### Upload File
+
+When a file is uploaded, the file metadata is inserted into the `storage.files` table and a file `id` is returned. The file's `id` is how you reference and access the file. It's recommended to create your own table to store the uploaded file `id`, to access the file in the future.
+
+<Tabs groupId="http-sdk">
+  <TabItem value="js" label="JavaScript">
+
+```js
+await nhost.storage.upload({ file })
+```
+
+Learn more about [`upload()`](/reference/javascript/storage/upload).
+
+  </TabItem>
+  <TabItem value="http" label="HTTP" default>
+
+```http
+POST /v1/storage/files HTTP/1.1
+```
+
+  </TabItem>
+</Tabs>
+
+### Download File
+
+There are two ways to download a file:
+
+- Public URL.
+- Pre-signed URL.
+
+#### Public URL
+
+Public URLs are available for both unauthenticated and authenticated users. Permissions are checked for every file request. To get a public URL for a file, you would normally use the `public` role to set **select** permissions.
+
+<Tabs groupId="http-sdk">
+  <TabItem value="js" label="JavaScript">
+
+```js
+await nhost.storage.getPublicUrl({
+  fileId: '<File-ID>'
+})
+```
+
+Learn more about [`getPublicUrl()`](/reference/javascript/storage/get-public-url).
+
+  </TabItem>
+  <TabItem value="http" label="HTTP" default>
+
+```http
+GET /v1/storage/files/{file_id} HTTP/1.1
+```
+
+  </TabItem>
+</Tabs>
+
+#### Pre-signed URL
+
+Pre-signed URLs work a bit differently from public URLs.
+
+The permission check only happens when the user requests a pre-signed URL. Once a pre-signed URL is generated, anyone with the pre-signed URL can download the file.
+
+Pre-signed URLs expire, and stop work, after a set amount of time. By default, for files in the `default` bucket, the expiration time is 30 seconds. You can change the expiration time for pre-signed URLs by changing the `download_expiration` (in seconds) field on the bucket where the file is located.
+
+<Tabs groupId="http-sdk">
+  <TabItem value="js" label="JavaScript">
+
+```js
+await nhost.storage.getPresignedUrl({
+  fileId: '<File-ID>'
+})
+```
+
+Learn more about [`getPresignedUrl()`](/reference/javascript/storage/get-presigned-url).
+
+  </TabItem>
+  <TabItem value="http" label="HTTP" default>
+
+```http
+GET /v1/storage/files/{file_id}/presignedurl HTTP/1.1
+```
+
+  </TabItem>
+</Tabs>
+
+### Delete File
+
+Delete a file and the file metadata in the database.
+
+<Tabs groupId="http-sdk">
+  <TabItem value="js" label="JavaScript">
+
+```js
+const { error } = await nhost.storage.delete({ fileId: 'uuid' })
+```
+
+Learn more about [`delete()`](/reference/javascript/storage/delete).
+
+  </TabItem>
+  <TabItem value="http" label="HTTP" default>
+
+```http
+DELETE /v1/storage/files/{file_id} HTTP/1.1
+```
+
+  </TabItem>
+</Tabs>
+
+## Buckets
+
+Buckets are used to organize files and group permissions for files. Buckets are stored in the `storage.buckets` table in your database, and accessible via `buckets` in your GraphQL API.
+
+For each bucket, you can specify file permissions for the following properties:
+
+- MIME type.
+- Minimum size.
+- Maximum size.
+- Cache control.
+- Allow pre-signed URLs.
+- Download expiration (for pre-signed URLs).
+
+There is a default bucket (`default`) that is used if no bucket is specified during file upload. It's not possible to delete the `default` bucket.
+
+## Permissions
+
+Permissions to upload, download, and delete files are managed through Hasura's permission system on the `storage.files` table.
+
+### Upload
+
+To upload a file, a user must have the **`insert` permission** to the `storage.files` table. The following columns must be allowed to insert:
+
+- `id`
+- `bucket_id`
+- `name`
+- `mime_type`
+
+### Download
+
+To download a file, a user must have the **`select` permission** to the `storage.files` table. Only the `id` column is required, but we recommend allowing to select all columns. 
+
+### Delete
+
+To delete a file, a user must have the **`delete` permission** to the `storage.files` table.
+
+Updating an existing file is not supported. If you need to update a file, delete the file and upload a new file.
+
+Just deleting the file metadata in the `storage.files` table does **not** delete the actual file. Always delete files via Nhost Storage. This way, both the file metadata and the actual file are deleted.
+
+## Image Transformation
+
+Images can be transformed, on the fly, by adding query parameters. The following query parameters are available:
+
+- `w` - Width of the image in pixels.
+- `h` - Height of the image in pixels.
+
+Image Transformation works on both public and pre-signed URLs.
+
+**Example**: Transform an image to 500px width (`?w=500`):
+
+```text
+https://[subdomain].nhost.run/v1/storage/files/08e6fa32-0880-4d0e-a832-278198acb363?w=500
+```
+
+## Example: CRM System
+
+Let's say you want to build a CRM system and you want to store files for customers. This is one way how you could do that.
+
+Start with, you would have two tables:
+
+1. `customers` - Customer data.
+2. `customer_files` - What file belongs to what customer.
+
+```text 
+- customers
+  - id
+  - name
+  - address
+customer_files
+  - id
+  - customer_id (Foreign Key to `customers.id`)
+  - file_id (Foreign Key to `storage.files.id`)
+```
+
+You would also create [Hasura Relationships](https://hasura.io/docs/latest/graphql/core/databases/postgres/schema/table-relationships/index/) (GraphQL relationships) between between `customers` and `customer_files` and between `customer_files` and `storage.files`.
+
+With the two tables and GraphQL relationships in place, you can query customers and the customer's files like this:
+
+```graphql
+query {
+  customers { # customers table
+    id
+    name
+    customer_files { # customer_files tabel
+      id
+      file { # storage.files table
+        id
+        name
+        size
+        mimeType
+      }
+    }
+  }
+}
+```
+
+The file upload process would be as follows:
+
+1. Upload a file.
+2. Get the returned file id.
+3. Insert the file `id` and the customer's `id` into the `customer_files` table.
+
+This would allow you to upload and download files belonging to specific customers in your CRM system.

docs/docs/reference/docgen/javascript/nhost-js/content/create-client.mdx

@@ -15,15 +15,16 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/
 
 **<span className="parameter-name">config</span>** <span className="optional-status">required</span> [`NhostClientConstructorParams`](/reference/docgen/javascript/nhost-js/types/nhost-client-constructor-params)
 
-| Property                                                                                               | Type                | Required | Notes                                                                                                             |
-| :----------------------------------------------------------------------------------------------------- | :------------------ | :------: | :---------------------------------------------------------------------------------------------------------------- |
-| <span className="parameter-name"><span className="light-grey">config.</span>backendUrl</span>          | `string`            |    ✔️    | Nhost backend URL.                                                                                                |
-| <span className="parameter-name"><span className="light-grey">config.</span>refreshIntervalTime</span> | `number`            |          | Time interval until token refreshes, in seconds                                                                   |
-| <span className="parameter-name"><span className="light-grey">config.</span>clientStorageType</span>   | `ClientStorageType` |          | Define a way to get information about the refresh token and its exipration date.                                  |
-| <span className="parameter-name"><span className="light-grey">config.</span>clientStorage</span>       | `ClientStorage`     |          | Object where the refresh token will be persisted and read locally.                                                |
-| <span className="parameter-name"><span className="light-grey">config.</span>autoRefreshToken</span>    | `boolean`           |          | When set to true, will automatically refresh token before it expires                                              |
-| <span className="parameter-name"><span className="light-grey">config.</span>autoSignIn</span>          | `boolean`           |          | When set to true, will parse the url on startup to check if it contains a refresh token to start the session with |
-| <span className="parameter-name"><span className="light-grey">config.</span>devTools</span>            | `boolean`           |          | Activate devTools e.g. the ability to connect to the xstate inspector                                             |
-| <span className="parameter-name"><span className="light-grey">config.</span>start</span>               | `boolean`           |          |                                                                                                                   |
+| Property                                                                                               | Type                | Required | Notes                                                                                                                                |
+| :----------------------------------------------------------------------------------------------------- | :------------------ | :------: | :----------------------------------------------------------------------------------------------------------------------------------- |
+| <span className="parameter-name"><span className="light-grey">config.</span>backendUrl</span>          | `string`            |    ✔️    | Nhost backend URL.                                                                                                                   |
+| <span className="parameter-name"><span className="light-grey">config.</span>refreshIntervalTime</span> | `number`            |          | Time interval until token refreshes, in seconds                                                                                      |
+| <span className="parameter-name"><span className="light-grey">config.</span>clientStorageType</span>   | `ClientStorageType` |          | Define a way to get information about the refresh token and its exipration date.                                                     |
+| <span className="parameter-name"><span className="light-grey">config.</span>clientStorage</span>       | `ClientStorage`     |          | Object where the refresh token will be persisted and read locally.                                                                   |
+| <span className="parameter-name"><span className="light-grey">config.</span>autoRefreshToken</span>    | `boolean`           |          | When set to true, will automatically refresh token before it expires                                                                 |
+| <span className="parameter-name"><span className="light-grey">config.</span>autoSignIn</span>          | `boolean`           |          | When set to true, will parse the url on startup to check if it contains a refresh token to start the session with                    |
+| <span className="parameter-name"><span className="light-grey">config.</span>devTools</span>            | `boolean`           |          | Activate devTools e.g. the ability to connect to the xstate inspector                                                                |
+| <span className="parameter-name"><span className="light-grey">config.</span>start</span>               | `boolean`           |          |                                                                                                                                      |
+| <span className="parameter-name"><span className="light-grey">config.</span>adminSecret</span>         | `string`            |          | Admin secret. When set, it is sent as an `x-hasura-admin-secret` header for all GraphQL, Storage, and Serverless Functions requests. |
 
 ---

docs/docs/reference/docgen/javascript/nhost-js/content/nhost-client/index.mdx

@@ -4,7 +4,7 @@ title: NhostClient
 sidebar_label: NhostClient
 description: No description provided.
 slug: /reference/javascript/nhost-js/nhost-client
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/core/nhost-client.ts#L14
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/core/nhost-client.ts#L19
 ---
 
 # `NhostClient`
@@ -17,15 +17,16 @@ Nhost Client
 
 **<span className="parameter-name">\_\_namedParameters</span>** <span className="optional-status">required</span> [`NhostClientConstructorParams`](/reference/docgen/javascript/nhost-js/types/nhost-client-constructor-params)
 
-| Property                                                                                                            | Type                | Required | Notes                                                                                                             |
-| :------------------------------------------------------------------------------------------------------------------ | :------------------ | :------: | :---------------------------------------------------------------------------------------------------------------- |
-| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>backendUrl</span>          | `string`            |    ✔️    | Nhost backend URL.                                                                                                |
-| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>start</span>               | `boolean`           |          |                                                                                                                   |
-| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>devTools</span>            | `boolean`           |          | Activate devTools e.g. the ability to connect to the xstate inspector                                             |
-| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>autoSignIn</span>          | `boolean`           |          | When set to true, will parse the url on startup to check if it contains a refresh token to start the session with |
-| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>autoRefreshToken</span>    | `boolean`           |          | When set to true, will automatically refresh token before it expires                                              |
-| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>clientStorage</span>       | `ClientStorage`     |          | Object where the refresh token will be persisted and read locally.                                                |
-| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>clientStorageType</span>   | `ClientStorageType` |          | Define a way to get information about the refresh token and its exipration date.                                  |
-| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>refreshIntervalTime</span> | `number`            |          | Time interval until token refreshes, in seconds                                                                   |
+| Property                                                                                                            | Type                | Required | Notes                                                                                                                                |
+| :------------------------------------------------------------------------------------------------------------------ | :------------------ | :------: | :----------------------------------------------------------------------------------------------------------------------------------- |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>backendUrl</span>          | `string`            |    ✔️    | Nhost backend URL.                                                                                                                   |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>adminSecret</span>         | `string`            |          | Admin secret. When set, it is sent as an `x-hasura-admin-secret` header for all GraphQL, Storage, and Serverless Functions requests. |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>start</span>               | `boolean`           |          |                                                                                                                                      |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>devTools</span>            | `boolean`           |          | Activate devTools e.g. the ability to connect to the xstate inspector                                                                |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>autoSignIn</span>          | `boolean`           |          | When set to true, will parse the url on startup to check if it contains a refresh token to start the session with                    |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>autoRefreshToken</span>    | `boolean`           |          | When set to true, will automatically refresh token before it expires                                                                 |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>clientStorage</span>       | `ClientStorage`     |          | Object where the refresh token will be persisted and read locally.                                                                   |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>clientStorageType</span>   | `ClientStorageType` |          | Define a way to get information about the refresh token and its exipration date.                                                     |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>refreshIntervalTime</span> | `number`            |          | Time interval until token refreshes, in seconds                                                                                      |
 
 ---

docs/docs/reference/docgen/javascript/nhost-js/content/nhost-functions-client/content/01-call.mdx

@@ -4,7 +4,7 @@ title: call()
 sidebar_label: call()
 slug: /reference/javascript/nhost-js/functions/call
 description: Use `nhost.functions.call` to call (sending a POST request to) a serverless function.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/functions.ts#L34
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/functions.ts#L43
 ---
 
 # `call()`

docs/docs/reference/docgen/javascript/nhost-js/content/nhost-functions-client/content/02-set-access-token.mdx

@@ -4,7 +4,7 @@ title: setAccessToken()
 sidebar_label: setAccessToken()
 slug: /reference/javascript/nhost-js/functions/set-access-token
 description: Use `nhost.functions.setAccessToken` to a set an access token to be used in subsequent functions requests. Note that if you're signin in users with `nhost.auth.signIn()` the access token will be set automatically.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/functions.ts#L73
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/functions.ts#L82
 ---
 
 # `setAccessToken()`

docs/docs/reference/docgen/javascript/nhost-js/content/nhost-functions-client/index.mdx

@@ -4,7 +4,7 @@ title: NhostFunctionsClient
 sidebar_label: Functions
 description: No description provided.
 slug: /reference/javascript/nhost-js/functions
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/functions.ts#L11
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/functions.ts#L18
 ---
 
 # `NhostFunctionsClient`
@@ -15,8 +15,9 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/
 
 **<span className="parameter-name">params</span>** <span className="optional-status">required</span> [`NhostFunctionsConstructorParams`](/reference/docgen/javascript/nhost-js/types/nhost-functions-constructor-params)
 
-| Property                                                                               | Type     | Required | Notes |
-| :------------------------------------------------------------------------------------- | :------- | :------: | :---- |
-| <span className="parameter-name"><span className="light-grey">params.</span>url</span> | `string` |    ✔️    |       |
+| Property                                                                                       | Type     | Required | Notes                                                                                     |
+| :--------------------------------------------------------------------------------------------- | :------- | :------: | :---------------------------------------------------------------------------------------- |
+| <span className="parameter-name"><span className="light-grey">params.</span>url</span>         | `string` |    ✔️    | Serverless Functions endpoint.                                                            |
+| <span className="parameter-name"><span className="light-grey">params.</span>adminSecret</span> | `string` |          | Admin secret. When set, it is sent as an `x-hasura-admin-secret` header for all requests. |
 
 ---

docs/docs/reference/docgen/javascript/nhost-js/content/nhost-graphql-client/content/01-request.mdx

@@ -4,7 +4,7 @@ title: request()
 sidebar_label: request()
 slug: /reference/javascript/nhost-js/graphql/request
 description: Use `nhost.graphql.request` to send a GraphQL request. For more serious GraphQL usage in your app we recommend using a GraphQL client such as Apollo Client (https://www.apollographql.com/docs/react).
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/graphql.ts#L47
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/graphql.ts#L55
 ---
 
 # `request()`

docs/docs/reference/docgen/javascript/nhost-js/content/nhost-graphql-client/content/02-get-url.mdx

@@ -4,7 +4,7 @@ title: getUrl()
 sidebar_label: getUrl()
 slug: /reference/javascript/nhost-js/graphql/get-url
 description: Use `nhost.graphql.getUrl` to get the GraphQL URL.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/graphql.ts#L110
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/graphql.ts#L118
 ---
 
 # `getUrl()`

docs/docs/reference/docgen/javascript/nhost-js/content/nhost-graphql-client/content/03-set-access-token.mdx

@@ -4,7 +4,7 @@ title: setAccessToken()
 sidebar_label: setAccessToken()
 slug: /reference/javascript/nhost-js/graphql/set-access-token
 description: Use `nhost.graphql.setAccessToken` to a set an access token to be used in subsequent graphql requests. Note that if you're signin in users with `nhost.auth.signIn()` the access token will be set automatically.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/graphql.ts#L124
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/graphql.ts#L132
 ---
 
 # `setAccessToken()`

docs/docs/reference/docgen/javascript/nhost-js/content/nhost-graphql-client/index.mdx

@@ -4,7 +4,7 @@ title: NhostGraphqlClient
 sidebar_label: GraphQL
 description: No description provided.
 slug: /reference/javascript/nhost-js/graphql
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/graphql.ts#L14
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/graphql.ts#L20
 ---
 
 # `NhostGraphqlClient`
@@ -15,8 +15,9 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/
 
 **<span className="parameter-name">params</span>** <span className="optional-status">required</span> [`NhostGraphqlConstructorParams`](/reference/docgen/javascript/nhost-js/types/nhost-graphql-constructor-params)
 
-| Property                                                                               | Type     | Required | Notes |
-| :------------------------------------------------------------------------------------- | :------- | :------: | :---- |
-| <span className="parameter-name"><span className="light-grey">params.</span>url</span> | `string` |    ✔️    |       |
+| Property                                                                                       | Type     | Required | Notes                                                                                     |
+| :--------------------------------------------------------------------------------------------- | :------- | :------: | :---------------------------------------------------------------------------------------- |
+| <span className="parameter-name"><span className="light-grey">params.</span>url</span>         | `string` |    ✔️    | GraphQL endpoint.                                                                         |
+| <span className="parameter-name"><span className="light-grey">params.</span>adminSecret</span> | `string` |          | Admin secret. When set, it is sent as an `x-hasura-admin-secret` header for all requests. |
 
 ---

docs/docs/reference/docgen/javascript/nhost-js/types/nhost-client-constructor-params.mdx

@@ -74,3 +74,10 @@ Activate devTools e.g. the ability to connect to the xstate inspector
 **<span className="parameter-name">start</span>** <span className="optional-status">optional</span> `boolean`
 
 ---
+
+**<span className="parameter-name">adminSecret</span>** <span className="optional-status">optional</span> `string`
+
+Admin secret. When set, it is sent as an `x-hasura-admin-secret` header for all
+GraphQL, Storage, and Serverless Functions requests.
+
+---

docs/docs/reference/docgen/javascript/nhost-js/types/nhost-functions-constructor-params.mdx

@@ -15,4 +15,12 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/
 
 **<span className="parameter-name">url</span>** <span className="optional-status">required</span> `string`
 
+Serverless Functions endpoint.
+
+---
+
+**<span className="parameter-name">adminSecret</span>** <span className="optional-status">optional</span> `string`
+
+Admin secret. When set, it is sent as an `x-hasura-admin-secret` header for all requests.
+
 ---

docs/docs/reference/docgen/javascript/nhost-js/types/nhost-graphql-constructor-params.mdx

@@ -4,7 +4,7 @@ title: NhostGraphqlConstructorParams
 sidebar_label: NhostGraphqlConstructorParams
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/graphql.ts#L7
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/graphql.ts#L6
 ---
 
 # `NhostGraphqlConstructorParams`
@@ -15,4 +15,12 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/
 
 **<span className="parameter-name">url</span>** <span className="optional-status">required</span> `string`
 
+GraphQL endpoint.
+
+---
+
+**<span className="parameter-name">adminSecret</span>** <span className="optional-status">optional</span> `string`
+
+Admin secret. When set, it is sent as an `x-hasura-admin-secret` header for all requests.
+
 ---

docs/docs/reference/docgen/javascript/storage/content/hasura-storage-client/content/01-upload.mdx

@@ -4,7 +4,7 @@ title: upload()
 sidebar_label: upload()
 slug: /reference/javascript/storage/upload
 description: Use `nhost.storage.upload` to upload a file. The `file` must be of type [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File).
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L41
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L52
 ---
 
 # `upload()`

docs/docs/reference/docgen/javascript/storage/content/hasura-storage-client/content/02-get-url.mdx

@@ -5,7 +5,7 @@ sidebar_label: getUrl()
 slug: /reference/javascript/storage/get-url
 sidebar_class_name: deprecated
 description: No description provided.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L63
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L74
 ---
 
 # `getUrl()`

docs/docs/reference/docgen/javascript/storage/content/hasura-storage-client/content/03-get-public-url.mdx

@@ -4,7 +4,7 @@ title: getPublicUrl()
 sidebar_label: getPublicUrl()
 slug: /reference/javascript/storage/get-public-url
 description: Use `nhost.storage.getPublicUrl` to get the public URL of a file. The public URL can be used for un-authenticated users to access files. To access public files the `public` role must have permissions to select the file in the `storage.files` table.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L77
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L88
 ---
 
 # `getPublicUrl()`

docs/docs/reference/docgen/javascript/storage/content/hasura-storage-client/content/04-get-presigned-url.mdx

@@ -4,7 +4,7 @@ title: getPresignedUrl()
 sidebar_label: getPresignedUrl()
 slug: /reference/javascript/storage/get-presigned-url
 description: Use `nhost.storage.getPresignedUrl` to get a presigned URL of a file. To get a presigned URL the user must have permission to select the file in the `storage.files` table.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L99
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L110
 ---
 
 # `getPresignedUrl()`

docs/docs/reference/docgen/javascript/storage/content/hasura-storage-client/content/05-delete.mdx

@@ -4,7 +4,7 @@ title: delete()
 sidebar_label: delete()
 slug: /reference/javascript/storage/delete
 description: Use `nhost.storage.delete` to delete a file. To delete a file the user must have permissions to delete the file in the `storage.files` table. Deleting the file using `nhost.storage.delete()` will delete both the file and its metadata.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L124
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L135
 ---
 
 # `delete()`

docs/docs/reference/docgen/javascript/storage/content/hasura-storage-client/content/06-set-access-token.mdx

@@ -4,7 +4,7 @@ title: setAccessToken()
 sidebar_label: setAccessToken()
 slug: /reference/javascript/storage/set-access-token
 description: Use `nhost.storage.setAccessToken` to a set an access token to be used in subsequent storage requests. Note that if you're signin in users with `nhost.auth.signIn()` the access token will be set automatically.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L145
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L156
 ---
 
 # `setAccessToken()`

docs/docs/reference/docgen/javascript/storage/content/hasura-storage-client/content/07-set-admin-secret.mdx

@@ -4,7 +4,7 @@ title: setAdminSecret()
 sidebar_label: setAdminSecret()
 slug: /reference/javascript/storage/set-admin-secret
 description: Use `nhost.storage.adminSecret` to set the admin secret to be used for subsequent storage requests. This is useful if you want to run storage in "admin mode".
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L163
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L174
 ---
 
 # `setAdminSecret()`

docs/docs/reference/docgen/javascript/storage/content/hasura-storage-client/index.mdx

@@ -4,7 +4,7 @@ title: HasuraStorageClient
 sidebar_label: Storage
 description: No description provided.
 slug: /reference/javascript/storage
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L15
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L25
 ---
 
 # `HasuraStorageClient`
@@ -13,6 +13,6 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storag
 
 ---
 
-**<span className="parameter-name">\_\_namedParameters</span>** <span className="optional-status">required</span> `{ url: string }`
+**<span className="parameter-name">\_\_namedParameters</span>** <span className="optional-status">required</span> `NhostStorageConstructorParams`
 
 ---

docs/docs/reference/docgen/nextjs/content/nhost-client/index.mdx

@@ -15,12 +15,13 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nextjs/src/in
 
 **<span className="parameter-name">params</span>** <span className="optional-status">required</span> [`NhostNextClientConstructorParams`](/reference/docgen/nextjs/types/nhost-next-client-constructor-params)
 
-| Property                                                                                               | Type      | Required | Notes                                                                                                             |
-| :----------------------------------------------------------------------------------------------------- | :-------- | :------: | :---------------------------------------------------------------------------------------------------------------- |
-| <span className="parameter-name"><span className="light-grey">params.</span>backendUrl</span>          | `string`  |    ✔️    | Nhost backend URL.                                                                                                |
-| <span className="parameter-name"><span className="light-grey">params.</span>devTools</span>            | `boolean` |          | Activate devTools e.g. the ability to connect to the xstate inspector                                             |
-| <span className="parameter-name"><span className="light-grey">params.</span>autoSignIn</span>          | `boolean` |          | When set to true, will parse the url on startup to check if it contains a refresh token to start the session with |
-| <span className="parameter-name"><span className="light-grey">params.</span>autoRefreshToken</span>    | `boolean` |          | When set to true, will automatically refresh token before it expires                                              |
-| <span className="parameter-name"><span className="light-grey">params.</span>refreshIntervalTime</span> | `number`  |          | Time interval until token refreshes, in seconds                                                                   |
+| Property                                                                                               | Type      | Required | Notes                                                                                                                                |
+| :----------------------------------------------------------------------------------------------------- | :-------- | :------: | :----------------------------------------------------------------------------------------------------------------------------------- |
+| <span className="parameter-name"><span className="light-grey">params.</span>backendUrl</span>          | `string`  |    ✔️    | Nhost backend URL.                                                                                                                   |
+| <span className="parameter-name"><span className="light-grey">params.</span>adminSecret</span>         | `string`  |          | Admin secret. When set, it is sent as an `x-hasura-admin-secret` header for all GraphQL, Storage, and Serverless Functions requests. |
+| <span className="parameter-name"><span className="light-grey">params.</span>devTools</span>            | `boolean` |          | Activate devTools e.g. the ability to connect to the xstate inspector                                                                |
+| <span className="parameter-name"><span className="light-grey">params.</span>autoSignIn</span>          | `boolean` |          | When set to true, will parse the url on startup to check if it contains a refresh token to start the session with                    |
+| <span className="parameter-name"><span className="light-grey">params.</span>autoRefreshToken</span>    | `boolean` |          | When set to true, will automatically refresh token before it expires                                                                 |
+| <span className="parameter-name"><span className="light-grey">params.</span>refreshIntervalTime</span> | `number`  |          | Time interval until token refreshes, in seconds                                                                                      |
 
 ---

docs/docs/reference/docgen/nextjs/content/use-access-token.mdx

@@ -4,7 +4,7 @@ title: useAccessToken()
 sidebar_label: useAccessToken()
 slug: /reference/nextjs/use-access-token
 description: Use `useAccessToken` to get the access token of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/common.ts#L119
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useAccessToken.ts#L15
 ---
 
 # `useAccessToken()`

docs/docs/reference/docgen/nextjs/content/use-auth-loading.mdx

@@ -5,7 +5,7 @@ sidebar_label: useAuthLoading()
 slug: /reference/nextjs/use-auth-loading
 sidebar_class_name: deprecated
 description: No description provided.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/common.ts#L57
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useAuthLoading.ts#L14
 ---
 
 # `useAuthLoading()`

docs/docs/reference/docgen/nextjs/content/use-authenticated.mdx

@@ -4,7 +4,7 @@ title: useAuthenticated()
 sidebar_label: useAuthenticated()
 slug: /reference/nextjs/use-authenticated
 description: Use `useAuthenticated` to get the authentication status of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/common.ts#L94
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useAuthenticated.ts#L15
 ---
 
 # `useAuthenticated()`

docs/docs/reference/docgen/nextjs/content/use-authentication-status.mdx

@@ -4,7 +4,7 @@ title: useAuthenticationStatus()
 sidebar_label: useAuthenticationStatus()
 slug: /reference/nextjs/use-authentication-status
 description: Use `useAuthenticationStatus` to get the authentication status for the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/common.ts#L70
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useAuthenticationStatus.ts#L13
 ---
 
 # `useAuthenticationStatus()`

docs/docs/reference/docgen/nextjs/content/use-change-email.mdx

@@ -4,7 +4,7 @@ title: useChangeEmail()
 sidebar_label: useChangeEmail()
 slug: /reference/nextjs/use-change-email
 description: Use the hook `useChangeEmail` to change email for the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/user.ts#L69
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useChangeEmail.ts#L45
 ---
 
 # `useChangeEmail()`

docs/docs/reference/docgen/nextjs/content/use-change-password.mdx

@@ -4,7 +4,7 @@ title: useChangePassword()
 sidebar_label: useChangePassword()
 slug: /reference/nextjs/use-change-password
 description: Use the hook `useChangePassword` to change password for the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/user.ts#L137
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useChangePassword.ts#L49
 ---
 
 # `useChangePassword()`

docs/docs/reference/docgen/nextjs/content/use-config-mfa.mdx

@@ -4,7 +4,7 @@ title: useConfigMfa()
 sidebar_label: useConfigMfa()
 slug: /reference/nextjs/use-config-mfa
 description: No description provided.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/user.ts#L514
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useConfigMfa.ts#L22
 ---
 
 # `useConfigMfa()`

docs/docs/reference/docgen/nextjs/content/use-decoded-access-token.mdx

@@ -4,7 +4,7 @@ title: useDecodedAccessToken()
 sidebar_label: useDecodedAccessToken()
 slug: /reference/nextjs/use-decoded-access-token
 description: Use the hook `useDecodedAccessToken` to get the decoded access token of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/user.ts#L558
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useDecodedAccessToken.ts#L17
 ---
 
 # `useDecodedAccessToken()`

docs/docs/reference/docgen/nextjs/content/use-hasura-claim.mdx

@@ -4,7 +4,7 @@ title: useHasuraClaim()
 sidebar_label: useHasuraClaim()
 slug: /reference/nextjs/use-hasura-claim
 description: Use the hook `useHasuraClaim` to get the value of a specific Hasura claim of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/user.ts#L589
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useHasuraClaim.ts#L14
 ---
 
 # `useHasuraClaim()`

docs/docs/reference/docgen/nextjs/content/use-hasura-claims.mdx

@@ -4,7 +4,7 @@ title: useHasuraClaims()
 sidebar_label: useHasuraClaims()
 slug: /reference/nextjs/use-hasura-claims
 description: Use the hook `useHasuraClaims` to get the Hasura claims of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/user.ts#L573
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useHasuraClaims.ts#L14
 ---
 
 # `useHasuraClaims()`

docs/docs/reference/docgen/nextjs/content/use-nhost-auth.mdx

@@ -5,7 +5,7 @@ sidebar_label: useNhostAuth()
 slug: /reference/nextjs/use-nhost-auth
 sidebar_class_name: deprecated
 description: No description provided.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/deprecated.ts#L10
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useNhostAuth.ts#L10
 ---
 
 # `useNhostAuth()`

docs/docs/reference/docgen/nextjs/content/use-nhost-backend-url.mdx

@@ -4,7 +4,7 @@ title: useNhostBackendUrl()
 sidebar_label: useNhostBackendUrl()
 slug: /reference/nextjs/use-nhost-backend-url
 description: Use the hook `useNhostBackendUrl` to get the Nhost backend URL.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/common.ts#L43
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useNhostBackendUrl.ts#L15
 ---
 
 # `useNhostBackendUrl()`

docs/docs/reference/docgen/nextjs/content/use-nhost-client.mdx

@@ -4,7 +4,7 @@ title: useNhostClient()
 sidebar_label: useNhostClient()
 slug: /reference/nextjs/use-nhost-client
 description: Use the hook `useNhostClient` to get the Nhost JavaScript client (https://docs.nhost.io/reference/javascript).
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/common.ts#L20
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useNhostClient.ts#L17
 ---
 
 # `useNhostClient()`

docs/docs/reference/docgen/nextjs/content/use-provider-link.mdx

@@ -4,7 +4,7 @@ title: useProviderLink()
 sidebar_label: useProviderLink()
 slug: /reference/nextjs/use-provider-link
 description: Use the hook `useProviderLink` to get an OAuth provider URL that can be used to sign in users.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/authentication.ts#L281
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useProviderLink.ts#L31
 ---
 
 # `useProviderLink()`

docs/docs/reference/docgen/nextjs/content/use-reset-password.mdx

@@ -4,7 +4,7 @@ title: useResetPassword()
 sidebar_label: useResetPassword()
 slug: /reference/nextjs/use-reset-password
 description: Use the hook `useResetPassword` to reset the password for a user. This will send a reset password link in an email to the user. When the user clicks on the reset-password link the user is automatically signed in and can change their password using the hook `useChangePassword`.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/user.ts#L195
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useResetPassword.ts#L53
 ---
 
 # `useResetPassword()`

docs/docs/reference/docgen/nextjs/content/use-send-verification-email.mdx

@@ -4,7 +4,7 @@ title: useSendVerificationEmail()
 sidebar_label: useSendVerificationEmail()
 slug: /reference/nextjs/use-send-verification-email
 description: Use the hook `useSendVerificationEmail` to send a verification email. The verification email is sent to the user's email address and includes a link to verify the email address.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/user.ts#L481
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useSendVerificationEmail.ts#L58
 ---
 
 # `useSendVerificationEmail()`

docs/docs/reference/docgen/nextjs/content/use-sign-in-anonymous.mdx

@@ -4,7 +4,7 @@ title: useSignInAnonymous()
 sidebar_label: useSignInAnonymous()
 slug: /reference/nextjs/use-sign-in-anonymous
 description: No description provided.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/authentication.ts#L228
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useSignInAnonymous.ts#L9
 ---
 
 # `useSignInAnonymous()`

docs/docs/reference/docgen/nextjs/content/use-sign-in-email-password.mdx

@@ -4,7 +4,7 @@ title: useSignInEmailPassword()
 sidebar_label: useSignInEmailPassword()
 slug: /reference/nextjs/use-sign-in-email-password
 description: Use the hook `useSignInEmailPassword` to sign in a user using email and password.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/authentication.ts#L66
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useSignInEmailPassword.ts#L49
 ---
 
 # `useSignInEmailPassword()`

docs/docs/reference/docgen/nextjs/content/use-sign-in-email-passwordless.mdx

@@ -4,7 +4,7 @@ title: useSignInEmailPasswordless()
 sidebar_label: useSignInEmailPasswordless()
 slug: /reference/nextjs/use-sign-in-email-passwordless
 description: Use the hook `useSignInEmailPasswordless` to sign in a user using passwordless email (Magic Link).
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/authentication.ts#L172
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useSignInEmailPasswordless.ts#L40
 ---
 
 # `useSignInEmailPasswordless()`

docs/docs/reference/docgen/nextjs/content/use-sign-out.mdx

@@ -4,7 +4,7 @@ title: useSignOut()
 sidebar_label: useSignOut()
 slug: /reference/nextjs/use-sign-out
 description: Use the hook `useSignOut` to sign out the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/common.ts#L147
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useSignOut.ts#L29
 ---
 
 # `useSignOut()`

docs/docs/reference/docgen/nextjs/content/use-sign-up-email-password.mdx

@@ -4,7 +4,7 @@ title: useSignUpEmailPassword()
 sidebar_label: useSignUpEmailPassword()
 slug: /reference/nextjs/use-sign-up-email-password
 description: Use the hook `useSignUpEmailPassword` to sign up a user using email and password.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/registration.ts#L51
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useSignUpEmailPassword.ts#L51
 ---
 
 # `useSignUpEmailPassword()`

docs/docs/reference/docgen/nextjs/content/use-user-avatar-url.mdx

@@ -4,7 +4,7 @@ title: useUserAvatarUrl()
 sidebar_label: useUserAvatarUrl()
 slug: /reference/nextjs/use-user-avatar-url
 description: Use the hook `useUserAvatarUrl` to get the avatar URL of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/user.ts#L271
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useUserAvatarUrl.ts#L15
 ---
 
 # `useUserAvatarUrl()`

docs/docs/reference/docgen/nextjs/content/use-user-data.mdx

@@ -4,7 +4,7 @@ title: useUserData()
 sidebar_label: useUserData()
 slug: /reference/nextjs/use-user-data
 description: Use the hook `useUserData` to get the user data of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/user.ts#L252
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useUserData.ts#L34
 ---
 
 # `useUserData()`

docs/docs/reference/docgen/nextjs/content/use-user-default-role.mdx

@@ -4,7 +4,7 @@ title: useUserDefaultRole()
 sidebar_label: useUserDefaultRole()
 slug: /reference/nextjs/use-user-default-role
 description: Use the hook `useUserDefaultRole` to get the default role of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/user.ts#L295
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useUserDefaultRole.ts#L15
 ---
 
 # `useUserDefaultRole()`

docs/docs/reference/docgen/nextjs/content/use-user-display-name.mdx

@@ -4,7 +4,7 @@ title: useUserDisplayName()
 sidebar_label: useUserDisplayName()
 slug: /reference/nextjs/use-user-display-name
 description: Use the hook `useUserDisplayName` to get the display name of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/user.ts#L319
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useUserDisplayName.ts#L15
 ---
 
 # `useUserDisplayName()`

docs/docs/reference/docgen/nextjs/content/use-user-email.mdx

@@ -4,7 +4,7 @@ title: useUserEmail()
 sidebar_label: useUserEmail()
 slug: /reference/nextjs/use-user-email
 description: Use the hook `useUserEmail` to get the email of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/user.ts#L343
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useUserEmail.ts#L15
 ---
 
 # `useUserEmail()`

docs/docs/reference/docgen/nextjs/content/use-user-id.mdx

@@ -4,7 +4,7 @@ title: useUserId()
 sidebar_label: useUserId()
 slug: /reference/nextjs/use-user-id
 description: Use the hook `useUserId` to get the id of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/user.ts#L367
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useUserId.ts#L15
 ---
 
 # `useUserId()`

docs/docs/reference/docgen/nextjs/content/use-user-is-anonymous.mdx

@@ -4,7 +4,7 @@ title: useUserIsAnonymous()
 sidebar_label: useUserIsAnonymous()
 slug: /reference/nextjs/use-user-is-anonymous
 description: Use the hook `useUserIsAnonymous` to see if the user is anonymous or not.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/user.ts#L386
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useUserIsAnonymous.ts#L15
 ---
 
 # `useUserIsAnonymous()`

docs/docs/reference/docgen/nextjs/content/use-user-locale.mdx

@@ -4,7 +4,7 @@ title: useUserLocale()
 sidebar_label: useUserLocale()
 slug: /reference/nextjs/use-user-locale
 description: Use the hook `useUserLocale` to get the locale of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/user.ts#L410
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useUserLocale.ts#L15
 ---
 
 # `useUserLocale()`

docs/docs/reference/docgen/nextjs/content/use-user-roles.mdx

@@ -4,7 +4,7 @@ title: useUserRoles()
 sidebar_label: useUserRoles()
 slug: /reference/nextjs/use-user-roles
 description: Use the hook `useUserRoles` to get all allowed roles of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/user.ts#L429
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useUserRoles.ts#L15
 ---
 
 # `useUserRoles()`

docs/docs/reference/docgen/nextjs/types/change-email-hook-result.mdx

@@ -0,0 +1,54 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: ChangeEmailHookResult
+sidebar_label: ChangeEmailHookResult
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useChangeEmail.ts#L20
+---
+
+# `ChangeEmailHookResult`
+
+## Parameters
+
+---
+
+**<span className="parameter-name">isError</span>** <span className="optional-status">required</span> `boolean`
+
+**`@returns`**
+
+`true` if an error occurred
+
+**`@depreacted`**
+
+use `!isSuccess` or `!!error` instead
+
+---
+
+**<span className="parameter-name">error</span>** <span className="optional-status">required</span> `null` | `ErrorPayload`
+
+Provides details about the error
+
+---
+
+**<span className="parameter-name">isLoading</span>** <span className="optional-status">required</span> `boolean`
+
+**`@returns`**
+
+`true` when the action is executing, `false` when it finished its execution.
+
+---
+
+**<span className="parameter-name">needsEmailVerification</span>** <span className="optional-status">required</span> `boolean`
+
+**`@returns`**
+
+`true` if an email is required to complete the action, and that a verification email has been sent to complete the action.
+
+---
+
+**<span className="parameter-name">changeEmail</span>** <span className="optional-status">required</span> `ChangeEmailHandler`
+
+Requests the email change. Returns a promise with the current context
+
+---

docs/docs/reference/docgen/nextjs/types/change-password-hook-result.mdx

@@ -0,0 +1,44 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: ChangePasswordHookResult
+sidebar_label: ChangePasswordHookResult
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useChangePassword.ts#L20
+---
+
+# `ChangePasswordHookResult`
+
+## Parameters
+
+---
+
+**<span className="parameter-name">isError</span>** <span className="optional-status">required</span> `boolean`
+
+**`@returns`**
+
+`true` if an error occurred
+
+**`@depreacted`**
+
+use `!isSuccess` or `!!error` instead
+
+---
+
+**<span className="parameter-name">error</span>** <span className="optional-status">required</span> `null` | `ErrorPayload`
+
+Provides details about the error
+
+---
+
+**<span className="parameter-name">isSuccess</span>** <span className="optional-status">required</span> `boolean`
+
+Returns `true` if the action is successful.
+
+---
+
+**<span className="parameter-name">changePassword</span>** <span className="optional-status">required</span> `ChangePasswordHandler`
+
+Requests the password change. Returns a promise with the current context
+
+---

docs/docs/reference/docgen/nextjs/types/nhost-next-client-constructor-params.mdx

@@ -19,6 +19,13 @@ Nhost backend URL.
 
 ---
 
+**<span className="parameter-name">adminSecret</span>** <span className="optional-status">optional</span> `string`
+
+Admin secret. When set, it is sent as an `x-hasura-admin-secret` header for all
+GraphQL, Storage, and Serverless Functions requests.
+
+---
+
 **<span className="parameter-name">devTools</span>** <span className="optional-status">optional</span> `boolean`
 
 Activate devTools e.g. the ability to connect to the xstate inspector

docs/docs/reference/docgen/nextjs/types/nhost-react-client-constructor-params.mdx

@@ -4,7 +4,7 @@ title: NhostReactClientConstructorParams
 sidebar_label: NhostReactClientConstructorParams
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/index.ts#L6
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/client.ts#L3
 ---
 
 # `NhostReactClientConstructorParams`
@@ -70,3 +70,10 @@ Activate devTools e.g. the ability to connect to the xstate inspector
 Nhost backend URL.
 
 ---
+
+**<span className="parameter-name">adminSecret</span>** <span className="optional-status">optional</span> `string`
+
+Admin secret. When set, it is sent as an `x-hasura-admin-secret` header for all
+GraphQL, Storage, and Serverless Functions requests.
+
+---

docs/docs/reference/docgen/nextjs/types/reset-password-hook-result.mdx

@@ -0,0 +1,52 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: ResetPasswordHookResult
+sidebar_label: ResetPasswordHookResult
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useResetPassword.ts#L20
+---
+
+# `ResetPasswordHookResult`
+
+## Parameters
+
+---
+
+**<span className="parameter-name">isSent</span>** <span className="optional-status">required</span> `boolean`
+
+Returns `true` when an email to reset the password has been sent
+
+---
+
+**<span className="parameter-name">isError</span>** <span className="optional-status">required</span> `boolean`
+
+**`@returns`**
+
+`true` if an error occurred
+
+**`@depreacted`**
+
+use `!isSuccess` or `!!error` instead
+
+---
+
+**<span className="parameter-name">error</span>** <span className="optional-status">required</span> `null` | `ErrorPayload`
+
+Provides details about the error
+
+---
+
+**<span className="parameter-name">isLoading</span>** <span className="optional-status">required</span> `boolean`
+
+**`@returns`**
+
+`true` when the action is executing, `false` when it finished its execution.
+
+---
+
+**<span className="parameter-name">resetPassword</span>** <span className="optional-status">required</span> `ResetPasswordHandler`
+
+Sends an email with a temporary connection link. Returns a promise with the current context
+
+---

docs/docs/reference/docgen/nextjs/types/send-verification-email-hook-result.mdx

@@ -0,0 +1,52 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: SendVerificationEmailHookResult
+sidebar_label: SendVerificationEmailHookResult
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useSendVerificationEmail.ts#L26
+---
+
+# `SendVerificationEmailHookResult`
+
+## Parameters
+
+---
+
+**<span className="parameter-name">isSent</span>** <span className="optional-status">required</span> `boolean`
+
+Returns `true` when a new verification email has been sent
+
+---
+
+**<span className="parameter-name">isError</span>** <span className="optional-status">required</span> `boolean`
+
+**`@returns`**
+
+`true` if an error occurred
+
+**`@depreacted`**
+
+use `!isSuccess` or `!!error` instead
+
+---
+
+**<span className="parameter-name">error</span>** <span className="optional-status">required</span> `null` | `ErrorPayload`
+
+Provides details about the error
+
+---
+
+**<span className="parameter-name">isLoading</span>** <span className="optional-status">required</span> `boolean`
+
+**`@returns`**
+
+`true` when the action is executing, `false` when it finished its execution.
+
+---
+
+**<span className="parameter-name">sendEmail</span>** <span className="optional-status">required</span> `SendVerificationEmailHandler`
+
+Resend the verification email. Returns a promise with the current context
+
+---

docs/docs/reference/docgen/nextjs/types/sign-in-email-password-hook-result.mdx

@@ -0,0 +1,82 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: SignInEmailPasswordHookResult
+sidebar_label: SignInEmailPasswordHookResult
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useSignInEmailPassword.ts#L19
+---
+
+# `SignInEmailPasswordHookResult`
+
+## Parameters
+
+---
+
+**<span className="parameter-name">needsMfaOtp</span>** <span className="optional-status">required</span> `boolean`
+
+---
+
+**<span className="parameter-name">mfa</span>** <span className="optional-status">required</span> `null` | `{ ticket: string }`
+
+---
+
+**<span className="parameter-name">isError</span>** <span className="optional-status">required</span> `boolean`
+
+**`@returns`**
+
+`true` if an error occurred
+
+**`@depreacted`**
+
+use `!isSuccess` or `!!error` instead
+
+---
+
+**<span className="parameter-name">error</span>** <span className="optional-status">required</span> `null` | `ErrorPayload`
+
+Provides details about the error
+
+---
+
+**<span className="parameter-name">isLoading</span>** <span className="optional-status">required</span> `boolean`
+
+**`@returns`**
+
+`true` when the action is executing, `false` when it finished its execution.
+
+---
+
+**<span className="parameter-name">isSuccess</span>** <span className="optional-status">required</span> `boolean`
+
+Returns `true` if the action is successful.
+
+---
+
+**<span className="parameter-name">user</span>** <span className="optional-status">required</span> `null` | `User`
+
+User information
+
+---
+
+**<span className="parameter-name">accessToken</span>** <span className="optional-status">required</span> `null` | `string`
+
+Access token (JWT)
+
+---
+
+**<span className="parameter-name">needsEmailVerification</span>** <span className="optional-status">required</span> `boolean`
+
+**`@returns`**
+
+`true` if an email is required to complete the action, and that a verification email has been sent to complete the action.
+
+---
+
+**<span className="parameter-name">signInEmailPassword</span>** <span className="optional-status">required</span> `SignInEmailPasswordHandler`
+
+---
+
+**<span className="parameter-name">sendMfaOtp</span>** <span className="optional-status">required</span> `SendMfaOtpHander`
+
+---