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

chore: update versions

.config/.eslintrc

@@ -1,50 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es6": true,
-    "node": true
-  },
-  "ignorePatterns": ["**/dist", "**/build", "**/.next"],
-  "extends": ["react-app", "plugin:react/recommended", "plugin:react-hooks/recommended"],
-  "parserOptions": {
-    // "project": "./tsconfig.json"
-    "project": ["packages/*/tsconfig.json", "examples/*/tsconfig.json"]
-  },
-  "plugins": ["react", "@typescript-eslint", "react-hooks", "simple-import-sort"],
-  "rules": {
-    "no-use-before-define": "off",
-    "simple-import-sort/exports": "error",
-
-    "simple-import-sort/imports": [
-      "error",
-      {
-        "groups": [
-          // Node.js builtins. You could also generate this regex if you use a `.js` config.
-          // For example: `^(${require("module").builtinModules.join("|")})(/|$)`
-          [
-            "^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)"
-          ],
-          // Packages
-          ["^\\w"],
-          // Internal packages.
-          ["^(@|config/)(/*|$)"],
-          // Side effect imports.
-          ["^\\u0000"],
-          // Parent imports. Put `..` last.
-          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
-          // Other relative imports. Put same-folder imports and `.` last.
-          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
-          // Style imports.
-          ["^.+\\.s?css$"]
-        ]
-      }
-    ],
-    "import/no-anonymous-default-export": [
-      "error",
-      {
-        "allowArrowFunction": true,
-        "allowAnonymousFunction": true
-      }
-    ]
-  }
-}

.config/esbuild.lib.js

@@ -1,30 +0,0 @@
-const esbuild = require('esbuild')
-
-// Automatically exclude all node_modules from the bundled version
-const { nodeExternalsPlugin } = require('esbuild-node-externals')
-esbuild
-  .build({
-    entryPoints: ['./src/index.ts'],
-    outfile: 'dist/index.cjs.js',
-    bundle: true,
-    minify: true,
-    platform: 'node',
-    format: 'cjs',
-    sourcemap: true,
-    target: 'node14',
-    plugins: [nodeExternalsPlugin()]
-  })
-  .catch(() => process.exit(1))
-
-esbuild
-  .build({
-    entryPoints: ['./src/index.ts'],
-    outfile: 'dist/index.es.js',
-    bundle: true,
-    minify: true,
-    platform: 'browser',
-    format: 'esm',
-    sourcemap: true,
-    target: 'es2019'
-  })
-  .catch(() => process.exit(1))

.config/jest.config.js

@@ -1,7 +0,0 @@
-const base = require('./jest.config.base.js')
-
-module.exports = {
-  ...base,
-  projects: ['<rootDir>/packages/*/jest.config.js'],
-  coverageDirectory: '<rootDir>/coverage/'
-}

.config/vite.lib.react.js

@@ -1,50 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-
-import { defineConfig } from 'vite'
-import dts from 'vite-plugin-dts'
-import tsconfigPaths from 'vite-tsconfig-paths'
-
-import react from '@vitejs/plugin-react'
-
-const PWD = process.env.PWD
-const pkg = require(path.join(PWD, 'package.json'))
-
-const tsEntry = path.resolve(PWD, 'src/index.ts')
-const entry = fs.existsSync(tsEntry) ? tsEntry : tsEntry.replace('.ts', '.tsx')
-
-/**
- * @type {import('vite').UserConfig}
- */
-export default defineConfig({
-  plugins: [
-    react(),
-    tsconfigPaths(),
-    dts({
-      exclude: ['**/*.spec.ts', '**/*.test.ts', '**/tests/**'],
-      afterBuild: () => {
-        const types = fs.readdirSync(path.join(PWD, 'dist/src'))
-        types.forEach((file) => {
-          fs.renameSync(path.join(PWD, 'dist/src', file), path.join(PWD, 'dist', file))
-        })
-        fs.rmdirSync(path.join(PWD, 'dist/src'))
-      }
-    })
-  ],
-  build: {
-    lib: {
-      entry,
-      name: pkg.name,
-      fileName: 'index'
-    },
-    rollupOptions: {
-      external: ['react', '@nhost/react'],
-      output: {
-        globals: {
-          react: 'react',
-          '@nhost/react': '@nhost/react'
-        }
-      }
-    }
-  }
-})

