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

chore: update versions

.github/actions/install-dependencies/action.yaml

@@ -0,0 +1,17 @@
+name: Install Node and package dependencies
+description: 'Install Node dependencies with pnpm'
+runs:
+  using: 'composite'
+  steps:
+    - uses: pnpm/action-setup@v2.2.1
+      with:
+        version: 6.32.14
+    - name: Use Node.js 16
+      uses: actions/setup-node@v2
+      with:
+        node-version: 16
+        cache: 'pnpm'
+    # * Install package dependencies. As cache is enabled, it will cache/restore downloaded files
+    - shell: bash
+      name: Install packages
+      run: pnpm install --frozen-lockfile

.github/workflows/tests.yaml

@@ -1,8 +1,4 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-# Poached from https://github.com/hayes/pothos/tree/main/.github/workflows, thanks to the original author
-
-name: Node.js CI
+name: Tests
 
 on:
   push:
@@ -10,61 +6,112 @@ on:
     paths-ignore:
       - 'docs/**'
       - 'templates/**'
-      - 'examples/**'
       - 'assets/**'
       - '**.md'
       - 'LICENSE'
   pull_request:
     branches: [main]
+    types: [opened, synchronize]
     paths-ignore:
       - 'docs/**'
       - 'templates/**'
-      - 'examples/**'
       - 'assets/**'
       - '**.md'
       - 'LICENSE'
 
+env:
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: nhost
 jobs:
   build:
+    name: Build @nhost packages
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [14, 16]
     steps:
       - uses: actions/checkout@v2
-
-      - name: Install nhost CLI
-        run: curl -L https://raw.githubusercontent.com/nhost/cli/main/get.sh | bash
-
-      - name: Start Nhost Backend
+      # * Install Node and dependencies. Package downloads will be cached for the next jobs.
+      - name: Install Node and dependencies
+        uses: ./.github/actions/install-dependencies
+      # * Build all Nhost packages as they are all supposed to be tested.
+      # * They will be reused through the Turborepo cache
+      - name: Build packages
+        run: pnpm build
+      # * List packagesthat has an `e2e` script, except the root, and return an array of their name and path
+      - name: List examples with an e2e script
+        id: set-matrix
         run: |
