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

chore: update versions

.lintstagedrc.json

@@ -1,5 +1,5 @@
 {
-  "packages/(docgen|hasura-auth-js|hasura-storage-js|nextjs|nhost-js|react|core)/src/**/*.{js,ts,jsx,tsx}": [
+  "packages/(docgen|hasura-auth-js|hasura-storage-js|nextjs|nhost-js|react|core|vue)/src/**/*.{js,ts,jsx,tsx}": [
     "pnpm docgen",
     "git add docs"
   ]

config/.eslint.base.js

@@ -0,0 +1,64 @@
+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'
+  ],
+  plugins: ['@typescript-eslint', 'simple-import-sort'],
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  },
+  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/.eslintrc.js

@@ -1,65 +1,6 @@
+const base = require('./.eslint.base')
 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'
-  ],
+  ...base,
   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
-      }
-    ]
-  }
+  plugins: [...base.plugins, 'react', 'react-hooks']
 }

config/.eslintrc.vue.js

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

config/tsconfig.base.json

@@ -42,7 +42,8 @@
       "@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"]
+      "@nhost/react-auth": ["../packages/react-auth/src/index.ts"],
+      "@nhost/vue": ["../packages/vue/src/index.ts"]
     }
   },
   "exclude": [

config/vite.vue.config.js

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

config/vite.vue.dev.config.js

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

config/vite.vue.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 vue from '@vitejs/plugin-vue'
+
+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: [
+    vue(),
+    tsconfigPaths(),
+    dts({
+      exclude: ['**/*.spec.ts', '**/*.test.ts', '**/tests/**'],
+      afterBuild: () => {
+        const types = fs.readdirSync(path.join(PWD, 'umd/src'))
+        types.forEach((file) => {
+          fs.renameSync(path.join(PWD, 'umd/src', file), path.join(PWD, 'umd', file))
+        })
+        fs.rmdirSync(path.join(PWD, 'umd/src'))
+      }
+    })
+  ],
+  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/docs/platform/index.mdx

@@ -16,6 +16,7 @@ Get started quickly by following one of our quickstart guides:
 
 - [Next.js](/platform/quickstarts/nextjs)
 - [React](/platform/quickstarts/react)
+- [Vue](/platform/quickstarts/vue)
 
 ## Products and features
 

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

@@ -100,20 +100,9 @@ nhost logout
 
 ### 1. Create a new Nhost app
 
-First things first, we need to create a new Nhost project.
+import CreateApp from '@site/src/components/create-nhost-app.mdx';
 
-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.
+<CreateApp />
 
 ### 2. Create a new GitHub Repository
 
@@ -368,13 +357,11 @@ 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';
+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()}`);
-};
+  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

docs/docs/platform/quickstarts/nextjs.mdx

@@ -3,8 +3,8 @@ title: 'Quickstart: Next.js'
 sidebar_position: 2
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
 
 # Quickstart: Next.js
 
@@ -32,20 +32,9 @@ You'll need **Node.js** version 12 or later: [install it from here](https://node
 
 ### Create a new Nhost app
 
-First things first, we need to create a new Nhost project.
+import CreateApp from '@site/src/components/create-nhost-app.mdx'
 
-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.
+<CreateApp />
 
 :::info
 You can also connect your Nhost app to a GitHub repository. When you do this, any updates you push to your code will automatically be deployed. [Learn more](https://docs.nhost.io/platform/github-integration).
@@ -191,50 +180,44 @@ 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';
+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 [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
 
-  const router = useRouter();
+  const router = useRouter()
 
-  const {
-    signUpEmailPassword,
-    isLoading,
-    isSuccess,
-    needsEmailVerification,
-    isError,
-    error,
-  } = useSignUpEmailPassword();
+  const { signUpEmailPassword, isLoading, isSuccess, needsEmailVerification, isError, error } =
+    useSignUpEmailPassword()
 
   const handleOnSubmit = async (e) => {
-    e.preventDefault();
+    e.preventDefault()
 
     await signUpEmailPassword(email, password, {
       displayName: `${firstName} ${lastName}`.trim(),
       metadata: {
         firstName,
-        lastName,
-      },
-    });
-  };
-
-  if (isSuccess) {
-    router.push('/');
-    return null;
+        lastName
+      }
+    })
   }
 
-  const disableForm = isLoading || needsEmailVerification;
+  if (isSuccess) {
+    router.push('/')
+    return null
+  }
+
+  const disableForm = isLoading || needsEmailVerification
 
   return (
     <div className={styles.container}>
@@ -245,8 +228,7 @@ const SignUp = () => {
 
         {needsEmailVerification ? (
           <p className={styles['verification-text']}>
-            Please check your mailbox and follow the verification link to verify
-            your email.
+            Please check your mailbox and follow the verification link to verify your email.
           </p>
         ) : (
           <form onSubmit={handleOnSubmit} className={styles.form}>
@@ -283,17 +265,11 @@ const SignUp = () => {
               required
             />
 
-            <button
-              type="submit"
-              disabled={disableForm}
-              className={styles.button}
-            >
+            <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}
+            {isError ? <p className={styles['error-text']}>{error?.message}</p> : null}
           </form>
         )}
       </div>
@@ -305,10 +281,10 @@ const SignUp = () => {
         </Link>
       </p>
     </div>
-  );
-};
+  )
+}
 
-export default SignUp;
+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.
@@ -324,41 +300,35 @@ 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';
+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 [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
 
-  const router = useRouter();
+  const router = useRouter()
 
-  const {
-    signInEmailPassword,
-    isLoading,
-    isSuccess,
-    needsEmailVerification,
-    isError,
-    error,
-  } = useSignInEmailPassword();
+  const { signInEmailPassword, isLoading, isSuccess, needsEmailVerification, isError, error } =
+    useSignInEmailPassword()
 
   const handleOnSubmit = async (e) => {
-    e.preventDefault();
-    await signInEmailPassword(email, password);
-  };
-
-  if (isSuccess) {
-    router.push('/');
-    return null;
+    e.preventDefault()
+    await signInEmailPassword(email, password)
   }
 
-  const disableForm = isLoading || needsEmailVerification;
+  if (isSuccess) {
+    router.push('/')
+    return null
+  }
+
+  const disableForm = isLoading || needsEmailVerification
 
   return (
     <div className={styles.container}>
@@ -369,8 +339,7 @@ const SignIn = () => {
 
         {needsEmailVerification ? (
           <p className={styles['verification-text']}>
-            Please check your mailbox and follow the verification link to verify
-            your email.
+            Please check your mailbox and follow the verification link to verify your email.
           </p>
         ) : (
           <>
@@ -392,17 +361,11 @@ const SignIn = () => {
                 required
               />
 
-              <button
-                type="submit"
-                disabled={disableForm}
-                className={styles.button}
-              >
+              <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}
+              {isError ? <p className={styles['error-text']}>{error?.message}</p> : null}
             </form>
           </>
         )}
@@ -415,10 +378,10 @@ const SignIn = () => {
         </Link>
       </p>
     </div>
-  );
-};
+  )
+}
 
-export default SignIn;
+export default SignIn
 ```
 
 #### 3. Sign-out
@@ -427,22 +390,22 @@ 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';
+import { useSignOut } from '@nhost/nextjs'
 
 const Layout = ({ children = null }) => {
-  const { signOut } = useSignOut();
+  const { signOut } = useSignOut()
 
   const menuItems = [
     //..
     {
       label: 'Logout',
       onClick: signOut,
-      icon: LogoutIcon,
-    },
-  ];
+      icon: LogoutIcon
+    }
+  ]
 
   //...
-};
+}
 ```
 
 ### Protect routes
@@ -459,31 +422,31 @@ 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';
+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();
+    const router = useRouter()
+    const { isLoading, isAuthenticated } = useAuthenticationStatus()
 
     if (isLoading) {
       return (
         <div className={styles.container}>
           <Spinner />
         </div>
-      );
+      )
     }
 
     if (!isAuthenticated) {
-      router.push('/sign-in');
-      return null;
+      router.push('/sign-in')
+      return null
     }
 
-    return <Component {...props} />;
-  };
+    return <Component {...props} />
+  }
 }
 ```
 