.github/workflows/changesets.yaml

@@ -9,6 +9,7 @@ on:
       - 'examples/**'
       - 'assets/**'
       - '**.md'
+      - '!.changeset/**'
       - 'LICENSE'
 
 jobs:

.gitignore

@@ -19,6 +19,7 @@ logs/
 # Directories
 coverage/
 dist/
+umd/
 lib/
 node_modules/
 tmp/
@@ -32,16 +33,15 @@ tmp/
 *.map
 todo.md
 
-# Generated configs 
+# Config files that are not part of the repository root anymore. Should be removed in the future.
 /.eslintignore
-/.eslintrc
-/.prettierignore
-/prettier.config.js
+/.eslintrc*
 /vite.*.js
 /jest.*.js
+/*tsconfig*.json
 /esbuild.*.js
 
-!.config/**
+!config/**
 
 *.tsbuildinfo
 

.prettierrc.js

@@ -11,6 +11,11 @@ module.exports = {
   tabWidth: 2,
   trailingComma: 'none',
   useTabs: false,
+  // TODO: add import sort configuration to match ESLint rules
+  // plugins: ['./node_modules/@trivago/prettier-plugin-sort-imports'],
+  // importOrderSeparation: true,
+  // importOrderSortSpecifiers: true
+  plugins: [],
   overrides: [
     {
       files: ['*.json', '*.yaml'],
@@ -18,7 +23,5 @@ module.exports = {
         useTabs: false
       }
     }
-  ],
-  importOrderSeparation: true,
-  importOrderSortSpecifiers: true
+  ]
 }

DEVELOPERS.md

@@ -2,15 +2,17 @@
 
 ## Requirements
 
-- We use [pnpm](https://pnpm.io/) as a package manager to fasten development and builds, and as a backbone to our monorepo. You have to make sure it is installed in your machine. There are [multiple ways to install it](https://pnpm.io/installation), but the easiest way is with `npm`:
+- We use [pnpm](https://pnpm.io/) as a package manager to speed up development and builds, and as a basis for our monorepo. You need to make sure it's installed on your machine. There are [several ways to install it](https://pnpm.io/installation), but the easiest way is with `npm`:
 
 ```sh
-npm install -g pnpm
+$ npm install -g pnpm
 ```
 
-- Our tests and examples are using the Nhost CLI to run the backend services locally. You can follow the instructions to install it in [our documentation](https://docs.nhost.io/get-started/cli-workflow/install-cli)
+- Our tests and examples use the Nhost CLI, to run the backend services locally. You can follow the installation instructions in [our documentation](https://docs.nhost.io/get-started/cli-workflow/install-cli).
 
-## Getting things ready
+## Get started
+
+### Installation
 
 First, clone this repository:
 
@@ -21,57 +23,74 @@ git clone https://github.com/nhost/nhost
 Then, install the dependencies with `pnpm`:
 
 ```sh
-cd nhost
-pnpm install
+$ cd nhost
+$ pnpm install
 ```
 
-## Starting development from an example
+### Development
 
-Let's follow the instructions to start [react-apollo example](https://github.com/nhost/nhost/blob/main/examples/react-apollo/README.md).
+Although package references are correctly updated on the fly for TypeScript, example projects won't
+see the changes because they are depending on the build output. To fix this, you can run packages
+in development mode.
 
-## Running the documentation website locally
-
-The easier way to contribute to our documentation is to move to the `docs` folder and follow the [instructions to start local development](https://github.com/nhost/nhost/blob/main/docs/README.md):
+Running packages in development mode is as simple as:
 
 ```sh
-cd docs
-# not necessary step if you've done this step already anywhere in the repository
-pnpm install
-pnpm start
+$ pnpm dev
 ```
 
-## Testing
+Our packages are linked together using [PNPM's workspace](https://pnpm.io/workspaces) feature. Vite automatically detects changes in the dependencies and rebuilds everything, so that the changes are immediately reflected in the other packages.
 
-In order to run tests, the Nhost testing backend should run locally. You can start it in from a separate terminal:
+### Use examples
+
+Examples are a great way to test your changes in practice. Make sure you've `pnpm dev` running in your terminal and then run an example.
+
+Let's follow the instructions to run [react-apollo example](https://github.com/nhost/nhost/blob/main/examples/react-apollo/README.md).
+
+## Run the documentation website locally
+
+The easier way to contribute to our documentation is to go to the `docs` folder and follow the [instructions to start local development](https://github.com/nhost/nhost/blob/main/docs/README.md):
 
 ```sh
-cd examples/testing-project
-nhost -d
+$ cd docs
+# not necessary if you've already done this step somewhere in the repository
+$ pnpm install
+$ pnpm start
 ```
 
-Once Nhost started locally, you can run the tests from the root folder of the repository with the following command:
+## Run test suites
+
+In order to run tests, the Nhost testing backend should be running locally. You can run it from a separate terminal:
 
 ```sh
-pnpm test
+$ cd examples/testing-project
+$ nhost -d
+```
+
+Once Nhost is started locally, you can run the tests with the following command from the repository root:
+
+```sh
+$ pnpm test
 ```
 
 ## Changesets
 
-If you made some changes in the packages, you will have to describe these changes so they will be taken into account in the next release.
-We are using [changesets](https://github.com/changesets/changesets) to support our version/publish workflows. When submitting a pull request, a bot will check if some changesets are present, and if not, will guide you to add them.
+If you've made changes to the packages, you must describe those changes so that they can be reflected in the next release.
+We use [changesets](https://github.com/changesets/changesets) to support our versioning and release workflows. When you submit a pull request, a bot checks if some changesets are present, and if not, it directs you to add them.
 
-The most comprehensive way to add a changeset is to run the following command from the root directory of the repository:
+The most comprehensive way to add a changeset is to run the following command in the repository root:
 
 ```sh
-pnpm changeset
+$ pnpm changeset
 ```
 
-This will generate a file in the `.changeset` directory. You can edit it to give further details about the change you just made.
-You can have a look at the changesets documentation on [how to add a changeset](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
+This will create a file in the `.changeset` directory. You can edit it to give more details about the change you just made.
 
-## Commiting changes
+You can take a look at the changeset documentation: [How to add a changeset](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).
 
-You may notice `git commit` takes a few seconds to run. We set a commit hook that scan the changes in the code, automatically generates the documentation from the inline [TSDoc](https://tsdoc.org/) annotations, and add these generated documentation files to the commit. They will automatically update the [reference documentation](https://docs.nhost.io/reference).
+## Committing changes
+
+You'll notice that `git commit` takes a few seconds to run. We set a commit hook that scans the changes in the code, automatically generates documentation from the inline [TSDoc](https://tsdoc.org/) annotations, and adds these generated documentation files to the commit. They automatically update the [reference documentation](https://docs.nhost.io/reference).
 
 <!-- ## Good practices
 - lint

README.md

@@ -134,6 +134,13 @@ Here are some ways of contributing to making Nhost better:
             <sub><b>Pilou</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/szilarddoro">
+            <img src="https://avatars.githubusercontent.com/u/310881?v=4" width="100;" alt="szilarddoro"/>
+            <br />
+            <sub><b>Szilárd Dóró</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/elitan">
             <img src="https://avatars.githubusercontent.com/u/331818?v=4" width="100;" alt="elitan"/>
@@ -142,10 +149,10 @@ Here are some ways of contributing to making Nhost better:
         </a>
     </td>
     <td align="center">
-        <a href="https://github.com/szilarddoro">
-            <img src="https://avatars.githubusercontent.com/u/310881?v=4" width="100;" alt="szilarddoro"/>
+        <a href="https://github.com/gdangelo">
+            <img src="https://avatars.githubusercontent.com/u/4352286?v=4" width="100;" alt="gdangelo"/>
             <br />
-            <sub><b>Szilárd Dóró</b></sub>
+            <sub><b>Grégory D'Angelo</b></sub>
         </a>
     </td>
     <td align="center">
@@ -161,15 +168,15 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Subha Das</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/guicurcio">
             <img src="https://avatars.githubusercontent.com/u/20285232?v=4" width="100;" alt="guicurcio"/>
             <br />
             <sub><b>Guido Curcio</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/sebagudelo">
             <img src="https://avatars.githubusercontent.com/u/43288271?v=4" width="100;" alt="sebagudelo"/>
@@ -184,13 +191,6 @@ Here are some ways of contributing to making Nhost better:
             <sub><b>Mrinal Wahal</b></sub>
         </a>
     </td>
-    <td align="center">
-        <a href="https://github.com/gdangelo">
-            <img src="https://avatars.githubusercontent.com/u/4352286?v=4" width="100;" alt="gdangelo"/>
-            <br />
-            <sub><b>Grégory D'Angelo</b></sub>
-        </a>
-    </td>
     <td align="center">
         <a href="https://github.com/FuzzyReason">
             <img src="https://avatars.githubusercontent.com/u/62517920?v=4" width="100;" alt="FuzzyReason"/>
@@ -299,6 +299,13 @@ Here are some ways of contributing to making Nhost better:
         </a>
     </td></tr>
 <tr>
+    <td align="center">
+        <a href="https://github.com/gaurav1999">
+            <img src="https://avatars.githubusercontent.com/u/20752142?v=4" width="100;" alt="gaurav1999"/>
+            <br />
+            <sub><b>Gaurav Agrawal</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/alveshelio">
             <img src="https://avatars.githubusercontent.com/u/8176422?v=4" width="100;" alt="alveshelio"/>
@@ -320,13 +327,21 @@ 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/MarcelloTheArcane">
+            <img src="https://avatars.githubusercontent.com/u/21159570?v=4" width="100;" alt="MarcelloTheArcane"/>
+            <br />
+            <sub><b>Max Reynolds</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/ghoshnirmalya">
             <img src="https://avatars.githubusercontent.com/u/6391763?v=4" width="100;" alt="ghoshnirmalya"/>
             <br />
             <sub><b>Nirmalya Ghosh</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/quentin-decre">
             <img src="https://avatars.githubusercontent.com/u/1137511?v=4" width="100;" alt="quentin-decre"/>

config/.eslintrc.js

@@ -0,0 +1,65 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+    node: true
+  },
+  ignorePatterns: [
+    'dist',
+    'umd',
+    'build',
+    '.next',
+    'node_modules',
+    'tsup.config.ts',
+    '__tests__',
+    '__mocks__',
+    '*.test.ts',
+    '*.test.tsx',
+    '*.spec.ts',
+    '*.spec.tsx',
+    'tests/**/*.ts',
+    'tests/**/*.d.ts'
+  ],
+  extends: ['react-app', 'plugin:react/recommended', 'plugin:react-hooks/recommended'],
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  },
+  plugins: ['react', '@typescript-eslint', 'react-hooks', 'simple-import-sort'],
+  rules: {
+    'react/prop-types': 'off',
+    'no-use-before-define': 'off',
+    'simple-import-sort/exports': 'error',
+    'simple-import-sort/imports': [
+      'error',
+      {
+        groups: [
+          // Node.js builtins. You could also generate this regex if you use a `.js` config.
+          // For example: `^(${require("module").builtinModules.join("|")})(/|$)`
+          [
+            '^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)'
+          ],
+          // Packages
+          ['^\\w'],
+          // Internal packages.
+          ['^(@|config/)(/*|$)'],
+          // Side effect imports.
+          ['^\\u0000'],
+          // Parent imports. Put `..` last.
+          ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
+          // Other relative imports. Put same-folder imports and `.` last.
+          ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
+          // Style imports.
+          ['^.+\\.s?css$']
+        ]
+      }
+    ],
+    'import/no-anonymous-default-export': [
+      'error',
+      {
+        allowArrowFunction: true,
+        allowAnonymousFunction: true
+      }
+    ]
+  }
+}

