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

chore: update versions

README.md

@@ -148,6 +148,13 @@ Here are some ways of contributing to making Nhost better:
             <sub><b>Johan Eliasson</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/gdangelo">
+            <img src="https://avatars.githubusercontent.com/u/4352286?v=4" width="100;" alt="gdangelo"/>
+            <br />
+            <sub><b>Grégory D'Angelo</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/nunopato">
             <img src="https://avatars.githubusercontent.com/u/1523504?v=4" width="100;" alt="nunopato"/>
@@ -161,15 +168,15 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Subha Das</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/guicurcio">
             <img src="https://avatars.githubusercontent.com/u/20285232?v=4" width="100;" alt="guicurcio"/>
             <br />
             <sub><b>Guido Curcio</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/sebagudelo">
             <img src="https://avatars.githubusercontent.com/u/43288271?v=4" width="100;" alt="sebagudelo"/>
@@ -184,13 +191,6 @@ Here are some ways of contributing to making Nhost better:
             <sub><b>Mrinal Wahal</b></sub>
         </a>
     </td>
-    <td align="center">
-        <a href="https://github.com/gdangelo">
-            <img src="https://avatars.githubusercontent.com/u/4352286?v=4" width="100;" alt="gdangelo"/>
-            <br />
-            <sub><b>Grégory D'Angelo</b></sub>
-        </a>
-    </td>
     <td align="center">
         <a href="https://github.com/FuzzyReason">
             <img src="https://avatars.githubusercontent.com/u/62517920?v=4" width="100;" alt="FuzzyReason"/>
@@ -299,6 +299,13 @@ Here are some ways of contributing to making Nhost better:
         </a>
     </td></tr>
 <tr>
+    <td align="center">
+        <a href="https://github.com/gaurav1999">
+            <img src="https://avatars.githubusercontent.com/u/20752142?v=4" width="100;" alt="gaurav1999"/>
+            <br />
+            <sub><b>Gaurav Agrawal</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/alveshelio">
             <img src="https://avatars.githubusercontent.com/u/8176422?v=4" width="100;" alt="alveshelio"/>
@@ -333,15 +340,15 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Nirmalya Ghosh</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/quentin-decre">
             <img src="https://avatars.githubusercontent.com/u/1137511?v=4" width="100;" alt="quentin-decre"/>
             <br />
             <sub><b>Quentin Decré</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/komninoschat">
             <img src="https://avatars.githubusercontent.com/u/29049104?v=4" width="100;" alt="komninoschat"/>

config/vite.lib.config.js

@@ -30,6 +30,15 @@ export default defineConfig({
       }
     })
   ],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    reporters: 'verbose',