-          cp -R examples/testing-project /tmp/
-          cd /tmp/testing-project
-          nhost dev &
-
-      - uses: pnpm/action-setup@v2.2.1
+          PACKAGES=$(pnpm recursive list --depth -1 --parseable --filter=!nhost-root \
+            | xargs -I@ jq "if (.scripts.e2e | length) != 0  then {name: .name, path: \"@\"} else null end" @/package.json \
+            | awk "!/null/" \
+            | jq -c --slurp)
+          echo "::set-output name=matrix::$PACKAGES"
+    outputs:
+      matrix: ${{ steps.set-matrix.outputs.matrix }}
+  e2e:
+    name: 'e2e: ${{ matrix.package.name }}'
+    needs: build
+    strategy:
+      # * Don't cancel other matrices when one fails
+      fail-fast: false
+      matrix:
+        package: ${{ fromJson(needs.build.outputs.matrix) }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      # * Install Nhost CLI if a `nhost/config.yaml` file is found
+      - name: Install Nhost CLI
+        if: hashFiles(format('{0}/nhost/config.yaml', matrix.package.path)) != ''
+        run: curl -L https://raw.githubusercontent.com/nhost/cli/main/get.sh | bash
+      # * Install Node and dependencies. Package dependencies won't be downloaded again as they have been cached by the `build` job.
+      - name: Install Node and dependencies
+        uses: ./.github/actions/install-dependencies
+      # * Run the `ci` script of the current package of the matrix. Dependencies build is cached by Turborepo
+      - name: Run e2e test
+        run: pnpm run e2e -- --filter="${{ matrix.package.name }}"
+      - id: file-name
+        if: ${{ failure() }}
+        name: Tranform package name into a valid file name
+        run: |
+          PACKAGE_FILE_NAME=$(echo "${{ matrix.package.name }}" | sed 's/@//g; s/\//-/g')
+          echo "::set-output name=fileName::$PACKAGE_FILE_NAME"
+      # * Run this step only if the previous step failed, and some Cypress screenshots/videos exist
+      - name: Upload Cypress videos and screenshots
+        if: ${{ failure() && hashFiles(format('{0}/cypress/screenshots/**', matrix.package.path), format('{0}/cypress/videos/**', matrix.package.path)) != ''}}
+        uses: actions/upload-artifact@v3
         with:
-          version: 6.32.3
-
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
+          name: cypress-${{ steps.file-name.outputs.fileName }}
+          path: |
+            ${{format('{0}/cypress/screenshots/**', matrix.package.path)}}
+            ${{format('{0}/cypress/videos/**', matrix.package.path)}}
+  unit:
+    name: Unit tests
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      # * Install Node and dependencies. Package dependencies won't be downloaded again as they have been cached by the `build` job.
+      - name: Install Node and dependencies
+        uses: ./.github/actions/install-dependencies
+      # * Run every `test` script in the workspace . Dependencies build is cached by Turborepo
+      - name: Run unit tests
+        run: pnpm run test
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v2
         with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'pnpm'
-
-      - name: Cache turbo
-        uses: actions/cache@v2
-        with:
-          path: ./node_modules/.cache/turbo
-          key: turbo-${{ github.job }}-${{ github.ref_name }}-${{ github.sha }}
-          restore-keys: |
-            turbo-${{ github.job }}-${{ github.ref_name }}-
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Wait for Nhost
-        run: pnpm run wait
-
-      - name: Build, tests and lint
-        run: pnpm run ci
+          files: '**/coverage/coverage-final.json'
+          name: codecov-umbrella
+      - name: Create summary
+        run: |
+          echo '### Code coverage' >> $GITHUB_STEP_SUMMARY
+          echo 'Visit [codecov](https://app.codecov.io/gh/nhost/nhost/) to see the code coverage reports' >> $GITHUB_STEP_SUMMARY
+  lint:
+    name: Lint
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      # * Install Node and dependencies. Package dependencies won't be downloaded again as they have been cached by the `build` job.
+      - name: Install Node and dependencies
+        uses: ./.github/actions/install-dependencies
+      # * Run every `lint` script in the workspace . Dependencies build is cached by Turborepo
+      - name: Lint
+        run: pnpm run lint

.gitignore

@@ -53,4 +53,7 @@ todo.md
 
 # TypeDoc output
 
-.docgen
+.docgen
+
+# Nhost CLI data
+.nhost

DEVELOPERS.md

@@ -60,19 +60,24 @@ $ pnpm start
 
 ## Run test suites
 
-In order to run tests, the Nhost testing backend should be running locally. You can run it from a separate terminal:
+### Unit tests
 
-```sh
-$ cd examples/testing-project
-$ nhost -d
-```
-
-Once Nhost is started locally, you can run the tests with the following command from the repository root:
+You can run the unit tests with the following command from the repository root:
 
 ```sh
 $ pnpm test
 ```
 
+### End-to-end tests
+
+Each package that defines end-to-end tests embeds their own Nhost configuration, that will be automatically when running the tests. As a result, you must make sure you are not running the Nhost CLI before running the tests.
+
+You can run the e2e tests with the following command from the repository root:
+
+```sh
+$ pnpm e2e
+```
+
 ## Changesets
 
 If you've made changes to the packages, you must describe those changes so that they can be reflected in the next release.

README.md

@@ -192,6 +192,13 @@ 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/timpratim">
+            <img src="https://avatars.githubusercontent.com/u/32492961?v=4" width="100;" alt="timpratim"/>
+            <br />
+            <sub><b>Pratim</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"/>
@@ -205,15 +212,15 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Macmac49</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/subhendukundu">
             <img src="https://avatars.githubusercontent.com/u/20059141?v=4" width="100;" alt="subhendukundu"/>
             <br />
             <sub><b>Subhendu Kundu</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/heygambo">
             <img src="https://avatars.githubusercontent.com/u/449438?v=4" width="100;" alt="heygambo"/>
@@ -248,15 +255,15 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Gavan Wilhite</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/jerryjappinen">
             <img src="https://avatars.githubusercontent.com/u/1101002?v=4" width="100;" alt="jerryjappinen"/>
             <br />
             <sub><b>Jerry Jäppinen</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/mustafa-hanif">
             <img src="https://avatars.githubusercontent.com/u/30019262?v=4" width="100;" alt="mustafa-hanif"/>
@@ -265,10 +272,10 @@ Here are some ways of contributing to making Nhost better:
         </a>
     </td>
     <td align="center">
-        <a href="https://github.com/timpratim">
-            <img src="https://avatars.githubusercontent.com/u/32492961?v=4" width="100;" alt="timpratim"/>
+        <a href="https://github.com/nbourdin">
+            <img src="https://avatars.githubusercontent.com/u/5602476?v=4" width="100;" alt="nbourdin"/>
             <br />
-            <sub><b>Pratim</b></sub>
+            <sub><b>Nicolas Bourdin</b></sub>
         </a>
     </td>
     <td align="center">
@@ -278,13 +285,21 @@ Here are some ways of contributing to making Nhost better:
             <sub><b>Savin Vadim</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/muttenzer">
+            <img src="https://avatars.githubusercontent.com/u/49474412?v=4" width="100;" alt="muttenzer"/>
+            <br />
+            <sub><b>Muttenzer</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/ahmic">
             <img src="https://avatars.githubusercontent.com/u/13452362?v=4" width="100;" alt="ahmic"/>
             <br />
             <sub><b>Amir Ahmic</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/akd-io">
             <img src="https://avatars.githubusercontent.com/u/30059155?v=4" width="100;" alt="akd-io"/>
@@ -298,8 +313,7 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Animesh Pathak</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/rustyb">
             <img src="https://avatars.githubusercontent.com/u/53086?v=4" width="100;" alt="rustyb"/>
@@ -327,7 +341,8 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Helio Alves</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/nkhdo">
             <img src="https://avatars.githubusercontent.com/u/26102306?v=4" width="100;" alt="nkhdo"/>
@@ -341,8 +356,7 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Hugh Caluscusin</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/jladuval">
             <img src="https://avatars.githubusercontent.com/u/1935359?v=4" width="100;" alt="jladuval"/>
@@ -350,6 +364,13 @@ Here are some ways of contributing to making Nhost better:
             <sub><b>Jacob Duval</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/kylehayes">
+            <img src="https://avatars.githubusercontent.com/u/509932?v=4" width="100;" alt="kylehayes"/>
+            <br />
+            <sub><b>Kyle Hayes</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/leothorp">
             <img src="https://avatars.githubusercontent.com/u/12928449?v=4" width="100;" alt="leothorp"/>
@@ -363,14 +384,8 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Max Reynolds</b></sub>
         </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/nbourdin">
-            <img src="https://avatars.githubusercontent.com/u/5602476?v=4" width="100;" alt="nbourdin"/>
-            <br />
-            <sub><b>Nicolas Bourdin</b></sub>
-        </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/ghoshnirmalya">
             <img src="https://avatars.githubusercontent.com/u/6391763?v=4" width="100;" alt="ghoshnirmalya"/>
@@ -384,8 +399,7 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Quentin Decré</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/atapas">
             <img src="https://avatars.githubusercontent.com/u/3633137?v=4" width="100;" alt="atapas"/>

config/.eslint.base.js

@@ -20,7 +20,8 @@ module.exports = {
     'tests/**/*.ts',
     'tests/**/*.d.ts'
   ],
-  plugins: ['@typescript-eslint', 'simple-import-sort'],
+  plugins: ['@typescript-eslint', 'simple-import-sort', 'cypress'],
+  extends: ['plugin:cypress/recommended'],
   parserOptions: {
     ecmaVersion: 2020,
     sourceType: 'module'

config/.eslintrc.js

@@ -1,6 +1,12 @@
 const base = require('./.eslint.base')
 module.exports = {
   ...base,
-  extends: ['react-app', 'plugin:react/recommended', 'plugin:react-hooks/recommended'],
+  extends: [
+    ...base.extends,
+    'react-app',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:react/jsx-runtime'
+  ],
   plugins: [...base.plugins, 'react', 'react-hooks']
 }

config/.eslintrc.vue.js

@@ -1,7 +1,7 @@
 const base = require('./.eslint.base')
 module.exports = {
   ...base,
-  extends: ['plugin:import/recommended', 'plugin:import/typescript'],
+  extends: [...base.extends, 'plugin:import/recommended', 'plugin:import/typescript'],
   parser: 'vue-eslint-parser',
   parserOptions: {
     ...base.parserOptions,

config/vite.lib.config.js

@@ -34,7 +34,11 @@ export default defineConfig({
     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
+    threads: false,
+    coverage: {
+      enabled: process.env.CI === 'true',
+      reporter: ['json']
+    }
   },
   build: {
     sourcemap: true,

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

@@ -22,7 +22,7 @@ await nhost.auth.signUp({
 })
 ```
 
-If you've turned on email verification in your app's **login settings**, a user will be sent a verification email upon signup. The user must click the verification link in the email before they can sign in.
+If you've turned on email verification in your app's **Authentication Settings**, a user will be sent a verification email upon signup. The user must click the verification link in the email before they can sign in.
 
 ## Sign In
 
@@ -39,6 +39,6 @@ await nhost.auth.signIn({
 
 ## Verified Emails
 
-You can decide if only verified emails should be able to sign in or not. Modify the **Only allow login for verified emails.** setting in the **Login Settings** section under **Users** in your Nhost app.
+You can decide if only verified emails should be able to sign in or not. Modify the **Only allow login for verified emails.** setting in the **Authentication Settings** section under **Users** in your Nhost app.
 
 An email-verification email is automatically sent to the user during sign-up if your app only allows to sign in users with verified emails. You can also manually send the verification email to the user using [`nhost.auth.sendVerificationEmail()`](/reference/javascript/auth/send-verification-email).

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

@@ -9,6 +9,14 @@ Follow this guide to sign in users with Magic Link, also called passwordless ema
 
 The Magic Link sign-in method enables you to sign in users to your app using an email address, without requiring a password.
 
+## Setup
+
+Enable the Magic Link sign-in method in the Nhost dashboard under **Users** -> **Authentication Settings** -> **Magic Link**.
+
+![Magic Link Setup with Nhost](/img/platform/authentication/sign-in-methods/magic-link/magic-link-setup.png)
+
+## Sign In
+
 To sign in users with Magic Link is a two-step process:
 
 1. Send a Magic Link to the user's email address.
@@ -21,3 +29,5 @@ nhost.auth.signIn({
   email: 'joe@example.com'
 })
 ```
+
+If you want to change the email for your magic link emails, you can do so by changing the [email templates](/platform/authentication/email-templates).

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

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

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

@@ -17,7 +17,7 @@ Nhost Authentication support the following sign-in methods:
 
 ## Enabling Social Sign-In Provider
 
-To start with social sign-in, select your app in Nhost Console and go to **Users** → **Login settings**.
+To start with social sign-in, select your app in Nhost Console and go to **Users** → **Authentication Settings**.
 
 You need to set the Client ID and Client Secret for each provider that you want to enable.
 
@@ -33,7 +33,7 @@ nhost.auth.signIn({
 })
 ```
 
-Users are redirected to your Nhost app's **client URL** by default. By default, your Nhost app's client URL is set to `http://localhost:3000`. You can change the value of your client URL in the Nhost console by going to **Users** → **Login settings** → **Client URL**.
+Users are redirected to your Nhost app's **client URL** by default. By default, your Nhost app's client URL is set to `http://localhost:3000`. You can change the value of your client URL in the Nhost console by going to **Users** → **Authentication Settings** → **Client URL**.
 
 ## Provider OAuth scopes
 

docs/docs/platform/authentication/users.mdx

@@ -60,11 +60,35 @@ The default role is used when no role is specified in the GraphQL request. By de
 
 ### Allowed Roles
 
+Allowed roles are roles the user is allowed to use when making a GraphQL request. Usually you would change the role from `user` (the default role) to some other role because you want Hasura to use a different role to resolve permissions for a particular GraphQL request.
+
 By default, users have two allowed roles:
 
 - `user`
 - `me`
 
+You can manage what allowed roles users should get when they sign up under **Users** -> **Roles & Permissions**.
+
+:::info
+
+You must also add the roles manually to the `auth.roles` table.
+
+:::
+
+It's also possible to give users a subset of allowed roles during signup.
+
+**Example:** Only give the `user` role (without the `me` role) for the user's allowed roles:
+
+```js
+await nhost.auth.signUp({
+  email: 'joe@example.com',
+  password: 'secret-password'
+  options: {
+    allowedRoles: ['user']
+  }
+})
+```
+
 ### Public Role
 
 The `public` role is used to resolve GraphQL permissions for unauthenticated users.

docs/docs/platform/cli.mdx

@@ -41,6 +41,12 @@ 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)
 
+:::info
+
+Make sure you have the correct permissions for Docker so you don't have to run Docker with `sudo`. See ["Post-installation steps for Linux"](https://docs.docker.com/engine/install/linux-postinstall/) from Docker's documentation.
+
+:::
+
 ## Get started
 
 Start by authenticating yourself to Nhost Cloud:
@@ -75,6 +81,18 @@ nhost up
 
 Hasura Console starts automatically and your Nhost app is running locally with the backend URL: `http://localhost:1337`.
 
+## Emails
+
+During local development with the CLI, all transactional emails from Authentication are sent to a local Mailhog instance, instead of to the recipient's email address. You'll see an address where after starting [`nhost up`](/reference/cli/up) where all emails are sent to.
+
+For the example below, all emails are accessable at `http://localhost:8839`.
+
+```bash
+$ nhost up
+✔ Your app is running at http://localhost:1337 (Ctrl+C to stop)
+ℹ Emails will be sent to http://localhost:8839
+```
+
 ## What's next?
 
 - Read our in-depth guide on [Get started with Nhost CLI](/platform/overview/get-started-with-nhost-cli)

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

@@ -18,7 +18,7 @@ Event Triggers can also be triggered manually in the Hasura Console.
 
 Let's say you're building an e-commerce application and you want to send an email to the customer when a new order is placed. Orders are stored in the `orders` table in your database.
 
-To send out an email every time a new order is placed, you create an event trigger that listens for the `INSERT` event on the `orders` table. Now every time an order is placed, the even trigger invokes a webhook with the order information, and the webhook sends out the email.
+To send out an email every time a new order is placed, you create an event trigger that listens for the `INSERT` event on the `orders` table. Now every time an order is placed, the event trigger invokes a webhook with the order information, and the webhook sends out the email.
 
 ## Create Event Trigger
 

docs/docs/platform/database/index.mdx

@@ -15,13 +15,16 @@ It's currently not possible to connect directly to the Postgres database via a c
 
 :::
 
-The database is managed via the Hasura Console where you can manage the database via an intuative UI. You can also use SQL to directly interact with the database via the Hasura Console.
+The database is managed via the Hasura Console where you can manage the database via an intuitive UI. You can also use SQL to directly interact with the database via the Hasura Console.
 
 ## Hasura Console
 
 Hasura Console is where you manage your database. This is where you create and manage tables, schemas, and data.
 
-Open the Hasura Console by clicking on **Data** in the top menu in the Nhost Dashboard, copy the **admin secret**, and click **Open Hasura**. Use the **admin secret** to sign in.
+1) Open the Hasura Console by clicking on **GraphQL** in the top menu in the Nhost Dashboard.
+2) Click **Open Hasura Console** at the top right of the page.
+3) Copy the **admin secret**, and click **Open Hasura**.
+4) Use the **admin secret** to sign in.
 
 <video width="99%" autoPlay muted loop controls="true">
   <source src="/videos/open-hasura-console.mp4" type="video/mp4" />

docs/docs/platform/github-integration.mdx

@@ -15,7 +15,7 @@ The following things are deployed:
 - Serverless Functions
 
 :::info
-Settings in `nhost/config.yaml` are **not** deployed. That menas you need to manually sync settings between local and remote environments between the CLI and Nhost Cloud.
+Settings in `nhost/config.yaml` are **not** deployed. That means you need to manually sync settings between local and remote environments between the CLI and Nhost Cloud.
 :::
 
 ## Connecting a GitHub repository

docs/docs/platform/graphql/permissions.md

@@ -54,6 +54,18 @@ query {
 }
 ```
 
+### Local Custom Permission Variables
+
+To use custom permission variables locally, add your claims to the `config.yml` as following:
+
+```
+auth:
+  jwt:
+    custom_claims: '{"organisation-id":"profile.organisation.id"}'
+```
+
+Your custom claim will be automatically prefixed with `x-hasura-`, therefore, the example above results in a custom permission variable named `x-hasura-organisation-id`.
+
 ## Roles
 
 Every GraphQL request is resolved based on a **single role**. Roles are added in the Hasura Console when selecting a table and clicking **Permisisons**.

docs/docs/platform/storage.md

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

docs/docs/platform/storage.mdx

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

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

@@ -4,7 +4,7 @@ title: signUp()
 sidebar_label: signUp()
 slug: /reference/javascript/auth/sign-up
 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#L101
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L102
 ---
 
 # `signUp()`

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

@@ -4,7 +4,7 @@ title: signIn()
 sidebar_label: signIn()
 slug: /reference/javascript/auth/sign-in
 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#L144
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L145
 ---
 
 # `signIn()`

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

@@ -4,7 +4,7 @@ title: signOut()
 sidebar_label: signOut()
 slug: /reference/javascript/auth/sign-out
 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#L256
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L230
 ---
 
 # `signOut()`

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

@@ -4,7 +4,7 @@ title: resetPassword()
 sidebar_label: resetPassword()
 slug: /reference/javascript/auth/reset-password
 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#L272
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L246
 ---
 
 # `resetPassword()`

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

@@ -4,7 +4,7 @@ title: changePassword()
 sidebar_label: changePassword()
 slug: /reference/javascript/auth/change-password
 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#L288
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L262
 ---
 
 # `changePassword()`

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

@@ -4,7 +4,7 @@ title: sendVerificationEmail()
 sidebar_label: sendVerificationEmail()
 slug: /reference/javascript/auth/send-verification-email
 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#L304
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L278
 ---
 
 # `sendVerificationEmail()`

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

@@ -4,7 +4,7 @@ title: changeEmail()
 sidebar_label: changeEmail()
 slug: /reference/javascript/auth/change-email
 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#L323
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L297
 ---
 
 # `changeEmail()`

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

@@ -4,7 +4,7 @@ title: deanonymize()
 sidebar_label: deanonymize()
 slug: /reference/javascript/auth/deanonymize
 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#L339
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L313
 ---
 
 # `deanonymize()`
@@ -24,13 +24,4 @@ nhost.auth.deanonymize({
 
 **<span className="parameter-name">params</span>** <span className="optional-status">required</span> [`DeanonymizeParams`](/reference/docgen/javascript/auth/types/deanonymize-params)
 
-| Property                                                                                        | Type                                   | Required | Notes |
-| :---------------------------------------------------------------------------------------------- | :------------------------------------- | :------: | :---- |
-| <span className="parameter-name"><span className="light-grey">params.</span>email</span>        | `string`                               |    ✔️    |       |
-| <span className="parameter-name"><span className="light-grey">params.</span>signInMethod</span> | `"email-password"` \| `"passwordless"` |    ✔️    |       |
-| <span className="parameter-name"><span className="light-grey">params.</span>allowedRoles</span> | `Array<string>`                        |          |       |
-| <span className="parameter-name"><span className="light-grey">params.</span>defaultRole</span>  | `string`                               |          |       |
-| <span className="parameter-name"><span className="light-grey">params.</span>connection</span>   | `"email"` \| `"sms"`                   |          |       |
-| <span className="parameter-name"><span className="light-grey">params.</span>password</span>     | `string`                               |          |       |
-
 ---

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

@@ -4,7 +4,7 @@ title: onTokenChanged()
 sidebar_label: onTokenChanged()
 slug: /reference/javascript/auth/on-token-changed
 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#L373
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L356
 ---
 
 # `onTokenChanged()`

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

@@ -4,7 +4,7 @@ title: onAuthStateChanged()
 sidebar_label: onAuthStateChanged()
 slug: /reference/javascript/auth/on-auth-state-changed
 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#L408
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L391
 ---
 
 # `onAuthStateChanged()`

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

@@ -4,7 +4,7 @@ title: isAuthenticated()
 sidebar_label: isAuthenticated()
 slug: /reference/javascript/auth/is-authenticated
 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#L450
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L433
 ---
 
 # `isAuthenticated()`

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

@@ -4,7 +4,7 @@ title: isAuthenticatedAsync()
 sidebar_label: isAuthenticatedAsync()
 slug: /reference/javascript/auth/is-authenticated-async
 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#L468
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L451
 ---
 
 # `isAuthenticatedAsync()`

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

@@ -4,7 +4,7 @@ title: getAuthenticationStatus()
 sidebar_label: getAuthenticationStatus()
 slug: /reference/javascript/auth/get-authentication-status
 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#L494
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L477
 ---
 
 # `getAuthenticationStatus()`

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

@@ -4,7 +4,7 @@ title: getAccessToken()
 sidebar_label: getAccessToken()
 slug: /reference/javascript/auth/get-access-token
 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#L524
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L507
 ---
 
 # `getAccessToken()`

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

@@ -4,7 +4,7 @@ title: getDecodedAccessToken()
 sidebar_label: getDecodedAccessToken()
 slug: /reference/javascript/auth/get-decoded-access-token
 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#L539
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L522
 ---
 
 # `getDecodedAccessToken()`

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

@@ -4,7 +4,7 @@ title: getHasuraClaims()
 sidebar_label: getHasuraClaims()
 slug: /reference/javascript/auth/get-hasura-claims
 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#L556
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L539
 ---
 
 # `getHasuraClaims()`

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

@@ -4,7 +4,7 @@ title: getHasuraClaim()
 sidebar_label: getHasuraClaim()
 slug: /reference/javascript/auth/get-hasura-claim
 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#L574
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L557
 ---
 
 # `getHasuraClaim()`

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

@@ -4,7 +4,7 @@ title: refreshSession()
 sidebar_label: refreshSession()
 slug: /reference/javascript/auth/refresh-session
 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#L597
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L580
 ---
 
 # `refreshSession()`

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

@@ -4,7 +4,7 @@ title: getSession()
 sidebar_label: getSession()
 slug: /reference/javascript/auth/get-session
 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#L641
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L624
 ---
 
 # `getSession()`

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

@@ -4,7 +4,7 @@ title: getUser()
 sidebar_label: getUser()
 slug: /reference/javascript/auth/get-user
 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#L656
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L639
 ---
 
 # `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#L59
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L60
 ---
 
 # `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#L178
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L181
 ---
 
 # `ApiChangeEmailResponse`

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#L170
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L173
 ---
 
 # `ApiChangePasswordResponse`

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#L182
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L185
 ---
 
 # `ApiDeanonymizeResponse`

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

@@ -4,7 +4,7 @@ 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#L158
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L161
 ---
 
 # `ApiRefreshTokenResponse`

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#L166
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L169
 ---
 
 # `ApiResetPasswordResponse`

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#L174
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L177
 ---
 
 # `ApiSendVerificationEmailResponse`

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#L147
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L150
 ---
 
 # `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#L151
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L154
 ---
 
 # `ApiSignInResponse`

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#L162
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L165
 ---
 
 # `ApiSignOutResponse`

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

@@ -4,7 +4,7 @@ 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#L143
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L146
 ---
 
 # `ApiSignUpEmailPasswordResponse`

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#L125
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L134
 ---
 
 # `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#L127
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L136
 ---
 
 # `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#L99
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L105
 ---
 
 # `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#L90
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L96
 ---
 
 # `ChangePasswordParams`

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

@@ -4,35 +4,20 @@ 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#L105
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L110
 ---
 
 # `DeanonymizeParams`
 
-## Parameters
-
----
-
-**<span className="parameter-name">email</span>** <span className="optional-status">required</span> `string`
-
----
-
-**<span className="parameter-name">signInMethod</span>** <span className="optional-status">required</span> `"email-password"` | `"passwordless"`
-
----
-
-**<span className="parameter-name">allowedRoles</span>** <span className="optional-status">optional</span> `Array<string>`
-
----
-
-**<span className="parameter-name">defaultRole</span>** <span className="optional-status">optional</span> `string`
-
----
-
-**<span className="parameter-name">connection</span>** <span className="optional-status">optional</span> `"email"` | `"sms"`
-
----
-
-**<span className="parameter-name">password</span>** <span className="optional-status">optional</span> `string`
-
----
+```ts
+type DeanonymizeParams =
+  | ({ signInMethod: 'email-password' } & SignUpParams)
+  | ({
+      signInMethod: 'passwordless'
+      connection: 'email'
+    } & SignInPasswordlessEmailParams)
+  | ({
+      signInMethod: 'passwordless'
+      connection: 'sms'
+    } & SignInPasswordlessSmsParams)
+```

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#L136
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L139
 ---
 
 # `Headers`

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#L139
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L142
 ---
 
 # `Mfa`

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#L129
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L138
 ---
 
 # `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#L85
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L91
 ---
 
 # `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#L94
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L100
 ---
 
 # `SendVerificationEmailParams`

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

@@ -1,19 +1,19 @@
 ---
 # ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
-title: LoginData
-sidebar_label: LoginData
+title: SignInEmailPasswordOtpParams
+sidebar_label: SignInEmailPasswordOtpParams
 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#L59
 ---
 
-# `LoginData`
+# `SignInEmailPasswordOtpParams`
 
 ## Parameters
 
 ---
 
-**<span className="parameter-name">mfa</span>** <span className="optional-status">optional</span> `boolean`
+**<span className="parameter-name">otp</span>** <span className="optional-status">required</span> `string`
 
 ---
 

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#L78
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L83
 ---
 
 # `SignInParams`
@@ -12,6 +12,7 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-j
 ```ts
 type SignInParams =
   | SignInEmailPasswordParams
+  | SignInEmailPasswordOtpParams
   | SignInPasswordlessEmailParams
   | SignInPasswordlessSmsOtpParams
   | SignInPasswordlessSmsParams

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#L59
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L64
 ---
 
 # `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#L69
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L74
 ---
 
 # `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#L64
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L69
 ---
 
 # `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#L114
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L123
 ---
 
 # `SignInReponse`

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#L73
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L78
 ---
 
 # `SignInWithProviderOptions`

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

@@ -3,8 +3,26 @@
 title: useSignInAnonymous()
 sidebar_label: useSignInAnonymous()
 slug: /reference/nextjs/use-sign-in-anonymous
-description: No description provided.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useSignInAnonymous.ts#L9
+description: Use the hook `useSignInAnonymous` to sign in a user anonymously.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useSignInAnonymous.ts#L27
 ---
 
 # `useSignInAnonymous()`
+
+Use the hook `useSignInAnonymous` to sign in a user anonymously.
+
+As a result, the user will have the `anonymous` role and subsequent set of permissions.
+The user can then be converted to a regular user at a later stage using email+password sign-up, passwordless email (magic link), or passwordless SMS.
+
+```tsx
+const { signInAnonymous, isLoading, isSuccess, isError, error } =
+  useSignInAnonymous()
+
+console.log({ isLoading, isSuccess, isError, error })
+
+const handleFormSubmit = async (e) => {
+  e.preventDefault()
+
+  await signInAnonymous()
+}
+```

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

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

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

@@ -4,7 +4,7 @@ title: SignInEmailPasswordHookResult
 sidebar_label: SignInEmailPasswordHookResult
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useSignInEmailPassword.ts#L19
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useSignInEmailPassword.ts#L24
 ---
 
 # `SignInEmailPasswordHookResult`

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

@@ -3,8 +3,26 @@
 title: useSignInAnonymous()
 sidebar_label: useSignInAnonymous()
 slug: /reference/react/use-sign-in-anonymous
-description: No description provided.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useSignInAnonymous.ts#L9
+description: Use the hook `useSignInAnonymous` to sign in a user anonymously.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useSignInAnonymous.ts#L27
 ---
 
 # `useSignInAnonymous()`
+
+Use the hook `useSignInAnonymous` to sign in a user anonymously.
+
+As a result, the user will have the `anonymous` role and subsequent set of permissions.
+The user can then be converted to a regular user at a later stage using email+password sign-up, passwordless email (magic link), or passwordless SMS.
+
+```tsx
+const { signInAnonymous, isLoading, isSuccess, isError, error } =
+  useSignInAnonymous()
+
+console.log({ isLoading, isSuccess, isError, error })
+
+const handleFormSubmit = async (e) => {
+  e.preventDefault()
+
+  await signInAnonymous()
+}
+```

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

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

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

@@ -4,7 +4,7 @@ title: SignInEmailPasswordHookResult
 sidebar_label: SignInEmailPasswordHookResult
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useSignInEmailPassword.ts#L19
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useSignInEmailPassword.ts#L24
 ---
 
 # `SignInEmailPasswordHookResult`

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

@@ -12,7 +12,9 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/vue/src/useRe
 Use the composable `useResetPassword` to reset the password for a user. This will send a reset password link in an email to the user. When the user clicks on the reset-password link the user is automatically signed in and can change their password using the composable `useChangePassword`.
 
 ```tsx
-const { resetPassword, isLoading, isSent, isError, error } = useResetPassword()
+const { resetPassword, isLoading, isSent, isError, error } = useResetPassword({
+  redirectTo: 'http://localhost:3000/settings/change-password'
+})
 
 watchEffect(() => {
   console.log(isLoading.value, isSent.value, isError.value, error.value)
@@ -21,9 +23,7 @@ watchEffect(() => {
 const handleFormSubmit = async (e) => {
   e.preventDefault()
 
-  await resetPassword('joe@example.com', {
-    redirectTo: 'http://localhost:3000/settings/change-password'
-  })
+  await resetPassword('joe@example.com')
 }
 ```
 

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

@@ -0,0 +1,30 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: useSignInAnonymous()
+sidebar_label: useSignInAnonymous()
+slug: /reference/vue/use-sign-in-anonymous
+description: Use the composable `useSignInAnonymous` to sign in a user anonymously.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/vue/src/useSignInAnonymous.ts#L31
+---
+
+# `useSignInAnonymous()`
+
+Use the composable `useSignInAnonymous` to sign in a user anonymously.
+
+As a result, the user will have the `anonymous` role and subsequent set of permissions.
+The user can then be converted to a regular user at a later stage using email+password sign-up, passwordless email (magic link), or passwordless SMS.
+
+```tsx
+const { signInAnonymous, isLoading, isSuccess, isError, error } =
+  useSignInAnonymous()
+
+watchEffect(() => {
+  console.log(isLoading.value, isSuccess.value, isError.value, error.value)
+})
+
+const handleFormSubmit = async (e) => {
+  e.preventDefault()
+
+  await signInAnonymous()
+}
+```

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

@@ -4,7 +4,7 @@ title: useSignInEmailPassword()
 sidebar_label: useSignInEmailPassword()
 slug: /reference/vue/use-sign-in-email-password
 description: Use the composable `useSignInEmailPassword` to sign in a user using email and password.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/vue/src/useSignInEmailPassword.ts#L44
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/vue/src/useSignInEmailPassword.ts#L46
 ---
 
 # `useSignInEmailPassword()`

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

@@ -4,9 +4,20 @@ title: useSignOut()
 sidebar_label: useSignOut()
 slug: /reference/vue/use-sign-out
 description: Use the composable `useSignOut` to sign out the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/vue/src/useSignOut.ts#L14
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/vue/src/useSignOut.ts#L27
 ---
 
 # `useSignOut()`
 
 Use the composable `useSignOut` to sign out the user.
+
+```jsx
+import { useSignOut } from '@nhost/vue'
+
+const { signOut, isSuccess } = useSignOut()
+
+const handleSignOut = async (e) => {
+  e.preventDefault()
+  await signOut()
+}
+```

docs/docusaurus.config.js

@@ -26,7 +26,7 @@ const config = {
   favicon: 'img/favicon.png',
   organizationName: 'nhost',
   projectName: 'docs',
-
+  plugins: [require.resolve("docusaurus-plugin-image-zoom")],
   presets: [
     [
       'classic',
@@ -180,6 +180,16 @@ const config = {
         apiKey: 'a76361eaed8ebcd4cf5d9ae2f0c9e746',
         indexName: 'nhost',
         contextualSearch: false
+      },
+      zoom: {
+        selector: '.markdown :not(em) > img',
+        config: {
+          // options you can specify via https://github.com/francoischalifour/medium-zoom#usage
+          background: {
+            light: 'rgb(255, 255, 255)',
+            dark: 'rgb(50, 50, 50)'
+          }
+        }
       }
     })
 }

docs/package.json

@@ -20,6 +20,7 @@
     "@docusaurus/preset-classic": "2.0.0-beta.20",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
+    "docusaurus-plugin-image-zoom": "^0.1.1",
     "mdx-mermaid": "^1.2.1",
     "mermaid": "^8.14.0",
     "prism-react-renderer": "^1.3.1",

examples/nextjs/components/OauthLinks.tsx

@@ -1,6 +1,6 @@
 import { FaFacebook, FaGithub, FaGoogle } from 'react-icons/fa'
 
-import { useProviderLink } from '@nhost/react'
+import { useProviderLink } from '@nhost/nextjs'
 
 import AuthLink from './AuthLink'
 

examples/nextjs/package.json

@@ -20,9 +20,9 @@
     "@mantine/hooks": "^4.2.2",
     "@mantine/next": "^4.2.2",
     "@mantine/notifications": "^4.2.2",
-    "@nhost/nextjs": "workspace:*",
-    "@nhost/react": "workspace:*",
-    "@nhost/react-apollo": "workspace:*",
+    "@nhost/nextjs": "*",
+    "@nhost/react": "*",
+    "@nhost/react-apollo": "*",
     "graphql": "^16.3.0",
     "next": "12.1.6",
     "react": "18.1.0",

examples/react-apollo-crm/package.json

@@ -6,8 +6,8 @@
     "@apollo/client": "^3.5.10",
     "@headlessui/react": "^1.5.0",
     "@heroicons/react": "^1.0.6",
-    "@nhost/react": "workspace:*",
-    "@nhost/react-apollo": "workspace:*",
+    "@nhost/react": "*",
+    "@nhost/react-apollo": "*",
     "@tailwindcss/forms": "^0.5.0",
     "classnames": "^2.3.1",
     "date-fns": "^2.28.0",

examples/react-apollo/cypress.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    chromeWebSecurity: false,
+    // * for some reason, the mailhog API is not systematically available
+    // * when using `localhost` instead of `127.0.0.1`
+    mailHogUrl: 'http://127.0.0.1:8025',
+    env: {
+      backendUrl: 'http://localhost:1337'
+    }
+  }
+} as Cypress.ConfigOptions)