config/jest.config.base.js

@@ -7,7 +7,6 @@ module.exports = {
   testRegex: '(/tests/.*.(test|spec)).(jsx?|tsx?)$',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   collectCoverage: true,
-  // coveragePathIgnorePatterns: ['(tests/.*.mock).(jsx?|tsx?)$'],
   verbose: true,
   testTimeout: 30000,
   globals: {

config/jest.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  rootDir: process.cwd(),
+  preset: 'ts-jest',
+  collectCoverage: true,
+  coverageProvider: 'v8',
+  coverageDirectory: '<rootDir>/coverage',
+  clearMocks: true,
+  verbose: true,
+  testTimeout: 30000,
+  globals: {
+    'ts-jest': {
+      isolatedModules: true
+    }
+  }
+}

config/react-library.tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "React Library",
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "preserve"
+  }
+}

config/tsconfig.base.json

@@ -0,0 +1,56 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Default",
+  "compilerOptions": {
+    "composite": false,
+    "declaration": true,
+    "declarationMap": true,
+    "strict": true,
+    "isolatedModules": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "target": "ES6",
+    "module": "CommonJS",
+    "lib": [
+      "es5",
+      "dom",
+      "es2015.promise",
+      "es2015.symbol",
+      "es2015.iterable",
+      "es2015.collection",
+      "es2015.symbol.wellknown",
+      "es2015.core",
+      "es2017.object",
+      "es2017.string"
+    ],
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "types": ["node"],
+    "typeRoots": [
+      "./node_modules/@types", "**/*/dist", "**/*/build", "**/*/.next", "**/*/umd"
+    ],
+    "paths": {
+      "@nhost/apollo": ["../packages/apollo/src/index.ts"],
+      "@nhost/core": ["../packages/core/src/index.ts"],
+      "@nhost/docgen": ["../packages/docgen/src/index.ts"],
+      "@nhost/hasura-auth-js": ["../packages/hasura-auth-js/src/index.ts"],
+      "@nhost/hasura-storage-js": ["../packages/hasura-storage-js/src/index.ts"],
+      "@nhost/nextjs": ["../packages/nextjs/src/index.ts"],
+      "@nhost/nhost-js": ["../packages/nhost-js/src/index.ts"],
+      "@nhost/react": ["../packages/react/src/index.ts"],
+      "@nhost/react-apollo": ["../packages/react-apollo/src/index.ts"],
+      "@nhost/react-auth": ["../packages/react-auth/src/index.ts"]
+    }
+  },
+  "exclude": [
+    "node_modules",
+    "**/*/dist",
+    "**/*/build",
+    "**/*/.next",
+    "**/*/__tests__",
+    "**/*/__mocks__"
+  ]
+}