+    include: [`${PWD}/src/**/*.{spec,test}.{ts,tsx}`, `${PWD}/tests/**/*.{spec,test}.{ts,tsx}`],
+    // Note: temporarily disabled threads, because of a bug in vitest
+    // https://github.com/vitest-dev/vitest/issues/1171
+    threads: false
+  },
   build: {
     sourcemap: true,
     lib: {

config/vite.react.config.js

@@ -1,5 +1,7 @@
-import react from '@vitejs/plugin-react'
 import { defineConfig } from 'vite'
+
+import react from '@vitejs/plugin-react'
+
 import baseLibConfig from './vite.lib.config'
 
 export default defineConfig({

config/vite.react.dev.config.js

@@ -1,4 +1,5 @@
 import { defineConfig } from 'vite'
+
 import viteReactConfig from './vite.react.config'
 
 export default defineConfig({

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

@@ -17,6 +17,7 @@ query {
     id
     displayName
     email
+    metadata
   }
 }
 ```
@@ -29,6 +30,7 @@ query {
     id
     displayName
     email
+    metadata
   }
 }
 ```
@@ -85,3 +87,8 @@ await nhost.graphql.request(
 ```
 
 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/cli.md

@@ -1,88 +0,0 @@
----
-title: 'CLI'
-sidebar_position: 11
----
-
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-Nhost CLI lets you run Nhost's development environment locally on macOS, Linux and Windows.
-
----
-
-## Installation
-
-Download and install Nhost CLI for your platform by running this command in your terminal:
-
-```bash
-sudo curl -L https://raw.githubusercontent.com/nhost/cli/main/get.sh | bash
-```
-
-### Dependencies
-
-- [Git](https://git-scm.com/downloads) must be installed on your system
-- [Docker](https://www.docker.com/get-started) must be installed and running when using Nhost CLI
-
-### Function runtimes
-
-To run serverless functions locally, you must have the appropriate runtimes installed on your machine:
-
-- JavaScript and TypeScript functions: `Node.js 14.*`
-
-For Node.js, you will also need to have [express](https://www.npmjs.com/package/express) installed in your repository:
-
-<Tabs>
-  <TabItem value="npm" label="npm" default>
-
-```bash
-npm install --save-dev express @types/express
-```
-
-  </TabItem>
-  <TabItem value="yarn" label="Yarn">
-
-```bash
-yarn add -D express @types/express
-```
-
-  </TabItem>
-</Tabs>
-
-[Read more about runtimes](/platform/serverless-functions)
-
----
-
-## Windows support
-
-If you have Windows Subsystem for Linux and `curl` in your Windows environment, you run the command following the instructions above. It will download the `.exe` binary to your current working directory.
-
-If you do not have the above dependencies, download and install the latest release manually from [GitHub releases](https://github.com/nhost/cli/releases).
-
----
-
-## Apple silicon (M1)
-
-As of late 2021, Hasura does not yet have an M1 optimized version for their GraphQL engine, which Nhost depends on.
-
-If you have a MacBook with an M1 chip, the CLI will automatically change the image used in `nhost/config.yaml` of your app:
-
-```yml
-services:
-  hasura:
-    image: fedormelexin/graphql-engine-arm64
-```
-
-This will run the Hasura GraphQL engine using Rosetta on your machine until an M1 optimized image is launched.
-
----
-
-## Upgrading
-
-If you already Nhost CLI installed, you can upgrade your installation:
-
-```bash
-# sudo permissions needed
-sudo nhost upgrade
-```
-
-The `upgrade` command was added in `0.5.0`.

docs/docs/platform/cli.mdx

@@ -0,0 +1,80 @@
+---
+title: 'CLI'
+sidebar_position: 11
+---
+
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
+
+Nhost CLI, or `nhost`, is a command-line interface that lets you run and manage Nhost apps locally on Mac, Linux and Windows (WSL2).
+
+This means you get a full-featured Nhost app running locally on your machine:
+
+- Postgres Database
+- Hasura GraphQL API
+- Hasura Console
+- Auth
+- Storage
+- Serverless Functions
+
+This way, you can develop and test local changes before you deploy them live. The CLI automatically tracks:
+
+- Postgres database migrations
+- Hasura metadata
+- Serverless functions
+
+It's recommended to commit and push changes to GitHub and use the [GitHub integration](/platform/github-integration) for Nhost to automatically deploy those changes live.
+
+## Installation
+
+To download and install Nhost CLI, run the following command:
+
+```bash
+sudo curl -L https://raw.githubusercontent.com/nhost/cli/main/get.sh | bash
+```
+
+### Dependencies
+
+The following dependencies are required:
+
+- [Git](https://git-scm.com/downloads)
+- [Docker](https://www.docker.com/get-started) (must be running while using the CLI)
+
+## Get started
+
+Start by authenticating yourself to Nhost Cloud:
+
+```
+nhost login
+```
+
+Once signed in, you can list all your Nhost apps using:
+
+```
+nhost list
+```
+
+Let's start by initializing a remote Nhost app locally with the following command:
+
+```
+nhost init --remote
+```
+
+Pick a Nhost app to use then change the directory once the app initialization is completed:
+
+```
+cd my_test_app
+```
+
+Then start the Nhost app locally:
+
+```
+nhost up
+```
+
+Hasura Console starts automatically and your Nhost app is running locally with the backend URL: `http://localhost:1337`.
+
+## What's next?
+
+- Read our in-depth guide on [Get started with Nhost CLI](/platform/overview/get-started-with-nhost-cli)
+- [CLI commands reference](/reference/cli)

docs/docs/platform/overview/architecture.md

@@ -23,7 +23,6 @@ Data is stored in Postgres and files are stored in S3.
 The open source tools used for the full Nhost stack are:
 
 - Database: [Postgres](https://www.postgresql.org/)
-- S3: [Minio](https://github.com/minio/minio)
 - GraphQL: [Hasura](https://github.com/hasura/graphql-engine)
 - Authentication: [Hasura Auth](https://github.com/nhost/hasura-auth)
 - Storage: [Hasura Storage](https://github.com/nhost/hasura-storage)

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

@@ -0,0 +1,438 @@
+---
+title: 'Get Started with Nhost CLI'
+sidebar_position: 2
+---
+
+# Get started with Nhost CLI
+
+Nhost's command-line interface (CLI) lets you run a complete Nhost development
+environment locally with the following services: PostgreSQL database, Hasura,
+Authentication, Storage (MinIO), Serverless Functions, and Emails (Mailhog).
+
+## Installation
+
+### Install the binary globally
+
+To install **Nhost CLI**, run this command from any directory in your terminal:
+
+```bash
+sudo curl -L https://raw.githubusercontent.com/nhost/cli/main/get.sh | bash
+```
+
+On **MacOS and Linux**, this will install the **Nhost CLI** in `/usr/local/bin`.
+
+If you'd prefer to install to a different location other than `/usr/local/bin`,
+set the `INSTALL_PATH` variable accordingly:
+
+```bash
+sudo curl -L https://raw.githubusercontent.com/nhost/cli/main/get.sh | INSTALL_PATH=$HOME/bin bash
+```
+
+On **Windows**, this will download and extract the binary `nhost.exe` available
+under `Assets` of the latest release from the GitHub release page:
+https://github.com/nhost/cli/releases.
+
+You can move the executable to a different location and add the path to the
+environment variable `PATH` to make `nhost` accessible globally.
+
+Finally, you can check that everything has been successfully installed by
+typing:
+
+```bash
+nhost version
+```
+
+![Nhost CLI Version](/img/architecture/cli/cli-installed.png)
+
+### (Optional) Add shell completion
+
+To add command auto-completion in the shell, you can run the following command:
+
+```bash
+nhost completion [shell]
+```
+
+This will generate the autocompletion script for `nhost` for the specified shell
+(bash, fish, PowerShell, or zsh).
+
+## Prerequisites
+
+### Dependencies
+
+Before using the **Nhost CLI**, make sure you have the following dependencies
+installed on your local machine:
+
+- [Git](https://git-scm.com/downloads)
+- [Docker](https://www.docker.com/get-started)
+
+:::caution
+Docker must be running while using Nhost CLI.
+:::
+
+### Nhost CLI login
+
+After installing **Nhost CLI**, you can log in to your Nhost account by running
+the following command:
+
+```bash
+nhost login
+```
+
+This will display a prompt for you to enter your Nhost account credentials
+(email/password).
+
+:::info
+You can create a Nhost account here: [https://app.nhost.io](https://app.nhost.io/).
+:::
+
+![Nhost CLI Login](/img/architecture/cli/cli-login.png)
+
+After successfully logging in, you are authorized to manage your Nhost projects
+using the Nhost CLI.
+
+You can also log out at any time by running:
+
+```bash
+nhost logout
+```
+
+## Set up your project
+
+### 1. Create a new Nhost app
+
+First things first, we need to create a new Nhost project.
+
+So, log in to your Nhost dashboard and click the **Create your first app**
+button.
+
+![Nhost Create App](/img/architecture/cli/create-app-step-1.png)
+
+Next, give your new Nhost app a name, select a geographic region for your Nhost
+services and click **Create App**.
+
+![Nhost Create App](/img/architecture/cli/create-app-step-2.png)
+
+After a few seconds, you should get a PostgreSQL database, a GraphQL API with
+Hasura, file storage, and authentication set up.
+
+### 2. Create a new GitHub Repository
+
+A typical workflow would also include creating a Github repository for your
+Nhost project. It will facilitate your development workflow since Nhost can
+integrate with Github to enable continuous deployment.
+
+So, go to your Github account and
+[create a new repository](https://github.com/new). You can make your repository
+either public or private.
+
+![Create GitHub Repo](/img/architecture/cli/create-github-repo.png)
+
+### 3. Connect Nhost project to Github
+
+Finally, connect your Github repository to your Nhost project. Doing so will
+enable Nhost to deploy new versions of your project when you push automatically
+commits to your connected Git repository.
+
+1. From your project workspace, click **Connect to Github**.
+
+![Connect to GitHub](/img/architecture/cli/connect-repo-step-1.png)
+
+2. **Install the Nhost app** on your Github account.
+
+![Connect to GitHub](/img/architecture/cli/connect-repo-step-2.png)
+
+3. **Connect** your Github repository.
+
+![Connect to GitHub](/img/architecture/cli/connect-repo-step-3.png)
+
+## Develop locally
+
+## 1. Initialize your Nhost app
+
+**Nhost CLI** brings the functionality of your Nhost production environment
+directly to your local machine.
+
+It provides Docker containers to run the backend services that match your
+production application in a local environment. That way, you can make changes
+and test your code locally before deploying those changes to production.
+
+You can either initialize a blank Nhost app locally to start from scratch by
+running the following command:
+
+```bash
+nhost init -n my-nhost-app
+```
+
+And then link it to a remote app from your Nhost workspace in `app.nhost.io` by
+running the `link` command and selecting the corresponding app from the prompt:
+
+```bash
+nhost link
+```
+
+Or you can directly initialize a local Nhost app from one of your existing
+production apps by specifying the `--remote` flag:
+
+```bash
+nhost init --remote -n my-nhost-app
+```
+
+It will also prompt you to choose the remote app you'd like to use to initialize
+your local Nhost development environment.
+
+![Select app](/img/architecture/cli/cli-select-app.png)
+
+The `init` command creates the Nhost app inside your current working directory
+within a `nhost/` folder.
+
+```
+my-nhost-app/
+  └─ nhost/
+      ├─ config.yaml
+      ├─ emails/
+      ├─ metadata/
+      ├─ migrations/
+      └─ seeds/
+```
+
+Finally, make sure to link your current working directory to your GitHub
+repository:
+
+```bash
+echo "# my-nhost-app" >> README.md
+git init
+git add README.md
+git commit -m "first commit"
+git branch -M main
+git remote add origin https://github.com/[github-username]/my-nhost-app.git
+git push -u origin main
+```
+
+## 2. Start a local development environment
+
+To start a local development environment for your Nhost app, run the following
+command:
+
+```bash
+nhost dev
+```
+
+:::caution
+Make sure [Docker](https://www.docker.com/get-started) is up and running. It’s required for Nhost to work.
+:::
+
+Running this command will start up all the backend services provided by Nhost.
+
+It also runs a webserver to serve the Hasura console for the GraphQL engine so
+you can manage the database and try out the API.
+
+The Hasura console should open automatically at
+[http://localhost:1337](http://localhost:1337/).
+
+![Hasura Console](/img/architecture/cli/hasura-console.png)
+
+## 3. Make changes
+
+There are three things the Nhost CLI and the GitHub integration track and apply
+to production:
+
+- Database migrations
+- Hasura Metadata
+- Serverless Functions
+
+:::caution
+Settings in `nhost/config.yaml` are not being applied to production. They only work locally for now.
+:::
+
+### Database migrations
+
+Database changes are tracked and managed through migrations.
+
+:::tip
+It's important that you use the Hasura console to make database changes. Indeed, with the Hasura console, DB migration files are generated incrementally to track changes automatically for you.
+:::
+
+To demonstrate how to make database changes, let's create a new table called
+`messages`, with the following columns:
+
+- `id` (type UUID and default `gen_random_uuid()`),
+- `text` (type Text),
+- `authorId` (type UUID),
+- `createdAt` (type Timestamp and default `now()`)
+
+In the Hasura console, head over to the **data** tab section and click on the
+PostgreSQL database (from the left side navigation) that Nhost provides us.
+
+Click on the **public** schema and the **Create Table** button.
+
+![Create Table](/img/architecture/cli/create-table-step-1.png)
+
+Then, enter the values for creating the `messages` table as mentioned above.
+Also, specify the `id` column as the primary key of the table, and link the
+`authorId` column to the `users.id` column using a foreign key to link the
+`users` and `messages` tables together.
+
+![Create Table](/img/architecture/cli/create-table-step-2.png)
+
+Next, click on the **Add Table** button to create the table.
+
+Finally, check out the `migrations/` folder in your project directory. A
+migration file has been created automatically to reflect our database changes
+and track the new table creation.
+
+The migration was created under `nhost/migrations/default`:
+
+```bash
+$ ls -la nhost/migrations/default
+total 0
+drwxr-xr-x  3 user  staff   96 Apr 27 17:06 .
+drwxr-xr-x  3 user  staff   96 Apr 27 17:06 ..
+drwxr-xr-x  4 user  staff  128 Apr 27 17:06 1651071963431_create_table_public_messages
+```
+
+However, note that this database migration has only been applied locally. In
+other words, the `messages` table does not (yet) exists in production.
+
+To apply the local changes to production, check out the
+[Deploy your project](#deploy-your-project) section below.
+
+### Hasura metadata
+
+In addition to database schema changes, Nhost also tracks Hasura metadata.
+
+The Hasura metadata track all the actions performed on the console, like
+tracking tables/views/functions, creating relationships, configuring
+permissions, creating event triggers, and remote schemas.
+
+To demonstrate it, let's add a new permission to our `messages` table for the
+`user` role on the `insert` operation. That permission will allow users to
+create new messages.
+
+So, open the permissions tab for the `messages` table, type in `user` in the
+role cell, and click the edit icon on the `insert` operation:
+
+![Create Table](/img/architecture/cli/permissions-1.png)
+
+To restrict the users to create new messages only for themselves, specify an
+`_eq` condition between the `authorId` and the `X-Hasura-User-ID` session
+variable, which is passed with each request.
+
+![Create Table](/img/architecture/cli/permissions-2.png)
+
+Then, select the columns the users can define through the GraphQL API, set the
+value for the `authorId` column to be equal to the `X-Hasura-User-ID` session
+variable, and click **Save Permissions**.
+
+![Create Table](/img/architecture/cli/permissions-3.png)
+
+Finally, check out the `metadata/` folder in your project directory to confirm
+that the permission changes we did were tracked locally in your git repository.
+
+In our case, those changes should be tracked in
+`nhost/metadata/databases/default/tables/public_messages.yaml`:
+
+```yaml title="nhost/metadata/databases/default/tables/public_messages.yaml"
+table:
+  name: messages
+  schema: public
+insert_permissions:
+  - permission:
+      backend_only: false
+      check:
+        authorId:
+          _eq: X-Hasura-User-Id
+      columns:
+        - text
+      set:
+        authorId: x-hasura-User-Id
+    role: user
+```
+
+### Serverless functions
+
+Now let's create a serverless function before we push all changes to GitHub so
+Nhost can deploy them to production.
+
+For this guide, let's create a simple serverless function that will return the
+current date-time when called.
+
+First, make sure to install `express`, which is required for serverless
+functions to work.
+
+```bash
+npm install express
+npm install -d @types/node @types/express
+```
+
+Then, create a new file named `time.ts` inside the `functions/` folder of your
+working directory, and paste the following code:
+
+```ts title="functions/time.ts"
+import { Request, Response } from 'express';
+
+export default (req: Request, res: Response) => {
+  return res
+    .status(200)
+    .send(`Hello ${req.query.name}! It's now: ${new Date().toUTCString()}`);
+};
+```
+
+Every JavaScript and TypeScript file inside the `functions/` folder becomes an
+API endpoint.
+
+Locally, the base URL for the serverless functions is
+`http://localhost:1337/v1/functions`. Then, the endpoint for each function is
+determined by its filename or the name of its dedicated parent directory.
+
+For example, the endpoint for our function is
+`http://localhost:1337/v1/functions/time`.
+
+```bash
+curl http://localhost:1337/v1/functions/time\?name\=Greg
+Hello Greg! It's now: Wed, 27 Apr 2022 18:52:12 GMT
+```
+
+## Deploy your project
+
+To deploy your local changes to production, you can commit and push them to
+GitHub. As a result, Nhost will automatically pick up the changes in your
+repository and apply them to your associated remote Nhost project.
+
+:::caution
+Make sure to [connect your Github repository](#3-connect-nhost-project-to-Github) to your Nhost project first.
+:::
+
+```bash
+git add -A
+git commit -m "commit message"
+git push
+```
+
+To check out your deployment, head over to the **Deployments** tab in your
+[Nhost dashboard](https://app.nhost.io).
+
+![Deployments](/img/architecture/cli/deployments.png)
+
+## Get help
+
+To get usage tips and learn more about available commands from within Nhost CLI,
+run the following:
+
+```shell
+nhost help
+```
+
+For more information about a specific command, run the command with the `--help`
+flag:
+
+```
+nhost init --help
+```
+
+If you have additional questions or ideas for new features, you can
+[start an issue](https://github.com/nhost/cli/issues) or
+[a new discussion](https://github.com/nhost/cli/discussions/new) on Nhost CLI’s
+open-source repository. You can also
+[chat with our team](https://discord.com/invite/9V7Qb2U) on Discord.
+
+We’d love to hear from you!

docs/docs/platform/quickstarts/nextjs.md

@@ -1,8 +0,0 @@
----
-title: 'Quickstart: Next.js'
-sidebar_position: 2
----
-
-## Introduction
-
-This is a quickstart guide for React with Nhost.

docs/docs/platform/quickstarts/nextjs.mdx

@@ -0,0 +1,744 @@
+---
+title: 'Quickstart: Next.js'
+sidebar_position: 2
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Quickstart: Next.js
+
+## Introduction
+
+This quickstart guide provides the steps you need to build a simple Next.js app
+powered by Nhost for the backend. It includes:
+
+- Database: [PostgreSQL](https://www.postgresql.org/)
+- Instant GraphQL API: [Hasura](https://hasura.io/)
+- Authentication: [Hasura Auth](https://github.com/nhost/hasura-auth/)
+- Storage: [Hasura Storage](https://hub.docker.com/r/nhost/hasura-storage)
+
+By the end of this guide, you'll have a full-stack app that allows users to log
+in to access a protected dashboard and update their profile information.
+
+## Prerequisites
+
+Before getting started, let's make sure that your development environment is
+ready.
+
+You'll need **Node.js** version 12 or later: [install it from here](https://nodejs.org/en/).
+
+## Project setup
+
+### Create a new Nhost app
+
+First things first, we need to create a new Nhost project.
+
+So, log in to your Nhost dashboard and click the **Create your first app**
+button.
+
+![nhost-first-app](/img/quickstarts/create-app-step-1.png)
+
+Next, give your new Nhost app a name, select a geographic region for your Nhost
+services and click **Create App**.
+
+![nhost-first-app](/img/quickstarts/create-app-step-2.png)
+
+After a few seconds, you should get a PostgreSQL database, a GraphQL API with
+Hasura, file storage, and authentication set up.
+
+:::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).
+:::
+
+## Initialize the app
+
+### Create a Next.js app
+
+The simplest way to create a new Next.js application is by using the tool called
+`create-next-app`, which bootstraps a Next.js app for you without the hassle of
+configuring everything yourself.
+
+So, open your terminal, and run the following command:
+
+```bash
+npx create-next-app my-nhost-app --example "https://github.com/nhost/quickstart-nextjs"
+```
+
+:::info
+This command uses an [existing template](https://github.com/nhost/quickstart-nextjs), through the `--example` flag, which already contains the React components and pages we'll use for this guide.
+:::
+
+You can now `cd` into your project directory:
+
+```bash
+cd my-nhost-app
+```
+
+And run the development server with the following command:
+
+<Tabs groupId="package-manager">
+  <TabItem value="npm" label="npm" default>
+
+```bash
+npm run dev
+```
+
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+
+```bash
+yarn dev
+```
+
+  </TabItem>
+</Tabs>
+
+If everything is working fine, your Next.js development server should be running
+on port 3000. Open [http://localhost:3000](http://localhost:3000) from your
+browser to check this out.
+
+### Configure Nhost with Next.js
+
+To work with Nhost from within our Next.js app, we'll use the
+[Next.js SDK](https://github.com/nhost/nhost/tree/main/packages/nextjs) provided
+by Nhost. It's a wrapper around the
+[Nhost React SDK](https://github.com/nhost/nhost/tree/main/packages/react) which
+gives us a way to interact with our Nhost backend using React hooks.
+
+You can install the Nhost Next.js SDK with:
+
+<Tabs groupId="package-manager">
+  <TabItem value="npm" label="npm" default>
+
+```bash
+npm install @nhost/react @nhost/nextjs graphql
+```
+
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+
+```bash
+yarn add @nhost/react @nhost/nextjs graphql
+```
+
+  </TabItem>
+</Tabs>
+
+Next, open your `_app.js` file as we'll now configure Nhost inside our app.
+
+The Nhost Next.js SDK comes with a React provider named `NhostNextProvider` that
+makes the authentication state and all the provided React hooks available in our
+application.
+
+Use the following code to instantiate a new Nhost client and link it to your
+Nhost backend:
+
+```jsx title="pages/_app.js"
+import { UserProvider } from '../UserProvider';
+// highlight-start
+import { NhostNextProvider, NhostClient } from '@nhost/nextjs';
+// highlight-end
+
+// highlight-start
+const nhost = new NhostClient({
+  backendUrl: process.env.NEXT_PUBLIC_NHOST_BACKEND_URL || '',
+});
+// highlight-end
+
+function MyApp({ Component, pageProps }) {
+  return (
+    {/* highlight-next-line */}
+    <NhostNextProvider nhost={nhost} initial={pageProps.nhostSession}>
+      <UserProvider>
+        {/* ... */}
+      </UserProvider>
+    {/* highlight-next-line */}
+    </NhostNextProvider>
+  );
+}
+```
+
+Finally, make sure to create an environment variable named
+`NEXT_PUBLIC_NHOST_BACKEND_URL` to store your Nhost backend URL:
+
+```yaml title=".env.development"
+NEXT_PUBLIC_NHOST_BACKEND_URL=YOUR_NHOST_BACKEND_URL
+```
+
+You can find your Nhost backend URL for your project from [your dashboard](https://app.nhost.io) as shown below:
+
+![Nhost Backend URL](/img/quickstarts/app-dashboard.png)
+
+:::caution
+Don't forget to restart your Next.js server after saving your `.env.development`
+file to load your new environment variable.
+:::
+
+## Build the app
+
+### Add authentication
+
+#### 1. Sign-up
+
+The next step is to allow our users to authenticate into our application.
+Let's start with implementing the sign-up process.
+
+For that, we'll use the `useSignUpEmailPassword` hook provided by the Nhost
+Next.js SDK within our `SignUp` component.
+
+So, open up the corresponding file from your project, and use the following
+code:
+
+```jsx title="components/SignUp.js"
+import styles from '../styles/components/SignUp.module.css';
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+import { useSignUpEmailPassword } from '@nhost/nextjs';
+import Link from 'next/link';
+import Image from 'next/image';
+import Input from './Input';
+import Spinner from './Spinner';
+
+const SignUp = () => {
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const router = useRouter();
+
+  const {
+    signUpEmailPassword,
+    isLoading,
+    isSuccess,
+    needsEmailVerification,
+    isError,
+    error,
+  } = useSignUpEmailPassword();
+
+  const handleOnSubmit = async (e) => {
+    e.preventDefault();
+
+    await signUpEmailPassword(email, password, {
+      displayName: `${firstName} ${lastName}`.trim(),
+      metadata: {
+        firstName,
+        lastName,
+      },
+    });
+  };
+
+  if (isSuccess) {
+    router.push('/');
+    return null;
+  }
+
+  const disableForm = isLoading || needsEmailVerification;
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <div className={styles['logo-wrapper']}>
+          <Image src="/logo.svg" alt="logo" layout="fill" objectFit="contain" />
+        </div>
+
+        {needsEmailVerification ? (
+          <p className={styles['verification-text']}>
+            Please check your mailbox and follow the verification link to verify
+            your email.
+          </p>
+        ) : (
+          <form onSubmit={handleOnSubmit} className={styles.form}>
+            <div className={styles['input-group']}>
+              <Input
+                label="First name"
+                value={firstName}
+                onChange={(e) => setFirstName(e.target.value)}
+                disabled={disableForm}
+                required
+              />
+              <Input
+                label="Last name"
+                value={lastName}
+                onChange={(e) => setLastName(e.target.value)}
+                disabled={disableForm}
+                required
+              />
+            </div>
+            <Input
+              type="email"
+              label="Email address"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              disabled={disableForm}
+              required
+            />
+            <Input
+              type="password"
+              label="Create password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              disabled={disableForm}
+              required
+            />
+
+            <button
+              type="submit"
+              disabled={disableForm}
+              className={styles.button}
+            >
+              {isLoading ? <Spinner size="sm" /> : 'Create account'}
+            </button>
+
+            {isError ? (
+              <p className={styles['error-text']}>{error?.message}</p>
+            ) : null}
+          </form>
+        )}
+      </div>
+
+      <p className={styles.text}>
+        Already have an account?{' '}
+        <Link href="/sign-in">
+          <a className={styles.link}>Sign in</a>
+        </Link>
+      </p>
+    </div>
+  );
+};
+
+export default SignUp;
+```
+
+By default, the user must verify his email address before fully signing up. You can change this setting from your Nhost dashboard.
+
+#### 2. Sign-in
+
+Now that new users can sign up for our application, let's see how to allow
+existing users to sign in with email and password.
+
+For that, we will use the Nhost hook named `useSignInEmailPassword` inside our
+`SignIn` component the same way we did with our `SignUp` component. So, here's
+what your component should look like after applying the changes for the sign-in
+logic:
+
+```jsx title="components/SignIn.js"
+import styles from '../styles/components/SignIn.module.css';
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+import { useSignInEmailPassword } from '@nhost/nextjs';
+import Link from 'next/link';
+import Image from 'next/image';
+import Input from './Input';
+import Spinner from './Spinner';
+
+const SignIn = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const router = useRouter();
+
+  const {
+    signInEmailPassword,
+    isLoading,
+    isSuccess,
+    needsEmailVerification,
+    isError,
+    error,
+  } = useSignInEmailPassword();
+
+  const handleOnSubmit = async (e) => {
+    e.preventDefault();
+    await signInEmailPassword(email, password);
+  };
+
+  if (isSuccess) {
+    router.push('/');
+    return null;
+  }
+
+  const disableForm = isLoading || needsEmailVerification;
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <div className={styles['logo-wrapper']}>
+          <Image src="/logo.svg" alt="logo" layout="fill" objectFit="contain" />
+        </div>
+
+        {needsEmailVerification ? (
+          <p className={styles['verification-text']}>
+            Please check your mailbox and follow the verification link to verify
+            your email.
+          </p>
+        ) : (
+          <>
+            <form onSubmit={handleOnSubmit} className={styles.form}>
+              <Input
+                type="email"
+                label="Email address"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                disabled={disableForm}
+                required
+              />
+              <Input
+                type="password"
+                label="Password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                disabled={disableForm}
+                required
+              />
+
+              <button
+                type="submit"
+                disabled={disableForm}
+                className={styles.button}
+              >
+                {isLoading ? <Spinner size="sm" /> : 'Sign in'}
+              </button>
+
+              {isError ? (
+                <p className={styles['error-text']}>{error?.message}</p>
+              ) : null}
+            </form>
+          </>
+        )}
+      </div>
+
+      <p className={styles.text}>
+        No account yet?{' '}
+        <Link href="/sign-up">
+          <a className={styles.link}>Sign up</a>
+        </Link>
+      </p>
+    </div>
+  );
+};
+
+export default SignIn;
+```
+
+#### 3. Sign-out
+
+Finally, to allow the users to sign out from the app, we can use the Nhost
+`useSignOut` hook:
+
+```jsx title="components/Layout.js"
+import { useSignOut } from '@nhost/nextjs';
+
+const Layout = ({ children = null }) => {
+  const { signOut } = useSignOut();
+
+  const menuItems = [
+    //..
+    {
+      label: 'Logout',
+      onClick: signOut,
+      icon: LogoutIcon,
+    },
+  ];
+
+  //...
+};
+```
+
+### Protect routes
+
+Now that we have implemented authentication, we can easily decide who can access
+certain parts of our application.
+
+In our case, we'll only allow authenticated users to have access to the `/` and
+`/profile` routes. All the other users should be redirected to the `/sign-in`
+page if they try to access those routes.
+
+To do so, we can check the authentication status of the current user using the
+Nhost SDK by creating a
+[high-order component](https://reactjs.org/docs/higher-order-components.html):
+
+```jsx title="withAuth.js"
+import styles from './styles/pages/ProtectedRoute.module.css';
+import { useRouter } from 'next/router';
+import { useAuthenticationStatus } from '@nhost/nextjs';
+import Spinner from './components/Spinner';
+
+export default function withAuth(Component) {
+  return function AuthProtected(props) {
+    const router = useRouter();
+    const { isLoading, isAuthenticated } = useAuthenticationStatus();
+
+    if (isLoading) {
+      return (
+        <div className={styles.container}>
+          <Spinner />
+        </div>
+      );
+    }
+
+    if (!isAuthenticated) {
+      router.push('/sign-in');
+      return null;
+    }
+
+    return <Component {...props} />;
+  };
+}
+```
+
+Then, wrap our Next.js pages, `index.js` and `profile.js`, with it:
+
+<Tabs
+defaultValue="index"
+values={[
+  {label: 'pages/index.js', value: 'index'},
+  {label: 'pages/profile.js', value: 'profile'},
+]}>
+<TabItem value="index">
+
+```js
+import withAuth from '../withAuth';
+
+const Home = () => {
+  //...
+};
+
+export default withAuth(Home);
+```
+
+</TabItem>
+<TabItem value="profile">
+
+```js
+import withAuth from '../withAuth';
+
+const Profile = () => {
+  //...
+};
+
+export default withAuth(Profile);
+```
+
+</TabItem>
+</Tabs>
+
+### Retrieve user data
+
+Finally, let's display the information of the authenticated user throughout his
+dashboard to make the app more personalized.
+
+Getting the current authenticated user data is quite easy. We
+can use the `useUserData` hook provided by Nhost to do it.
+
+So, open the `UserProvider.js` file and use this hook like so:
+
+```js
+import React, { useContext } from 'react';
+// highlight-next-line
+import { useUserData } from '@nhost/nextjs';
+
+const UserContext = React.createContext(null);
+
+export function UserProvider({ children = null }) {
+  // highlight-next-line
+  const user = useUserData();
+  return (
+    <UserContext.Provider value={{ user }}>{children}</UserContext.Provider>
+  );
+}
+
+export function useUserContext() {
+  return useContext(UserContext);
+}
+```
+
+That's it! The JSX code for rendering the user data (email, display name, etc.)
+is already included in your components as part of the example repository you've
+bootstrapped at the beginning of this guide.
+
+### Update user data
+
+Nhost provides a GraphQL API through Hasura so that we can query and mutate our
+data instantly.
+
+In this tutorial, we'll use the
+[Apollo GraphQL client](https://www.apollographql.com/) for interacting with
+this GraphQL API.
+
+So, start by installing the following dependencies:
+
+<Tabs groupId="package-manager">
+  <TabItem value="npm" label="npm" default>
+
+```bash
+npm install @nhost/react-apollo @apollo/client
+```
+
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+
+```bash
+yarn add @nhost/react-apollo @apollo/client
+```
+
+  </TabItem>
+</Tabs>
+
+Then, add the `NhostApolloProvider` from `@nhost/react-apollo` into your
+`_app_.js` file.
+
+```jsx title="pages/_app.js"
+import { NhostApolloProvider } from '@nhost/react-apollo';
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <NhostNextProvider nhost={nhost} initial={pageProps.nhostSession}>
+      <NhostApolloProvider nhost={nhost}>{/* ... */}</NhostApolloProvider>
+    </NhostNextProvider>
+  );
+}
+```
+
+From there, we can construct our GraphQL query and use the Apollo `useMutation`
+hook to execute that query when the user submits the form from the profile page:
+
+```js title="pages/profile.js"
+import { gql, useMutation } from '@apollo/client';
+import { toast } from 'react-hot-toast';
+
+const UPDATE_USER_MUTATION = gql`
+  mutation ($id: uuid!, $displayName: String!, $metadata: jsonb) {
+    updateUser(
+      pk_columns: { id: $id }
+      _set: { displayName: $displayName, metadata: $metadata }
+    ) {
+      id
+      displayName
+      metadata
+    }
+  }
+`;
+
+const Profile = () => {
+  const [mutateUser, { loading: updatingProfile }] =
+    useMutation(UPDATE_USER_MUTATION);
+
+  const updateUserProfile = async (e) => {
+    e.preventDefault();
+
+    try {
+      await mutateUser({
+        variables: {
+          id: user.id,
+          displayName: `${firstName} ${lastName}`.trim(),
+          metadata: {
+            firstName,
+            lastName,
+          },
+        },
+      });
+      toast.success('Updated successfully', { id: 'updateProfile' });
+    } catch (error) {
+      toast.error('Unable to update profile', { id: 'updateProfile' });
+    }
+  };
+
+  //...
+};
+```
+
+Finally, since Hasura has an **allow nothing by default** policy, and we haven't
+set any permissions yet, our GraphQL mutations would fail.
+
+So, open the Hasura console from the **Data** tab of your project from [your Nhost dashboard](https://app.nhost.io/). Then, go to the **permissions** tab of the `users` table, type in `user` in the role
+cell, and click the edit icon on the `select` operation:
+
+![Hasura users permissions](/img/quickstarts/hasura-permissions-1.png)
+
+To restrict the user to read his data only, specify a condition with the
+user's ID and the `X-Hasura-User-ID` session variable, which is passed with each
+requests.
+
+![Hasura users permissions](/img/quickstarts/hasura-permissions-2.png)
+
+Next, select the columns you'd like the users to have access to, and click
+**Save Permissions**.
+
+![Hasura users permissions](/img/quickstarts/hasura-permissions-3.png)
+
+Repeat the same steps on the `update` operation for the `user` role to allow
+users to update their `displayName` and `metadata` only.
+
+Finally, to add caching, synchronizing, and updating server state in your Next.js app, let's refactor the user data fetching by using the Apollo client and our GraphQL API instead.
+
+So, first add the following GraphQL query to retrieve the current user data from the `UserProvider.js` file:
+
+```js title="UserProvider.js"
+import { gql } from '@apollo/client';
+
+const GET_USER_QUERY = gql`
+  query GetUser($id: uuid!) {
+    user(id: $id) {
+      id
+      email
+      displayName
+      metadata
+      avatarUrl
+    }
+  }
+`;
+
+export function UserProvider() {
+  //...
+}
+```
+
+Then, replace the `useUserData` hook with the `useUserId` hook to retrieve the current user's ID only.
+
+```js title="UserProvider.js"
+import { useUserId } from '@nhost/nextjs';
+
+export function UserProvider() {
+  const id = useUserId();
+  //...
+}
+```
+
+Finally, we can run our GraphQL query using the `useQuery` hook and the current user's ID.
+
+```jsx title="UserProvider.js"
+// highlight-next-line
+import { gql, useQuery } from '@apollo/client';
+
+export function UserProvider({ children = null }) {
+  const id = useUserId();
+  // highlight-start
+  const { loading, error, data } = useQuery(GET_USER_QUERY, {
+    variables: { id },
+  });
+  const user = data?.user;
+  // highlight-end
+
+  // highlight-start
+  if (error) {
+    return <p>Something went wrong. Try to refresh the page.</p>;
+  }
+  if (loading) {
+    return null;
+  }
+  // highlight-end
+
+  return (
+    <UserContext.Provider value={{ user }}>{children}</UserContext.Provider>
+  );
+}
+```
+
+You now have a fully functional Next.js application. Congratulations!
+
+## Next Steps
+
+- Did you enjoy Nhost? Give us a star ⭐ on [Github](https://github.com/nhost/nhost). Thank you!
+- Check out our more in-depth [examples](https://github.com/nhost/nhost/tree/main/examples).
+- Build your next app with [Nhost](https://app.nhost.io/)!

docs/docs/platform/quickstarts/react.md

@@ -1,8 +0,0 @@
----
-title: 'Quickstart: React'
-sidebar_position: 1
----
-
-## Introduction
-
-This is a quickstart guide for React with Nhost.

docs/docs/platform/quickstarts/react.mdx

@@ -0,0 +1,714 @@
+---
+title: 'Quickstart: React'
+sidebar_position: 1
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Quickstart: React
+
+## Introduction
+
+This quickstart guide provides the steps you need to build a simple React app
+powered by Nhost for the backend. It includes:
+
+- Database: [PostgreSQL](https://www.postgresql.org/)
+- Instant GraphQL API: [Hasura](https://hasura.io/)
+- Authentication: [Hasura Auth](https://github.com/nhost/hasura-auth/)
+- Storage: [Hasura Storage](https://hub.docker.com/r/nhost/hasura-storage)
+
+By the end of this guide, you'll have a full-stack app that allows users to log
+in to access a protected dashboard and update their profile information.
+
+## Prerequisites
+
+Before getting started, let's make sure that your development environment is
+ready.
+
+You'll need **Node.js** version 14 or later: [install it from here](https://nodejs.org/en/).
+
+## Project setup
+
+### Create a new Nhost app
+
+First things first, we need to create a new Nhost project.
+
+So, log in to your Nhost dashboard and click the **Create your first app**
+button.
+
+![nhost-first-app](/img/quickstarts/create-app-step-1.png)
+
+Next, give your new Nhost app a name, select a geographic region for your Nhost
+services and click **Create App**.
+
+![nhost-first-app](/img/quickstarts/create-app-step-2.png)
+
+After a few seconds, you should get a PostgreSQL database, a GraphQL API with
+Hasura, file storage, and authentication set up.
+
+:::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).
+:::
+
+## Initialize the app
+
+### Create a React app
+
+The simplest way to create a new React application is by using the tool called
+`create-react-app`, which bootstraps a React app for you without the hassle of
+configuring everything yourself.
+
+So, open your terminal, and run the following command:
+
+```bash
+npx create-react-app my-nhost-app --template nhost-quickstart
+```
+
+:::info
+This command uses an [existing template](https://github.com/nhost/cra-template-nhost-quickstart), through the `--template` flag, which already contains the React components and pages we'll use for this guide.
+:::
+
+You can now `cd` into your project directory:
+
+```bash
+cd my-nhost-app
+```
+
+And run the development server with the following command:
+
+<Tabs groupId="package-manager">
+  <TabItem value="npm" label="npm" default>
+
+```bash
+npm start
+```
+
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+
+```bash
+yarn start
+```
+
+  </TabItem>
+</Tabs>
+
+If everything is working fine, your React development server should be running
+on port 3000. Open [http://localhost:3000](http://localhost:3000) from your
+browser to check this out.
+
+### Configure Nhost with React
+
+To work with Nhost from within our React app, we'll use the
+[React SDK](https://github.com/nhost/nhost/tree/main/packages/react) provided
+by Nhost. It's a wrapper around the
+[Nhost JavaScript SDK](https://github.com/nhost/nhost/tree/main/packages/nhost-js) which
+gives us a way to interact with our Nhost backend using React hooks.
+
+You can install the Nhost React SDK with:
+
+<Tabs groupId="package-manager">
+  <TabItem value="npm" label="npm" default>
+
+```bash
+npm install @nhost/react graphql
+```
+
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+
+```bash
+yarn add @nhost/react graphql
+```
+
+  </TabItem>
+</Tabs>
+
+Next, open your `App.js` file as we'll now configure Nhost inside our app.
+
+The Nhost React SDK comes with a React provider named `NhostReactProvider` that
+makes the authentication state and all the provided React hooks available in our
+application.
+
+Use the following code to instantiate a new Nhost client and link it to your
+Nhost backend:
+
+```jsx title="src/App.js"
+import { NhostClient, NhostReactProvider } from '@nhost/react';
+
+const nhost = new NhostClient({
+  backendUrl: process.env.REACT_APP_NHOST_BACKEND_URL || '',
+});
+
+function App() {
+  return (
+    <NhostReactProvider nhost={nhost}>
+      <BrowserRouter>{/* ... */}</BrowserRouter>
+    </NhostReactProvider>
+  );
+}
+
+export default App;
+```
+
+Finally, make sure to create an environment variable named
+`REACT_APP_NHOST_BACKEND_URL` to store your Nhost backend URL:
+
+```yaml title=".env.local"
+REACT_APP_NHOST_BACKEND_URL=YOUR_NHOST_BACKEND_URL
+```
+
+You can find your Nhost backend URL for your project from [your dashboard](https://app.nhost.io) as shown below:
+
+![Nhost Backend URL](/img/quickstarts/app-dashboard.png)
+
+:::caution
+Don't forget to restart your React server after saving your `.env.local`
+file to load your new environment variable.
+:::
+
+## Build the app
+
+### Add authentication
+
+#### 1. Sign-up
+
+The next step is to allow our users to authenticate into our application.
+Let's start with implementing the sign-up process.
+
+For that, we'll use the `useSignUpEmailPassword` hook provided by the Nhost
+React SDK within our `SignUp` component.
+
+So, open up the corresponding file from your project, and use the following
+code:
+
+```jsx title="src/components/SignUp.js"
+import styles from '../styles/components/SignUp.module.css';
+import { useState } from 'react';
+import { useSignUpEmailPassword } from '@nhost/react';
+import { Link, Navigate } from 'react-router-dom';
+import Input from './Input';
+import Spinner from './Spinner';
+
+const SignUp = () => {
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const {
+    signUpEmailPassword,
+    isLoading,
+    isSuccess,
+    needsEmailVerification,
+    isError,
+    error,
+  } = useSignUpEmailPassword();
+
+  const handleOnSubmit = (e) => {
+    e.preventDefault();
+
+    signUpEmailPassword(email, password, {
+      displayName: `${firstName} ${lastName}`.trim(),
+      metadata: {
+        firstName,
+        lastName,
+      },
+    });
+  };
+
+  if (isSuccess) {
+    return <Navigate to="/" replace={true} />;
+  }
+
+  const disableForm = isLoading || needsEmailVerification;
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <div className={styles['logo-wrapper']}>
+          <img src={process.env.PUBLIC_URL + 'logo.svg'} alt="logo" />
+        </div>
+
+        {needsEmailVerification ? (
+          <p className={styles['verification-text']}>
+            Please check your mailbox and follow the verification link to verify
+            your email.
+          </p>
+        ) : (
+          <form onSubmit={handleOnSubmit} className={styles.form}>
+            <div className={styles['input-group']}>
+              <Input
+                label="First name"
+                value={firstName}
+                onChange={(e) => setFirstName(e.target.value)}
+                disabled={disableForm}
+                required
+              />
+              <Input
+                label="Last name"
+                value={lastName}
+                onChange={(e) => setLastName(e.target.value)}
+                disabled={disableForm}
+                required
+              />
+            </div>
+            <Input
+              type="email"
+              label="Email address"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              disabled={disableForm}
+              required
+            />
+            <Input
+              type="password"
+              label="Create password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              disabled={disableForm}
+              required
+            />
+
+            <button
+              type="submit"
+              disabled={disableForm}
+              className={styles.button}
+            >
+              {isLoading ? <Spinner size="sm" /> : 'Create account'}
+            </button>
+
+            {isError ? (
+              <p className={styles['error-text']}>{error?.message}</p>
+            ) : null}
+          </form>
+        )}
+      </div>
+
+      <p className={styles.text}>
+        Already have an account?{' '}
+        <Link to="/sign-in" className={styles.link}>
+          Sign in
+        </Link>
+      </p>
+    </div>
+  );
+};
+
+export default SignUp;
+```
+
+By default, the user must verify his email address before fully signing up. You can change this setting from your Nhost dashboard.
+
+#### 2. Sign-in
+
+Now that new users can sign up for our application, let's see how to allow
+existing users to sign in with email and password.
+
+For that, we will use the Nhost hook named `useSignInEmailPassword` inside our
+`SignIn` component the same way we did with our `SignUp` component. So, here's
+what your component should look like after applying the changes for the sign-in
+logic:
+
+```jsx title="src/components/SignIn.js"
+import styles from '../styles/components/SignIn.module.css';
+import { useState } from 'react';
+import { useSignInEmailPassword } from '@nhost/react';
+import { Link, Navigate } from 'react-router-dom';
+import Input from './Input';
+import Spinner from './Spinner';
+
+const SignIn = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const {
+    signInEmailPassword,
+    isLoading,
+    isSuccess,
+    needsEmailVerification,
+    isError,
+    error,
+  } = useSignInEmailPassword();
+
+  const handleOnSubmit = (e) => {
+    e.preventDefault();
+    signInEmailPassword(email, password);
+  };
+
+  if (isSuccess) {
+    return <Navigate to="/" replace={true} />;
+  }
+
+  const disableForm = isLoading || needsEmailVerification;
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <div className={styles['logo-wrapper']}>
+          <img src={process.env.PUBLIC_URL + 'logo.svg'} alt="logo" />
+        </div>
+
+        {needsEmailVerification ? (
+          <p className={styles['verification-text']}>
+            Please check your mailbox and follow the verification link to verify
+            your email.
+          </p>
+        ) : (
+          <form onSubmit={handleOnSubmit} className={styles.form}>
+            <Input
+              type="email"
+              label="Email address"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              disabled={disableForm}
+              required
+            />
+            <Input
+              type="password"
+              label="Password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              disabled={disableForm}
+              required
+            />
+
+            <button
+              type="submit"
+              disabled={disableForm}
+              className={styles.button}
+            >
+              {isLoading ? <Spinner size="sm" /> : 'Sign in'}
+            </button>
+
+            {isError ? (
+              <p className={styles['error-text']}>{error?.message}</p>
+            ) : null}
+          </form>
+        )}
+      </div>
+
+      <p className={styles.text}>
+        No account yet?{' '}
+        <Link to="/sign-up" className={styles.link}>
+          Sign up
+        </Link>
+      </p>
+    </div>
+  );
+};
+
+export default SignIn;
+```
+
+#### 3. Sign-out
+
+Finally, to allow the users to sign out from the app, we can use the Nhost
+`useSignOut` hook:
+
+```jsx title="src/components/Layout.js"
+import { useSignOut } from '@nhost/react';
+
+const Layout = () => {
+  const { signOut } = useSignOut();
+
+  const menuItems = [
+    //..
+    {
+      label: 'Logout',
+      onClick: signOut,
+      icon: LogoutIcon,
+    },
+  ];
+
+  //...
+};
+```
+
+### Protect routes
+
+Now that we have implemented authentication, we can easily decide who can access
+certain parts of our application.
+
+In our case, we'll only allow authenticated users to have access to the `/` and
+`/profile` routes. All the other users should be redirected to the `/sign-in`
+page if they try to access those routes.
+
+To do so, we can create a wrapper component (`ProtectedRoute`) to check the authentication status of the current user using the Nhost SDK:
+
+```jsx title="src/components/ProtectedRoute.js"
+import styles from '../styles/components/ProtectedRoute.module.css';
+import { useAuthenticationStatus } from '@nhost/react';
+import { Navigate, useLocation } from 'react-router-dom';
+import Spinner from './Spinner';
+
+const ProtectedRoute = ({ children }) => {
+  const { isAuthenticated, isLoading } = useAuthenticationStatus();
+  const location = useLocation();
+
+  if (isLoading) {
+    return (
+      <div className={styles.container}>
+        <Spinner />
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to="/sign-in" state={{ from: location }} replace />;
+  }
+
+  return children;
+};
+
+export default ProtectedRoute;
+```
+
+Then, we can use a [layout route](https://reactrouter.com/docs/en/v6/getting-started/concepts#layout-routes) in our `App.js` file, to wrap the `ProtectedRoute` component around the routes we want to protect:
+
+```jsx title="src/App.js"
+import ProtectedRoute from './components/ProtectedRoute';
+
+function App() {
+  return (
+    <NhostReactProvider nhost={nhost}>
+      <BrowserRouter>
+        <Routes>
+          <Route path="sign-up" element={<SignUp />} />
+          <Route path="sign-in" element={<SignIn />} />
+          <Route
+            path="/"
+            // highlight-start
+            element={
+              <ProtectedRoute>
+                <Layout />
+              </ProtectedRoute>
+            }
+            // highlight-end
+          >
+            <Route index element={<Dashboard />} />
+            <Route path="profile" element={<Profile />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </NhostReactProvider>
+  );
+}
+```
+
+### Retrieve user data
+
+Finally, let's display the information of the authenticated user throughout his
+dashboard to make the app more personalized.
+
+Getting the current authenticated user data is quite easy. Indeed, we
+can use the `useUserData` hook provided by Nhost to do it.
+
+So, open the `components/Layout.js` file and use this hook like so:
+
+```js
+import { useUserData } from '@nhost/react';
+
+const Layout = () => {
+  const user = useUserData();
+  //...
+};
+```
+
+That's it! The JSX code for rendering the user data (email, display name, etc.)
+is already included in your components as part of the template you've
+bootstraped at the beginning of this guide.
+
+### Update user data
+
+Nhost provides a GraphQL API through Hasura so that we can query and mutate our
+data instantly.
+
+In this tutorial, we'll use the
+[Apollo GraphQL client](https://www.apollographql.com/) for interacting with
+this GraphQL API.
+
+So, start by installing the following dependencies:
+
+<Tabs groupId="package-manager">
+  <TabItem value="npm" label="npm" default>
+
+```bash
+npm install @nhost/react-apollo @apollo/client
+```
+
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+
+```bash
+yarn add @nhost/react-apollo @apollo/client
+```
+
+  </TabItem>
+</Tabs>
+
+Then, add the `NhostApolloProvider` from `@nhost/react-apollo` into your
+`App.js` file.
+
+```jsx title="src/App.js"
+import { NhostApolloProvider } from '@nhost/react-apollo';
+
+function App() {
+  return (
+    <NhostReactProvider nhost={nhost}>
+      <NhostApolloProvider nhost={nhost}>{/* ... */}</NhostApolloProvider>
+    </NhostReactProvider>
+  );
+}
+```
+
+From there, we can construct our GraphQL query and use the Apollo `useMutation`
+hook to execute that query when the user submits the form from the profile page:
+
+```js title="src/pages/Profile.js"
+import { gql, useMutation } from '@apollo/client';
+import { toast } from 'react-hot-toast';
+
+const UPDATE_USER_MUTATION = gql`
+  mutation ($id: uuid!, $displayName: String!, $metadata: jsonb) {
+    updateUser(
+      pk_columns: { id: $id }
+      _set: { displayName: $displayName, metadata: $metadata }
+    ) {
+      id
+      displayName
+      metadata
+    }
+  }
+`;
+
+const Profile = () => {
+  const [mutateUser, { loading: updatingProfile }] =
+    useMutation(UPDATE_USER_MUTATION);
+
+  const updateUserProfile = async (e) => {
+    e.preventDefault();
+
+    try {
+      await mutateUser({
+        variables: {
+          id: user.id,
+          displayName: `${firstName} ${lastName}`.trim(),
+          metadata: {
+            firstName,
+            lastName,
+          },
+        },
+      });
+      toast.success('Updated successfully', { id: 'updateProfile' });
+    } catch (error) {
+      toast.error('Unable to update profile', { id: 'updateProfile' });
+    }
+  };
+
+  //...
+};
+```
+
+Finally, since Hasura has an **allow nothing by default** policy, and we haven't
+set any permissions yet, our GraphQL mutations would fail.
+
+So, open the Hasura console from the **Data** tab of your project from [your Nhost dashboard](https://app.nhost.io/). Then, go to the **permissions** tab of the `users` table, type in `user` in the role
+cell, and click the edit icon on the `select` operation:
+
+![Hasura users permissions](/img/quickstarts/hasura-permissions-1.png)
+
+To restrict the user to read his own data only, specify a condition with the
+user's ID and the `X-Hasura-User-ID` session variable, which is passed with each
+requests.
+
+![Hasura users permissions](/img/quickstarts/hasura-permissions-2.png)
+
+Next, select the columns you'd like the users to have access to, and click
+**Save Permissions**.
+
+![Hasura users permissions](/img/quickstarts/hasura-permissions-3.png)
+
+Repeat the same steps on the `update` operation for the `user` role to allow
+users to update their `displayName` and `metadata` only.
+
+Finally, to add caching, synchronizing, and updating server state in your React app, let's refactor the user data fetching using the Apollo client and our GraphQL API instead.
+
+So, first add the following GraphQL query to retrieve the current user data from the `Layout` component:
+
+```js title="src/components/Layout.js"
+import { gql } from '@apollo/client';
+
+const GET_USER_QUERY = gql`
+  query GetUser($id: uuid!) {
+    user(id: $id) {
+      id
+      email
+      displayName
+      metadata
+      avatarUrl
+    }
+  }
+`;
+
+const Layout = () => {
+  //...
+};
+```
+
+Then, replace the `useUserData` hook with the `useUserId` hook to retrieve the current user's ID.
+
+```js title="src/components/Layout.js"
+import { useUserId } from '@nhost/react';
+
+const Layout = () => {
+  const id = useUserId();
+  //...
+};
+```
+
+Finally, we can run our GraphQL query using the `useQuery` hook and the current user's ID.
+
+```jsx title="src/components/Layout.js"
+// highlight-next-line
+import { gql, useQuery } from '@apollo/client';
+
+const Layout = () => {
+  const id = useUserId();
+  // highlight-start
+  const { loading, error, data } = useQuery(GET_USER_QUERY, {
+    variables: { id },
+  });
+  const user = data?.user;
+  // highlight-end
+
+  //...
+
+  return (
+    <div>
+      <header>{/* ... */}</header>
+
+      <main className={styles.main}>
+        <div className={styles['main-container']}>
+          {/* highlight-start */}
+          {error ? (
+            <p>Something went wrong. Try to refresh the page.</p>
+          ) : !loading ? (
+            <Outlet context={{ user }} />
+          ) : null}
+          {/* highlight-end */}
+        </div>
+      </main>
+    </div>
+  );
+};
+```
+
+You now have a fully functional React application. Congratulations!
+
+## Next Steps
+
+- Did you enjoy Nhost? Give us a star ⭐ on [Github](https://github.com/nhost/nhost). Thank you!
+- Check out our more in-depth [examples](https://github.com/nhost/nhost/tree/main/examples).
+- Build your next app with [Nhost](https://app.nhost.io/)!

docs/docs/platform/serverless-functions.mdx

@@ -0,0 +1,105 @@
+---
+title: 'Serverless Functions'
+sidebar_position: 8
+---
+
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
+
+With Nhost, you can deploy Serverless Functions to execute custom code. Each serverless function is its HTTP endpoint.
+
+Serverless functions can be used to handle [event triggers](/platform/database/event-triggers), form submission, integrations (e.g. Stripe, Slack, etc), and more.
+
+---
+
+## Creating a Serverless Function
+
+Every `.js` (JavaScript) and `.ts` (TypeScript) file in the `functions/` folder of your Nhost app is its own serverless function.
+
+<Tabs groupId="language">
+  <TabItem value="ts" label="TypeScript" default>
+
+```ts title=functions/test.ts
+import { Request, Response } from 'express'
+
+export default (req: Request, res: Response) => {
+  res.status(200).send(`Hello ${req.query.name}!`)
+}
+```
+
+:::info
+
+You **MUST** install `express` locally in the base directory of your Nhost app.
+
+```bash
+npm install -d express @types/express
+# or yarn
+yarn add -d express @types/express
+```
+
+:::
+
+  </TabItem>
+  <TabItem value="js" label="JavaScript">
+
+```js title=functions/test.js
+export default (req, res) => {
+  res.status(200).send(`Hello ${req.query.name}!`)
+}
+```
+
+:::info
+
+You **MUST** install `express` locally in the base directory of your Nhost app.
+
+```bash
+npm install -d express
+# or yarn
+yarn add -d express
+```
+
+:::
+
+  </TabItem>
+</Tabs>
+
+## Deploying Serverless Functions
+
+Serverless functions are automatically deployed using Nhost's [GitHub integration](/platform/github-integration).
+
+You can prepend files and folders with an underscore (`_`) to prevent them from being treated as serverless functions and be turned into HTTP endpoints. This is useful if you have, for example, a utils file (`functions/_utils.js`) or a utils folder (`functions/_utils/[multiple-files].js`).
+
+## Routing
+
+HTTP endpoints are automatically generated based on the file structure inside `functions/`.
+
+Here's an example of four serverless functions with their files and their HTTP endpoints:
+
+| File                        | HTTP Endpoint                                                 |
+| --------------------------- | ------------------------------------------------------------- |
+| `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`   |
+
+---
+
+## Environment Variables
+
+[Environment variables](/platform/environment-variables) are available inside your serverless functions. Both in production and when running Nhost locally using the [Nhost CLI](/platform/cli).
+
+## Billing
+
+Serverless functions are billed per GB-sec or GB-hour. 1 GB-hour is 3600 GB-seconds.
+
+1 GB-sec is 1 function with 1 GB of RAM running for 1 second. If 1 function with 1 GB of RAM runs for 3600 seconds, that's the equivalent of 1 GB-hour.
+
+All serverless functions in production are running with 128 MB of RAM.
+
+## Node Version
+
+All serverless functions in production are running Node.js version 14.x.
+
+## Regions
+
+Serverless Functions are always deployed to the same region as your app.

docs/docs/platform/serverless-functions/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "Serverless Functions",
-  "position": 8
-}

docs/docs/platform/serverless-functions/index.md

@@ -1,62 +0,0 @@
----
-title: 'Serverless Functions'
-sidebar_position: 1
----
-
-Nhost gives you the option to run serverless functions on the following runtimes:
-
-- `Node.js 14` (Both JavaScript and Typescript)
-
----
-
-## Creating functions
-
-Every `.js` and `.ts` file in the `functions/` folder of your Nhost app will be exposed as an HTTP endpoint. You have to
-
-```js
-// In functions/hello/[name].js
-export default (req, res) => {
-  res.status(200).send(`Hello ${req.query.name}!`);
-};
-```
-
-Or, if you prefer TypeScript:
-
-```ts
-// In functions/hello/[name].ts
-import { Request, Response } from 'express';
-
-export default (req: Request, res: Response) => {
-  res.status(200).send(`Hello ${req.query.name}!`);
-};
-```
-
----
-
-## Routing
-
-HTTP endpoints are automatically generated based on the file structure under `functions/`.
-
-As such, given this file structure:
-
-```text
-functions/index.js
-functions/users/index.ts
-functions/active.ts
-functions/my-company.js
-```
-
-The following endpoints will be available:
-
-- https://yourappid.nhost.run/v1/functions/ from `functions/index.js`.
-- https://yourappid.nhost.run/v1/functions/users from `functions/users/index.ts`.
-- https://yourappid.nhost.run/v1/functions/users/active from `functions/users/active.ts`.
-- https://yourappid.nhost.run/v1/functions/my-company from `functions/my-company.js`.
-
-If you've used Netlify or Vercel, this routing logic will be familiar to you.
-
----
-
-## Infrastructure
-
-Serverless Functions are deployed to AWS Lambda in the same region as your app.

docs/docs/platform/storage.md

@@ -1,5 +1,6 @@
 ---
 title: 'Storage'
+sidebar_position: 7
 ---
 
 Nhost stores and serves files of any type in your backend.

docs/docs/platform/storage/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "Storage",
-  "position": 7
-}

docs/docs/reference/cli/_category_.json

@@ -1,5 +0,0 @@
-{
-  "label": "CLI",
-  "position": 4,
-  "link": { "type": "generated-index", "slug": "/reference/cli" }
-}

docs/docs/reference/cli/down.mdx

@@ -0,0 +1,16 @@
+---
+title: 'down'
+sidebar_position: 3
+---
+
+Delete all containers created by `nhost up`
+
+```bash
+nhost down
+```
+
+To delete all containers **and the local database**, append `--data` to the command.
+
+```bash
+nhost down --data
+```

docs/docs/reference/cli/global-flags.mdx

@@ -0,0 +1,22 @@
+---
+title: 'Global Flags'
+sidebar_position: 9
+---
+
+### `--debug`, `-d`
+
+Turn on debug output.
+
+```bash
+nhost up --debug
+nhost init -d
+```
+
+### `--log-file`, `-f`
+
+Save output to a given file.
+
+```bash
+nhost up -d --log-file some-file.txt
+nhost logs -f some-file.txt
+```

docs/docs/reference/cli/index.mdx

@@ -0,0 +1,6 @@
+---
+title: 'CLI'
+sidebar_position: 1
+---
+
+This section is a reference for the commands available in the [Nhost CLI](/platform/cli).

docs/docs/reference/cli/init.mdx

@@ -0,0 +1,18 @@
+---
+title: 'init'
+sidebar_position: 1
+---
+
+Intialize a local Nhost app in the current working directory.
+
+```
+nhost init
+```
+
+If you already have a Nhost app in Nhost Cloud you can use that app as a starting point by appending `--remote` to the command.
+
+This will pull the database migrations and Hasura metadata from the Nhost Cloud app locally for you to use as a starting point.
+
+```
+nhost init --remote
+```

docs/docs/reference/cli/link.mdx

@@ -0,0 +1,10 @@
+---
+title: 'link'
+sidebar_position: 4
+---
+
+Link the local Nhost app in your working directory to an app in Nhost Cloud.
+
+```bash
+nhost link
+```

docs/docs/reference/cli/list.mdx

@@ -0,0 +1,10 @@
+---
+title: 'list'
+sidebar_position: 7
+---
+
+List all your Nhost apps in Nhost Cloud.
+
+```bash
+nhost list
+```

docs/docs/reference/cli/login.mdx

@@ -0,0 +1,10 @@
+---
+title: 'login'
+sidebar_position: 5
+---
+
+Authenticate the CLI with your Nhost user.
+
+```bash
+nhost login
+```

docs/docs/reference/cli/logout.mdx

@@ -0,0 +1,10 @@
+---
+title: 'logout'
+sidebar_position: 6
+---
+
+Remove authentication for the CLI.
+
+```bash
+nhost logout
+```

docs/docs/reference/cli/logs.mdx

@@ -0,0 +1,10 @@
+---
+title: 'logs'
+sidebar_position: 9
+---
+
+Output logs of any service container
+
+```bash
+nhost logs
+```

docs/docs/reference/cli/nhost-cli.md

@@ -1,97 +0,0 @@
----
-title: 'Nhost CLI'
----
-
-Run `nhost help` in your terminal to get a detailed listing of all available commands.
-
----
-
-## `nhost`
-
-Run the Nhost development environment. If the current directory has not been initialized as an Nhost app, `nhost` will run you through the initialization.
-
-```bash
-nhost
-```
-
-### Frontend templates
-
-The `nhost` command will offer you the option of cloning frontend templates for framework of your choice (Nuxt, Next.js, React).
-
-The frontend template will be cloned in the `web/` directory of your app root. It will have the Nhost SDK preinstalled and configured.
-
----
-
-## `nhost dev`
-
-Launch the development environment for your app.
-
-```bash
-nhost dev
-```
-
-To trace all output and debug issues, run `nhost dev --debug`.
-
-```bash
-nhost dev --debug
-```
-
----
-
-## `nhost init`
-
-Intialize a blank local app in current working directory:
-
-```bash
-nhost init
-```
-
-Or clone an existing app from [nhost.io](https://nhost.io):
-
-```bash
-nhost init --remote
-```
-
----
-
-## `nhost link`
-
-Link the local Nhost app in your working directory to [nhost.io](https://nhost.io).
-
-```bash
-nhost link
-```
-
----
-
-## `nhost logs`
-
-Check real-time logs of any service container
-
-You can run this command in parallel, while your local environment is already running. Use `-f` to save output to a file.
-
-```bash
-nhost logs
-```
-
----
-
-## Global flags
-
-Turn on debug output.
-
-#### `--debug`, `-d`
-
-```bash
-nhost dev --debug
-nhost init -d
-```
-
-#### `--log-file`, `-f`
-
-Save output to a given file.
-
-```bash
-nhost dev -d --log-file some-file.txt
-nhost logs -f some-file.txt
-```

docs/docs/reference/cli/up.mdx

@@ -0,0 +1,14 @@
+---
+title: 'up'
+sidebar_position: 2
+---
+
+Launch the development environment for your app. Once the environment is up, the command will:
+
+- Apply database migrations.
+- Apply the Hasura metadata.
+- Apply seed data.
+
+```bash
+nhost up
+```

docs/docs/reference/cli/upgrade.mdx

@@ -0,0 +1,10 @@
+---
+title: 'upgrade'
+sidebar_position: 8
+---
+
+Upgrade the CLI to the latest version.
+
+```bash
+nhost upgrade
+```

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/01-sign-up.mdx

@@ -3,16 +3,19 @@
 title: signUp()
 sidebar_label: signUp()
 slug: /reference/javascript/auth/sign-up
-description: Use `signUp` to sign up users using email an password.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L106
+description: Use `nhost.auth.signUp` to sign up a user using email and password. If you want to sign up a user using passwordless email (Magic Link), SMS, or an OAuth provider, use the `signIn` function instead.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L93
 ---
 
 # `signUp()`
 
-Use `signUp` to sign up users using email an password.
+Use `nhost.auth.signUp` to sign up a user using email and password. If you want to sign up a user using passwordless email (Magic Link), SMS, or an OAuth provider, use the `signIn` function instead.
 
 ```ts
-auth.signUp({ email, password }) // email password
+nhost.auth.signUp({
+  email: 'joe@example.com',
+  password: 'secret-password'
+})
 ```
 
 ## Parameters

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/02-sign-in.mdx

@@ -3,18 +3,19 @@
 title: signIn()
 sidebar_label: signIn()
 slug: /reference/javascript/auth/sign-in
-description: Use `signIn` to sign in users using email and password, passwordless (email or sms) or an external provider. `signIn` can be used in various ways depending on the parameters.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L171
+description: Use `nhost.auth.signIn` to sign in a user using email and password, passwordless (email or sms) or an external provider. `signIn` can be used to sign in a user in various ways depending on the parameters.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L156
 ---
 
 # `signIn()`
 
-Use `signIn` to sign in users using email and password, passwordless
-(email or sms) or an external provider.
-`signIn` can be used in various ways depending on the parameters.
+Use `nhost.auth.signIn` to sign in a user using email and password, passwordless (email or sms) or an external provider. `signIn` can be used to sign in a user in various ways depending on the parameters.
 
 ```ts
-signIn({ email, password })
+nhost.auth.signIn({
+  email: 'joe@example.com',
+  password: 'secret-password'
+})
 ```
 
 ## Parameters
@@ -27,28 +28,33 @@ signIn({ email, password })
 
 ## Examples
 
-### Sign in with email and password
+### Sign in a user using email and password
 
 ```ts
-signIn({ email, password })
+nhost.auth.signIn({
+  email: 'joe@example.com',
+  password: 'secret-password'
+})
 ```
 
-### Sign in with an external provider (e.g: Google or Facebook)
+### Sign in a user using an OAuth provider (e.g: Google or Facebook)
 
 ```ts
-signIn({ provider })
+nhost.auth.signIn({ provider: 'google' })
 ```
 
-### Passwordless sign in with email (magic link)
+### Sign in a user using passwordless email (Magic Link)
 
 ```ts
-signIn({ email }) // [step 1/2] Passwordless sign in with Email (Magic Link)
-signIn({ email, otp }) // [step 2/2] Finish passwordless sign in with email (OTP)
+nhost.auth.signIn({ email: 'joe@example.com' })
 ```
 
-### Passwordless sign in with SMS
+### Sign in a user using passwordless SMS
 
 ```ts
-signIn({ phoneNumber }) // [step 1/2] Passwordless sign in with SMS
-signIn({ phoneNumber, otp }) // [step 2/2] Finish passwordless sign in with SMS (OTP)
+// [step 1/2] Passwordless sign in using SMS
+nhost.auth.signIn({ phoneNumber: '001122334455' })
+
+// [step 2/2] Finish passwordless sign in using SMS (OTP)
+nhost.auth.signIn({ phoneNumber: '001122334455', otp: '123456' })
 ```

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/03-sign-out.mdx

@@ -3,16 +3,16 @@
 title: signOut()
 sidebar_label: signOut()
 slug: /reference/javascript/auth/sign-out
-description: Use `signOut` to sign out a user
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L343
+description: Use `nhost.auth.signOut` to sign out the user.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L338
 ---
 
 # `signOut()`
 
-Use `signOut` to sign out a user
+Use `nhost.auth.signOut` to sign out the user.
 
 ```ts
-signOut()
+nhost.auth.signOut()
 ```
 
 ## Parameters
@@ -22,3 +22,17 @@ signOut()
 **<span className="parameter-name">params</span>** <span className="optional-status">optional</span> `{ all: boolean }`
 
 ---
+
+## Examples
+
+### Sign out the user from current device
+
+```ts
+nhost.auth.signOut()
+```
+
+### Sign out the user from all decvices
+
+```ts
+nhost.auth.signOut({ all: true })
+```

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/04-reset-password.mdx

@@ -3,16 +3,16 @@
 title: resetPassword()
 sidebar_label: resetPassword()
 slug: /reference/javascript/auth/reset-password
-description: Use `resetPassword` to reset a user's password.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L370
+description: Use `nhost.auth.resetPassword` to reset the password for a user. This will send a reset-password link in an email to the user. When the user clicks the reset-password link the user is automatically signed-in. Once signed-in, the user can change their password using `nhost.auth.changePassword()`.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L365
 ---
 
 # `resetPassword()`
 
-Use `resetPassword` to reset a user's password.
+Use `nhost.auth.resetPassword` to reset the password for a user. This will send a reset-password link in an email to the user. When the user clicks the reset-password link the user is automatically signed-in. Once signed-in, the user can change their password using `nhost.auth.changePassword()`.
 
 ```ts
-auth.resetPassword({ email })
+nhost.auth.resetPassword({ email: 'joe@example.com' })
 ```
 
 ## Parameters

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/05-change-password.mdx

@@ -3,16 +3,16 @@
 title: changePassword()
 sidebar_label: changePassword()
 slug: /reference/javascript/auth/change-password
-description: Use `changePassword` to change a user's password.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L395
+description: Use `nhost.auth.changePassword` to change the password for the user. The old password is not needed.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L390
 ---
 
 # `changePassword()`
 
-Use `changePassword` to change a user's password.
+Use `nhost.auth.changePassword` to change the password for the user. The old password is not needed.
 
 ```ts
-auth.changePassword({ newPassword })
+nhost.auth.changePassword({ newPassword: 'new-secret-password' })
 ```
 
 ## Parameters

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/06-send-verification-email.mdx

@@ -3,17 +3,16 @@
 title: sendVerificationEmail()
 sidebar_label: sendVerificationEmail()
 slug: /reference/javascript/auth/send-verification-email
-description: Use `sendVerificationEmail` to send a verification email to the specified email.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L421
+description: Use `nhost.auth.sendVerificationEmail` to send a verification email to the specified email. The email contains a verification-email link. When the user clicks the verification-email link their email is verified.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L415
 ---
 
 # `sendVerificationEmail()`
 
-Use `sendVerificationEmail` to send a verification email
-to the specified email.
+Use `nhost.auth.sendVerificationEmail` to send a verification email to the specified email. The email contains a verification-email link. When the user clicks the verification-email link their email is verified.
 
 ```ts
-auth.sendVerificationEmail({ email })
+nhost.auth.sendVerificationEmail({ email: 'joe@example.com' })
 ```
 
 ## Parameters

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/07-change-email.mdx

@@ -3,16 +3,16 @@
 title: changeEmail()
 sidebar_label: changeEmail()
 slug: /reference/javascript/auth/change-email
-description: Use `changeEmail` to change a user's email
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L448
+description: Use `nhost.auth.changeEmail` to change a user's email. This will send a confirm-email-change link in an email to the new email. Once the user clicks on the confirm-email-change link the email will be change to the new email.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L442
 ---
 
 # `changeEmail()`
 
-Use `changeEmail` to change a user's email
+Use `nhost.auth.changeEmail` to change a user's email. This will send a confirm-email-change link in an email to the new email. Once the user clicks on the confirm-email-change link the email will be change to the new email.
 
 ```ts
-auth.changeEmail({ newEmail })
+nhost.auth.changeEmail({ newEmail: 'doe@example.com' })
 ```
 
 ## Parameters

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/08-deanonymize.mdx

@@ -3,16 +3,19 @@
 title: deanonymize()
 sidebar_label: deanonymize()
 slug: /reference/javascript/auth/deanonymize
-description: Use `deanonymize` to deanonymize a user
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L473
+description: Use `nhost.auth.deanonymize` to deanonymize a user.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L467
 ---
 
 # `deanonymize()`
 
-Use `deanonymize` to deanonymize a user
+Use `nhost.auth.deanonymize` to deanonymize a user.
 
 ```ts
-auth.deanonymize({ signInMethod: 'email-password', email })
+nhost.auth.deanonymize({
+  signInMethod: 'email-password',
+  email: 'joe@example.com'
+})
 ```
 
 ## Parameters

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/09-on-token-changed.mdx

@@ -3,17 +3,18 @@
 title: onTokenChanged()
 sidebar_label: onTokenChanged()
 slug: /reference/javascript/auth/on-token-changed
-description: Use `onTokenChanged` to add a custom function that will trigger whenever the access and refresh token is changed.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L507
+description: Use `nhost.auth.onTokenChanged` to add a custom function that runs every time the access or refresh token is changed.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L501
 ---
 
 # `onTokenChanged()`
 
-Use `onTokenChanged` to add a custom function that will trigger whenever
-the access and refresh token is changed.
+Use `nhost.auth.onTokenChanged` to add a custom function that runs every time the access or refresh token is changed.
 
 ```ts
-auth.onTokenChanged(() => console.log('access token changed'))
+nhost.auth.onTokenChanged(() =>
+  console.log('The access and refresh token has changed')
+)
 ```
 
 ## Parameters

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/10-on-auth-state-changed.mdx

@@ -3,20 +3,18 @@
 title: onAuthStateChanged()
 sidebar_label: onAuthStateChanged()
 slug: /reference/javascript/auth/on-auth-state-changed
-description: Use `onAuthStateChanged` to add a custom function that will trigger whenever the state of the user changed. Ex from signed in to signed out or vice versa.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L544
+description: Use `nhost.auth.onAuthStateChanged` to add a custom function that runs every time the authentication status of the user changes. E.g. add a custom function that runs every time the authentication status changes from signed-in to signed-out.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L536
 ---
 
 # `onAuthStateChanged()`
 
-Use `onAuthStateChanged` to add a custom function that will trigger
-whenever the state of the user changed. Ex from signed in to signed out or
-vice versa.
+Use `nhost.auth.onAuthStateChanged` to add a custom function that runs every time the authentication status of the user changes. E.g. add a custom function that runs every time the authentication status changes from signed-in to signed-out.
 
 ```ts
-auth.onAuthStateChanged((event, session) => {
+nhost.auth.onAuthStateChanged((event, session) => {
   console.log(
-    `Auth state changed. State is now ${event} with session: ${session}`
+    `The auth state has changed. State is now ${event} with session: ${session}`
   )
 })
 ```

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/11-is-authenticated.mdx

@@ -3,16 +3,16 @@
 title: isAuthenticated()
 sidebar_label: isAuthenticated()
 slug: /reference/javascript/auth/is-authenticated
-description: Use `isAuthenticated` to check if the user is authenticated or not.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L584
+description: Use `nhost.auth.isAuthenticated` to check if the user is authenticated or not.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L578
 ---
 
 # `isAuthenticated()`
 
-Use `isAuthenticated` to check if the user is authenticated or not.
+Use `nhost.auth.isAuthenticated` to check if the user is authenticated or not.
 
 ```ts
-const isAuthenticated = auth.isAuthenticated()
+const isAuthenticated = nhost.auth.isAuthenticated()
 
 if (isAuthenticated) {
   console.log('User is authenticated')

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/12-is-authenticated-async.mdx

@@ -3,16 +3,16 @@
 title: isAuthenticatedAsync()
 sidebar_label: isAuthenticatedAsync()
 slug: /reference/javascript/auth/is-authenticated-async
-description: Use `isAuthenticatedAsync` to wait and check if the user is authenticated or not.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L602
+description: Use `nhost.auth.isAuthenticatedAsync` to wait (await) for any internal authentication network requests to finish and then return the authentication status.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L596
 ---
 
 # `isAuthenticatedAsync()`
 
-Use `isAuthenticatedAsync` to wait and check if the user is authenticated or not.
+Use `nhost.auth.isAuthenticatedAsync` to wait (await) for any internal authentication network requests to finish and then return the authentication status.
 
 ```ts
-const isAuthenticated = await auth.isAuthenticatedAsync()
+const isAuthenticated = await nhost.auth.isAuthenticatedAsync()
 
 if (isAuthenticated) {
   console.log('User is authenticated')

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/13-get-authentication-status.mdx

@@ -3,16 +3,16 @@
 title: getAuthenticationStatus()
 sidebar_label: getAuthenticationStatus()
 slug: /reference/javascript/auth/get-authentication-status
-description: Use `getAuthenticationStatus` to get the authentication status of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L629
+description: Use `nhost.auth.getAuthenticationStatus` to get the authentication status of the user.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L621
 ---
 
 # `getAuthenticationStatus()`
 
-Use `getAuthenticationStatus` to get the authentication status of the user.
+Use `nhost.auth.getAuthenticationStatus` to get the authentication status of the user.
 
 ```ts
-const { isAuthenticated, isLoading } = auth.getAuthenticationStatus()
+const { isAuthenticated, isLoading } = nhost.auth.getAuthenticationStatus()
 
 if (isLoading) {
   console.log('Loading...')

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/14-get-jwt-token.mdx

@@ -5,11 +5,11 @@ sidebar_label: getJWTToken()
 slug: /reference/javascript/auth/get-jwt-token
 sidebar_class_name: deprecated
 description: No description provided.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L643
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L635
 ---
 
 # `getJWTToken()`
 
 :::caution Deprecated
-Use `getAccessToken()` instead.
+Use `nhost.auth.getAccessToken()` instead.
 :::

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/15-get-access-token.mdx

@@ -3,14 +3,14 @@
 title: getAccessToken()
 sidebar_label: getAccessToken()
 slug: /reference/javascript/auth/get-access-token
-description: Use `getAccessToken` to get the logged in user's access token.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L657
+description: Use `nhost.auth.getAccessToken` to get the access token of the user.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L649
 ---
 
 # `getAccessToken()`
 
-Use `getAccessToken` to get the logged in user's access token.
+Use `nhost.auth.getAccessToken` to get the access token of the user.
 
 ```ts
-const accessToken = auth.getAccessToken()
+const accessToken = nhost.auth.getAccessToken()
 ```

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/16-get-decoded-access-token.mdx

@@ -3,14 +3,14 @@
 title: getDecodedAccessToken()
 sidebar_label: getDecodedAccessToken()
 slug: /reference/javascript/auth/get-decoded-access-token
-description: Decode the current decoded access token (JWT), or return `null` if the user is not authenticated (no token)
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L665
+description: Use `nhost.auth.getDecodedAccessToken` to get the decoded access token of the user.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L663
 ---
 
 # `getDecodedAccessToken()`
 
-Decode the current decoded access token (JWT), or return `null` if the user is not authenticated (no token)
+Use `nhost.auth.getDecodedAccessToken` to get the decoded access token of the user.
 
-**`@see`**
-
-{@link https://hasura.io/docs/latest/graphql/core/auth/authentication/jwt/|Hasura documentation}
+```ts
+const decodedAccessToken = nhost.auth.getDecodedAccessToken()
+```

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/17-get-hasura-claims.mdx

@@ -3,14 +3,14 @@
 title: getHasuraClaims()
 sidebar_label: getHasuraClaims()
 slug: /reference/javascript/auth/get-hasura-claims
-description: Decode the Hasura claims from the current access token (JWT) located in the `https://hasura.io/jwt/claims` namespace, or return `null` if the user is not authenticated (no token)
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L675
+description: Use `nhost.auth.getHasuraClaims` to get the Hasura claims of the user.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L679
 ---
 
 # `getHasuraClaims()`
 
-Decode the Hasura claims from the current access token (JWT) located in the `https://hasura.io/jwt/claims` namespace, or return `null` if the user is not authenticated (no token)
+Use `nhost.auth.getHasuraClaims` to get the Hasura claims of the user.
 
-**`@see`**
-
-{@link https://hasura.io/docs/latest/graphql/core/auth/authentication/jwt/|Hasura documentation}
+```ts
+const hasuraClaims = nhost.auth.getHasuraClaims()
+```

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/18-get-hasura-claim.mdx

@@ -3,18 +3,18 @@
 title: getHasuraClaim()
 sidebar_label: getHasuraClaim()
 slug: /reference/javascript/auth/get-hasura-claim
-description: Get the value of a given Hasura claim in the current access token (JWT). Returns null if the user is not authenticated, or if the claim is not in the token. Return `null` if the user is not authenticated (no token)
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L685
+description: Use `nhost.auth.getHasuraClaim` to get the value of a specific Hasura claim of the user.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L696
 ---
 
 # `getHasuraClaim()`
 
-Get the value of a given Hasura claim in the current access token (JWT). Returns null if the user is not authenticated, or if the claim is not in the token.
-Return `null` if the user is not authenticated (no token)
+Use `nhost.auth.getHasuraClaim` to get the value of a specific Hasura claim of the user.
 
-**`@see`**
-
-{@link https://hasura.io/docs/latest/graphql/core/auth/authentication/jwt/|Hasura documentation}
+```ts
+// if `x-hasura-company-id` exists as a custom claim
+const companyId = nhost.auth.getHsauraClaim('company-id')
+```
 
 ## Parameters
 
@@ -22,6 +22,6 @@ Return `null` if the user is not authenticated (no token)
 
 **<span className="parameter-name">name</span>** <span className="optional-status">required</span> `string`
 
-name of the variable. Automatically adds the `x-hasura-` prefix if it is missing
+Name of the variable. You don't have to specify `x-hasura-`.
 
 ---

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/19-refresh-session.mdx

@@ -3,18 +3,20 @@
 title: refreshSession()
 sidebar_label: refreshSession()
 slug: /reference/javascript/auth/refresh-session
-description: Use `refreshSession()` to refresh the current session or refresh the session with an provided `refreshToken`.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L704
+description: Use `nhost.auth.refreshSession` to refresh the session with either the current internal refresh token or an external refresh token.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L719
 ---
 
 # `refreshSession()`
 
-Use `refreshSession()` to refresh the current session or refresh the
-session with an provided `refreshToken`.
+Use `nhost.auth.refreshSession` to refresh the session with either the current internal refresh token or an external refresh token.
 
 ```ts
-refreshToken()
-refreshToken(refreshToken)
+// Refresh the session with the the current internal refresh token.
+nhost.auth.refreshToken()
+
+// Refresh the session with an external refresh token.
+nhost.auth.refreshToken(refreshToken)
 ```
 
 ## Parameters

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/20-get-session.mdx

@@ -3,14 +3,14 @@
 title: getSession()
 sidebar_label: getSession()
 slug: /reference/javascript/auth/get-session
-description: Use `getSession()` to get the current session.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L747
+description: Use `nhost.auth.getSession()` to get the session of the user.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L763
 ---
 
 # `getSession()`
 
-Use `getSession()` to get the current session.
+Use `nhost.auth.getSession()` to get the session of the user.
 
 ```ts
-const session = getSession()
+const session = nhost.auth.getSession()
 ```

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/21-get-user.mdx

@@ -3,14 +3,14 @@
 title: getUser()
 sidebar_label: getUser()
 slug: /reference/javascript/auth/get-user
-description: Use `getUser()` to get the current user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L762
+description: Use `nhost.auth.getUser()` to get the signed-in user.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L778
 ---
 
 # `getUser()`
 
-Use `getUser()` to get the current user.
+Use `nhost.auth.getUser()` to get the signed-in user.
 
 ```ts
-const user = getUser()
+const user = nhsot.auth.getUser()
 ```

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

@@ -4,7 +4,7 @@ title: HasuraAuthClient
 sidebar_label: Auth
 description: No description provided.
 slug: /reference/javascript/auth
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L64
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L51
 ---
 
 # `HasuraAuthClient`

docs/docs/reference/docgen/javascript/auth/types/api-change-email-response.mdx

@@ -4,7 +4,7 @@ title: ApiChangeEmailResponse
 sidebar_label: ApiChangeEmailResponse
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L170
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L166
 ---
 
 # `ApiChangeEmailResponse`
@@ -13,6 +13,6 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-j
 
 ---
 
-**<span className="parameter-name">error</span>** <span className="optional-status">required</span> `null` | [`ApiError`](/reference/docgen/javascript/auth/types/api-error)
+**<span className="parameter-name">error</span>** <span className="optional-status">required</span> `null` | `ErrorPayload`
 
 ---

docs/docs/reference/docgen/javascript/auth/types/api-change-password-response.mdx

@@ -4,7 +4,7 @@ title: ApiChangePasswordResponse
 sidebar_label: ApiChangePasswordResponse
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L162
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L158
 ---
 
 # `ApiChangePasswordResponse`
@@ -13,6 +13,6 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-j
 
 ---
 
-**<span className="parameter-name">error</span>** <span className="optional-status">required</span> `null` | [`ApiError`](/reference/docgen/javascript/auth/types/api-error)
+**<span className="parameter-name">error</span>** <span className="optional-status">required</span> `null` | `ErrorPayload`
 
 ---

docs/docs/reference/docgen/javascript/auth/types/api-deanonymize-response.mdx

@@ -4,7 +4,7 @@ title: ApiDeanonymizeResponse
 sidebar_label: ApiDeanonymizeResponse
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L174
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L170
 ---
 
 # `ApiDeanonymizeResponse`
@@ -13,6 +13,6 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-j
 
 ---
 
-**<span className="parameter-name">error</span>** <span className="optional-status">required</span> `null` | [`ApiError`](/reference/docgen/javascript/auth/types/api-error)
+**<span className="parameter-name">error</span>** <span className="optional-status">required</span> `null` | `ErrorPayload`
 
 ---

docs/docs/reference/docgen/javascript/auth/types/api-error.mdx

@@ -1,22 +0,0 @@
----
-# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
-title: ApiError
-sidebar_label: ApiError
-description: No description provided.
-displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L27
----
-
-# `ApiError`
-
-## Parameters
-
----
-
-**<span className="parameter-name">message</span>** <span className="optional-status">required</span> `string`
-
----
-
-**<span className="parameter-name">status</span>** <span className="optional-status">required</span> `number`
-
----

docs/docs/reference/docgen/javascript/auth/types/api-refresh-token-response.mdx

@@ -4,13 +4,13 @@ title: ApiRefreshTokenResponse
 sidebar_label: ApiRefreshTokenResponse
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L150
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L146
 ---
 
 # `ApiRefreshTokenResponse`
 
 ```ts
 type ApiRefreshTokenResponse =
-  | { session: null; error: ApiError }
+  | { session: null; error: ErrorPayload }
   | { session: Session; error: null }
 ```

docs/docs/reference/docgen/javascript/auth/types/api-reset-password-response.mdx

@@ -4,7 +4,7 @@ title: ApiResetPasswordResponse
 sidebar_label: ApiResetPasswordResponse
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L158
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L154
 ---
 
 # `ApiResetPasswordResponse`
@@ -13,6 +13,6 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-j
 
 ---
 
-**<span className="parameter-name">error</span>** <span className="optional-status">required</span> `null` | [`ApiError`](/reference/docgen/javascript/auth/types/api-error)
+**<span className="parameter-name">error</span>** <span className="optional-status">required</span> `null` | `ErrorPayload`
 
 ---

docs/docs/reference/docgen/javascript/auth/types/api-send-verification-email-response.mdx

@@ -4,7 +4,7 @@ title: ApiSendVerificationEmailResponse
 sidebar_label: ApiSendVerificationEmailResponse
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L166
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L162
 ---
 
 # `ApiSendVerificationEmailResponse`
@@ -13,6 +13,6 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-j
 
 ---
 
-**<span className="parameter-name">error</span>** <span className="optional-status">required</span> `null` | [`ApiError`](/reference/docgen/javascript/auth/types/api-error)
+**<span className="parameter-name">error</span>** <span className="optional-status">required</span> `null` | `ErrorPayload`
 
 ---

docs/docs/reference/docgen/javascript/auth/types/api-sign-in-data.mdx

@@ -4,7 +4,7 @@ title: ApiSignInData
 sidebar_label: ApiSignInData
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L139
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L135
 ---
 
 # `ApiSignInData`

docs/docs/reference/docgen/javascript/auth/types/api-sign-in-response.mdx

@@ -4,7 +4,7 @@ title: ApiSignInResponse
 sidebar_label: ApiSignInResponse
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L143
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L139
 ---
 
 # `ApiSignInResponse`
@@ -12,5 +12,5 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-j
 ```ts
 type ApiSignInResponse =
   | { data: ApiSignInData; error: null }
-  | { data: null; error: ApiError }
+  | { data: null; error: ErrorPayload }
 ```

docs/docs/reference/docgen/javascript/auth/types/api-sign-out-response.mdx

@@ -4,7 +4,7 @@ title: ApiSignOutResponse
 sidebar_label: ApiSignOutResponse
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L154
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L150
 ---
 
 # `ApiSignOutResponse`
@@ -13,6 +13,6 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-j
 
 ---
 
-**<span className="parameter-name">error</span>** <span className="optional-status">required</span> `null` | [`ApiError`](/reference/docgen/javascript/auth/types/api-error)
+**<span className="parameter-name">error</span>** <span className="optional-status">required</span> `null` | `ErrorPayload`
 
 ---

docs/docs/reference/docgen/javascript/auth/types/api-sign-up-email-password-response.mdx

@@ -4,13 +4,13 @@ title: ApiSignUpEmailPasswordResponse
 sidebar_label: ApiSignUpEmailPasswordResponse
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L135
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L131
 ---
 
 # `ApiSignUpEmailPasswordResponse`
 
 ```ts
 type ApiSignUpEmailPasswordResponse =
-  | { session: null; error: ApiError }
+  | { session: null; error: ErrorPayload }
   | { session: Session; error: null }
 ```

docs/docs/reference/docgen/javascript/auth/types/auth-change-event.mdx

@@ -4,7 +4,7 @@ title: AuthChangeEvent
 sidebar_label: AuthChangeEvent
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L117
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L113
 ---
 
 # `AuthChangeEvent`

docs/docs/reference/docgen/javascript/auth/types/auth-changed-function.mdx

@@ -4,7 +4,7 @@ title: AuthChangedFunction
 sidebar_label: AuthChangedFunction
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L119
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L115
 ---
 
 # `AuthChangedFunction`

docs/docs/reference/docgen/javascript/auth/types/change-email-params.mdx

@@ -4,7 +4,7 @@ title: ChangeEmailParams
 sidebar_label: ChangeEmailParams
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L91
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L87
 ---
 
 # `ChangeEmailParams`

docs/docs/reference/docgen/javascript/auth/types/change-password-params.mdx

@@ -4,7 +4,7 @@ title: ChangePasswordParams
 sidebar_label: ChangePasswordParams
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L82
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L78
 ---
 
 # `ChangePasswordParams`

docs/docs/reference/docgen/javascript/auth/types/deanonymize-params.mdx

@@ -4,7 +4,7 @@ title: DeanonymizeParams
 sidebar_label: DeanonymizeParams
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L97
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L93
 ---
 
 # `DeanonymizeParams`

docs/docs/reference/docgen/javascript/auth/types/headers.mdx

@@ -4,7 +4,7 @@ title: Headers
 sidebar_label: Headers
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L128
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L124
 ---
 
 # `Headers`

docs/docs/reference/docgen/javascript/auth/types/login-data.mdx

@@ -4,7 +4,7 @@ title: LoginData
 sidebar_label: LoginData
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L123
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L119
 ---
 
 # `LoginData`

docs/docs/reference/docgen/javascript/auth/types/mfa.mdx

@@ -4,7 +4,7 @@ title: Mfa
 sidebar_label: Mfa
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L131
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L127
 ---
 
 # `Mfa`

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

@@ -4,7 +4,7 @@ title: NhostAuthConstructorParams
 sidebar_label: NhostAuthConstructorParams
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L14
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L15
 ---
 
 # `NhostAuthConstructorParams`

docs/docs/reference/docgen/javascript/auth/types/on-token-changed-function.mdx

@@ -4,7 +4,7 @@ title: OnTokenChangedFunction
 sidebar_label: OnTokenChangedFunction
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L121
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L117
 ---
 
 # `OnTokenChangedFunction`

docs/docs/reference/docgen/javascript/auth/types/reset-password-params.mdx

@@ -4,7 +4,7 @@ title: ResetPasswordParams
 sidebar_label: ResetPasswordParams
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L77
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L73
 ---
 
 # `ResetPasswordParams`

docs/docs/reference/docgen/javascript/auth/types/send-verification-email-params.mdx

@@ -4,7 +4,7 @@ title: SendVerificationEmailParams
 sidebar_label: SendVerificationEmailParams
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L86
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L82
 ---
 
 # `SendVerificationEmailParams`

docs/docs/reference/docgen/javascript/auth/types/session.mdx

@@ -4,7 +4,7 @@ title: Session
 sidebar_label: Session
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L21
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L22
 ---
 
 # `Session`

docs/docs/reference/docgen/javascript/auth/types/sign-in-email-password-params.mdx

@@ -4,7 +4,7 @@ title: SignInEmailPasswordParams
 sidebar_label: SignInEmailPasswordParams
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L46
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L42
 ---
 
 # `SignInEmailPasswordParams`

docs/docs/reference/docgen/javascript/auth/types/sign-in-params.mdx

@@ -4,7 +4,7 @@ title: SignInParams
 sidebar_label: SignInParams
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L70
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L66
 ---
 
 # `SignInParams`

docs/docs/reference/docgen/javascript/auth/types/sign-in-passwordless-email-params.mdx

@@ -4,7 +4,7 @@ title: SignInPasswordlessEmailParams
 sidebar_label: SignInPasswordlessEmailParams
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L51
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L47
 ---
 
 # `SignInPasswordlessEmailParams`

docs/docs/reference/docgen/javascript/auth/types/sign-in-passwordless-sms-otp-params.mdx

@@ -4,7 +4,7 @@ title: SignInPasswordlessSmsOtpParams
 sidebar_label: SignInPasswordlessSmsOtpParams
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L61
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L57
 ---
 
 # `SignInPasswordlessSmsOtpParams`

docs/docs/reference/docgen/javascript/auth/types/sign-in-passwordless-sms-params.mdx

@@ -4,7 +4,7 @@ title: SignInPasswordlessSmsParams
 sidebar_label: SignInPasswordlessSmsParams
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L56
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L52
 ---
 
 # `SignInPasswordlessSmsParams`

docs/docs/reference/docgen/javascript/auth/types/sign-in-reponse.mdx

@@ -4,7 +4,7 @@ title: SignInReponse
 sidebar_label: SignInReponse
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L106
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L102
 ---
 
 # `SignInReponse`
@@ -17,7 +17,7 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-j
 
 ---
 
-**<span className="parameter-name">error</span>** <span className="optional-status">required</span> `null` | [`ApiError`](/reference/docgen/javascript/auth/types/api-error)
+**<span className="parameter-name">error</span>** <span className="optional-status">required</span> `null` | `ErrorPayload`
 
 ---
 

docs/docs/reference/docgen/javascript/auth/types/sign-in-with-provider-options.mdx

@@ -4,7 +4,7 @@ title: SignInWithProviderOptions
 sidebar_label: SignInWithProviderOptions
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L65
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L61
 ---
 
 # `SignInWithProviderOptions`

docs/docs/reference/docgen/javascript/auth/types/sign-up-email-password-params.mdx

@@ -4,7 +4,7 @@ title: SignUpEmailPasswordParams
 sidebar_label: SignUpEmailPasswordParams
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L33
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L29
 ---
 
 # `SignUpEmailPasswordParams`

docs/docs/reference/docgen/javascript/auth/types/sign-up-params.mdx

@@ -4,7 +4,7 @@ title: SignUpParams
 sidebar_label: SignUpParams
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L39
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L35
 ---
 
 # `SignUpParams`

docs/docs/reference/docgen/javascript/auth/types/sign-up-response.mdx

@@ -4,13 +4,13 @@ title: SignUpResponse
 sidebar_label: SignUpResponse
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L41
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L37
 ---
 
 # `SignUpResponse`
 
 ```ts
 type SignUpResponse =
-  | { session: null; error: ApiError }
+  | { session: null; error: ErrorPayload }
   | { session: Session | null; error: null }
 ```

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

@@ -3,12 +3,21 @@
 title: call()
 sidebar_label: call()
 slug: /reference/javascript/nhost-js/functions/call
-description: No description provided.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/functions.ts#L24
+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
 ---
 
 # `call()`
 
+Use `nhost.functions.call` to call (sending a POST request to) a serverless function.
+
+```ts
+await nhost.functions.call('send-welcome-email', {
+  email: 'joe@example.com',
+  name: 'Joe Doe'
+})
+```
+
 ## Parameters
 
 ---

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

@@ -3,12 +3,18 @@
 title: setAccessToken()
 sidebar_label: setAccessToken()
 slug: /reference/javascript/nhost-js/functions/set-access-token
-description: No description provided.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/functions.ts#L53
+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
 ---
 
 # `setAccessToken()`
 
+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.
+
+```ts
+nhost.functions.setAccessToken('some-access-token')
+```
+
 ## Parameters
 
 ---

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

@@ -3,12 +3,26 @@
 title: request()
 sidebar_label: request()
 slug: /reference/javascript/nhost-js/graphql/request
-description: No description provided.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/graphql.ts#L29
+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
 ---
 
 # `request()`
 
+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).
+
+```ts
+const CUSTOMERS = gql`
+  query {
+    customers {
+      id
+      name
+    }
+  }
+`
+const { data, error } = await nhost.graphql.request(CUSTOMERS)
+```
+
 ## Parameters
 
 ---

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

@@ -3,8 +3,14 @@
 title: getUrl()
 sidebar_label: getUrl()
 slug: /reference/javascript/nhost-js/graphql/get-url
-description: No description provided.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/graphql.ts#L82
+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
 ---
 
 # `getUrl()`
+
+Use `nhost.graphql.getUrl` to get the GraphQL URL.
+
+```ts
+const url = nhost.graphql.getUrl()
+```

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

@@ -3,12 +3,18 @@
 title: setAccessToken()
 sidebar_label: setAccessToken()
 slug: /reference/javascript/nhost-js/graphql/set-access-token
-description: No description provided.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/graphql.ts#L86
+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
 ---
 
 # `setAccessToken()`
 
+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.
+
+```ts
+nhost.graphql.setAccessToken('some-access-token')
+```
+
 ## Parameters
 
 ---

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

@@ -3,16 +3,16 @@
 title: upload()
 sidebar_label: upload()
 slug: /reference/javascript/storage/upload
-description: Use `.upload` to upload a file.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-client.ts#L32
+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
 ---
 
 # `upload()`
 
-Use `.upload` to upload a file.
+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).
 
 ```ts
-storage.upload({ file })
+await nhost.storage.upload({ file })
 ```
 
 ## Parameters
@@ -29,3 +29,13 @@ storage.upload({ file })
 | <span className="parameter-name"><span className="light-grey">params.</span>id</span>       | `string` |          |       |
 
 ---
+
+## Examples
+
+```ts
+await nhost.storage.upload({ file })
+```
+
+```ts
+await nhost.storage.upload({ file, bucketId: '<Bucket-ID>' })
+```

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

@@ -5,13 +5,13 @@ 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-client.ts#L54
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L63
 ---
 
 # `getUrl()`
 
 :::caution Deprecated
-use `.getPublicUrl` instead
+Use `nhost.storage.getPublicUrl()` instead.
 :::
 
 ## Parameters

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

@@ -3,16 +3,16 @@
 title: getPublicUrl()
 sidebar_label: getPublicUrl()
 slug: /reference/javascript/storage/get-public-url
-description: Use `.getPublicUrl` to direct file URL to a file.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-client.ts#L66
+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
 ---
 
 # `getPublicUrl()`
 
-Use `.getPublicUrl` to direct file URL to a file.
+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.
 
 ```ts
-storage.getPublicUrl({ fileId: 'uuid' })
+const publicUrl = nhost.storage.getPublicUrl({ fileId: '<File-ID>' })
 ```
 
 ## Parameters

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

@@ -3,16 +3,25 @@
 title: getPresignedUrl()
 sidebar_label: getPresignedUrl()
 slug: /reference/javascript/storage/get-presigned-url
-description: Use `.getPresignedUrl` to get a presigned URL to a file.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-client.ts#L79
+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
 ---
 
 # `getPresignedUrl()`
 
-Use `.getPresignedUrl` to get a presigned URL to a file.
+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.
 
 ```ts
-storage.getPresignedUrl({ fileId: 'uuid' })
+const { presignedUrl, error } = await nhost.storage.getPresignedUrl({
+  fileId: '<File-ID>'
+})
+
+if (error) {
+  throw error
+}
+
+console.log('url: ', presignedUrl.url)
+console.log('expiration: ', presignedUrl.expiration)
 ```
 
 ## Parameters

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

@@ -3,16 +3,16 @@
 title: delete()
 sidebar_label: delete()
 slug: /reference/javascript/storage/delete
-description: Use `.delete` to delete a file.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-client.ts#L102
+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
 ---
 
 # `delete()`
 
-Use `.delete` to delete a file.
+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.
 
 ```ts
-storage.delete({ fileId: 'uuid' })
+const { error } = await nhost.storage.delete({ fileId: 'uuid' })
 ```
 
 ## Parameters

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

@@ -3,17 +3,17 @@
 title: setAccessToken()
 sidebar_label: setAccessToken()
 slug: /reference/javascript/storage/set-access-token
-description: Set the access token to use for authentication.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-client.ts#L117
+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
 ---
 
 # `setAccessToken()`
 
-Set the access token to use for authentication.
+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.
 
-**`@returns`**
-
-Hasura Storage Client instance
+```ts
+nhost.storage.setAccessToken('some-access-token')
+```
 
 ## Parameters
 

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

@@ -3,17 +3,17 @@
 title: setAdminSecret()
 sidebar_label: setAdminSecret()
 slug: /reference/javascript/storage/set-admin-secret
-description: Set the admin secret to use for authentication.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-client.ts#L129
+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
 ---
 
 # `setAdminSecret()`
 
-Set the admin secret to use for authentication.
+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".
 
-**`@returns`**
-
-Hasura Storage Client instance
+```ts
+nhost.storage.setAdminSecret('some-admin-secret')
+```
 
 ## Parameters