examples/react-apollo/cypress/e2e/1-unauthenticated/authentication-guards.cy.ts

@@ -0,0 +1,8 @@
+context('Authentication guards', () => {
+  it('should redirect to /sign-in when not authenticated', () => {
+    cy.visit('/')
+    cy.location('pathname').should('equal', '/sign-in')
+    cy.visit('/apollo')
+    cy.location('pathname').should('equal', '/sign-in')
+  })
+})

examples/react-apollo/cypress/e2e/2-sign-up/anonymous.cy.ts

@@ -0,0 +1,51 @@
+import { faker } from '@faker-js/faker'
+
+context('Anonymous users', () => {
+  beforeEach(() => {
+    cy.signInAnonymous()
+  })
+
+  it('should sign-up anonymously', () => {
+    cy.contains('You signed in anonymously')
+  })
+
+  it('should deanonymise with email+password', () => {
+    cy.fetchUserData()
+      .its('id')
+      .then((id) => {
+        const email = faker.internet.email()
+        const password = faker.internet.password()
+        cy.signUpEmailPassword(email, password)
+        cy.contains('Verification email sent').should('be.visible')
+        cy.confirmEmail(email)
+        cy.contains('You signed in anonymously').should('not.exist')
+
+        cy.fetchUserData().then((user) => {
+          cy.wrap(user).its('id').should('equal', id)
+          cy.wrap(user).its('email').should('equal', email)
+        })
+      })
+  })
+
+  it('should deanonymise with passwordless email', () => {
+    cy.fetchUserData()
+      .its('id')
+      .then((id) => {
+        const email = faker.internet.email()
+        cy.signUpEmailPasswordless(email)
+        cy.contains('Verification email sent').should('be.visible')
+        cy.confirmEmail(email)
+        cy.goToHomePage()
+        cy.contains('You signed in anonymously').should('not.exist')
+
+        cy.fetchUserData().then((user) => {
+          cy.wrap(user).its('id').should('equal', id)
+          cy.wrap(user).its('email').should('equal', email)
+        })
+      })
+  })
+
+  // TODO implement deanonymisation with Oauth?
+  // TODO forbid email/password change, MFA activation, and password reset when the following PR is released
+  // * https://github.com/nhost/hasura-auth/pull/190
+})