config/vite.lib.config.js

@@ -0,0 +1,71 @@
+import fs from 'fs'
+import path from 'path'
+
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+const PWD = process.env.PWD
+const pkg = require(path.join(PWD, 'package.json'))
+
+const tsEntry = path.resolve(PWD, 'src/index.ts')
+const entry = fs.existsSync(tsEntry) ? tsEntry : tsEntry.replace('.ts', '.tsx')
+
+const deps = [...Object.keys(Object.assign({}, pkg.peerDependencies, pkg.dependencies))]
+
+export default defineConfig({
+  optimizeDeps: {
+    include: ['react/jsx-runtime']
+  },
+  plugins: [
+    tsconfigPaths(),
+    dts({
+      exclude: ['**/*.spec.ts', '**/*.test.ts', '**/tests/**'],
+      afterBuild: () => {
+        const types = fs.readdirSync(path.join(PWD, 'dist/src'))
+        types.forEach((file) => {
+          fs.renameSync(path.join(PWD, 'dist/src', file), path.join(PWD, 'dist', file))
+        })
+        fs.rmdirSync(path.join(PWD, 'dist/src'))
+      }
+    })
+  ],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    reporters: 'verbose',
+    include: [`${PWD}/src/**/*.{spec,test}.{ts,tsx}`, `${PWD}/tests/**/*.{spec,test}.{ts,tsx}`],
+    // Note: temporarily disabled threads, because of a bug in vitest
+    // https://github.com/vitest-dev/vitest/issues/1171
+    threads: false
+  },
+  build: {
+    sourcemap: true,
+    lib: {
+      entry,
+      name: pkg.name,
+      fileName: 'index',
+      formats: ['cjs', 'es']
+    },
+    rollupOptions: {
+      external: (id) => deps.some((dep) => id.startsWith(dep)),
+      output: {
+        globals: {
+          'graphql/language/printer': 'graphql/language/printer',
+          '@apollo/client': '@apollo/client',
+          '@apollo/client/link/context': '@apollo/client/link/context',
+          '@apollo/client/link/subscriptions': '@apollo/client/link/subscriptions',
+          '@apollo/client/utilities': '@apollo/client/utilities',
+          'graphql-ws': 'graphql-ws',
+          xstate: 'xstate',
+          axios: 'axios',
+          'js-cookie': 'Cookies',
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          'react/jsx-runtime': '_jsx',
+          '@nhost/react': '@nhost/react'
+        }
+      }
+    }
+  }
+})