@@ -498,26 +461,26 @@ values={[
 <TabItem value="index">
 
 ```js
-import withAuth from '../withAuth';
+import withAuth from '../withAuth'
 
 const Home = () => {
   //...
-};
+}
 
-export default withAuth(Home);
+export default withAuth(Home)
 ```
 
 </TabItem>
 <TabItem value="profile">
 
 ```js
-import withAuth from '../withAuth';
+import withAuth from '../withAuth'
 
 const Profile = () => {
   //...
-};
+}
 
-export default withAuth(Profile);
+export default withAuth(Profile)
 ```
 
 </TabItem>
@@ -534,22 +497,20 @@ 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';
+import React, { useContext } from 'react'
 // highlight-next-line
-import { useUserData } from '@nhost/nextjs';
+import { useUserData } from '@nhost/nextjs'
 
-const UserContext = React.createContext(null);
+const UserContext = React.createContext(null)
 
 export function UserProvider({ children = null }) {
   // highlight-next-line
-  const user = useUserData();
-  return (
-    <UserContext.Provider value={{ user }}>{children}</UserContext.Provider>
-  );
+  const user = useUserData()
+  return <UserContext.Provider value={{ user }}>{children}</UserContext.Provider>
 }
 
 export function useUserContext() {
-  return useContext(UserContext);
+  return useContext(UserContext)
 }
 ```
 
@@ -589,14 +550,14 @@ Then, add the `NhostApolloProvider` from `@nhost/react-apollo` into your
 `_app_.js` file.
 
 ```jsx title="pages/_app.js"
-import { NhostApolloProvider } from '@nhost/react-apollo';
+import { NhostApolloProvider } from '@nhost/react-apollo'
 
 function MyApp({ Component, pageProps }) {
   return (
     <NhostNextProvider nhost={nhost} initial={pageProps.nhostSession}>
       <NhostApolloProvider nhost={nhost}>{/* ... */}</NhostApolloProvider>
     </NhostNextProvider>
-  );
+  )
 }
 ```
 
@@ -604,28 +565,24 @@ 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';
+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 }
-    ) {
+    updateUser(pk_columns: { id: $id }, _set: { displayName: $displayName, metadata: $metadata }) {
       id
       displayName
       metadata
     }
   }
-`;
+`
 
 const Profile = () => {
-  const [mutateUser, { loading: updatingProfile }] =
-    useMutation(UPDATE_USER_MUTATION);
+  const [mutateUser, { loading: updatingProfile }] = useMutation(UPDATE_USER_MUTATION)
 
   const updateUserProfile = async (e) => {
-    e.preventDefault();
+    e.preventDefault()
 
     try {
       await mutateUser({
@@ -634,18 +591,18 @@ const Profile = () => {
           displayName: `${firstName} ${lastName}`.trim(),
           metadata: {
             firstName,
-            lastName,
-          },
-        },
-      });
-      toast.success('Updated successfully', { id: 'updateProfile' });
+            lastName
+          }
+        }
+      })
+      toast.success('Updated successfully', { id: 'updateProfile' })
     } catch (error) {
-      toast.error('Unable to update profile', { id: 'updateProfile' });
+      toast.error('Unable to update profile', { id: 'updateProfile' })
     }
-  };
+  }
 
   //...
-};
+}
 ```
 
 Finally, since Hasura has an **allow nothing by default** policy, and we haven't
@@ -675,7 +632,7 @@ Finally, to add caching, synchronizing, and updating server state in your Next.j
 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';
+import { gql } from '@apollo/client'
 
 const GET_USER_QUERY = gql`
   query GetUser($id: uuid!) {
@@ -687,7 +644,7 @@ const GET_USER_QUERY = gql`
       avatarUrl
     }
   }
-`;
+`
 
 export function UserProvider() {
   //...
@@ -697,10 +654,10 @@ 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';
+import { useUserId } from '@nhost/nextjs'
 
 export function UserProvider() {
-  const id = useUserId();
+  const id = useUserId()
   //...
 }
 ```
@@ -709,29 +666,27 @@ Finally, we can run our GraphQL query using the `useQuery` hook and the current
 
 ```jsx title="UserProvider.js"
 // highlight-next-line
-import { gql, useQuery } from '@apollo/client';
+import { gql, useQuery } from '@apollo/client'
 
 export function UserProvider({ children = null }) {
-  const id = useUserId();
+  const id = useUserId()
   // highlight-start
   const { loading, error, data } = useQuery(GET_USER_QUERY, {
-    variables: { id },
-  });
-  const user = data?.user;
+    variables: { id }
+  })
+  const user = data?.user
   // highlight-end
 
   // highlight-start
   if (error) {
-    return <p>Something went wrong. Try to refresh the page.</p>;
+    return <p>Something went wrong. Try to refresh the page.</p>
   }
   if (loading) {
-    return null;
+    return null
   }
   // highlight-end
 
-  return (
-    <UserContext.Provider value={{ user }}>{children}</UserContext.Provider>
-  );
+  return <UserContext.Provider value={{ user }}>{children}</UserContext.Provider>
 }
 ```
 
@@ -741,4 +696,4 @@ You now have a fully functional Next.js application. Congratulations!
 
 - 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/)!
+- Build your next app with [Nhost](https://app.nhost.io/)!

docs/docs/platform/quickstarts/react.mdx

@@ -3,8 +3,8 @@ title: 'Quickstart: React'
 sidebar_position: 1
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
 
 # Quickstart: React
 
@@ -32,21 +32,9 @@ You'll need **Node.js** version 14 or later: [install it from here](https://node
 
 ### 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.
+import CreateApp from '@site/src/components/create-nhost-app.mdx'
 
+<CreateApp />
 :::info
 You can also connect your Nhost app to a GitHub repository. When you do this, any updates you push to your code will automatically be deployed. [Learn more](https://docs.nhost.io/platform/github-integration).
 :::
@@ -135,21 +123,21 @@ 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';
+import { NhostClient, NhostReactProvider } from '@nhost/react'
 
 const nhost = new NhostClient({
-  backendUrl: process.env.REACT_APP_NHOST_BACKEND_URL || '',
-});
+  backendUrl: process.env.REACT_APP_NHOST_BACKEND_URL || ''
+})
 
 function App() {
   return (
     <NhostReactProvider nhost={nhost}>
       <BrowserRouter>{/* ... */}</BrowserRouter>
     </NhostReactProvider>
-  );
+  )
 }
 
-export default App;
+export default App
 ```
 
 Finally, make sure to create an environment variable named
@@ -184,45 +172,39 @@ 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';
+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 [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
 
-  const {
-    signUpEmailPassword,
-    isLoading,
-    isSuccess,
-    needsEmailVerification,
-    isError,
-    error,
-  } = useSignUpEmailPassword();
+  const { signUpEmailPassword, isLoading, isSuccess, needsEmailVerification, isError, error } =
+    useSignUpEmailPassword()
 
   const handleOnSubmit = (e) => {
-    e.preventDefault();
+    e.preventDefault()
 
     signUpEmailPassword(email, password, {
       displayName: `${firstName} ${lastName}`.trim(),
       metadata: {
         firstName,
-        lastName,
-      },
-    });
-  };
-
-  if (isSuccess) {
-    return <Navigate to="/" replace={true} />;
+        lastName
+      }
+    })
   }
 
-  const disableForm = isLoading || needsEmailVerification;
+  if (isSuccess) {
+    return <Navigate to="/" replace={true} />
+  }
+
+  const disableForm = isLoading || needsEmailVerification
 
   return (
     <div className={styles.container}>
@@ -233,8 +215,7 @@ const SignUp = () => {
 
         {needsEmailVerification ? (
           <p className={styles['verification-text']}>
-            Please check your mailbox and follow the verification link to verify
-            your email.
+            Please check your mailbox and follow the verification link to verify your email.
           </p>
         ) : (
           <form onSubmit={handleOnSubmit} className={styles.form}>
@@ -271,17 +252,11 @@ const SignUp = () => {
               required
             />
 
-            <button
-              type="submit"
-              disabled={disableForm}
-              className={styles.button}
-            >
+            <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}
+            {isError ? <p className={styles['error-text']}>{error?.message}</p> : null}
           </form>
         )}
       </div>
@@ -293,10 +268,10 @@ const SignUp = () => {
         </Link>
       </p>
     </div>
-  );
-};
+  )
+}
 