examples/react-apollo/cypress/e2e/2-sign-up/email-password.cy.ts

@@ -0,0 +1,28 @@
+import { faker } from '@faker-js/faker'
+
+context('Sign up with email+password', () => {
+  it('should sign-up with email and password', () => {
+    const email = faker.internet.email()
+    const password = faker.internet.password()
+    cy.signUpEmailPassword(email, password)
+    cy.contains('Verification email sent').should('be.visible')
+    cy.confirmEmail(email)
+    cy.contains('You are authenticated')
+  })
+
+  it('shoud raise an error when trying to sign up with an existing email', () => {
+    const email = faker.internet.email()
+    const password = faker.internet.password(10)
+    cy.signUpEmailPassword(email, password)
+    cy.contains('Verification email sent').should('be.visible')
+    cy.signUpEmailPassword(email, password)
+    cy.contains('Email already in use').should('be.visible')
+  })
+
+  // TODO implement in the UI
+  it.skip('should fail when network is not available', () => {
+    cy.disconnectBackend()
+    cy.signUpEmailPassword(faker.internet.email(), faker.internet.password())
+    cy.contains('Error').should('be.visible')
+  })
+})

examples/react-apollo/cypress/e2e/2-sign-up/email-passwordless.cy.ts

@@ -0,0 +1,17 @@
+import { faker } from '@faker-js/faker'
+
+context('Sign up with passwordless email', () => {
+  it('should sign-up with passwordless email', () => {
+    const email = faker.internet.email()
+    cy.signUpEmailPasswordless(email)
+    cy.contains('Verification email sent').should('be.visible')
+    cy.confirmEmail(email)
+    cy.contains('Profile page')
+  })
+
+  it('should fail when network is not available', () => {
+    cy.disconnectBackend()
+    cy.signUpEmailPasswordless(faker.internet.email())
+    cy.contains('Error').should('be.visible')
+  })
+})