config/vite.lib.dev.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+
+import viteLibConfig from './vite.lib.config'
+
+export default defineConfig({
+  ...viteLibConfig,
+  build: {
+    ...viteLibConfig.build,
+    watch: {
+      buildDelay: 500
+    }
+  }
+})

config/vite.lib.umd.config.js

@@ -0,0 +1,42 @@
+import fs from 'fs'
+import path from 'path'
+
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+import baseLibConfig from './vite.lib.config'
+
+const PWD = process.env.PWD
+const pkg = require(path.join(PWD, 'package.json'))
+
+const deps = [...Object.keys(Object.assign({}, pkg.peerDependencies))]
+
+export default defineConfig({
+  plugins: [
+    tsconfigPaths(),
+    dts({
+      exclude: ['**/*.spec.ts', '**/*.test.ts', '**/tests/**'],
+      afterBuild: () => {
+        const types = fs.readdirSync(path.join(PWD, 'umd/src'))
+        types.forEach((file) => {
+          fs.renameSync(path.join(PWD, 'umd/src', file), path.join(PWD, 'umd', file))
+        })
+        fs.rmdirSync(path.join(PWD, 'umd/src'))
+      }
+    })
+  ],
+  build: {
+    ...(baseLibConfig.build || {}),
+    outDir: 'umd',
+    lib: {
+      ...(baseLibConfig.build?.lib || {}),
+      fileName: pkg.name.replace(/@nhost\//g, ''),
+      formats: ['umd']
+    },
+    rollupOptions: {
+      ...(baseLibConfig.build?.rollupOptions || {}),
+      external: (id) => deps.some((dep) => id.startsWith(dep))
+    }
+  }
+})

config/vite.react.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+
+import react from '@vitejs/plugin-react'
+
+import baseLibConfig from './vite.lib.config'
+
+export default defineConfig({
+  ...baseLibConfig,
+  plugins: [react(), ...baseLibConfig.plugins]
+})

config/vite.react.dev.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+
+import viteReactConfig from './vite.react.config'
+
+export default defineConfig({
+  ...viteReactConfig,
+  build: {
+    ...viteReactConfig.build,
+    watch: {
+      buildDelay: 500
+    }
+  }
+})

config/vite.react.umd.config.js

@@ -0,0 +1,45 @@
+import fs from 'fs'
+import path from 'path'
+
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+import react from '@vitejs/plugin-react'
+
+import baseLibConfig from './vite.lib.config'
+
+const PWD = process.env.PWD
+const pkg = require(path.join(PWD, 'package.json'))
+
+const deps = [...Object.keys(Object.assign({}, pkg.peerDependencies))]
+
+export default defineConfig({
+  plugins: [
+    react(),
+    tsconfigPaths(),
+    dts({
+      exclude: ['**/*.spec.ts', '**/*.test.ts', '**/tests/**'],
+      afterBuild: () => {
+        const types = fs.readdirSync(path.join(PWD, 'umd/src'))
+        types.forEach((file) => {
+          fs.renameSync(path.join(PWD, 'umd/src', file), path.join(PWD, 'umd', file))
+        })
+        fs.rmdirSync(path.join(PWD, 'umd/src'))
+      }
+    })
+  ],
+  build: {
+    ...(baseLibConfig.build || {}),
+    outDir: 'umd',
+    lib: {
+      ...(baseLibConfig.build?.lib || {}),
+      fileName: pkg.name.replace(/@nhost\//g, ''),
+      formats: ['umd']
+    },
+    rollupOptions: {
+      ...(baseLibConfig.build?.rollupOptions || {}),
+      external: (id) => deps.some((dep) => id.startsWith(dep))
+    }
+  }
+})

docs/.prettierrc.json

@@ -1,11 +0,0 @@
-{
-  "singleQuote": true,
-  "printWidth": 80,
-  "tabWidth": 2,
-  "useTabs": false,
-  "trailingComma": "all",
-  "bracketSpacing": true,
-  "bracketSameLine": false,
-  "endOfLine": "auto",
-  "semi": true
-}

docs/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @nhost/docs
+
+## 0.0.1
+
+### Patch Changes
+
+- 584976d: - publishable directory structure changes (ESM, CJS and UMD included in the output)
+  - build system improvements
+  - fixed some bundling concerns (https://github.com/nhost/nhost/issues/428)

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

@@ -17,6 +17,7 @@ query {
     id
     displayName
     email
+    metadata
   }
 }
 ```
@@ -29,6 +30,7 @@ query {
     id
     displayName
     email
+    metadata
   }
 }
 ```
@@ -85,3 +87,8 @@ await nhost.graphql.request(
 ```
 
 If the request is not part of the user's roles, the request will fail.
+
+---
+## Metadata
+
+Custom additional user information stored in the `metadata` column. Can be any JSON object.

docs/docs/platform/cli.md

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

docs/docs/platform/cli.mdx

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

docs/docs/platform/overview/architecture.md

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

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

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

docs/docs/platform/quickstarts/nextjs.md

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

docs/docs/platform/quickstarts/nextjs.mdx

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

docs/docs/platform/quickstarts/react.md

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

docs/docs/platform/quickstarts/react.mdx

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

docs/docs/platform/serverless-functions.mdx

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

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

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

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

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

docs/docs/platform/storage.md

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

docs/docs/platform/storage/_category_.json

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

docs/docs/reference/cli/_category_.json

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

docs/docs/reference/cli/down.mdx

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

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

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

docs/docs/reference/cli/index.mdx

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

docs/docs/reference/cli/init.mdx

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

docs/docs/reference/cli/link.mdx

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

docs/docs/reference/cli/list.mdx

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

docs/docs/reference/cli/login.mdx

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

docs/docs/reference/cli/logout.mdx

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

docs/docs/reference/cli/logs.mdx

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

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

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

docs/docs/reference/cli/up.mdx

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

docs/docs/reference/cli/upgrade.mdx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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