-export default SignUp;
+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.
@@ -312,36 +287,30 @@ 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';
+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 [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
 
-  const {
-    signInEmailPassword,
-    isLoading,
-    isSuccess,
-    needsEmailVerification,
-    isError,
-    error,
-  } = useSignInEmailPassword();
+  const { signInEmailPassword, isLoading, isSuccess, needsEmailVerification, isError, error } =
+    useSignInEmailPassword()
 
   const handleOnSubmit = (e) => {
-    e.preventDefault();
-    signInEmailPassword(email, password);
-  };
-
-  if (isSuccess) {
-    return <Navigate to="/" replace={true} />;
+    e.preventDefault()
+    signInEmailPassword(email, password)
   }
 
-  const disableForm = isLoading || needsEmailVerification;
+  if (isSuccess) {
+    return <Navigate to="/" replace={true} />
+  }
+
+  const disableForm = isLoading || needsEmailVerification
 
   return (
     <div className={styles.container}>
@@ -352,8 +321,7 @@ const SignIn = () => {
 
         {needsEmailVerification ? (
           <p className={styles['verification-text']}>
-            Please check your mailbox and follow the verification link to verify
-            your email.
+            Please check your mailbox and follow the verification link to verify your email.
           </p>
         ) : (
           <form onSubmit={handleOnSubmit} className={styles.form}>
@@ -374,17 +342,11 @@ const SignIn = () => {
               required
             />
 
-            <button
-              type="submit"
-              disabled={disableForm}
-              className={styles.button}
-            >
+            <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}
+            {isError ? <p className={styles['error-text']}>{error?.message}</p> : null}
           </form>
         )}
       </div>
@@ -396,10 +358,10 @@ const SignIn = () => {
         </Link>
       </p>
     </div>
-  );
-};
+  )
+}
 
-export default SignIn;
+export default SignIn
 ```
 
 #### 3. Sign-out
@@ -408,22 +370,22 @@ 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';
+import { useSignOut } from '@nhost/react'
 
 const Layout = () => {
-  const { signOut } = useSignOut();
+  const { signOut } = useSignOut()
 
   const menuItems = [
     //..
     {
       label: 'Logout',
       onClick: signOut,
-      icon: LogoutIcon,
-    },
-  ];
+      icon: LogoutIcon
+    }
+  ]
 
   //...
-};
+}
 ```
 
 ### Protect routes
@@ -438,37 +400,37 @@ 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';
+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();
+  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 <Navigate to="/sign-in" state={{ from: location }} replace />
   }
 
-  return children;
-};
+  return children
+}
 
-export default ProtectedRoute;
+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';
+import ProtectedRoute from './components/ProtectedRoute'
 
 function App() {
   return (
@@ -493,7 +455,7 @@ function App() {
         </Routes>
       </BrowserRouter>
     </NhostReactProvider>
-  );
+  )
 }
 ```
 
@@ -508,12 +470,12 @@ 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';
+import { useUserData } from '@nhost/react'
 
 const Layout = () => {
-  const user = useUserData();
+  const user = useUserData()
   //...
-};
+}
 ```
 
 That's it! The JSX code for rendering the user data (email, display name, etc.)
@@ -552,14 +514,14 @@ Then, add the `NhostApolloProvider` from `@nhost/react-apollo` into your
 `App.js` file.
 
 ```jsx title="src/App.js"
-import { NhostApolloProvider } from '@nhost/react-apollo';
+import { NhostApolloProvider } from '@nhost/react-apollo'
 
 function App() {
   return (
     <NhostReactProvider nhost={nhost}>
       <NhostApolloProvider nhost={nhost}>{/* ... */}</NhostApolloProvider>
     </NhostReactProvider>
-  );
+  )
 }
 ```
 
@@ -567,28 +529,24 @@ 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';
+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 }
-    ) {
+    updateUser(pk_columns: { id: $id }, _set: { displayName: $displayName, metadata: $metadata }) {
       id
       displayName
       metadata
     }
   }
-`;
+`
 
 const Profile = () => {
-  const [mutateUser, { loading: updatingProfile }] =
-    useMutation(UPDATE_USER_MUTATION);
+  const [mutateUser, { loading: updatingProfile }] = useMutation(UPDATE_USER_MUTATION)
 
   const updateUserProfile = async (e) => {
-    e.preventDefault();
+    e.preventDefault()
 
     try {
       await mutateUser({
@@ -597,18 +555,18 @@ const Profile = () => {
           displayName: `${firstName} ${lastName}`.trim(),
           metadata: {
             firstName,
-            lastName,
-          },
-        },
-      });
-      toast.success('Updated successfully', { id: 'updateProfile' });
+            lastName
+          }
+        }
+      })
+      toast.success('Updated successfully', { id: 'updateProfile' })
     } catch (error) {
-      toast.error('Unable to update profile', { id: 'updateProfile' });
+      toast.error('Unable to update profile', { id: 'updateProfile' })
     }
-  };
+  }
 
   //...
-};
+}
 ```
 
 Finally, since Hasura has an **allow nothing by default** policy, and we haven't
@@ -638,7 +596,7 @@ Finally, to add caching, synchronizing, and updating server state in your React
 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';
+import { gql } from '@apollo/client'
 
 const GET_USER_QUERY = gql`
   query GetUser($id: uuid!) {
@@ -650,37 +608,37 @@ const GET_USER_QUERY = gql`
       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';
+import { useUserId } from '@nhost/react'
 
 const Layout = () => {
-  const id = useUserId();
+  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';
+import { gql, useQuery } from '@apollo/client'
 
 const Layout = () => {
-  const id = useUserId();
+  const id = useUserId()
   // highlight-start
   const { loading, error, data } = useQuery(GET_USER_QUERY, {
-    variables: { id },
-  });
-  const user = data?.user;
+    variables: { id }
+  })
+  const user = data?.user
   // highlight-end
 
   //...
@@ -701,8 +659,8 @@ const Layout = () => {
         </div>
       </main>
     </div>
-  );
-};
+  )
+}
 ```
 
 You now have a fully functional React application. Congratulations!
@@ -711,4 +669,4 @@ You now have a fully functional React application. Congratulations!
 
 - 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/)!