examples/react-apollo/cypress/e2e/3-sign-in/email-password.cy.ts

@@ -0,0 +1,78 @@
+import totp from 'totp-generator'
+
+import faker from '@faker-js/faker'
+import { Decoder } from '@nuintun/qrcode'
+
+context('Sign in with email+password', () => {
+  it('should sign-in with email and password', () => {
+    const email = faker.internet.email()
+    const password = faker.internet.password()
+    cy.signUpEmailPassword(email, password)
+    cy.contains('Verification email sent').should('be.visible')
+    cy.confirmEmail(email)
+    cy.signOut()
+    cy.contains('Log in to the Application').should('be.visible')
+    cy.signInEmailPassword(email, password)
+
+    cy.contains('You are authenticated')
+  })
+
+  // TODO implement in the UI
+  it.skip('should fail when network is not available', () => {
+    const email = faker.internet.email()
+    const password = faker.internet.password()
+    cy.disconnectBackend()
+    cy.signInEmailPassword(email, password)
+    cy.contains('Error').should('be.visible')
+  })
+
+  it('should activate and sign-in with MFA', () => {
+    // * Sign-up with email+password
+    const email = faker.internet.email()
+    const password = faker.internet.email()
+    cy.signUpEmailPassword(email, password)
+    cy.contains('Verification email sent').should('be.visible')
+    cy.confirmEmail(email)
+
+    cy.getNavBar()
+      .findByRole('button', { name: /Profile/i })
+      .click()
+
+    cy.findByText(/Activate 2-step verification/i)
+      .parent()
+      .findByRole('button')
+      .click()
+
+    cy.findByText(/Activate 2-step verification/i)
+      .get('img')
+      .then(async (img) => {
+        // * Activate MFA
+        const result = await new Decoder().scan(img.prop('src'))
+        const [, params] = result.data.split('?')
+        const { secret, algorithm, digits, period } = Object.fromEntries(
+          new URLSearchParams(params)
+        )
+        const code = totp(secret, {
+          algorithm: algorithm.replace('SHA1', 'SHA-1'),
+          digits: parseInt(digits),
+          period: parseInt(period)
+        })
+        cy.findByPlaceholderText('Enter activation code').type(code)
+        cy.findByRole('button', { name: /Activate/i }).click()
+        cy.contains('MFA has been activated!!!')
+        cy.signOut()
+
+        // * Sign-in with MFA
+        cy.visit('/sign-in')
+        cy.findByRole('button', { name: /Continue with email \+ password/i }).click()
+        cy.findByPlaceholderText('Email Address').type(email)
+        cy.findByPlaceholderText('Password').type(password)
+        cy.findByRole('button', { name: /Sign in/i }).click()
+        cy.contains('Send 2-step verification code')
+        const newCode = totp(secret, { timestamp: Date.now() })
+        cy.findByPlaceholderText('One-time password').type(newCode)
+        cy.findByRole('button', { name: /Send 2-step verification code/i }).click()
+        cy.contains('You are authenticated')
+      })
+  })
+})

examples/react-apollo/cypress/e2e/3-sign-in/token.cy.ts

@@ -0,0 +1,22 @@
+context('Sign in with a refresh token', () => {
+  it('should sign-in with a refresh token', () => {
+    cy.signUpAndConfirmEmail()
+    cy.contains('Profile page')
+    cy.clearLocalStorage()
+    cy.reload()
+    cy.contains('Log in to the Application')
+    cy.visitPathWithRefreshToken('/profile')
+    cy.contains('Profile page')
+  })
+
+  it('should fail authentication when network is not available', () => {
+    cy.signUpAndConfirmEmail()
+    cy.contains('Profile page')
+    cy.disconnectBackend()
+    cy.clearLocalStorage()
+    cy.reload()
+    cy.contains('Log in to the Application')
+    cy.visitPathWithRefreshToken('/profile')
+    cy.location('pathname').should('equal', '/sign-in')
+  })
+})

examples/react-apollo/cypress/e2e/4-authenticated/apollo.cy.ts

@@ -0,0 +1,45 @@
+import faker from '@faker-js/faker'
+
+context('Apollo', () => {
+  const addItemTest = (sentence: string) => {
+    cy.getNavBar()
+      .findByRole('button', { name: /Apollo/i })
+      .click()
+    cy.contains('Todo list')
+    cy.focused().type(sentence)
+    cy.findByRole('button', { name: /Add/i }).click()
+  }
+
+  it('should add an item to the todo list when normally authenticated', () => {
+    cy.signUpAndConfirmEmail()
+    const sentence = faker.lorem.sentence()
+    addItemTest(sentence)
+    cy.get('li').contains(sentence)
+  })
+
+  it('should add an item to the todo list when anonymous', () => {
+    cy.signInAnonymous()
+    const sentence = faker.lorem.sentence()
+    addItemTest(sentence)
+    cy.get('li').contains(sentence)
+  })
+
+  it('should add an item to the todo list after a token refresh', () => {
+    // * This test has a limitation: Hasura's clock is not changing, so the previous JWT will still be valid.
+    cy.signUpAndConfirmEmail()
+    const now = Date.now()
+    cy.clock(now)
+    cy.tick(4 * 7 * 24 * 60 * 60 * 1000)
+    const sentence = faker.lorem.sentence()
+    addItemTest(sentence)
+    cy.get('li').contains(sentence)
+  })
+
+  it('should not add an item when backend is disconnected', () => {
+    cy.signUpAndConfirmEmail()
+    cy.disconnectBackend()
+    addItemTest(faker.lorem.sentence())
+    cy.contains('Network error')
+    cy.get('ul').should('be.empty')
+  })
+})