+- Build your next app with [Nhost](https://app.nhost.io/)!

docs/docs/platform/quickstarts/vue.mdx

@@ -0,0 +1,713 @@
+---
+title: 'Quickstart: Vue'
+sidebar_position: 3
+---
+
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
+
+# Quickstart: Vue
+
+## Introduction
+
+This quickstart guide provides the steps you need to build a simple Vue 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.
+
+:::tip
+You can see the result of this quickstart [in our main repository](https://github.com/nhost/nhost/tree/main/examples/vue-quickstart).
+
+You can also preview it in the browser: [![StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/nhost/nhost/tree/main/examples/vue-quickstart)
+:::
+
+## 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
+
+import CreateApp from '@site/src/components/create-nhost-app.mdx'
+
+<CreateApp />
+
+:::info
+You can also connect your Nhost app to a GitHub repository. When you do this, any updates you push to your code will automatically be deployed. [Learn more](https://docs.nhost.io/platform/github-integration).
+:::
+
+## Initialize the app
+
+### Create a Vue app
+
+We will use a simple adaptation of [Vitesse Lite](https://github.com/antfu/vitesse-lite), a ready-to-deploy Vite template by Anthony Fu. We can scaffold it with [degit](https://github.com/Rich-Harris/degit).
+
+Open your terminal, and run the following command:
+
+```bash
+npx degit nhost/vue-quickstart my-nhost-app
+```
+
+You can now go into your project directory, install dependencies, and start the development server:
+
+<Tabs groupId="package-manager">
+  <TabItem value="npm" label="npm" default>
+
+```bash
+cd my-nhost-app
+npm install
+npm dev
+```
+
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+
+```bash
+cd my-nhost-app
+yarn
+yarn dev
+```
+
+  </TabItem>
+  <TabItem value="pnpm" label="pnpm">
+
+```bash
+cd my-nhost-app
+pnpm install
+pnpm dev
+```
+
+  </TabItem>
+</Tabs>
+
+If everything is working fine, your Vue 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 Vue
+
+To work with Nhost from within our Vue app, we'll use the
+[Vue 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 Vue composables.
+
+You can install the Nhost Vue SDK with:
+
+<Tabs groupId="package-manager">
+  <TabItem value="npm" label="npm" default>
+
+```bash
+npm install @nhost/vue graphql
+```
+
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+
+```bash
+yarn add @nhost/vue graphql
+```
+
+  </TabItem>
+  <TabItem value="pnpm" label="pnpm">
+
+```bash
+pnpm add @nhost/vue graphql
+```
+
+  </TabItem>
+</Tabs>
+
+Next, open your `src/main.ts` file as we'll now configure Nhost inside our app.
+
+The Nhost Vue SDK comes with a `NhostClient` that can be loaded into the Vue application as a plugin.
+It makes the authentication state and all the provided Vue composables available in our
+application.
+
+Use the following code to instantiate a new Nhost client and link it to your
+Nhost backend:
+
+```tsx title="src/main.ts"
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import routes from 'virtual:generated-pages'
+// highlight-start
+import { NhostClient } from '@nhost/vue'
+// highlight-end
+import App from './App.vue'
+
+import '@unocss/reset/tailwind.css'
+import './styles/main.css'
+import 'uno.css'
+
+// highlight-start
+const nhost = new NhostClient({
+  backendUrl: import.meta.env.VITE_NHOST_URL
+})
+// highlight-end
+
+const app = createApp(App)
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes
+})
+app
+  .use(router)
+  // highlight-start
+  .use(nhost)
+// highlight-end
+app.mount('#app')
+```
+
+Finally, make sure to create an environment variable named
+`VITE_NHOST_URL` to store your Nhost backend URL:
+
+```bash title=".env"
+VITE_NHOST_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)
+
+## 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` composable provided by the Nhost
+Vue SDK within a `/sign-up` page.
+
+Let's create a new page in your project using the following code:
+
+```markup title="src/pages/sign-up.vue"
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { useSignUpEmailPassword } from '@nhost/vue'
+  import { useRouter } from 'vue-router'
+
+  const { signUpEmailPassword, needsEmailVerification } = useSignUpEmailPassword()
+  const router = useRouter()
+  const firstName = ref('')
+  const lastName = ref('')
+  const email = ref('')
+  const password = ref('')
+  const handleSubmit = async (event: Event) => {
+    event.preventDefault()
+    const { isSuccess } = await signUpEmailPassword(email, password, {
+      metadata: { firstName, lastName }
+    })
+    if (isSuccess) router.push('/')
+  }
+</script>
+
+<template>
+  <p v-if="needsEmailVerification">
+    Please check your mailbox and follow the verification link to verify your email.
+  </p>
+
+  <form v-else @submit="handleSubmit">
+    <input v-model="firstName" placeholder="First name" class="input" /><br />
+    <input v-model="lastName" placeholder="Last name" class="input" /><br />
+    <input v-model="email" type="email" placeholder="Email" class="input" /><br />
+    <input v-model="password" type="password" placeholder="Password" class="input" /><br />
+
+    <button class="btn-submit" type="submit">Sign up</button>
+  </form>
+</template>
+```
+
+#### 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 composable named `useSignInEmailPassword` inside a new
+`sign-in` page the same way we did with our `sign-up` page. Let's create a `src/pages/sign-in.vue` component:
+
+```markup title="src/pages/sign-in.vue"
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { useSignInEmailPassword } from '@nhost/vue'
+  import { useRouter } from 'vue-router'
+  const { signInEmailPassword, needsEmailVerification } = useSignInEmailPassword()
+  const router = useRouter()
+  const email = ref('')
+  const password = ref('')
+  const handleSubmit = async (event: Event) => {
+    event.preventDefault()
+    const { isSuccess } = await signInEmailPassword(email, password)
+    if (isSuccess) router.push('/')
+  }
+</script>
+
+<template>
+  <p v-if="needsEmailVerification">
+    Your email is not yet verified. Please check your mailbox and follow the verification link
+    finish registration.
+  </p>
+
+  <form v-else @submit="handleSubmit">
+    <input v-model="email" type="email" placeholder="Email" class="input" /><br />
+    <input v-model="password" type="password" placeholder="Password" class="input" /><br />
+
+    <button class="btn-submit" type="submit">Sign in</button>
+    <p>No account yet? <router-link to="/sign-up"> Sign up </router-link></p>
+  </form>
+</template>
+```
+
+#### 3. Home page
+
+Let's also add links to sign up and sign in in our index page.
+
+```markup title="src/pages/index.vue"
+<template>
+  <div>
+    <div i-carbon-home text-4xl inline-block />
+    <p>Nhost with Vue</p>
+    <p>
+      <em text-sm op75>Quickstart</em>
+    </p>
+    <div py-4 />
+    <router-link class="btn" to="/sign-up"> Sign Up </router-link><br />
+    <router-link class="btn" to="/sign-in"> Sign In </router-link>
+  </div>
+</template>
+```
+
+#### 4. Sign-out
+
+Finally, to allow the users to sign out from the app, we can use the Nhost
+`useSignOut` composable. We'll also use `useAuthenticationStatus` to show the button only when the user is authenticated:
+
+```markup title="src/components/Footer.vue"
+<script setup lang="ts">
+  import { useRouter } from 'vue-router'
+  import { useAuthenticated, useSignOut } from '@nhost/vue'
+  import { isDark, toggleDark } from '~/composables'
+  const isAuthenticated = useAuthenticated()
+  const { signOut } = useSignOut()
+  const router = useRouter()
+  const handleSignOut = () => {
+    signOut()
+    router.push('/')
+  }
+</script>
+
+<template>
+  <nav text-xl mt-6 inline-flex gap-2>
+    <button class="icon-btn !outline-none" @click="toggleDark()">
+      <div v-if="isDark" i-carbon-moon />
+      <div v-else i-carbon-sun />
+    </button>
+
+    <button v-if="isAuthenticated" class="icon-btn !outline-none" @click="handleSignOut">
+      <div i-carbon-logout />
+    </button>
+  </nav>
+</template>
+```
+
+### Protect routes
+
+Now that we have implemented authentication, we can easily decide who can access
+certain parts of our application.
+
+Let's create a profile page that will be only accessible to authenticated users. If an unauthenticated user attempts to load it, it will redirect them to the `/sign-up` page:
+
+```markup title="src/pages/profile.vue"
+<template>
+  <div>
+    <div i-carbon-home text-4xl inline-block />
+    <p>Profile page</p>
+  </div>
+</template>
+```
+
+Then, we can use a [beforeEach navigation guqes](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards) in our `main.ts` file:
+
+```tsx title="src/main.ts"
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import routes from 'virtual:generated-pages'
+import { NhostClient } from '@nhost/vue'
+import App from './App.vue'
+
+import '@unocss/reset/tailwind.css'
+import './styles/main.css'
+import 'uno.css'
+
+const nhost = new NhostClient({
+  backendUrl: import.meta.env.VITE_NHOST_URL
+})
+
+const app = createApp(App)
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes
+})
+
+// highlight-start
+router.beforeEach(async (to) => {
+  if (to.path === '/profile' && !(await nhost.auth.isAuthenticatedAsync())) {
+    return '/sign-in'
+  }
+  return true
+})
+// highlight-end
+
+app.use(router).use(nhost)
+app.mount('#app')
+```
+
+Let's finally add a link to the profile page in the index page `/`:
+
+```markup title="src/pages/index.vue"
+<template>
+  <div>
+    <div i-carbon-home text-4xl inline-block />
+    <p>Nhost with Vue</p>
+    <p>
+      <em text-sm op75>Quickstart</em>
+    </p>
+    <div py-4 />
+    <!-- highlight-start -->
+    <router-link class="btn" to="/profile"> Profile </router-link><br />
+    <!-- highlight-end -->
+    <router-link class="btn" to="/sign-up"> Sign Up </router-link><br />
+    <router-link class="btn" to="/sign-in"> Sign In </router-link>
+  </div>
+</template>
+```
+
+### 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` composable provided by Nhost to do it. When the user is authenticated, it returns the information fetched from the `users` table, such as the display name, the email, or the user's roles. This composable returns `null` until the user is effectively authenticated.
+
+Let's update the profile page to use it:
+
+```markup title="src/pages/profile.vue"
+<!-- highlight-start -->
+<script setup lang="ts">
+  import { useUserData } from '@nhost/vue'
+  const user = useUserData()
+</script>
+<!-- highlight-end -->
+<template>
+  <div>
+    <div i-carbon-home text-4xl inline-block />
+    <p>Profile page</p>
+    <p>
+      <em text-sm op75>Quickstart</em>
+    </p>
+    <!-- highlight-start -->
+    <div v-if="user" py-4>
+      <p>Hello, {{ user?.displayName }}. Your email is {{ user?.email }}.</p>
+      <!-- highlight-end -->
+    </div>
+  </div>
+</template>
+```
+
+### 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 [Vue Apollo v4](https://v4.apollo.vuejs.org) for interacting with
+this GraphQL API. Nhost comes with a custom Apollo client that syncs the Apollo client with the authentication status of your users.
+
+So, start by installing the following dependencies:
+
+<Tabs groupId="package-manager">
+  <TabItem value="npm" label="npm" default>
+
+```bash
+npm install @nhost/apollo @apollo/client graphql graphql-tag @vue/apollo-composable
+```
+
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+
+```bash
+yarn add @nhost/apollo @apollo/client graphql graphql-tag @vue/apollo-composable
+```
+
+  </TabItem>
+  <TabItem value="pnpm" label="pnpm">
+
+```bash
+pnpm add @nhost/apollo @apollo/client graphql graphql-tag @vue/apollo-composable
+```
+
+  </TabItem>
+</Tabs>
+
+Then, create the Apollo client in your `src/main.ts` file, and provide it to your Vue app:
+
+```tsx title="src/main.ts"
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import routes from 'virtual:generated-pages'
+import { NhostClient } from '@nhost/vue'
+// highlight-start
+import { createApolloClient } from '@nhost/apollo'
+import { DefaultApolloClient } from '@vue/apollo-composable'
+// highlight-end
+import App from './App.vue'
+
+import '@unocss/reset/tailwind.css'
+import './styles/main.css'
+import 'uno.css'
+
+const nhost = new NhostClient({
+  backendUrl: import.meta.env.VITE_NHOST_URL
+})
+
+const app = createApp(App)
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes
+})
+
+router.beforeEach(async (to) => {
+  if (to.path === '/profile' && !(await nhost.auth.isAuthenticatedAsync())) {
+    return '/sign-in'
+  }
+  return true
+})
+
+// highlight-start
+const apolloClient = createApolloClient({ nhost })
+// highlight-end
+
+app
+  .use(router)
+  .use(nhost)
+  // highlight-start
+  .provide(DefaultApolloClient, apolloClient)
+  // highlight-end
+  .mount('#app')
+```
+
+From there, we can construct our GraphQL query and use the Apollo `useMutation`
+composable to execute that query when the user submits the form from the profile page:
+
+```markup title="src/pages/profile.vue"
+<script setup lang="ts">
+  import { gql } from '@apollo/client'
+  import { useNhostClient, useUserData } from '@nhost/vue'
+  import { useMutation } from '@vue/apollo-composable'
+  import { ref } from 'vue'
+  const user = useUserData()
+  const { nhost } = useNhostClient()
+  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 firstName = ref('')
+  const lastName = ref('')
+  const { mutate, loading, error } = useMutation(UPDATE_USER_MUTATION)
+
+  const updateUserProfile = async (event: Event) => {
+    event.preventDefault()
+    if (user.value) {
+      await mutate({
+        id: user.value.id,
+        displayName: `${firstName.value} ${lastName.value}`.trim(),
+        metadata: {
+          firstName: firstName.value,
+          lastName: lastName.value
+        }
+      })
+      await client.auth.refreshSession()
+    }
+  }
+</script>
+
+<template>
+  <div>
+    <div i-carbon-home text-4xl inline-block />
+    <p>Profile page</p>
+    <p>
+      <em text-sm op75>Quickstart</em>
+    </p>
+    <div v-if="user" py-4>
+      <p>Hello, {{ user?.displayName }}. Your email is {{ user?.email }}.</p>
+      <form @submit="updateUserProfile">
+        <input v-model="firstName" placeholder="First name" class="input" /><br />
+        <input v-model="lastName" placeholder="Last name" class="input" /><br />
+        <button className="m-3 text-sm btn" :disabled="loading">Save</button>
+        <div v-if="error">{{ error.message }}</div>
+      </form>
+    </div>
+  </div>
+</template>
+```
+
+:::tip
+You probably have noticed that we are calling `client.auth.refreshSession()` after we updated the user using the GraphQL mutation. The Nhost client only extracts user information from the access token (JWT), that is kept in memory and refreshed every 15 minutes. As user information has been updated, we force an access token refresh so it is kept up to date.
+:::
+
+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 real-time caching, synchronizing, and updating server state in your Vue app, let's refactor the user data fetching using the Apollo client and our GraphQL API instead.
+
+First add the following GraphQL subscription to retrieve the current user data component:
+
+```ts title="src/pages/profile.vue"
+import { gql } from '@apollo/client'
+
+const GET_USER_SUBSCRIPTION = gql`
+  subscription GetUser($id: uuid!) {
+    user(id: $id) {
+      id
+      email
+      displayName
+      metadata
+      avatarUrl
+    }
+  }
+`
+```
+
+Then, replace the `useUserData` composable with the `useUserId` composable to retrieve the current user's ID.
+
+```ts title="src/pages/profile.vue"
+import { useUserId } from '@nhost/vue'
+
+const id = useUserId()
+```
+
+Finally, we can run our GraphQL subscription using the `useSubscription` composable and the current user's ID. Here is the full `profile.vue` page:
+
+```markup title="src/pages/profile.vue"
+<script setup lang="ts">
+  import { gql } from '@apollo/client'
+  import { useNhostClient, useUserId } from '@nhost/vue'
+  import { useMutation, useSubscription } from '@vue/apollo-composable'
+  import { computed, ref } from 'vue'
+
+  const { nhost } = useNhostClient()
+  const GET_USER_SUBSCRIPTION = gql`
+    subscription GetUser($id: uuid!) {
+      user(id: $id) {
+        id
+        email
+        displayName
+        metadata
+        avatarUrl
+      }
+    }
+  `
+  const id = useUserId()
+
+  const { result } = useSubscription(
+    GET_USER_SUBSCRIPTION,
+    computed(() => ({ id: id.value }))
+  )
+  const user = computed(() => result.value?.user)
+
+  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 firstName = ref('')
+  const lastName = ref('')
+  const { mutate, loading, error } = useMutation(UPDATE_USER_MUTATION)
+
+  const updateUserProfile = async (event: Event) => {
+    event.preventDefault()
+    if (user.value) {
+      await mutate({
+        id: user.value.id,
+        displayName: `${firstName.value} ${lastName.value}`.trim(),
+        metadata: {
+          firstName: firstName.value,
+          lastName: lastName.value
+        }
+      })
+      await nhost.auth.refreshSession()
+    }
+  }
+</script>
+
+<template>
+  <div>
+    <div i-carbon-home text-4xl inline-block />
+    <p>Profile page</p>
+    <p>
+      <em text-sm op75>Quickstart</em>
+    </p>
+    <div v-if="user" py-4>
+      <p>Hello, {{ user.displayName }}. Your email is {{ user.email }}.</p>
+      <form @submit="updateUserProfile">
+        <input v-model="firstName" placeholder="First name" class="input" /><br />
+        <input v-model="lastName" placeholder="Last name" class="input" /><br />
+        <button className="m-3 text-sm btn" :disabled="loading">Save</button>
+        <div v-if="error">{{ error.message }}</div>
+      </form>
+    </div>
+  </div>
+</template>
+```
+
+You now have a fully functional Vue 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/reference/docgen/javascript/auth/content/hasura-auth-client/content/01-sign-up.mdx

@@ -4,7 +4,7 @@ title: signUp()
 sidebar_label: signUp()
 slug: /reference/javascript/auth/sign-up
 description: Use `nhost.auth.signUp` to sign up a user using email and password. If you want to sign up a user using passwordless email (Magic Link), SMS, or an OAuth provider, use the `signIn` function instead.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L93
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L101
 ---
 
 # `signUp()`
@@ -22,12 +22,12 @@ nhost.auth.signUp({
 
 ---
 
-**<span className="parameter-name">params</span>** <span className="optional-status">required</span> [`SignUpEmailPasswordParams`](/reference/docgen/javascript/auth/types/sign-up-email-password-params)
+**<span className="parameter-name">\_\_namedParameters</span>** <span className="optional-status">required</span> [`SignUpEmailPasswordParams`](/reference/docgen/javascript/auth/types/sign-up-email-password-params)
 
-| Property                                                                                    | Type            | Required | Notes |
-| :------------------------------------------------------------------------------------------ | :-------------- | :------: | :---- |
-| <span className="parameter-name"><span className="light-grey">params.</span>password</span> | `string`        |    ✔️    |       |
-| <span className="parameter-name"><span className="light-grey">params.</span>email</span>    | `string`        |    ✔️    |       |
-| <span className="parameter-name"><span className="light-grey">params.</span>options</span>  | `SignUpOptions` |          |       |
+| Property                                                                                                 | Type            | Required | Notes |
+| :------------------------------------------------------------------------------------------------------- | :-------------- | :------: | :---- |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>password</span> | `string`        |    ✔️    |       |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>email</span>    | `string`        |    ✔️    |       |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>options</span>  | `SignUpOptions` |          |       |
 
 ---

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

@@ -4,7 +4,7 @@ title: signIn()
 sidebar_label: signIn()
 slug: /reference/javascript/auth/sign-in
 description: Use `nhost.auth.signIn` to sign in a user using email and password, passwordless (email or sms) or an external provider. `signIn` can be used to sign in a user in various ways depending on the parameters.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L156
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L144
 ---
 
 # `signIn()`

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

@@ -4,7 +4,7 @@ title: signOut()
 sidebar_label: signOut()
 slug: /reference/javascript/auth/sign-out
 description: Use `nhost.auth.signOut` to sign out the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L338
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L256
 ---
 
 # `signOut()`

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

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

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

@@ -4,7 +4,7 @@ title: changePassword()
 sidebar_label: changePassword()
 slug: /reference/javascript/auth/change-password
 description: Use `nhost.auth.changePassword` to change the password for the user. The old password is not needed.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L390
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L288
 ---
 
 # `changePassword()`
@@ -19,10 +19,10 @@ nhost.auth.changePassword({ newPassword: 'new-secret-password' })
 
 ---
 
-**<span className="parameter-name">params</span>** <span className="optional-status">required</span> [`ChangePasswordParams`](/reference/docgen/javascript/auth/types/change-password-params)
+**<span className="parameter-name">\_\_namedParameters</span>** <span className="optional-status">required</span> [`ChangePasswordParams`](/reference/docgen/javascript/auth/types/change-password-params)
 
-| Property                                                                                       | Type     | Required | Notes |
-| :--------------------------------------------------------------------------------------------- | :------- | :------: | :---- |
-| <span className="parameter-name"><span className="light-grey">params.</span>newPassword</span> | `string` |    ✔️    |       |
+| Property                                                                                                    | Type     | Required | Notes |
+| :---------------------------------------------------------------------------------------------------------- | :------- | :------: | :---- |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>newPassword</span> | `string` |    ✔️    |       |
 
 ---

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

@@ -4,7 +4,7 @@ title: sendVerificationEmail()
 sidebar_label: sendVerificationEmail()
 slug: /reference/javascript/auth/send-verification-email
 description: Use `nhost.auth.sendVerificationEmail` to send a verification email to the specified email. The email contains a verification-email link. When the user clicks the verification-email link their email is verified.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L415
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L304
 ---
 
 # `sendVerificationEmail()`
@@ -19,11 +19,11 @@ nhost.auth.sendVerificationEmail({ email: 'joe@example.com' })
 
 ---
 
-**<span className="parameter-name">params</span>** <span className="optional-status">required</span> [`SendVerificationEmailParams`](/reference/docgen/javascript/auth/types/send-verification-email-params)
+**<span className="parameter-name">\_\_namedParameters</span>** <span className="optional-status">required</span> [`SendVerificationEmailParams`](/reference/docgen/javascript/auth/types/send-verification-email-params)
 
-| Property                                                                                   | Type             | Required | Notes |
-| :----------------------------------------------------------------------------------------- | :--------------- | :------: | :---- |
-| <span className="parameter-name"><span className="light-grey">params.</span>email</span>   | `string`         |    ✔️    |       |
-| <span className="parameter-name"><span className="light-grey">params.</span>options</span> | `RedirectOption` |          |       |
+| Property                                                                                                | Type             | Required | Notes |
+| :------------------------------------------------------------------------------------------------------ | :--------------- | :------: | :---- |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>email</span>   | `string`         |    ✔️    |       |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>options</span> | `RedirectOption` |          |       |
 
 ---

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

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

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

@@ -4,7 +4,7 @@ title: deanonymize()
 sidebar_label: deanonymize()
 slug: /reference/javascript/auth/deanonymize
 description: Use `nhost.auth.deanonymize` to deanonymize a user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L467
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L339
 ---
 
 # `deanonymize()`

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

@@ -4,7 +4,7 @@ title: onTokenChanged()
 sidebar_label: onTokenChanged()
 slug: /reference/javascript/auth/on-token-changed
 description: Use `nhost.auth.onTokenChanged` to add a custom function that runs every time the access or refresh token is changed.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L501
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L373
 ---
 
 # `onTokenChanged()`

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

@@ -4,7 +4,7 @@ title: onAuthStateChanged()
 sidebar_label: onAuthStateChanged()
 slug: /reference/javascript/auth/on-auth-state-changed
 description: Use `nhost.auth.onAuthStateChanged` to add a custom function that runs every time the authentication status of the user changes. E.g. add a custom function that runs every time the authentication status changes from signed-in to signed-out.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L536
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L408
 ---
 
 # `onAuthStateChanged()`

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

@@ -4,7 +4,7 @@ title: isAuthenticated()
 sidebar_label: isAuthenticated()
 slug: /reference/javascript/auth/is-authenticated
 description: Use `nhost.auth.isAuthenticated` to check if the user is authenticated or not.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L578
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L450
 ---
 
 # `isAuthenticated()`

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

@@ -4,7 +4,7 @@ title: isAuthenticatedAsync()
 sidebar_label: isAuthenticatedAsync()
 slug: /reference/javascript/auth/is-authenticated-async
 description: Use `nhost.auth.isAuthenticatedAsync` to wait (await) for any internal authentication network requests to finish and then return the authentication status.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L596
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L468
 ---
 
 # `isAuthenticatedAsync()`

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

@@ -4,7 +4,7 @@ title: getAuthenticationStatus()
 sidebar_label: getAuthenticationStatus()
 slug: /reference/javascript/auth/get-authentication-status
 description: Use `nhost.auth.getAuthenticationStatus` to get the authentication status of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L621
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L493
 ---
 
 # `getAuthenticationStatus()`

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

@@ -4,7 +4,7 @@ title: getAccessToken()
 sidebar_label: getAccessToken()
 slug: /reference/javascript/auth/get-access-token
 description: Use `nhost.auth.getAccessToken` to get the access token of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L649
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L523
 ---
 
 # `getAccessToken()`

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

@@ -1,15 +0,0 @@
----
-# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
-title: getJWTToken()
-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#L635
----
-
-# `getJWTToken()`
-
-:::caution Deprecated
-Use `nhost.auth.getAccessToken()` instead.
-:::

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

@@ -4,13 +4,17 @@ title: getDecodedAccessToken()
 sidebar_label: getDecodedAccessToken()
 slug: /reference/javascript/auth/get-decoded-access-token
 description: Use `nhost.auth.getDecodedAccessToken` to get the decoded access token of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L663
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L538
 ---
 
 # `getDecodedAccessToken()`
 
 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/16-get-hasura-claims.mdx

@@ -4,13 +4,17 @@ title: getHasuraClaims()
 sidebar_label: getHasuraClaims()
 slug: /reference/javascript/auth/get-hasura-claims
 description: Use `nhost.auth.getHasuraClaims` to get the Hasura claims of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L679
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L555
 ---
 
 # `getHasuraClaims()`
 
 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/17-get-hasura-claim.mdx

@@ -4,13 +4,17 @@ title: getHasuraClaim()
 sidebar_label: getHasuraClaim()
 slug: /reference/javascript/auth/get-hasura-claim
 description: Use `nhost.auth.getHasuraClaim` to get the value of a specific Hasura claim of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L696
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L573
 ---
 
 # `getHasuraClaim()`
 
 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')

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

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

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

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

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

@@ -4,7 +4,7 @@ title: getUser()
 sidebar_label: getUser()
 slug: /reference/javascript/auth/get-user
 description: Use `nhost.auth.getUser()` to get the signed-in user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L778
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L655
 ---
 
 # `getUser()`
@@ -12,5 +12,5 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-j
 Use `nhost.auth.getUser()` to get the signed-in user.
 
 ```ts
-const user = nhsot.auth.getUser()
+const user = nhost.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#L51
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L59
 ---
 
 # `HasuraAuthClient`
@@ -15,17 +15,15 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-j
 
 **<span className="parameter-name">\_\_namedParameters</span>** <span className="optional-status">required</span> [`NhostAuthConstructorParams`](/reference/docgen/javascript/auth/types/nhost-auth-constructor-params)
 
-| Property                                                                                                                                                                                                                          | Type                                                                      | Required | Notes                                                                                                             |
-| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------ | :------: | :---------------------------------------------------------------------------------------------------------------- |
-| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>url</span>                                                                                                                               | `string`                                                                  |    ✔️    |                                                                                                                   |
-| <span className="parameter-name deprecated"><span className="light-grey">\_\_namedParameters.</span>autoLogin</span> <span className="deprecation-sign" title="@alias autoSignIn - use autoSignIn instead">⚠️</span>              | `boolean`                                                                 |          |                                                                                                                   |
-| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>start</span>                                                                                                                             | `boolean`                                                                 |          |                                                                                                                   |
-| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>autoSignIn</span>                                                                                                                        | `boolean`                                                                 |          | When set to true, will parse the url on startup to check if it contains a refresh token to start the session with |
-| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>autoRefreshToken</span>                                                                                                                  | `boolean`                                                                 |          | When set to true, will automatically refresh token before it expires                                              |
-| <span className="parameter-name deprecated"><span className="light-grey">\_\_namedParameters.</span>clientStorageSetter</span> <span className="deprecation-sign" title="Use clientStorage / clientStorageType instead">⚠️</span> | [`StorageSetter`](/reference/docgen/javascript/auth/types/storage-setter) |          | Define a way to set information about the refresh token and its exipration date.                                  |
-| <span className="parameter-name deprecated"><span className="light-grey">\_\_namedParameters.</span>clientStorageGetter</span> <span className="deprecation-sign" title="Use clientStorage / clientStorageType instead">⚠️</span> | [`StorageGetter`](/reference/docgen/javascript/auth/types/storage-getter) |          |                                                                                                                   |
-| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>clientStorage</span>                                                                                                                     | `ClientStorage`                                                           |          | Object where the refresh token will be persisted and read locally.                                                |
-| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>clientStorageType</span>                                                                                                                 | `ClientStorageType`                                                       |          | Define a way to get information about the refresh token and its exipration date.                                  |
-| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>refreshIntervalTime</span>                                                                                                               | `number`                                                                  |          | Time interval until token refreshes, in seconds                                                                   |
+| Property                                                                                                            | Type                | Required | Notes                                                                                                             |
+| :------------------------------------------------------------------------------------------------------------------ | :------------------ | :------: | :---------------------------------------------------------------------------------------------------------------- |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>url</span>                 | `string`            |    ✔️    |                                                                                                                   |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>start</span>               | `boolean`           |          |                                                                                                                   |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>devTools</span>            | `boolean`           |          | Activate devTools e.g. the ability to connect to the xstate inspector                                             |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>autoSignIn</span>          | `boolean`           |          | When set to true, will parse the url on startup to check if it contains a refresh token to start the session with |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>autoRefreshToken</span>    | `boolean`           |          | When set to true, will automatically refresh token before it expires                                              |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>clientStorage</span>       | `ClientStorage`     |          | Object where the refresh token will be persisted and read locally.                                                |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>clientStorageType</span>   | `ClientStorageType` |          | Define a way to get information about the refresh token and its exipration date.                                  |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>refreshIntervalTime</span> | `number`            |          | Time interval until token refreshes, in seconds                                                                   |
 
 ---

docs/docs/reference/docgen/javascript/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#L166
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L178
 ---
 
 # `ApiChangeEmailResponse`

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -4,7 +4,7 @@ title: AuthChangeEvent
 sidebar_label: AuthChangeEvent
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L113
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L125
 ---
 
 # `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#L115
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L127
 ---
 
 # `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#L87
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L99
 ---
 
 # `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#L78
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L90
 ---
 
 # `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#L93
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L105
 ---
 
 # `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#L124
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L136
 ---
 
 # `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#L119
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L131
 ---
 
 # `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#L127
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L139
 ---
 
 # `Mfa`

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

@@ -17,15 +17,13 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-j
 
 ---
 
-**<span className="parameter-name deprecated">autoLogin</span>** <span className="optional-status">optional</span> `boolean`
-
-:::caution Deprecated
-@alias autoSignIn - use autoSignIn instead
-:::
+**<span className="parameter-name">start</span>** <span className="optional-status">optional</span> `boolean`
 
 ---
 
-**<span className="parameter-name">start</span>** <span className="optional-status">optional</span> `boolean`
+**<span className="parameter-name">devTools</span>** <span className="optional-status">optional</span> `boolean`
+
+Activate devTools e.g. the ability to connect to the xstate inspector
 
 ---
 
@@ -41,24 +39,6 @@ When set to true, will automatically refresh token before it expires
 
 ---
 
-**<span className="parameter-name deprecated">clientStorageSetter</span>** <span className="optional-status">optional</span> [`StorageSetter`](/reference/docgen/javascript/auth/types/storage-setter)
-
-Define a way to set information about the refresh token and its exipration date.
-
-:::caution Deprecated
-Use clientStorage / clientStorageType instead
-:::
-
----
-
-**<span className="parameter-name deprecated">clientStorageGetter</span>** <span className="optional-status">optional</span> [`StorageGetter`](/reference/docgen/javascript/auth/types/storage-getter)
-
-:::caution Deprecated
-Use clientStorage / clientStorageType instead
-:::
-
----
-
 **<span className="parameter-name">clientStorage</span>** <span className="optional-status">optional</span> `ClientStorage`
 
 Object where the refresh token will be persisted and read locally.

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

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

@@ -4,7 +4,7 @@ title: Provider
 sidebar_label: Provider
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/core/src/types.ts#L138
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/core/src/types.ts#L140
 ---
 
 # `Provider`

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#L73
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L85
 ---
 
 # `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#L82
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L94
 ---
 
 # `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#L22
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L23
 ---
 
 # `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#L42
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L54
 ---
 
 # `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#L66
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/utils/types.ts#L78
 ---
 
 # `SignInParams`

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,34 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: SignInResponse
+sidebar_label: SignInResponse
+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#L45
+---
+
+# `SignInResponse`
+
+## Parameters
+
+---
+
+**<span className="parameter-name">session</span>** <span className="optional-status">required</span> `null` | [`Session`](/reference/docgen/javascript/auth/types/session)
+
+---
+
+**<span className="parameter-name">mfa</span>** <span className="optional-status">required</span> `null` | `{ ticket: string }`
+
+---
+
+**<span className="parameter-name">error</span>** <span className="optional-status">required</span> `null` | `ErrorPayload`
+
+---
+
+**<span className="parameter-name">providerUrl</span>** <span className="optional-status">optional</span> `string`
+
+---
+
+**<span className="parameter-name">provider</span>** <span className="optional-status">optional</span> `string`
+
+---

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

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

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

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

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

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

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

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

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

@@ -4,7 +4,7 @@ title: User
 sidebar_label: User
 description: User information
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/core/src/types.ts#L91
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/core/src/types.ts#L93
 ---
 
 # `User`

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

@@ -15,17 +15,15 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/
 
 **<span className="parameter-name">config</span>** <span className="optional-status">required</span> [`NhostClientConstructorParams`](/reference/docgen/javascript/nhost-js/types/nhost-client-constructor-params)
 
-| Property                                                                                                                                                                                                             | Type                | Required | Notes                                                                                                             |
-| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------ | :------: | :---------------------------------------------------------------------------------------------------------------- |
-| <span className="parameter-name"><span className="light-grey">config.</span>backendUrl</span>                                                                                                                        | `string`            |    ✔️    | Nhost backend URL.                                                                                                |
-| <span className="parameter-name"><span className="light-grey">config.</span>refreshIntervalTime</span>                                                                                                               | `number`            |          | Time interval until token refreshes, in seconds                                                                   |
-| <span className="parameter-name"><span className="light-grey">config.</span>clientStorageType</span>                                                                                                                 | `ClientStorageType` |          | Define a way to get information about the refresh token and its exipration date.                                  |
-| <span className="parameter-name"><span className="light-grey">config.</span>clientStorage</span>                                                                                                                     | `ClientStorage`     |          | Object where the refresh token will be persisted and read locally.                                                |
-| <span className="parameter-name deprecated"><span className="light-grey">config.</span>clientStorageGetter</span> <span className="deprecation-sign" title="Use clientStorage / clientStorageType instead">⚠️</span> | `StorageGetter`     |          |                                                                                                                   |
-| <span className="parameter-name deprecated"><span className="light-grey">config.</span>clientStorageSetter</span> <span className="deprecation-sign" title="Use clientStorage / clientStorageType instead">⚠️</span> | `StorageSetter`     |          | Define a way to set information about the refresh token and its exipration date.                                  |
-| <span className="parameter-name"><span className="light-grey">config.</span>autoRefreshToken</span>                                                                                                                  | `boolean`           |          | When set to true, will automatically refresh token before it expires                                              |
-| <span className="parameter-name"><span className="light-grey">config.</span>autoSignIn</span>                                                                                                                        | `boolean`           |          | When set to true, will parse the url on startup to check if it contains a refresh token to start the session with |
-| <span className="parameter-name"><span className="light-grey">config.</span>start</span>                                                                                                                             | `boolean`           |          |                                                                                                                   |
-| <span className="parameter-name deprecated"><span className="light-grey">config.</span>autoLogin</span> <span className="deprecation-sign" title="@alias autoSignIn - use autoSignIn instead">⚠️</span>              | `boolean`           |          |                                                                                                                   |
+| Property                                                                                               | Type                | Required | Notes                                                                                                             |
+| :----------------------------------------------------------------------------------------------------- | :------------------ | :------: | :---------------------------------------------------------------------------------------------------------------- |
+| <span className="parameter-name"><span className="light-grey">config.</span>backendUrl</span>          | `string`            |    ✔️    | Nhost backend URL.                                                                                                |
+| <span className="parameter-name"><span className="light-grey">config.</span>refreshIntervalTime</span> | `number`            |          | Time interval until token refreshes, in seconds                                                                   |
+| <span className="parameter-name"><span className="light-grey">config.</span>clientStorageType</span>   | `ClientStorageType` |          | Define a way to get information about the refresh token and its exipration date.                                  |
+| <span className="parameter-name"><span className="light-grey">config.</span>clientStorage</span>       | `ClientStorage`     |          | Object where the refresh token will be persisted and read locally.                                                |
+| <span className="parameter-name"><span className="light-grey">config.</span>autoRefreshToken</span>    | `boolean`           |          | When set to true, will automatically refresh token before it expires                                              |
+| <span className="parameter-name"><span className="light-grey">config.</span>autoSignIn</span>          | `boolean`           |          | When set to true, will parse the url on startup to check if it contains a refresh token to start the session with |
+| <span className="parameter-name"><span className="light-grey">config.</span>devTools</span>            | `boolean`           |          | Activate devTools e.g. the ability to connect to the xstate inspector                                             |
+| <span className="parameter-name"><span className="light-grey">config.</span>start</span>               | `boolean`           |          |                                                                                                                   |
 
 ---

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

@@ -17,17 +17,15 @@ Nhost Client
 
 **<span className="parameter-name">\_\_namedParameters</span>** <span className="optional-status">required</span> [`NhostClientConstructorParams`](/reference/docgen/javascript/nhost-js/types/nhost-client-constructor-params)
 
-| Property                                                                                                                                                                                                                          | Type                | Required | Notes                                                                                                             |
-| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------ | :------: | :---------------------------------------------------------------------------------------------------------------- |
-| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>backendUrl</span>                                                                                                                        | `string`            |    ✔️    | Nhost backend URL.                                                                                                |
-| <span className="parameter-name deprecated"><span className="light-grey">\_\_namedParameters.</span>autoLogin</span> <span className="deprecation-sign" title="@alias autoSignIn - use autoSignIn instead">⚠️</span>              | `boolean`           |          |                                                                                                                   |
-| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>start</span>                                                                                                                             | `boolean`           |          |                                                                                                                   |
-| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>autoSignIn</span>                                                                                                                        | `boolean`           |          | When set to true, will parse the url on startup to check if it contains a refresh token to start the session with |
-| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>autoRefreshToken</span>                                                                                                                  | `boolean`           |          | When set to true, will automatically refresh token before it expires                                              |
-| <span className="parameter-name deprecated"><span className="light-grey">\_\_namedParameters.</span>clientStorageSetter</span> <span className="deprecation-sign" title="Use clientStorage / clientStorageType instead">⚠️</span> | `StorageSetter`     |          | Define a way to set information about the refresh token and its exipration date.                                  |
-| <span className="parameter-name deprecated"><span className="light-grey">\_\_namedParameters.</span>clientStorageGetter</span> <span className="deprecation-sign" title="Use clientStorage / clientStorageType instead">⚠️</span> | `StorageGetter`     |          |                                                                                                                   |
-| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>clientStorage</span>                                                                                                                     | `ClientStorage`     |          | Object where the refresh token will be persisted and read locally.                                                |
-| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>clientStorageType</span>                                                                                                                 | `ClientStorageType` |          | Define a way to get information about the refresh token and its exipration date.                                  |
-| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>refreshIntervalTime</span>                                                                                                               | `number`            |          | Time interval until token refreshes, in seconds                                                                   |
+| Property                                                                                                            | Type                | Required | Notes                                                                                                             |
+| :------------------------------------------------------------------------------------------------------------------ | :------------------ | :------: | :---------------------------------------------------------------------------------------------------------------- |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>backendUrl</span>          | `string`            |    ✔️    | Nhost backend URL.                                                                                                |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>start</span>               | `boolean`           |          |                                                                                                                   |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>devTools</span>            | `boolean`           |          | Activate devTools e.g. the ability to connect to the xstate inspector                                             |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>autoSignIn</span>          | `boolean`           |          | When set to true, will parse the url on startup to check if it contains a refresh token to start the session with |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>autoRefreshToken</span>    | `boolean`           |          | When set to true, will automatically refresh token before it expires                                              |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>clientStorage</span>       | `ClientStorage`     |          | Object where the refresh token will be persisted and read locally.                                                |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>clientStorageType</span>   | `ClientStorageType` |          | Define a way to get information about the refresh token and its exipration date.                                  |
+| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>refreshIntervalTime</span> | `number`            |          | Time interval until token refreshes, in seconds                                                                   |
 
 ---

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

@@ -41,24 +41,6 @@ Object where the refresh token will be persisted and read locally.
 
 ---
 
-**<span className="parameter-name deprecated">clientStorageGetter</span>** <span className="optional-status">optional</span> `StorageGetter`
-
-:::caution Deprecated
-Use clientStorage / clientStorageType instead
-:::
-
----
-
-**<span className="parameter-name deprecated">clientStorageSetter</span>** <span className="optional-status">optional</span> `StorageSetter`
-
-Define a way to set information about the refresh token and its exipration date.
-
-:::caution Deprecated
-Use clientStorage / clientStorageType instead
-:::
-
----
-
 **<span className="parameter-name">autoRefreshToken</span>** <span className="optional-status">optional</span> `boolean`
 
 When set to true, will automatically refresh token before it expires
@@ -71,14 +53,12 @@ When set to true, will parse the url on startup to check if it contains a refres
 
 ---
 
+**<span className="parameter-name">devTools</span>** <span className="optional-status">optional</span> `boolean`
+
+Activate devTools e.g. the ability to connect to the xstate inspector
+
+---
+
 **<span className="parameter-name">start</span>** <span className="optional-status">optional</span> `boolean`
 
 ---
-
-**<span className="parameter-name deprecated">autoLogin</span>** <span className="optional-status">optional</span> `boolean`
-
-:::caution Deprecated
-@alias autoSignIn - use autoSignIn instead
-:::
-
----

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

@@ -15,12 +15,12 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nextjs/src/in
 
 **<span className="parameter-name">params</span>** <span className="optional-status">required</span> [`NhostNextClientConstructorParams`](/reference/docgen/nextjs/types/nhost-next-client-constructor-params)
 
-| Property                                                                                                                                                                                                | Type      | Required | Notes                                                                                                             |
-| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :------: | :---------------------------------------------------------------------------------------------------------------- |
-| <span className="parameter-name"><span className="light-grey">params.</span>backendUrl</span>                                                                                                           | `string`  |    ✔️    | Nhost backend URL.                                                                                                |
-| <span className="parameter-name deprecated"><span className="light-grey">params.</span>autoLogin</span> <span className="deprecation-sign" title="@alias autoSignIn - use autoSignIn instead">⚠️</span> | `boolean` |          |                                                                                                                   |
-| <span className="parameter-name"><span className="light-grey">params.</span>autoSignIn</span>                                                                                                           | `boolean` |          | When set to true, will parse the url on startup to check if it contains a refresh token to start the session with |
-| <span className="parameter-name"><span className="light-grey">params.</span>autoRefreshToken</span>                                                                                                     | `boolean` |          | When set to true, will automatically refresh token before it expires                                              |
-| <span className="parameter-name"><span className="light-grey">params.</span>refreshIntervalTime</span>                                                                                                  | `number`  |          | Time interval until token refreshes, in seconds                                                                   |
+| Property                                                                                               | Type      | Required | Notes                                                                                                             |
+| :----------------------------------------------------------------------------------------------------- | :-------- | :------: | :---------------------------------------------------------------------------------------------------------------- |
+| <span className="parameter-name"><span className="light-grey">params.</span>backendUrl</span>          | `string`  |    ✔️    | Nhost backend URL.                                                                                                |
+| <span className="parameter-name"><span className="light-grey">params.</span>devTools</span>            | `boolean` |          | Activate devTools e.g. the ability to connect to the xstate inspector                                             |
+| <span className="parameter-name"><span className="light-grey">params.</span>autoSignIn</span>          | `boolean` |          | When set to true, will parse the url on startup to check if it contains a refresh token to start the session with |
+| <span className="parameter-name"><span className="light-grey">params.</span>autoRefreshToken</span>    | `boolean` |          | When set to true, will automatically refresh token before it expires                                              |
+| <span className="parameter-name"><span className="light-grey">params.</span>refreshIntervalTime</span> | `number`  |          | Time interval until token refreshes, in seconds                                                                   |
 
 ---

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

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

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

@@ -5,16 +5,16 @@ sidebar_label: useAuthLoading()
 slug: /reference/nextjs/use-auth-loading
 sidebar_class_name: deprecated
 description: No description provided.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/common.ts#L82
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/common.ts#L57
 ---
 
 # `useAuthLoading()`
 
 :::caution Deprecated
-When using both `useAuthLoading` and `useAuthenticated` together, their initial state
-will change three times:
+When using both useAuthLoading and useAuthenticated together, their initial state will change
+three times:
 
 `(true, false)` -> `(false, false)` -> `(false, true)`
 
-Use `useAuthenticationStatus` instead.
+Use useAuthenticationStatus instead.
 :::

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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