examples/react-apollo/cypress/e2e/4-authenticated/change-email.cy.ts

@@ -0,0 +1,30 @@
+import faker from '@faker-js/faker'
+
+context('Change email', () => {
+  it('should change email', () => {
+    const newEmail = faker.internet.email()
+    cy.signUpAndConfirmEmail()
+    cy.findByPlaceholderText('New email').type(newEmail)
+    cy.findByText(/Change Email/i)
+      .parent()
+      .findByRole('button')
+      .click()
+    cy.contains('Please check your inbox and follow the link to confirm the email change').should(
+      'be.visible'
+    )
+    cy.signOut()
+    cy.confirmEmail(newEmail)
+    cy.contains('Profile page')
+  })
+
+  it('should not accept an invalid email', () => {
+    const newEmail = faker.random.alphaNumeric()
+    cy.signUpAndConfirmEmail()
+    cy.findByPlaceholderText('New email').type(newEmail)
+    cy.findByText(/Change Email/i)
+      .parent()
+      .findByRole('button')
+      .click()
+    cy.contains('Email is incorrectly formatted').should('be.visible')
+  })
+})

examples/react-apollo/cypress/e2e/4-authenticated/change-password.cy.ts

@@ -0,0 +1,29 @@
+import faker from '@faker-js/faker'
+
+context('Change password', () => {
+  it('should change password', () => {
+    const email = faker.internet.email()
+    const newPassword = faker.internet.password()
+    cy.signUpAndConfirmEmail(email)
+    cy.findByPlaceholderText('New password').type(newPassword)
+    cy.findByText(/Change Password/i)
+      .parent()
+      .findByRole('button')
+      .click()
+    cy.contains('Password changed successfully').should('be.visible')
+    cy.signOut()
+    cy.signInEmailPassword(email, newPassword)
+    cy.contains('You are authenticated')
+  })
+
+  it('should not accept an invalid password', () => {
+    const newPassword = faker.random.alphaNumeric(2)
+    cy.signUpAndConfirmEmail()
+    cy.findByPlaceholderText('New password').type(newPassword)
+    cy.findByText(/Change Password/i)
+      .parent()
+      .findByRole('button')
+      .click()
+    cy.contains('Password is incorrectly formatted').should('be.visible')
+  })
+})

examples/react-apollo/cypress/e2e/4-authenticated/sign-out.cy.ts

@@ -0,0 +1,13 @@
+context('Sign out', () => {
+  beforeEach(() => {
+    cy.signUpAndConfirmEmail()
+  })
+
+  it('should sign out', () => {
+    cy.visitPathWithRefreshToken()
+    cy.goToProfilePage()
+    cy.contains('Profile page')
+    cy.signOut()
+    cy.contains('Log in to the Application')
+  })
+})

examples/react-apollo/cypress/e2e/4-authenticated/token-refresh.cy.ts

@@ -0,0 +1,30 @@
+import faker from '@faker-js/faker'
+
+context('Token refresh', () => {
+  it('should refresh token one minute before it expires', () => {
+    const email = faker.internet.email()
+    cy.signUpEmailPasswordless(email)
+    cy.contains('Verification email sent').should('be.visible')
+    const now = Date.now()
+    cy.clock(now)
+    cy.confirmEmail(email)
+
+    cy.intercept(Cypress.env('backendUrl') + '/v1/auth/token').as('tokenRequest')
+    cy.tick(14 * 60 * 1000)
+    cy.wait('@tokenRequest').its('response.statusCode').should('eq', 200)
+  })
+
+  it('should refresh session from localStorage after 4 weeks of inactivity', () => {
+    const email = faker.internet.email()
+    cy.signUpEmailPasswordless(email)
+    cy.contains('Verification email sent').should('be.visible')
+    const now = Date.now()
+    cy.clock(now)
+    cy.confirmEmail(email)
+    cy.contains('Profile page')
+
+    cy.tick(4 * 7 * 24 * 60 * 60 * 1000)
+    cy.reload()
+    cy.contains('Profile page')
+  })
+})

examples/react-apollo/cypress/support/e2e.ts

@@ -0,0 +1,139 @@
+import { faker } from '@faker-js/faker'
+import { User } from '@nhost/core'
+
+import '@testing-library/cypress/add-commands'
+import 'cypress-mailhog'
+declare module 'mocha' {
+  export interface Context {
+    refreshToken?: string
+  }
+}
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      signUpEmailPassword(email: string, password: string): Chainable<Element>
+      signUpEmailPasswordless(email: string): Chainable<Element>
+      signInEmailPassword(email: string, password: string): Chainable<Element>
+      signInAnonymous(): Chainable<Element>
+      /** Sign in from the refresh token stored in the global state */
+      visitPathWithRefreshToken(path?: string): Chainable<Element>
+      /** Click on the 'Sign Out' item of the left side menu to sign out the current user */
+      signOut(): Chainable<Element>
+      /** Run a sign-up + authentication sequence with passwordless to use an authenticated user in other tests */
+      signUpAndConfirmEmail(email?: string): Chainable<Element>
+      /** Gets a confirmation email and click on the link */
+      confirmEmail(email: string): Chainable<Element>
+      /** Save the refresh token in the global state so it can be reused with `this.refreshToken` */
+      saveRefreshToken(): Chainable<Element>
+      /** Make the Nhost backend unavailable */
+      disconnectBackend(): Chainable<Element>
+      /** Get the left side navigation bar */
+      getNavBar(): Chainable<Element>
+      /** Go to the profile page */
+      goToProfilePage(): Chainable<Element>
+      /** Go to the home page */
+      goToHomePage(): Chainable<Element>
+      /** Go getch the user ID in the profile page*/
+      fetchUserData(): Chainable<User>
+    }
+  }
+}
+
+Cypress.Commands.add('signUpEmailPassword', (email, password) => {
+  cy.visit('/sign-up')
+  cy.findByRole('button', { name: /Continue with email \+ password/i }).click()
+  cy.findByPlaceholderText('First name').type(faker.name.firstName())
+  cy.findByPlaceholderText('Last name').type(faker.name.lastName())
+  cy.findByPlaceholderText('Email Address').type(email)
+  cy.findByPlaceholderText('Password').type(password)
+  cy.findByPlaceholderText('Confirm Password').type(password)
+  cy.findByRole('button', { name: /Continue with email \+ password/i }).click()
+})
+
+Cypress.Commands.add('signUpEmailPasswordless', (email) => {
+  cy.visit('/sign-up')
+  cy.findByRole('button', { name: /Continue with passwordless email/i }).click()
+  cy.findByPlaceholderText('Email Address').type(email)
+  cy.findByRole('button', { name: /Continue with email/i }).click()
+})
+
+Cypress.Commands.add('signInEmailPassword', (email, password) => {
+  cy.visit('/sign-in')
+  cy.findByRole('button', { name: /Continue with email \+ password/i }).click()
+  cy.findByPlaceholderText('Email Address').type(email)
+  cy.findByPlaceholderText('Password').type(password)
+  cy.findByRole('button', { name: /Sign in/i }).click()
+  cy.saveRefreshToken()
+})
+
+Cypress.Commands.add('signInAnonymous', () => {
+  cy.visit('/sign-in')
+  cy.findByRole('link', { name: /sign in anonymously/i }).click()
+  cy.saveRefreshToken()
+})
+
+Cypress.Commands.add('visitPathWithRefreshToken', function (path = '/') {
+  cy.visit(path + '#refreshToken=' + this.refreshToken)
+})
+
+Cypress.Commands.add('signOut', () => {
+  cy.getNavBar()
+    .findByRole('button', { name: /Sign Out/i })
+    .click()
+})
+
+Cypress.Commands.add('confirmEmail', (email) => {
+  cy.mhGetMailsByRecipient(email)
+    .should('have.length', 1)
+    .then(([message]) => {
+      cy.visit(message.Content.Headers['X-Link'][0])
+      cy.saveRefreshToken()
+    })
+})
+
+Cypress.Commands.add('signUpAndConfirmEmail', (givenEmail) => {
+  const email = givenEmail || faker.internet.email()
+  cy.signUpEmailPasswordless(email)
+  cy.contains('Verification email sent').should('be.visible')
+  cy.confirmEmail(email)
+})
+
+Cypress.Commands.add('saveRefreshToken', () => {
+  cy.getNavBar()
+    .findByRole('button', { name: /Sign Out/i })
+    .then(() => localStorage.getItem('nhostRefreshToken'))
+    .as('refreshToken')
+})
+
+Cypress.Commands.add('disconnectBackend', () => {
+  cy.intercept(Cypress.env('backendUrl') + '/**', {
+    forceNetworkError: true
+  })
+})
+
+Cypress.Commands.add('getNavBar', () => {
+  cy.findByRole(`navigation`, { name: /main navigation/i })
+})
+
+Cypress.Commands.add('goToProfilePage', () => {
+  cy.getNavBar()
+    .findByRole('button', { name: /Profile/i })
+    .click()
+})
+
+Cypress.Commands.add('goToHomePage', () => {
+  cy.getNavBar().findByRole('button', { name: /Home/i }).click()
+})
+
+Cypress.Commands.add('fetchUserData', () => {
+  cy.goToProfilePage()
+  cy.findByText('User information')
+    .parent()
+    .within(() => {
+      cy.get('pre')
+        .invoke('text')
+        .then((text) => JSON.parse(text))
+        .as('user')
+    })
+  return cy.get<User>('@user')
+})

examples/react-apollo/graphql.config.yaml

@@ -0,0 +1,15 @@
+schema:
+  - http://localhost:1337/v1/graphql:
+      headers:
+        x-hasura-admin-secret: nhost-admin-secret
+        x-hasura-role: user
+documents: 'src/**/!(*.d).{ts,tsx}'
+generates:
+  ./src/generated.ts:
+    config:
+      namingConvention:
+        typeNames: change-case-all#pascalCase
+        transformUnderscore: true
+    plugins:
+      - typescript
+      - typescript-operations