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

chore: update versions

.config/esbuild.lib.js

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

.config/vite.lib.js

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

.config/vite.lib.react.js

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

.github/workflows/changesets.yaml

@@ -28,7 +28,7 @@ jobs:
 
       - uses: pnpm/action-setup@v2.1.0
         with:
-          version: 6.30.1
+          version: 6.32.3
           run_install: true
 
       - name: Create PR or Publish release

.github/workflows/tests.yaml

@@ -27,45 +27,44 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
-
     strategy:
       matrix:
-        node-version: [12.x, 14.x, 16.x]
-
+        node-version: [14, 16]
     steps:
       - uses: actions/checkout@v2
 
-      - name: Cache pnpm modules
-        uses: actions/cache@v2
-        with:
-          path: ~/.pnpm-store
-          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-
-
-      - uses: pnpm/action-setup@v2.0.1
-        with:
-          version: 6.30.1
-          run_install: true
-
-      - name: Cache turbo
-        uses: actions/cache@v2
-        with:
-          path: ./node_modules/.cache
-          key: ${{ runner.os }}-${{ matrix.node-version }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-${{ matrix.node-version }}
-
       - name: Install nhost CLI
         run: curl -L https://raw.githubusercontent.com/nhost/cli/main/get.sh | bash
 
       - name: Start Nhost Backend
         run: |
-          cd examples/testing-project
+          cp -R examples/testing-project /tmp/
+          cd /tmp/testing-project
+          nhost dev &
 
-          nhost dev -d --no-browser &
-      - name: Wait for Nhost Backend to start
-        run: |
-          pnpm dlx wait-on http://localhost:1337/v1/auth/healthz -i 500 -t 120000
+      - uses: pnpm/action-setup@v2.2.1
+        with:
+          version: 6.32.3
 
-      - run: pnpm run ci
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
+
+      - name: Cache turbo
+        uses: actions/cache@v2
+        with:
+          path: ./node_modules/.cache/turbo
+          key: turbo-${{ github.job }}-${{ github.ref_name }}-${{ github.sha }}
+          restore-keys: |
+            turbo-${{ github.job }}-${{ github.ref_name }}-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Wait for Nhost
+        run: pnpm run wait
+
+      - name: Build, tests and lint
+        run: pnpm run ci

.gitignore

@@ -34,12 +34,13 @@ tmp/
 todo.md
 
 # Generated configs 
-.eslintignore
-.eslintrc
-.prettierignore
-prettier.config.js
-vite.*.js
-jest.*.js
+/.eslintignore
+/.eslintrc
+/.prettierignore
+/prettier.config.js
+/vite.*.js
+/jest.*.js
+/esbuild.*.js
 
 !.config/**
 

README.md

@@ -1,108 +1,98 @@
 <div align="center">
-
-<p align="center">
   <img width="237" src="https://raw.githubusercontent.com/nhost/nhost/main/assets/logo.png"/>
-</p>
 
-  <p>
-    <!-- <div style="padding: 5px"><img src="https://img.shields.io/github/stars/nhost/nhost?colorB=7289da" /></div> -->
-    <img src="https://img.shields.io/discord/552499021260914688?label=Discord&logo=Discord&colorB=7289da" />
-    <img src="https://img.shields.io/github/license/Naereen/StrapDown.js.svg" />
-    <img src="https://img.shields.io/docker/pulls/nhost/hasura-backend-plus" />
-    <img src="https://img.shields.io/twitter/follow/nhostio?style=social" />
-    <img src="https://badgen.net/badge/Open%20Source%3F/Yes%21/blue?icon=github" />
-    <img src="https://img.shields.io/github/contributors/nhost/nhost" />
-  </p>
+  <br />
+  <br />
+
+<a href="https://docs.nhost.io/get-started">Quickstart</a>
+<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+<a href="http://nhost.io/">Website</a>
+<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+<a href="https://docs.nhost.io/get-started">Docs</a>
+<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+<a href="https://nhost.io/blog">Blog</a>
+<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+<a href="https://twitter.com/nhostio">Twitter</a>
+<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+<a href="https://nhost.io/discord">Discord</a>
+<br />
+
+  <hr />
 </div>
 
-<p align="center">
-  <img width="550" src="https://reporoster.com/stars/nhost/nhost" />
-</p>
-<p align="center">
-  <img width="550" src="https://raw.githubusercontent.com/nhost/nhost/master/assets/follow-us-banner.png"/>
-</p>
+**Nhost is a serverless backend for web and mobile apps** built with the following things in mind:
 
-**Nhost is a serverless backend for web and mobile apps.** Nhost consists of open
-source software pre-configured to make it fast to get started and easy to scale.
+- Open Source
+- Developer Productivity
+- SQL
+- GraphQL
 
-This is what you get with Nhost:
+Nhost consists of open source software:
 
-- Database: [Postgres](https://www.postgresql.org/)
-- GraphQL API: [Hasura](https://hasura.io/)
+- 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://github.com/nhost/hasura-backend-plus/)
-- Functions: [JS](https://developer.mozilla.org/en-US/docs/Web/JavaScript)/[TS](https://www.typescriptlang.org/) and [Go](https://golang.org/) runtimes
+- Storage: [Hasura Storage](https://hub.docker.com/r/nhost/hasura-storage)
+- Serverless Functions: Node.js (JavaScript and TypeScript)
+- [Nhost CLI](https://docs.nhost.io/reference/cli) for local development
 
-We also provide a UI to manage your database, users, and files. And we have
-JS/TS and Flutter SDKs to make it easy to work with.
+## Architecture of Nhost
 
-![Nhost](assets/hero-image.png)
+<div align="center">
+  <br />
+  <img src="assets/nhost-diagram.png"/>
+  <br />
+  <br />
+</div>
 
-<hr />
+Visit [https://docs.nhost.io](http://docs.nhost.io) for the complete documentation.
 
-# Get Started
+# How to get started
 
-![Nhost CLI](assets/cli-started.png)
+### Option 1: One-click deployment with Nhost (recommended)
 
-## Managed at Nhost.io
+1. Create [Nhost account](https://app.nhost.io) (you can use GitHub to sign up)
+2. Create Nhost app
+3. Done!
 
-[Sign up](https://app.nhost.io) and create your first app [here](https://app.nhost.io/new).
+### Option 2: Self-hosting
 
-![Nhost](assets/get-started.png)
+Since Nhost is 100% open source, you can self-host the whole Nhost stack. Check out the example [docker-compose file](https://github.com/nhost/nhost/tree/main/examples/docker-compose) to self-host Nhost.
 
-Then connect to your new Nhost app using the [JavaScript/TypeScript SDK](https://docs.nhost.io/get-started/quick-start/javascript-client) or [Flutter SDK](https://github.com/nhost/nhost-dart).
+## Sign in a user and make your first GraphQL query
 
-```bash
-$ npm install nhost-js-sdk
-# or
-$ flutter i nhost-dart-sdk
-```
+Install the `@nhost/nhost-js` package and start build your app:
 
-In your project, initialize the SDK with the endpoint of your new Nhost App:
-
-```js
+```jsx
 import { NhostClient } from '@nhost/nhost-js'
 
 const nhost = new NhostClient({
-  baseURL: 'https://project-id.nhost.app'
+  backendUrl: 'https://awesome-app.nhost.run'
 })
 
-export { nhost }
+await nhost.auth.signIn({ email: 'elon@musk.com', password: 'spaceX' })
+
+await nhost.graphql.request(`{
+  users {
+    id
+    displayName
+    email
+  }
+}`)
 ```
 
-Now you're ready to develop your app.
+## Frontend Agnostic
 
-# Develop Your App
+Nhost is frontend agnostic, which means Nhost works with all frontend frameworks.
 
-Now you're ready to use these fundamental building blocks to build a unique experience:
-
-- [Quick Start](https://docs.nhost.io/get-started/quick-start): Create an app with React
-- [Authentication](https://docs.nhost.io/platform/authentication) with email/password, magic link or social logins (Google, GitHub, Facebook, etc).
-- [Real-time database](https://docs.nhost.io/platform/database) with GraphQL and Postgres to keep your data in sync.
-- [File Storage](https://docs.nhost.io/platform/storage) with image transformation.
-- [Payment](https://github.com/nhost/nhost) powered by Stripe _(coming soon)_.
-
-[Full Documentation](https://docs.nhost.io)
-
-### Examples and tutorials
-
-- [Todo App](https://github.com/nhost/nhost/tree/main/templates/web/react-apollo) with React
-- [Full App Template](https://github.com/nhost/nhost/tree/main/templates/web/nextjs-apollo) with Next.js
-- [Native Mobile App](https://github.com/nhost/nhost-dart/tree/main/packages/nhost_flutter_graphql/example) with Dart and Flutter
-- [Nuxt](https://github.com/nhost/nhost/tree/main/examples/nuxt-apollo) with Apollo.
-- [CRM Example App](https://github.com/nhost/nhost/tree/main/examples/react-apollo-crm)
-- [Multi-tenant App](https://github.com/nhost/nhost/tree/main/examples/multi-tenant-one-to-many)
-
-# Backend development
-
-To further develop your backend, deep dive into these topics:
-
-- [Serverless Functions](https://docs.nhost.io/platform/serverless-functions)
-- [User Permissions](https://docs.nhost.io/platform/database/permissions)
-- [Database events and webhooks](https://docs.nhost.io/platform/serverless-functions/event-triggers)
-- [Local development with the Nhost CLI](https://docs.nhost.io/platform/nhost/local-development)
-
-[Full Documentation](https://docs.nhost.io)
+<div align="center">
+  <a href="https://github.com/nhost/nhost/tree/main/templates/web/nextjs-apollo"><img src="assets/nextjs.svg"/></a>
+  <a href="https://github.com/nhost/nhost/tree/main/examples/nuxt-apollo"><img src="assets/nuxtjs.svg"/></a>
+  <a href="https://github.com/nhost/nhost/tree/main/templates/web/react-apollo"><img src="assets/react.svg"/></a>
+  <img src="assets/react-native.svg"/>
+  <a href="https://github.com/nhost/nhost/tree/main/packages/nhost-js"><img src="assets/svelte.svg"/></a>
+  <a href="https://github.com/nhost/nhost/tree/main/packages/nhost-js"><img src="assets/vuejs.svg"/></a>
+</div>
 
 # Resources
 
@@ -111,14 +101,14 @@ Nhost libraries and tools
 - [JavaScript/TypeScript SDK](https://docs.nhost.io/reference/sdk)
 - [Dart and Flutter SDK](https://github.com/nhost/nhost-dart)
 - [Nhost CLI](https://docs.nhost.io/reference/cli)
-- [Nhost React Auth](https://docs.nhost.io/reference/supporting-libraries/react-auth)
-- [Nhost React Apollo](https://docs.nhost.io/reference/supporting-libraries/react-apollo)
+- [Nhost React](https://docs.nhost.io/reference/react)
+- [Nhost Next.js](https://docs.nhost.io/reference/nextjs)
 
 ## Community ❤️
 
 First and foremost: **Star and watch this repository** to stay up-to-date.
 
-Also, follow Nhost on [GitHub Discussions](https://github.com/nhost/nhost/discussions), our [Blog](https://nhost.io/blog), and on [Twitter](https://twitter.com/nhostio). You can chat with the team and other members on [Discord](https://discord.com/invite/9V7Qb2U), and follow our tutorials and other video material at [YouTube](https://www.youtube.com/channel/UCJ7irtvV9Y0EQMxpabb6ntg?view_as=subscriber).
+Also, follow Nhost on [GitHub Discussions](https://github.com/nhost/nhost/discussions), our [Blog](https://nhost.io/blog), and on [Twitter](https://twitter.com/nhostio). You can chat with the team and other members on [Discord](https://discord.com/invite/9V7Qb2U) and follow our tutorials and other video material at [YouTube](https://www.youtube.com/channel/UCJ7irtvV9Y0EQMxpabb6ntg?view_as=subscriber).
 
 ## Nhost is Open Source
 
@@ -128,10 +118,10 @@ This repository, and most of our other open source projects, are licensed under
 
 Here are some ways of contributing to making Nhost better:
 
-- **[Try out Nhost](https://docs.nhost.io/get-started/quick-start)**, and think of ways of how you can make the service better.
+- **[Try out Nhost](https://docs.nhost.io/get-started/quick-start)**, and think of ways to make the service better. Let us know here on GitHub.
 - Join our [Discord](https://discord.com/invite/9V7Qb2U) and connect with other members to share and learn from.
 - Send a pull request to any of our [open source repositories](https://github.com/nhost) on Github. Check our [contribution guide](https://github.com/nhost/nhost/blob/main/CONTRIBUTING.md) for more details about how to contribute. We're looking forward to your contribution!
 
 ## Security
 
-If you discover a security vulnerability within Nhost, please send an e-mail to [security@nhost.io](mailto:security@nhost.io). All security vulnerabilities will be promptly addressed.
+If you discover a security vulnerability within Nhost, please e-mail [security@nhost.io](mailto:security@nhost.io). All security vulnerabilities will be promptly addressed.

assets/nextjs.svg

@@ -0,0 +1,15 @@
+<svg width="100" height="48" viewBox="0 0 100 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_517_1670)">
+<g clip-path="url(#clip1_517_1670)">
+<path d="M28.7326 12.5189H43.7066V13.7118H30.1056V22.6886H42.8954V23.8815H30.1056V33.7372H43.8625V34.9301H28.7326V12.5189V12.5189ZM45.0478 12.5189H46.639L53.6892 22.3747L60.8953 12.5189L70.6968 0L54.594 23.4106L62.8919 34.9301H61.2383L53.6892 24.4464L46.109 34.9301H44.4866L52.8469 23.4106L45.0484 12.5189H45.0478ZM63.4848 13.7118V12.5189H80.5483V13.7118H72.6874V34.9296H71.3145V13.7118H63.4853H63.4848ZM10 12.5189H11.7159L35.3748 48L25.5975 34.9301L11.4348 14.2138L11.3724 34.9301H10V12.5189V12.5189ZM80.4107 33.3771C80.1295 33.3771 79.9193 33.1594 79.9193 32.8782C79.9193 32.5965 80.1295 32.3788 80.4101 32.3788C80.694 32.3788 80.9009 32.5965 80.9009 32.8782C80.9009 33.1594 80.694 33.3771 80.4101 33.3771H80.4107ZM81.7589 32.0638H82.4937C82.504 32.4627 82.7948 32.7304 83.2216 32.7304C83.699 32.7304 83.9694 32.4428 83.9694 31.9031V28.4863H84.7171V31.9063C84.7171 32.8782 84.1564 33.4378 83.2281 33.4378C82.3572 33.4378 81.7594 32.8949 81.7594 32.0638H81.7589ZM85.695 32.0208H86.4363C86.4997 32.4793 86.947 32.7707 87.5915 32.7707C88.192 32.7707 88.6328 32.4589 88.6328 32.0305C88.6328 31.6622 88.3527 31.4407 87.7146 31.2902L87.0937 31.1397C86.2229 30.9354 85.8251 30.5129 85.8251 29.8028C85.8251 28.9416 86.526 28.3685 87.5775 28.3685C88.5559 28.3685 89.2709 28.9416 89.3139 29.7555H88.586C88.5161 29.3104 88.1291 29.0319 87.5678 29.0319C86.9765 29.0319 86.583 29.3168 86.583 29.7522C86.583 30.0974 86.8368 30.2952 87.4646 30.4425L87.9952 30.5731C88.9833 30.8043 89.3907 31.2064 89.3907 31.9332C89.3907 32.8578 88.6758 33.4378 87.5345 33.4378C86.4664 33.4378 85.7482 32.8847 85.695 32.0202V32.0208Z" fill="#758399"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_517_1670">
+<rect width="79.395" height="48" fill="white" transform="translate(10)"/>
+</clipPath>
+<clipPath id="clip1_517_1670">
+<rect width="79.3907" height="48" fill="white" transform="translate(10)"/>
+</clipPath>
+</defs>
+</svg>

assets/nuxtjs.svg

@@ -0,0 +1,19 @@
+<svg width="184" height="48" viewBox="0 0 184 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_517_1667)">
+<g clip-path="url(#clip1_517_1667)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M75.1894 17.2054C75.4114 17.4369 75.5306 17.7482 75.5199 18.0688V34.6665C75.5292 35.0219 75.3962 35.3663 75.1505 35.6232C74.9048 35.8809 74.5614 36.0223 74.2055 36.0121C74.006 36.0124 73.8078 35.9809 73.6183 35.9188C73.4447 35.8653 73.2888 35.7658 73.1672 35.631L62.4144 21.631V34.8104C62.4242 35.132 62.3007 35.4434 62.0732 35.6709C61.8457 35.8985 61.5343 36.0219 61.2127 36.0121C60.8942 36.0243 60.5857 35.8998 60.3649 35.6699C60.1453 35.4387 60.0276 35.1291 60.0383 34.8104V18.1777C60.0302 17.8233 60.1713 17.4818 60.4272 17.2365C60.6666 16.9909 60.9981 16.8568 61.341 16.8671C61.5569 16.8661 61.7708 16.907 61.971 16.9877C62.1532 17.0582 62.313 17.1764 62.4338 17.3299L73.1399 31.361V18.0688C73.1301 17.7472 73.2536 17.4358 73.4811 17.2083C73.7086 16.9808 74.02 16.8573 74.3416 16.8671C74.6592 16.8554 74.9671 16.9782 75.1894 17.2054ZM97.2783 17.2054C97.5108 17.464 97.6336 17.8029 97.6205 18.1504V28.6504C97.6428 30.0076 97.3132 31.3474 96.6638 32.5393C96.0488 33.6639 95.135 34.5965 94.0233 35.2343C92.8713 35.8953 91.5635 36.2363 90.2355 36.2221C88.8955 36.2433 87.5739 35.9092 86.4049 35.2538C85.2881 34.6187 84.3699 33.6856 83.7527 32.5588C83.1034 31.3668 82.7738 30.027 82.796 28.6699V18.1699C82.7859 17.814 82.9272 17.4705 83.1849 17.2249C83.4473 16.9683 83.8019 16.8281 84.1688 16.836C84.5147 16.8362 84.8458 16.9765 85.0866 17.2249C85.3415 17.466 85.4827 17.8035 85.4755 18.1543V28.6543C85.4614 29.5508 85.6884 30.4345 86.1327 31.2132C86.9706 32.6903 88.5373 33.6036 90.2355 33.6049C91.088 33.6109 91.9273 33.3937 92.6699 32.9749C93.4191 32.5609 94.0425 31.9522 94.4744 31.2132C94.9258 30.4369 95.1571 29.5522 95.1433 28.6543V18.1543C95.1306 17.8096 95.2471 17.4726 95.4699 17.2093C95.6997 16.9522 96.0314 16.8098 96.376 16.8204C96.7182 16.8126 97.0472 16.9529 97.2783 17.2054V17.2054ZM118.329 34.0443C118.493 34.2701 118.579 34.5431 118.574 34.8221C118.588 35.1742 118.446 35.5146 118.185 35.7515C117.944 35.979 117.626 36.1057 117.294 36.1054C116.869 36.1216 116.465 35.9154 116.229 35.561L110.913 28.4638L105.717 35.5493C105.483 35.9096 105.081 36.1252 104.652 36.121C104.337 36.1279 104.035 36.004 103.815 35.7788C103.598 35.5785 103.474 35.2966 103.473 35.001C103.479 34.6717 103.596 34.354 103.804 34.0988L109.412 26.4649L103.777 18.8893C103.601 18.668 103.503 18.3943 103.5 18.1115C103.493 17.7608 103.635 17.4232 103.889 17.1821C104.13 16.9337 104.461 16.7934 104.807 16.7932C105.011 16.7943 105.212 16.8422 105.394 16.9332C105.587 17.0246 105.752 17.1655 105.873 17.3415L111.127 24.3999L116.33 17.4115C116.56 17.056 116.946 16.8319 117.368 16.8088C117.698 16.8105 118.012 16.9518 118.232 17.1977C118.471 17.4111 118.611 17.7135 118.62 18.0338C118.611 18.3147 118.516 18.5862 118.348 18.8115L112.639 26.4104L118.329 34.0443ZM138.065 17.2054C138.322 17.44 138.464 17.7752 138.454 18.1232C138.463 18.4665 138.321 18.7966 138.065 19.0254C137.802 19.2482 137.465 19.3647 137.12 19.3521H132.251V34.7015C132.258 35.0522 132.117 35.3896 131.862 35.631C131.293 36.1391 130.433 36.1391 129.863 35.631C129.61 35.3887 129.469 35.052 129.474 34.7015V19.3521H124.617C124.272 19.3652 123.934 19.244 123.676 19.0138C123.426 18.7757 123.291 18.4409 123.307 18.096C123.296 17.7598 123.43 17.4351 123.676 17.2054C123.934 16.9752 124.272 16.854 124.617 16.8671H137.12C137.467 16.8546 137.805 16.9757 138.065 17.2054V17.2054Z" fill="#758399"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M144.054 35.5223C143.168 35.0208 142.432 34.2935 141.919 33.4145C141.767 33.1971 141.68 32.9407 141.67 32.6756C141.67 32.3326 141.82 32.0069 142.082 31.785C142.305 31.5521 142.608 31.413 142.93 31.3962C143.418 31.4418 143.866 31.69 144.163 32.0806C144.771 33.0808 145.862 33.6845 147.033 33.6673C147.983 33.6894 148.901 33.3244 149.576 32.6562C150.258 32.01 150.636 31.1065 150.618 30.1673V18.1778C150.614 17.8236 150.763 17.4849 151.027 17.2484C151.282 16.9974 151.626 16.8576 151.983 16.8595C152.345 16.8418 152.697 16.9757 152.955 17.2289C153.203 17.4786 153.336 17.8189 153.325 18.17V30.1867C153.335 31.2638 153.051 32.3233 152.504 33.2512C151.962 34.1758 151.184 34.9396 150.249 35.4639C149.269 36.0189 148.159 36.3034 147.033 36.2884C145.99 36.2994 144.962 36.0352 144.054 35.5223ZM162.86 35.7245C161.777 35.313 160.782 34.6964 159.932 33.9084C159.582 33.6394 159.371 33.2263 159.36 32.7845C159.365 32.4485 159.505 32.1285 159.749 31.8978C159.982 31.6472 160.31 31.506 160.652 31.5089C160.94 31.505 161.218 31.6122 161.429 31.8084C162.086 32.4355 162.85 32.94 163.685 33.2978C164.525 33.6317 165.422 33.7956 166.325 33.78C167.354 33.8126 168.369 33.5348 169.238 32.9828C169.961 32.5766 170.414 31.817 170.428 30.9878C170.442 30.097 169.991 29.2632 169.238 28.7867C168.146 28.1453 166.947 27.7053 165.699 27.4878C163.817 27.0989 162.374 26.4728 161.359 25.5978C160.344 24.7228 159.843 23.5095 159.843 21.9617C159.821 20.9452 160.121 19.9478 160.698 19.1112C161.286 18.2806 162.094 17.6313 163.032 17.2367C164.104 16.7843 165.259 16.5605 166.423 16.5795C167.513 16.5726 168.597 16.7582 169.623 17.1278C170.528 17.4331 171.358 17.9276 172.058 18.5784C172.431 18.8538 172.662 19.2816 172.688 19.745C172.688 20.0746 172.554 20.3902 172.318 20.62C172.092 20.873 171.767 21.015 171.428 21.0089C171.198 21.0177 170.974 20.9384 170.802 20.7873C170.234 20.2551 169.563 19.846 168.83 19.5856C168.071 19.2795 167.261 19.1186 166.442 19.1112C165.417 19.0584 164.4 19.3218 163.529 19.8656C162.853 20.3137 162.447 21.0708 162.447 21.882C162.447 22.6932 162.853 23.4503 163.529 23.8984C164.525 24.4793 165.613 24.8869 166.745 25.1039C167.948 25.3406 169.122 25.707 170.245 26.1967C171.094 26.5717 171.819 27.1783 172.338 27.9467C172.863 28.8301 173.119 29.8481 173.073 30.875C173.088 31.8845 172.777 32.872 172.186 33.6906C171.564 34.5347 170.728 35.1968 169.763 35.6078C168.703 36.0717 167.556 36.305 166.399 36.2923C165.195 36.3147 163.997 36.1224 162.86 35.7245V35.7245Z" fill="#758399"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8377 35.7867C21.8099 35.7377 21.7853 35.687 21.7638 35.635C21.6146 35.2899 21.5687 34.909 21.6315 34.5383H12.8076L25.921 11.4617L30.226 19.0294L31.4743 16.8206L27.7215 10.2094C27.6165 10.0189 26.9827 9 25.8899 9C25.396 9 24.6882 9.21389 24.1127 10.225L10.8282 33.5817C10.7154 33.7839 10.1671 34.8456 10.7115 35.7867C10.9604 36.2144 11.4893 36.7239 12.656 36.7239H23.7821C22.6232 36.7239 22.0865 36.2222 21.8377 35.7867V35.7867Z" fill="#758399"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M47.4188 33.5818L36.5027 14.3512C36.3899 14.149 35.7599 13.1262 34.6633 13.1262C34.1694 13.1262 33.4616 13.3362 32.886 14.3473L31.4744 16.8207L32.7305 19.0296L34.6749 15.5879L45.4744 34.5384H41.3677C41.4202 34.8517 41.3908 35.1733 41.2821 35.4718C41.2593 35.5377 41.2306 35.6014 41.1966 35.6623L41.1616 35.7323C40.6094 36.6734 39.4155 36.724 39.1821 36.724H45.6066C45.8438 36.724 47.0338 36.6734 47.586 35.7323C47.831 35.3045 48.006 34.5851 47.4188 33.5818Z" fill="#758399"/>
+<path d="M41.1616 35.7322L41.1966 35.6622C41.2307 35.6013 41.2593 35.5376 41.2822 35.4717C41.3908 35.1732 41.4203 34.8516 41.3677 34.5383C41.3072 34.2005 41.186 33.8763 41.0099 33.5817L32.7383 19.0294L31.4744 16.8206L30.2183 19.0294L21.9505 33.5817C21.79 33.8798 21.6821 34.2035 21.6316 34.5383C21.5651 34.9079 21.6069 35.2888 21.7522 35.635C21.7737 35.687 21.7983 35.7377 21.8261 35.7867C22.0749 36.2144 22.6038 36.7239 23.7705 36.7239H39.1705C39.4155 36.7239 40.6094 36.6733 41.1616 35.7322V35.7322ZM31.4744 21.2383L39.0344 34.5383H23.9183L31.4744 21.2383Z" fill="#758399"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_517_1667">
+<rect width="163" height="28" fill="white" transform="translate(10.4744 9)"/>
+</clipPath>
+<clipPath id="clip1_517_1667">
+<rect width="163" height="28" fill="white" transform="translate(10.4744 9)"/>
+</clipPath>
+</defs>
+</svg>

assets/react.svg

@@ -0,0 +1,16 @@
+<svg width="139" height="48" viewBox="0 0 139 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_517_1669)">
+<g clip-path="url(#clip1_517_1669)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.396 23.0032C42.396 20.9203 39.7876 18.9464 35.7885 17.7224C36.7114 13.6464 36.3012 10.4035 34.494 9.3653C34.0791 9.12275 33.5942 9.00734 33.0648 9.00641V9C31.3024 9 28.9952 10.2561 26.6624 12.4351C24.3296 10.2689 22.0224 9.02564 20.26 9.02564V9.03204C19.7217 9.03204 19.2346 9.1474 18.8116 9.39094C17.0108 10.4292 16.607 13.6656 17.5363 17.7288C13.55 18.9593 10.9545 20.9268 10.9545 23.0032C10.9545 25.0861 13.5628 27.06 17.5619 28.284C16.6391 32.36 17.0492 35.6029 18.8565 36.6411C19.2731 36.8846 19.7601 37 20.2985 37C22.0609 37 24.3681 35.7439 26.7009 33.5649C29.0337 35.7311 31.3408 36.9744 33.1032 36.9744C33.6416 36.9744 34.1287 36.859 34.5516 36.6155C36.3525 35.5772 36.7563 32.3408 35.827 28.2776C39.8004 27.0536 42.396 25.0797 42.396 23.0032ZM27.6814 13.4349C29.7673 11.4961 31.7255 10.4326 33.0584 10.4292V10.4356C33.3532 10.4356 33.5903 10.4932 33.789 10.6022C34.6606 11.1021 35.0387 13.0055 34.7439 15.4537C34.6734 16.0561 34.558 16.6905 34.417 17.3378C33.1609 17.0302 31.7894 16.7931 30.3475 16.6393C29.4823 15.4537 28.5851 14.377 27.6814 13.4349ZM20.26 10.4548C21.5867 10.4548 23.5541 11.5122 25.6434 13.4413C24.7462 14.3834 23.849 15.4537 22.9966 16.6393C21.5482 16.7931 20.1767 17.0302 18.9206 17.3442C18.7732 16.7034 18.6642 16.0817 18.5873 15.4857C18.2861 13.0375 18.6578 11.1341 19.523 10.6278C19.7153 10.5125 19.9652 10.4612 20.26 10.4612V10.4548ZM34.0573 18.7286C33.8201 19.5553 33.5253 20.4077 33.1921 21.26C32.9293 20.7473 32.6537 20.2346 32.3525 19.7219C32.0577 19.2092 31.7437 18.7093 31.4297 18.2223C32.3397 18.3568 33.2177 18.5235 34.0573 18.7286ZM29.5702 28.0021C30.1021 27.2394 30.6148 26.4191 31.1147 25.5539C31.5954 24.7143 32.0376 23.8556 32.4413 22.9968C32.0376 22.138 31.5954 21.2856 31.1083 20.4461C30.6084 19.5873 30.0893 18.7734 29.5574 18.0107C28.6089 17.9338 27.6411 17.889 26.6734 17.889C25.6993 17.889 24.7315 17.9338 23.7766 18.0172C23.2447 18.7798 22.732 19.6001 22.2321 20.4653C21.7514 21.3049 21.3028 22.1636 20.9055 23.0224C21.3092 23.8812 21.7514 24.7336 22.2385 25.5731C22.7384 26.4319 23.2575 27.2458 23.7894 28.0085C24.7379 28.0854 25.7057 28.1302 26.6734 28.1302C27.6475 28.1302 28.6153 28.0854 29.5702 28.0021ZM33.1905 24.7208C33.5365 25.5795 33.8313 26.4383 34.0749 27.2715C33.2353 27.4765 32.3509 27.6496 31.4344 27.7842C31.7485 27.2907 32.0625 26.7844 32.3573 26.2653C32.6521 25.7526 32.9277 25.2335 33.1905 24.7208ZM24.9094 29.5081C25.499 30.258 26.095 30.9437 26.691 31.5589C27.2806 30.9437 27.8766 30.258 28.4534 29.5081C27.8702 29.5402 27.2742 29.553 26.6718 29.553C26.0758 29.553 25.4862 29.5338 24.9094 29.5081ZM21.9225 27.7842C21.0124 27.6496 20.1344 27.4829 19.2949 27.2779C19.532 26.4511 19.8268 25.5988 20.16 24.7464C20.4228 25.2591 20.6984 25.7718 20.9996 26.2845C21.3008 26.7972 21.6084 27.2971 21.9225 27.7842ZM28.4289 16.4983C27.8393 15.7485 27.2432 15.0627 26.6472 14.4475C26.0576 15.0627 25.4616 15.7485 24.8848 16.4983C25.468 16.4662 26.064 16.4534 26.6664 16.4534C27.2625 16.4534 27.8521 16.4726 28.4289 16.4983ZM21.9186 18.2223C21.6045 18.7157 21.2905 19.222 20.9957 19.7411C20.7009 20.2538 20.4253 20.7665 20.1626 21.2793C19.8165 20.4205 19.5217 19.5617 19.2781 18.7286C20.1177 18.5299 21.0021 18.3568 21.9186 18.2223ZM12.3819 23.0032C12.3819 24.0094 13.8495 25.2783 16.1182 26.2461C16.6758 26.4832 17.2782 26.7011 17.9127 26.8998C18.2716 25.65 18.7458 24.3491 19.3354 23.016C18.7394 21.6766 18.2587 20.3692 17.8934 19.1131C17.2718 19.3117 16.6694 19.5232 16.1182 19.7604C13.8495 20.7217 12.3819 21.997 12.3819 23.0032ZM19.552 35.4042C18.6804 34.9043 18.3023 33.0009 18.5971 30.5527C18.6676 29.9503 18.7829 29.3158 18.9239 28.6686C20.1801 28.9762 21.5515 29.2133 22.9935 29.3671C23.8587 30.5527 24.7559 31.6294 25.6596 32.5715C23.5703 34.5134 21.6092 35.5772 20.2762 35.5772C19.9878 35.5708 19.7443 35.5131 19.552 35.4042ZM33.8218 35.3786C34.687 34.8723 35.0587 32.9689 34.7575 30.5207C34.687 29.9247 34.5717 29.3031 34.4243 28.6558C33.1681 28.9698 31.7967 29.2069 30.3483 29.3607C29.4959 30.5464 28.5987 31.6166 27.7014 32.5587C29.7907 34.4878 31.7582 35.5452 33.0848 35.5452C33.3796 35.5452 33.6296 35.4939 33.8218 35.3786ZM37.2308 26.246C36.6797 26.4832 36.0773 26.6946 35.4556 26.8933C35.0903 25.6372 34.6096 24.3298 34.0136 22.9904C34.6032 21.6573 35.0775 20.3563 35.4364 19.1066C36.0709 19.3053 36.6733 19.5232 37.2372 19.7603C39.506 20.7281 40.9736 21.997 40.9736 23.0032C40.9672 24.0094 39.4996 25.2847 37.2308 26.246ZM29.5965 23.0032C29.5965 24.6207 28.2852 25.932 26.6677 25.932C25.0501 25.932 23.7388 24.6207 23.7388 23.0032C23.7388 21.3857 25.0501 20.0744 26.6677 20.0744C28.2852 20.0744 29.5965 21.3857 29.5965 23.0032Z" fill="#758399"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M53.5752 23.1473V33.8012H54.8301H56.0852L56.1475 29.6199L56.21 25.4385L58.1811 25.3727L60.1522 25.307L60.7115 26.0601C61.0192 26.4743 62.2821 28.3856 63.5184 30.3072L65.7658 33.8012H67.2312C68.1335 33.8012 68.6969 33.7055 68.6969 33.5522C68.6969 33.4154 68.402 32.874 68.0416 32.3493C66.3892 29.9443 63.6201 25.7253 63.5163 25.4552C63.4398 25.2554 63.7422 25.0698 64.4252 24.898C68.7017 23.8211 70.1724 17.7903 66.9785 14.4281C65.3314 12.6941 64.4653 12.4934 58.6306 12.4934H53.5752V23.1473ZM122.911 14.2805C122.841 14.3942 122.81 15.2808 122.843 16.2511C122.878 17.2904 122.802 18.0978 122.659 18.217C122.525 18.3281 121.954 18.4518 121.389 18.4919L120.363 18.565V19.4815V20.3979L121.565 20.4671L122.768 20.5365L122.791 25.164C122.819 30.6813 122.9 31.8031 123.333 32.6405C123.989 33.9091 125.771 34.5174 127.482 34.0567C128.995 33.6493 129.226 33.3764 128.914 32.3692C128.658 31.5415 128.219 31.2617 127.923 31.7392C127.704 32.0945 126.279 32.0093 125.887 31.6173C125.344 31.0741 125.264 30.1452 125.336 25.2094L125.403 20.627L126.892 20.5125L128.382 20.3979L128.452 19.4349L128.521 18.472L126.962 18.4039L125.403 18.3359L125.289 16.2738L125.174 14.2118L124.107 14.1428C123.519 14.1048 122.981 14.1669 122.911 14.2805ZM63.734 15.3454C65.393 16.151 66.3125 18.3689 65.7252 20.148C64.9685 22.441 63.4964 23.077 59.1654 22.9826L56.21 22.9182L56.1468 19.1465C56.1122 17.0723 56.139 15.2307 56.2066 15.0542C56.405 14.5374 62.56 14.7754 63.734 15.3454ZM75.8813 18.4692C71.2605 20.2462 69.5176 26.5298 72.4374 30.8853C74.1592 33.4537 77.1536 34.6292 80.4929 34.0478C82.9674 33.6168 85.1717 32.314 84.743 31.5357C84.0552 30.2873 83.9698 30.2579 82.9635 30.924C81.8708 31.6468 80.1811 32.1974 79.0545 32.1974C76.3865 32.1974 74.472 30.5226 73.6201 27.4432L73.4774 26.9277H79.6656C83.6376 26.9277 85.9053 26.8439 85.9984 26.6933C86.2575 26.2743 85.6531 23.1773 85.0828 22.0017C84.3428 20.4758 82.8324 19.0464 81.3471 18.4658C79.7689 17.8488 77.4906 17.8504 75.8813 18.4692ZM93.0519 18.4188C91.9414 18.8026 90.139 19.8806 89.864 20.3257C89.752 20.5068 90.6141 22.1163 90.8233 22.1163C90.8749 22.1163 91.3739 21.7676 91.932 21.3416C94.2658 19.5603 97.7452 19.7511 98.9494 21.7266C99.2841 22.2753 99.3969 22.8779 99.3976 24.1211C99.3985 25.8094 99.2452 26.0837 98.6818 25.4011C98.1853 24.7997 96.5845 24.1884 95.0991 24.0333C90.5227 23.5549 87.4588 27.7892 89.6127 31.615C91.1278 34.3069 95.4375 35.0664 98.1892 33.1269C98.7356 32.7418 99.2243 32.4265 99.2754 32.4265C99.3263 32.4265 99.4008 32.7102 99.4406 33.0566C99.5089 33.6502 99.5792 33.6867 100.659 33.6867H101.804V27.6151C101.804 21.8159 101.782 21.5016 101.305 20.611C100.747 19.569 99.467 18.6181 98.1175 18.2433C96.7776 17.8715 94.3978 17.9537 93.0519 18.4188ZM110.478 18.4692C105.384 20.4282 103.965 28.0449 107.956 32.0047C109.751 33.7859 112.495 34.5825 114.998 34.0494C116.28 33.7763 118.565 32.4428 118.799 31.8306C118.924 31.5055 117.858 30.1354 117.48 30.1354C117.391 30.1354 116.994 30.4378 116.598 30.8076C115.626 31.7158 114.498 32.0508 112.901 31.906C110.084 31.6505 108.257 29.3891 108.259 26.16C108.261 22.4751 110.224 20.3001 113.558 20.2884C115.165 20.2829 116.059 20.6387 116.798 21.5786L117.283 22.1956L117.889 21.7435C119.025 20.8956 119.069 20.5975 118.184 19.7468C116.399 18.0309 113.058 17.4769 110.478 18.4692ZM80.5578 20.4089C81.0247 20.6039 81.6536 20.9904 81.9556 21.2681C82.607 21.8668 83.5839 23.8498 83.5871 24.5793L83.5894 25.0948H78.677C75.9095 25.0948 73.7072 25.0022 73.6334 24.8826C73.5612 24.7658 73.7095 24.116 73.9629 23.4388C74.4394 22.1649 75.4095 21.0603 76.6014 20.4339C77.4874 19.9683 79.4734 19.9557 80.5578 20.4089ZM97.5422 26.2493C99.0814 26.9479 99.3985 27.4398 99.3985 29.1305C99.3985 30.3324 99.3116 30.6577 98.883 31.0624C97.7374 32.1436 96.0802 32.5993 94.2768 32.3289C92.3687 32.0428 91.1164 30.1299 91.6179 28.2672C91.8672 27.3415 92.9055 26.214 93.7271 25.9769C94.7889 25.6703 96.5421 25.7957 97.5422 26.2493Z" fill="#758399"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_517_1669">
+<rect width="118.589" height="28" fill="white" transform="translate(10.395 9)"/>
+</clipPath>
+<clipPath id="clip1_517_1669">
+<rect width="118.588" height="28" fill="white" transform="translate(10.9545 9)"/>
+</clipPath>
+</defs>
+</svg>

assets/svelte.svg

@@ -0,0 +1,11 @@
+<svg width="151" height="48" viewBox="0 0 151 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_517_1666)">
+<path d="M53.0621 32.7532C51.6861 32.7881 50.3317 32.406 49.1767 31.6573C48.099 30.9456 47.299 29.8847 46.9113 28.6527L49.2702 27.7833C49.5977 28.5396 50.1328 29.1877 50.8136 29.6523C51.5054 30.116 52.3228 30.3562 53.1555 30.3405C53.9551 30.3826 54.7444 30.1442 55.387 29.6665C55.6664 29.4315 55.8871 29.1346 56.0317 28.7993C56.1762 28.464 56.2405 28.0997 56.2196 27.7352C56.223 27.3958 56.1443 27.0606 55.9902 26.7582C55.8565 26.4875 55.6817 26.2391 55.472 26.0219C55.2059 25.7798 54.904 25.5802 54.5771 25.43C54.175 25.229 53.8436 25.0761 53.5775 24.9713C53.3113 24.8665 52.9205 24.7249 52.4079 24.5493C51.7622 24.3228 51.2752 24.1472 50.958 24.0169C50.5224 23.8327 50.0996 23.6199 49.6921 23.3798C49.2521 23.147 48.8524 22.8448 48.5084 22.4849C48.212 22.1329 47.9731 21.7363 47.8005 21.3097C47.4669 20.4985 47.3968 19.6029 47.6001 18.7497C47.8033 17.8964 48.2697 17.1287 48.9332 16.555C49.8998 15.7036 51.211 15.2778 52.8667 15.2778C54.2524 15.2778 55.3908 15.5827 56.2819 16.1925C57.1494 16.7684 57.7862 17.6318 58.0801 18.6308L55.7636 19.4038C55.5275 18.8798 55.1308 18.4444 54.6309 18.1607C54.0311 17.8303 53.3526 17.6698 52.6684 17.6962C51.9956 17.6572 51.3289 17.8435 50.7739 18.2258C50.5473 18.4017 50.3667 18.6298 50.2473 18.8907C50.128 19.1515 50.0735 19.4374 50.0886 19.7238C50.0906 19.9433 50.1388 20.1598 50.2301 20.3593C50.3213 20.5589 50.4535 20.737 50.6182 20.8821C50.9394 21.197 51.3156 21.4504 51.7282 21.6297C52.1134 21.7911 52.7024 22.0063 53.4897 22.281C53.9711 22.4594 54.3392 22.5897 54.5629 22.6803C54.7867 22.7709 55.1293 22.9154 55.5881 23.1249C55.9493 23.2853 56.2968 23.4747 56.6274 23.6913C56.9232 23.9046 57.2069 24.1343 57.4769 24.3794C57.7674 24.6322 58.0159 24.9295 58.2132 25.2601C58.4012 25.6037 58.5467 25.9689 58.6465 26.3476C58.7701 26.7909 58.8311 27.2494 58.8277 27.7097C58.8277 29.288 58.2887 30.5227 57.2107 31.4138C56.1327 32.3049 54.7498 32.7513 53.0621 32.7532ZM68.5297 32.47L62.7385 15.5723H65.4401L69.2773 27.3472C69.489 27.981 69.6668 28.6257 69.8097 29.2785C69.9501 28.6254 70.1269 27.9806 70.3392 27.3472L74.1283 15.5723H76.8072L71.0387 32.4644L68.5297 32.47ZM81.9215 32.47V15.5723H92.3994V17.9369H84.4334V22.5699H89.5732V24.9345H84.4334V30.0884H92.929V32.4531L81.9215 32.47ZM99.3205 32.47V15.5723H101.832V30.0516H110.084V32.4644L99.3205 32.47ZM119.543 17.9908V32.4644H117.034V17.9851H112.256V15.5723H124.314V17.9851L119.543 17.9908ZM129.511 32.47V15.5723H139.989V17.9369H132.02V22.5699H137.16V24.9345H132.02V30.0884H140.516V32.4531L129.511 32.47Z" fill="#758399"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.4926 9.5745C26.6979 6.89557 32.5146 8.14442 35.4597 12.3582V12.3809C36.1586 13.3594 36.6551 14.4676 36.9201 15.6405C37.1852 16.8134 37.2134 18.0274 37.0031 19.2113C36.7976 20.3413 36.366 21.4181 35.7344 22.3773C36.657 24.1358 36.967 26.1518 36.6151 28.1062C36.404 29.2639 35.9547 30.3652 35.2956 31.3402C34.6365 32.3151 33.7821 33.1425 32.7864 33.7699L25.4009 38.4566C21.1956 41.1356 15.379 39.8867 12.4339 35.6729C11.7344 34.6947 11.2375 33.5865 10.9725 32.4135C10.7074 31.2405 10.6796 30.0264 10.8905 28.8425C11.0937 27.7123 11.5243 26.6352 12.1563 25.6765C11.2342 23.9168 10.9253 21.8998 11.2785 19.9448C11.4879 18.7864 11.9366 17.6845 12.5958 16.7093C13.255 15.7341 14.1103 14.9071 15.1071 14.2811L22.4926 9.5745ZM18.2541 35.9024C19.3803 36.3201 20.6076 36.3824 21.7703 36.0806C22.3011 35.9379 22.8071 35.7154 23.2712 35.4208L30.6595 30.7143C31.2597 30.3365 31.7745 29.8376 32.1709 29.2496C32.5674 28.6615 32.8367 27.9972 32.9618 27.299C33.0883 26.5872 33.0714 25.8573 32.9118 25.1522C32.7523 24.447 32.4535 23.7809 32.0329 23.1929C31.3489 22.206 30.3784 21.453 29.2525 21.0356C28.1266 20.6183 26.8997 20.5568 25.7377 20.8594C25.2061 20.9997 24.6996 21.2223 24.2368 21.5192L21.405 23.3146C21.2644 23.4024 21.1118 23.4692 20.9519 23.5129C20.6038 23.6006 20.2373 23.5804 19.9009 23.4549C19.5646 23.3295 19.2743 23.1048 19.0687 22.8106C18.9419 22.6327 18.8517 22.4316 18.8031 22.2187C18.7544 22.0058 18.7485 21.7854 18.7855 21.5702C18.8238 21.3602 18.9052 21.1604 19.0246 20.9835C19.144 20.8065 19.2989 20.6563 19.4793 20.5422L26.8676 15.8442C27.0076 15.7553 27.1604 15.6884 27.3207 15.646C27.6672 15.5547 28.0332 15.5712 28.3702 15.6931C28.7071 15.815 28.9989 16.0366 29.2067 16.3284C29.4333 16.6478 29.5396 17.037 29.5069 17.4272L29.4814 17.7104L29.7646 17.7925C30.8023 18.1067 31.7791 18.5951 32.6531 19.2367L33.0298 19.5199L33.1713 19.0952C33.2441 18.8696 33.3027 18.6398 33.3469 18.407C33.4738 17.6952 33.457 16.9652 33.2975 16.2601C33.1379 15.5549 32.8389 14.8887 32.4181 14.3008C31.7342 13.3137 30.7637 12.5604 29.6379 12.1426C28.5121 11.7248 27.2851 11.6626 26.1229 11.9645C25.596 12.1069 25.0937 12.3284 24.6333 12.6215L17.2365 17.3281C16.6362 17.7059 16.1215 18.2047 15.725 18.7928C15.3286 19.3809 15.0592 20.0452 14.9342 20.7433C14.8064 21.4545 14.822 22.1841 14.9801 22.8893C15.1381 23.5944 15.4354 24.2608 15.8545 24.8495C16.5385 25.8341 17.5077 26.5856 18.6317 27.0028C19.7557 27.42 20.9805 27.4828 22.1413 27.1829C22.671 27.0412 23.1762 26.8196 23.6393 26.526L26.4712 24.7277C26.6112 24.6388 26.764 24.572 26.9243 24.5295C27.2744 24.4386 27.6439 24.4573 27.9832 24.5828C28.3224 24.7084 28.615 24.9349 28.8216 25.2318C28.949 25.4087 29.0397 25.6094 29.0883 25.8219C29.1369 26.0345 29.1425 26.2546 29.1048 26.4693C29.0674 26.68 28.9864 26.8805 28.8669 27.0581C28.7474 27.2356 28.5921 27.3862 28.411 27.5001L21.0368 32.2067C20.8966 32.295 20.7438 32.3619 20.5837 32.4049C20.2336 32.4957 19.8641 32.4771 19.5248 32.3516C19.1856 32.226 18.893 31.9995 18.6864 31.7026C18.4596 31.3862 18.3505 31.0006 18.3777 30.6123L18.4032 30.3291L18.12 30.247C17.086 29.9354 16.1123 29.4509 15.24 28.8141L14.8605 28.5309L14.7218 28.9557C14.6467 29.1786 14.588 29.4067 14.5462 29.6382C14.4189 30.3498 14.4353 31.0796 14.5943 31.7848C14.7534 32.49 15.0519 33.1563 15.4722 33.7444C16.1569 34.7314 17.1278 35.4846 18.2541 35.9024Z" fill="#758399"/>
+</g>
+<defs>
+<clipPath id="clip0_517_1666">
+<rect width="130.265" height="32" fill="white" transform="translate(10.4744 8)"/>
+</clipPath>
+</defs>
+</svg>

assets/vuejs.svg

@@ -0,0 +1,16 @@
+<svg width="120" height="48" viewBox="0 0 120 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_517_1668)">
+<path d="M54.426 14.1752C54.426 13.9261 54.5589 13.7186 54.8245 13.5525C55.1068 13.3865 55.3973 13.3035 55.6962 13.3035C56.1113 13.3035 56.3687 13.4612 56.4683 13.7767L60.8517 28.5706L65.2102 13.7767C65.3264 13.4612 65.5755 13.3035 65.9573 13.3035C66.2728 13.3035 66.5634 13.3948 66.829 13.5774C67.1113 13.7601 67.2524 13.9676 67.2524 14.2001C67.2524 14.2167 67.2441 14.2416 67.2275 14.2748C67.2275 14.308 67.2275 14.3412 67.2275 14.3744L62.1717 30.9367C61.989 31.4182 61.549 31.6589 60.8517 31.6589C60.1543 31.6589 59.7309 31.4182 59.5815 30.9367L54.4758 14.3744C54.4426 14.2748 54.426 14.2084 54.426 14.1752Z" fill="#758399"/>
+<path d="M68.1415 26.9269V20.4514C68.1415 20.2521 68.2411 20.0778 68.4403 19.9284C68.6562 19.7789 68.9052 19.7042 69.1875 19.7042C69.4532 19.7042 69.6856 19.7872 69.8849 19.9533C70.1007 20.1027 70.2086 20.2688 70.2086 20.4514V26.9269C70.2086 27.674 70.4909 28.3465 71.0554 28.9442C71.6199 29.542 72.2924 29.8408 73.0728 29.8408C73.8366 29.8408 74.5007 29.5503 75.0652 28.9691C75.6298 28.3714 75.912 27.6906 75.912 26.9269V20.4265C75.912 20.2438 76.0116 20.0778 76.2109 19.9284C76.4267 19.7789 76.6758 19.7042 76.9581 19.7042C77.2569 19.7042 77.4977 19.7789 77.6803 19.9284C77.8796 20.0612 77.9792 20.2272 77.9792 20.4265V26.9269C77.9792 28.2054 77.4894 29.3261 76.5098 30.2891C75.5467 31.2355 74.4011 31.7088 73.0728 31.7088C71.7279 31.7088 70.5656 31.2355 69.586 30.2891C68.623 29.3261 68.1415 28.2054 68.1415 26.9269Z" fill="#758399"/>
+<path d="M80.3672 26.8771V24.262C80.3672 22.9835 80.8487 21.8793 81.8117 20.9495C82.7914 20.0197 83.9619 19.5548 85.3234 19.5548C86.6185 19.5548 87.7393 19.9948 88.6857 20.8748C89.6321 21.7382 90.1053 22.8257 90.1053 24.1374C90.1053 24.6189 90.0472 25.0091 89.931 25.308C89.8148 25.5903 89.6321 25.7978 89.3831 25.9306C89.1506 26.0469 88.9265 26.1216 88.7106 26.1548C88.5114 26.188 88.2374 26.2046 87.8887 26.2046H82.4344V26.9518C82.4344 27.865 82.7582 28.5955 83.4057 29.1435C84.0699 29.6914 84.925 29.9654 85.971 29.9654C86.5189 29.9654 86.9921 29.8823 87.3906 29.7163C87.8057 29.5503 88.1378 29.3925 88.3868 29.2431C88.6359 29.0771 88.8351 28.994 88.9846 28.994C89.217 28.994 89.4163 29.102 89.5823 29.3178C89.7484 29.5171 89.8314 29.7246 89.8314 29.9405C89.8314 30.3223 89.4495 30.7125 88.6857 31.111C87.9385 31.5095 87.0087 31.7088 85.8963 31.7088C84.2691 31.7088 82.9408 31.2688 81.9114 30.3888C80.8819 29.4921 80.3672 28.3216 80.3672 26.8771ZM82.4344 24.8099H87.0419C87.4736 24.8099 87.7642 24.7601 87.9136 24.6605C88.0631 24.5442 88.1378 24.3284 88.1378 24.0129C88.1378 23.2657 87.8638 22.6099 87.3159 22.0454C86.768 21.4808 86.0955 21.1986 85.2985 21.1986C84.5182 21.1986 83.8457 21.4642 83.2812 21.9955C82.7167 22.5103 82.4344 23.1495 82.4344 23.9133V24.8099Z" fill="#758399"/>
+<path d="M91.8448 30.3638C91.8448 29.9986 91.9694 29.6914 92.2184 29.4423C92.4675 29.1767 92.7746 29.0438 93.1399 29.0438C93.4886 29.0438 93.7875 29.1767 94.0365 29.4423C94.2856 29.6914 94.4101 29.9986 94.4101 30.3638C94.4101 30.7125 94.2856 31.0197 94.0365 31.2854C93.7875 31.5344 93.4886 31.6589 93.1399 31.6589C92.7746 31.6589 92.4675 31.5344 92.2184 31.2854C91.9694 31.0197 91.8448 30.7125 91.8448 30.3638Z" fill="#758399"/>
+<path d="M94.3798 36.3163C94.3798 36.0506 94.4628 35.8265 94.6288 35.6438C94.7949 35.4778 94.9941 35.3948 95.2266 35.3948C95.8741 35.3948 96.2975 35.154 96.4967 34.6725C96.696 34.191 96.7956 33.4688 96.7956 32.5057V20.4265C96.7956 20.2106 96.8869 20.0363 97.0696 19.9035C97.2688 19.7706 97.5179 19.7042 97.8167 19.7042C98.1156 19.7042 98.3647 19.7706 98.5639 19.9035C98.7632 20.0363 98.8628 20.2106 98.8628 20.4265V32.5057C98.8628 33.9503 98.5805 35.0959 98.016 35.9427C97.4515 36.7895 96.5964 37.2129 95.4507 37.2129C94.7367 37.2129 94.3798 36.914 94.3798 36.3163ZM96.8952 16.1178C96.6462 15.8687 96.5217 15.5865 96.5217 15.271C96.5217 14.9555 96.6462 14.6816 96.8952 14.4491C97.1443 14.2167 97.4515 14.1004 97.8167 14.1004C98.1654 14.1004 98.4643 14.2167 98.7134 14.4491C98.9624 14.6816 99.0869 14.9555 99.0869 15.271C99.0869 15.5865 98.9624 15.8687 98.7134 16.1178C98.4643 16.3503 98.1654 16.4665 97.8167 16.4665C97.4681 16.4665 97.1609 16.3503 96.8952 16.1178Z" fill="#758399"/>
+<path d="M101.107 29.8159C101.107 29.6001 101.174 29.3925 101.307 29.1933C101.456 28.9774 101.63 28.8695 101.83 28.8695C101.963 28.8695 102.153 28.9691 102.403 29.1684C102.652 29.3676 103.009 29.5669 103.473 29.7661C103.938 29.9488 104.486 30.0401 105.117 30.0401C105.947 30.0401 106.545 29.8906 106.91 29.5918C107.292 29.2929 107.483 28.9193 107.483 28.471C107.483 27.9231 107.276 27.4914 106.861 27.1759C106.446 26.8438 105.939 26.5948 105.341 26.4288C104.744 26.2627 104.146 26.0801 103.548 25.8808C102.95 25.6816 102.444 25.3495 102.029 24.8846C101.614 24.4197 101.406 23.8054 101.406 23.0416C101.406 22.0952 101.738 21.2816 102.403 20.6008C103.083 19.9035 104.113 19.5548 105.491 19.5548C106.371 19.5548 107.176 19.6959 107.907 19.9782C108.637 20.2438 109.003 20.551 109.003 20.8997C109.003 21.0989 108.919 21.3231 108.753 21.5721C108.604 21.8212 108.413 21.9457 108.181 21.9457C108.114 21.9457 107.79 21.8295 107.209 21.5971C106.645 21.348 106.08 21.2235 105.516 21.2235C104.752 21.2235 104.179 21.4061 103.797 21.7714C103.432 22.1201 103.249 22.5186 103.249 22.9669C103.249 23.4318 103.457 23.7971 103.872 24.0627C104.287 24.3284 104.793 24.5359 105.391 24.6854C106.006 24.8348 106.612 25.0174 107.209 25.2333C107.807 25.4491 108.313 25.8227 108.729 26.354C109.144 26.8688 109.351 27.5412 109.351 28.3714C109.351 29.4008 108.986 30.2144 108.255 30.8121C107.525 31.4099 106.504 31.7088 105.192 31.7088C104.063 31.7088 103.1 31.5095 102.303 31.111C101.506 30.6959 101.107 30.2642 101.107 29.8159Z" fill="#758399"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.9646 17.3631L31.8862 10.5647H38.1532L27.9646 28.2274L17.7761 10.5647H24.0431L27.9646 17.3631ZM27.9646 30.5174L39.5276 10.5648H44.9455L27.9646 40.0027L10.9838 10.5648H16.4017L27.9646 30.5174Z" fill="#758399"/>
+</g>
+<defs>
+<clipPath id="clip0_517_1668">
+<rect width="98.4906" height="30" fill="white" transform="translate(10.9838 10)"/>
+</clipPath>
+</defs>
+</svg>

docs/README.md

@@ -2,12 +2,15 @@
 
 ## Get started
 
-1. Install dependencies: `yarn`
-2. Start dev server: `yarn dev`
+From the **root** of the `nhost/nhost` repository:
 
-## NOTES;
+```bash
+pnpm run clean:all
+pnpm i
+cd docs
+pnpm run dev
+```
 
-The content is copied from the main `nhost/nhost` repo. This repo is only to modify styles/react components.
 
 ## Structure
 
@@ -15,25 +18,26 @@ The `order.ts` file contains the main order for the entire structure of `posts`.
 
 ```
 export const orderTwo = {
-  "get-started": {
-    "quick-start": ["introduction", "nhost-app", "todos-table", "javascript-app"],
-    upgrade: ["upgrade-from-v1-to-v2"],
+  'get-started': {
+    'quick-start': ['index', 'schema', 'javascript-client', 'permissions'],
+    authentication: ['index'],
+    'cli-workflow': ['index', 'workflow-setup', 'install-cli', 'local-changes', 'metadata-and-serverless-functions'],
+    upgrade: ['index']
   },
   platform: {
-    data: ["database", "graphql", "permissions", "event-triggers"],
-    auth: ["overview", "sign-in-methods", "users"],
-    storage: ["overview"],
-    cli: ["overview"],
-    nhost: ["environment-variables", "serverless-functions"],
-  },
-  tutorials: {
-    "frontend-templates": ["react"],
-    templates: ["nhost"],
+    database: ['index', 'permissions', 'graphql'],
+    authentication: ['index', 'user-management', 'sign-in-methods', 'social-login', 'email-templates'],
+    storage: ['index'],
+    'serverless-functions': ['index', 'event-triggers'],
+    nhost: ['index', 'environment-variables', 'github-integration', 'local-development']
   },
   reference: {
-    cli: ["nhost-cli"],
-    sdk: ["javascript-sdk", "react-auth", "react-apollo"],
-  },
+    sdk: ['index', 'graphql', 'authentication', 'storage', 'functions'],
+    react: ['index', 'hooks', 'protecting-routes', 'apollo'],
+    nextjs: ['index', 'configuration', 'protecting-routes', ],
+    cli: ['index'],
+    'hasura-auth': ['index', 'installation', 'configuration', 'environment-variables', 'schema', 'api-reference']
+  }
 };
 ```
 

docs/components/Content.tsx

@@ -19,12 +19,12 @@ function getGithubLink(category, subcategory, post) {
 export function Content({ mdxSource, components, frontmatter }) {
   const router = useRouter()
   return (
-    <div className="mt-2 h-full w-full flex flex-col">
-      <div className="flex flex-row place-content-between mb-4">
+    <div className="flex flex-col w-full h-full mt-2">
+      <div className="flex flex-row mb-4 place-content-between">
         <Text color="greyscaleDark" className="font-medium cursor-pointer" size="heading">
           {frontmatter.title}
         </Text>
-        <div className="hidden md:block self-center">
+        <div className="self-center hidden md:block">
           <Button
             Component="a"
             variant="secondary"

docs/components/MDX/CodeComponent.tsx

@@ -9,6 +9,8 @@ import Copy from '../icons/Copy'
 // @ts-ignore -> add to types
 // @ts-ignore -> add to types
 SyntaxHighlighter.registerLanguage('js', js)
+// TODO highlight JSX
+SyntaxHighlighter.registerLanguage('jsx', js)
 
 export interface CodeEditorProps {
   code: string

docs/components/MDX/components.tsx

@@ -8,6 +8,7 @@ import React, { DetailedHTMLProps, HTMLProps, PropsWithChildren } from 'react'
 
 import Command from '../Command'
 import Divider from '../Divider'
+import { Swagger } from '../Swagger'
 
 function Note({ children }: PropsWithChildren<unknown>) {
   return (
@@ -23,7 +24,7 @@ function Video({
   ...props
 }: DetailedHTMLProps<HTMLProps<HTMLSourceElement>, HTMLSourceElement>) {
   return (
-    <div className="flex justify-center my-8 mx-10">
+    <div className="flex justify-center mx-10 my-8">
       <video width="800" controls>
         <source src={src} type="video/mp4" {...props} />
       </video>
@@ -65,15 +66,8 @@ const CustomLink = ({
 const components = {
   img: (props: DetailedHTMLProps<HTMLProps<HTMLImageElement>, HTMLImageElement>) => {
     return (
-      <span className="block mt-5 mx-10 ">
-        <img src={props.src} alt={props.alt} className="mx-auto border mt-2" />
-        {props.alt && (
-          <div className="block text-center text-secondary text-sm mb-8 pt-4">
-            <Text color="greyscaleDark" size="tiny">
-              {props.alt}
-            </Text>
-          </div>
-        )}
+      <span className="block mx-10 my-10 ">
+        <img src={props.src} alt={props.alt} className="mx-auto mt-2" />
       </span>
     )
   },
@@ -94,7 +88,7 @@ const components = {
     return (
       <>
         <Divider />
-        <AnchorLink {...props} className="cursor-pointer text-3xl md:text-4xl" />
+        <AnchorLink {...props} className="text-3xl cursor-pointer md:text-4xl" />
       </>
     )
   },
@@ -108,7 +102,7 @@ const components = {
   h3: (props: AnchorLinkProps) => {
     return (
       <div className="mt-8">
-        <AnchorLink {...props} className="cursor-pointer text-lg" />
+        <AnchorLink {...props} className="text-lg cursor-pointer" />
       </div>
     )
   },
@@ -129,7 +123,34 @@ const components = {
         {...props}
       />
     )
+  },
+  th: ({
+    className,
+    ...props
+  }: DetailedHTMLProps<HTMLProps<HTMLTableCellElement>, HTMLTableCellElement>) => {
+    return <th className={clsx('font-display', className)} {...props} />
+  },
+  td: ({
+    className,
+    ...props
+  }: DetailedHTMLProps<HTMLProps<HTMLTableCellElement>, HTMLTableCellElement>) => {
+    return <td className={clsx('font-display', className)} {...props} />
+  },
+  Swagger,
+  Mermaid: ({ chart }) => {
+    const [html, setHtml] = React.useState('')
+    React.useEffect(() => {
+      const start = async () => {
+        const mermaid = (await import('mermaid')).default
+        mermaid.mermaidAPI.render(uuid(), chart, (svgCode) => setHtml(svgCode))
+      }
+      start()
+    }, [chart])
+    return chart ? <div dangerouslySetInnerHTML={{ __html: html }} /> : null
   }
 }
 
+let currentId = 0
+const uuid = () => `mermaid-${(currentId++).toString()}`
+
 export default components

docs/components/Swagger.tsx

@@ -0,0 +1,29 @@
+import SwaggerUI from 'swagger-ui-react'
+import 'swagger-ui-react/swagger-ui.css'
+
+const OperationsLayout = (props) => {
+  const { getComponent } = props
+  const Operations = getComponent('operations', true)
+  let SvgAssets = getComponent('SvgAssets')
+  return (
+    <div className="swagger-ui">
+      <SvgAssets />
+      <Operations />
+    </div>
+  )
+}
+
+const OperationsLayoutPlugin = () => ({
+  components: {
+    OperationsLayout
+  }
+})
+
+export const Swagger: React.FC<{ spec: string }> = ({ spec }) => (
+  <SwaggerUI
+    url={`/openapi/${spec}`}
+    plugins={[OperationsLayoutPlugin]}
+    layout="OperationsLayout"
+    supportedSubmitMethods={[]}
+  />
+)

docs/content/docs/get-started/cli-workflow/install-cli.mdx

@@ -12,7 +12,6 @@ Initialize a new Nhost App locally:
 
 ```sql
 nhost init -n "nhost-example-app" && cd nhost-example-app
-
 ```
 
 And initialize the GitHub repository in the same folder:
@@ -35,4 +34,4 @@ If you click on the deployment you can see that nothing was really deployed. Tha
 
 ![Deployments details](/images/cli-workflow/deployments-details.png)
 
-Let’s do some local backend changes!
+Let's do some local backend changes!

docs/content/docs/platform/authentication/email-templates.mdx

@@ -0,0 +1,92 @@
+---
+title: 'Email templates'
+---
+
+The following emails can be sent as part of the authentication flow:
+
+- Sign up confirmation email (when using email + password)
+- Reset password email (when using email + password)
+- Passwordless login email (when using Magic Link)
+- Confirm email change (any sign-up method)
+
+---
+
+## Enabling custom email templates
+
+If you have developed custom email templates, you must make them available over HTTP and then point Nhost to them. You can host the templates on your server, or use a public repository on GitHub.
+
+Go to **Users -> Login settings** and scroll down to **Custom email templates**, and set the URL to where your templates are located:
+
+![ ](/images/platform/email-templates.svg)
+
+You only need to define the base URL to point to your hosted templates. The UI will give you a hint about where Nhost will look for your actual template files.
+
+---
+
+## File structure
+
+The email templates should be provided as body.html and subject.txt files in this predefined folder structure:
+
+```txt
+// At base URL (e.g. https://yourapp.com/email-templates/)
+en/
+  email-confirm-change/
+    body.html
+    subject.txt
+  email-verify/
+    body.html
+    subject.txt
+  password-reset/
+    body.html
+    subject.txt
+  signin-passwordless/
+    body.html
+    subject.txt
+
+// Other language versions
+fr/
+  /* ... */
+se/
+  /* ... */
+```
+
+You don’t have to provide all templates - only the one you wish to use and customize. For the templates you do provide, you must provide both body.html and subject.txt.
+
+[View example on GitHub](https://github.com/nhost/nhost/tree/main/examples/custom-email-templates)
+
+---
+
+## Localisation
+
+If Nhost finds a template that matches the recipent user’s locale, the email will be sent in that language. Use two-letter language codes to set the locale.
+English will always be used as the default if another language version is not found.
+
+---
+
+## Template variables
+
+Use variables like `${displayName}` to make your templates more dynamic:
+
+```html
+<!-- https://yourapp.com/email-templates/en/email-verify/body.html -->
+<h2>Confirm Email Change</h2>
+
+<p>Hi, ${displayName}! Please click this link to verify your email:</p>
+
+<p>
+  <a href="${displayName}">Verify new email</a>
+</p>
+```
+
+These variables can be used either in the template subject or body. The following variables are supported:
+
+| Variable    | Description                                                                                                                        |
+| ----------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| link        | The full URL to the target of the transaction. This should be used in the main call to action. This is available in all templates. |
+| displayName | The display name of the user.                                                                                                      |
+| email       | The email of the user.                                                                                                             |
+| locale      | Locale of the user as a two-letter language code. E.g. "en".                                                                       |
+
+---
+
+<!-- ## Developing emails templates locally -->

docs/content/docs/platform/authentication/sign-in-with-facebook.mdx

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

docs/content/docs/platform/authentication/sign-in-with-github.mdx

@@ -0,0 +1,43 @@
+---
+title: Sign In with GitHub
+---
+
+Follow this guide to sign in users with GitHub with your Nhost App.
+
+![GitHub Sign In Preview](/images/platform/social-providers/github-preview.png)
+
+# Create GitHub account
+
+- Create a new [GitHub account](https://github.com/signup) if you don’t have one already.
+
+## Create GitHub OAuth App
+
+- Create a new OAuth application [(direct link)](https://github.com/settings/applications/new) by:
+  - Click on your profile photo in the top right.
+  - Click on Settings
+  - In the left menu, click Developer settings at the bottom.
+  - Click on Oauth Apps in the left menu
+  - Click on New OAuth App button in the top right
+
+## GitHub OAuth App information
+
+- Fill in Application Name
+- Fill in Homepage URL
+- Fill in **Authorization callback URL** with your OAuth Callbacke URL from Nhost
+
+## Configure Nhost
+
+- Click Generate a new client secret to generate a OAuth client secret.
+- Copy and paste the **Client ID** and **Client Secret** from GitHub to your Nhost OAuth settings for GitHub. Make sure the [OAuth provider is enabled in Nhost](/platform/authentication/social-sign-in#enabling-social-sign-in).
+- Click the checkbox “**I have pasted the redirect URI into GitHub”**.
+- Click **Confirm settings**.
+
+## Sign In users in your app
+
+Use the [Nhost JavaScript client](/reference/sdk) to sign in users in your app:
+
+```js
+nhost.auth.signIn({
+  provider: 'github'
+})
+```

docs/content/docs/platform/authentication/sign-in-with-google.mdx

@@ -0,0 +1,67 @@
+---
+title: Sign In with Google
+---
+
+Follow this guide to sign in users with Google with your Nhost App.
+
+![Google Sign In Preview](/images/platform/social-providers/google-preview.png)
+
+## Sign up for Google
+
+- Sign up for [Google Cloud](https://cloud.google.com/free) if you don’t have one already.
+
+## Create a Google Cloud Project
+
+> 💡 You can skip this step if you already have a Google Cloud project you want to use.
+
+- Create a new Google Cloud project if you don’t already have a project you want to use.
+
+## Configure OAuth consent screen
+
+- Search for **OAuth consent screen** in the top search bar in the Google Cloud Console.
+- Click on **OAuth consent screen** in the search results.
+- Select User Type **External** and click **CREATE**.
+
+## **Edit app registration**
+
+### OAuth consent screen
+
+- Fill in your App information.
+- Click **SAVE AND CONTINUE.**
+
+### Scopes
+
+- Click **SAVE AND CONTINUE**.
+
+### Test user
+
+- Click **SAVE AND CONTINUE**.
+
+### Summary
+
+- Click **BACK TO DASHBOARD**.
+
+## Create credentials
+
+- Click on **Credentials** under **APIs & Services** in the left menu.
+- Click **+ CREATE CREDENTIALS** and then **OAuth client ID** in the top menu.
+- On the **Create OAuth client ID** page for **Application Type** select **Web application**.
+- Under **Authorized redirect URIs** add your **OAuth Callback URL** from Nhost.
+- Click **CREATE**.
+
+## Configure Nhost
+
+- A modal appears with your Google Client ID and Client secret.
+- Copy and paste the **Client ID** and **Client Secret** from Google to your Nhost OAuth settings for Google. Make sure the [OAuth provider is enabled in Nhost](/platform/authentication/social-sign-in#enabling-social-sign-in).
+- Click the checkbox “**I have pasted the redirect URI into Google”**.
+- Click **Confirm settings**.
+
+## Sign In users in your app
+
+Use the [Nhost JavaScript client](/reference/sdk) to sign in users in your app:
+
+```js
+nhost.auth.signIn({
+  provider: 'google'
+})
+```

docs/content/docs/platform/authentication/sign-in-with-linkedin.mdx

@@ -0,0 +1,50 @@
+---
+title: Sign In with LinkedIn
+---
+
+Follow this guide to sign in users with LinkedIn with your Nhost App.
+
+![LinkedIn Sign In Preview](/images/platform/social-providers/linkedin-preview.png)
+
+## Create LinkedIn account
+
+- Create a [LinkedIn account](https://linkedin.com/) if you don't have one already.
+
+## Create LinkedIn OAuth App
+
+- Go to the [LinkedIn Developer Dashboard](https://www.linkedin.com/developers/apps).
+- Click on Create App in the top right.
+- Fill in **App Name**, **LinkedIn Page** and **App Logo**.
+- Click **“I have read and agree to these terms”**.
+- Click **Create app** in the bottom right.
+
+## LinkedIn OAuth App information
+
+- Click on **Auth** in the top menu.
+- Click on the **pen icon** under **OAuth 2.0 settings** and right next to **Authorized redirect URLs for your app.**
+- Click **Add redirect URL**.
+- Copy and past the **OAuth Callback URL** from Nhost.
+- Click **Update**.
+
+## Configure Nhost
+
+- Copy and paste the **Client ID** and **Client Secret** from LinkedIn to your Nhost OAuth settings for LinkedIn.
+- Click the checkbox “**I have pasted the redirect URI into LinkedIn”**.
+- Click **Confirm settings**.
+
+## Enable Auth for your LinkedIn OAuth App
+
+- Click on **Products** in the top menu
+- Click Select on the **Sign In with LinkedIn**.
+- Check the checkbox **I have read and agree to these terms.**
+- Click **Add product**.
+
+## Sign In users in your app
+
+Use the [Nhost JavaScript client](/reference/sdk) to sign in users in your app:
+
+```js
+nhost.auth.signIn({
+  provider: 'linkedin'
+})
+```

docs/content/docs/platform/authentication/sign-in-with-spotify.mdx

@@ -0,0 +1,43 @@
+---
+title: Sign In with Spotify
+---
+
+Follow this guide to sign in users with Spotify with your Nhost App.
+
+![Spotify Sign In Preview](/images/platform/social-providers/spotify-preview.png)
+
+# Create Spotify account
+
+- Create a new [Spotify account](https://www.spotify.com/) if you don't have one already.
+
+## Create Spotify App
+
+- Go to the [Spotify Developer Dashboard](https://developer.spotify.com/dashboard/).
+- Click on CREATE AN APP.
+- Fill in a App name and App description
+- Check the box to aggre Spotify's [Developer Terms of Service](https://developer.spotify.com/terms) and [Branding Guidelines](https://developer.spotify.com/branding-guidelines).
+
+## Configure OAuth Callback URL
+
+- Click EDIT SETTINGS
+- A modal appears
+- Fill in **Redirect URIs** with your **OAuth Callback URL** from Nhost.
+- Click ADD to add the OAuth callback URL.
+- Click SAVE.
+
+## Configure Nhost
+
+- Click SHOW CLIENT SECRET in the Spotify App Dashboard.
+- Copy and paste the **Client ID** and **Client Secret** from Spotify to your Nhost OAuth settings for Spotify.
+- Click the checkbox “**I have pasted the redirect URI into Spotify”**.
+- Click **Confirm settings**.
+
+## Sign In users in your app
+
+Use the [Nhost JavaScript client](/reference/sdk) to sign in users in your app:
+
+```js
+nhost.auth.signIn({
+  provider: 'spotify'
+})
+```

docs/content/docs/platform/authentication/social-login.mdx

@@ -1,38 +0,0 @@
----
-title: 'Social login'
----
-
-Nhost Auth supports the following social login providers:
-
-- GitHub
-- Google
-- Facebook
-- LinkedIn
-
----
-
-## Enabling social login
-
-To start with social login, select your app in Nhost Console and go to **Users** → **Login settings**.
-
-Enabling any of the supported login providers requires a developer account for the selected login provider. Follow the on-screen instructions to enable the login method of your choosing.
-
----
-
-## Implementing login experience
-
-To implement social login in your app, use the [Nhost JavaScript SDK](/reference/sdk) and the `signIn()` method:
-
-```js
-nhost.auth.signIn({
-  provider: 'github'
-})
-```
-
----
-
-## OAuth scopes
-
-Scopes are a mechanism in OAuth to allow or limit an application's access to a user's account.
-
-By default, Nhost sets the scope to get the name, email and avatar for each user. Editing scope is not currently supported.

docs/content/docs/platform/authentication/social-sign-in.mdx

@@ -0,0 +1,47 @@
+---
+title: 'Social Sign-In Providers'
+---
+
+Nhost Auth supports the following social sign-in providers:
+
+- [GitHub](/platform/authentication/sign-in-with-github)
+- [Google](/platform/authentication/sign-in-with-google)
+- [Facebook](/platform/authentication/sign-in-with-facebook)
+- [LinkedIn](/platform/authentication/sign-in-with-linkedin)
+- [Spotify](/platform/authentication/sign-in-with-spotify)
+
+---
+
+## Enabling Social Sign-In Provider
+
+To start with social sign-in, select your app in Nhost Console and go to **Users** → **Login settings**.
+
+You need to set client ID and client secret for each provider that you want to enable.
+
+---
+
+## Implementing sign-in experience
+
+Use the [Nhost JavaScript SDK](/reference/sdk) and the `signIn()` method to implement social sign-in in your app,
+
+Here's an example of how to implement sign-in with GitHub:
+
+```js
+nhost.auth.signIn({
+  provider: 'github'
+})
+```
+
+Users are redirected to your Nhost app's **client URL** by default. By default your Nhost app's client URL is set to `http://localhost:3000`. You can change the value of your client URL in the Nhost console by going to **Users** → **Login settings** → **Client URL**.
+
+---
+
+## Provider OAuth scopes
+
+Scopes are a mechanism in OAuth to allow or limit an application's access to a user's account.
+
+By default, Nhost sets the scope to get the name, email and avatar for each user. Editing scope is not currently supported.
+
+## Provider OAuth Tokens
+
+Nhost saves both access and refresh tokens for each user and provider in the `auth.user_providers` table. These tokens can be used to interact with the provider if needed.

docs/content/docs/platform/authentication/user-management.mdx

@@ -24,7 +24,7 @@ Example of getting one user in GraphQL:
 
 ```graphql
 query {
-  user(id: "some-user-id") {
+  user(id: "<user-id>") {
     id
     displayName
     email

docs/content/docs/platform/database/permissions.mdx

@@ -20,6 +20,8 @@ Access token data is included as headers with every API request. By default, eve
 
 The default role for users is `user`.
 
+> You can also [add custom permission](#add-permission-variables) varaibles if you need to.
+
 ---
 
 ## Select permissions
@@ -60,3 +62,23 @@ In our example, we only select `name`, because we want all other other columns t
 We also want every new record's `user_id` value to be set to the ID of the user making the request. We can tell Hasura to do this with **column presets**.
 
 1. Under column presets, set `user_id` to `x-hasura-user-id`.
+
+## Add Permission Variables
+
+You can add extra permission variables in the Nhost console under **Users** and then **Roles and permissions**. These permission variables are then available when creating permissions for your GraphQL API in the Hasura console.
+
+![Permission Variables](/images/platform/permission-variables-preview.svg)
+
+As an example, let's say you add a new permission variable `x-hasura-organisation-id` with path `user.profile.organisation.id`. This means that Nhost Auth will get the value for `x-hasura-organisation-id` by internally generating the following GraphQL query:
+
+```graphql
+query {
+  user(id: "<user-id>") {
+    profile {
+      organisation {
+        id
+      }
+    }
+  }
+}
+```

docs/content/docs/platform/index.mdx

@@ -16,6 +16,7 @@ This section:
 - [User management](/platform/authentication/user-management)
 - [Sign-in methods](/platform/authentication/sign-in-methods)
 - [Social login](/platform/authentication/social-login)
+- [Email templates](/platform/authentication/email-templates)
 
 ### Storage
 

docs/content/docs/platform/serverless-functions/index.mdx

@@ -39,10 +39,10 @@ HTTP endpoints are automatically generated based on the file structure under `fu
 As such, given this file structure:
 
 ```js
-functions / index.js
-users / index.ts
-active.ts
-my - company.js
+functions/index.js
+functions/users/index.ts
+functions/active.ts
+functions/my-company.js
 ```
 
 The following endpoints will be available:

docs/content/docs/reference/hasura-auth/api-reference.mdx

@@ -0,0 +1,6 @@
+---
+title: 'API Reference'
+subtitle: 'Hasura Auth'
+---
+
+<Swagger spec="hasura-auth.json" />

docs/content/docs/reference/hasura-auth/configuration.mdx

@@ -0,0 +1,221 @@
+---
+title: Configuration
+---
+
+## Email configuration
+
+Hasura Auth automatically sends transactional emails to manage the following operations:
+
+- Sign up
+- Password reset
+- Email change
+- Passwordless with emails
+
+### SMTP settings
+
+```bash
+AUTH_SMTP_HOST=smtp.example.com
+AUTH_SMTP_PORT=1025
+AUTH_SMTP_USER=user
+AUTH_SMTP_PASS=password
+AUTH_SMTP_SENDER=hasura-auth@example.com
+```
+
+See the [environment variables](/reference/hasura-auth/environment-variables) for additional information about how to connnect to an SMTP server.
+
+### Email templates
+
+You can create your own templates to customize the emails that will be sent to the users. You can have a look at the [official email templates](https://github.com/nhost/hasura-auth/tree/main/email-templates) to understand how they are structured.
+
+#### With Docker
+
+When using Docker, you can mount your own email templates from the local file system. You can have a look at this [docker-compose example](https://github.com/nhost/hasura-auth/blob/16df3e84b6c9a4f888b2ff07bd85afc34f8ed051/docker-compose-example.yaml#L41) to see how to set it up.
+
+#### Remote email templates
+
+When running Hasura Auth in its own infrastructure, it is possible to mount a volume with custom `email-templates` directory. However, in some cases, we may want to fetch templates from an external HTTP endpoint. Hence the introduction of a new `AUTH_EMAIL_TEMPLATE_FETCH_URL` environment variable:
+
+```bash
+AUTH_EMAIL_TEMPLATE_FETCH_URL=https://github.com/nhost/nhost/tree/custom-email-templates-example/examples/custom-email-templates
+```
+
+In the above example, on every email creation, the server will use this URL to fetch its templates, depending on the locale, email type and field.
+
+For instance, the template for english verification email body will the fetched in [https://raw.githubusercontent.com/nhost/nhost/main/examples/custom-email-templates/en/email-verify/body.html](https://raw.githubusercontent.com/nhost/nhost/main/examples/custom-email-templates/en/email-verify/body.html).
+
+See the [example in the main nhost/nhost repository](https://github.com/nhost/nhost/tree/main/examples/custom-email-templates).
+
+The context variables in email templates have been simplified: the `${link}` variable contains the entire redirection url the recipient needs to follow.
+
+---
+
+## Redirections
+
+Some authentication operations redirects the users to the frontend application:
+
+- After an OAuth provider completes or fails authentication, the user is redirected to the frontend
+- Every email sent to the user (passwordless with email, password/email change, password reset) contains a link, that redirects the user to the frontend
+
+In order to achieve that, you need to set the `AUTH_CLIENT_URL` environment variable, for instance:
+
+```bash
+AUTH_CLIENT_URL=https://my-app.vercel.com
+```
+
+---
+
+## Email + password authentication
+
+### Email checks
+
+You can specify a list of allowed emails or domains with `AUTH_ACCESS_CONTROL_ALLOWED_EMAILS` and `AUTH_ACCESS_CONTROL_ALLOWED_EMAIL_DOMAINS`.
+
+As an example, the following environment variables will only allow `@nhost.io`, `@example.com` and `bob@smith.com` to register to the application:
+
+```bash
+AUTH_ACCESS_CONTROL_ALLOWED_EMAILS=bob@smith.com
+AUTH_ACCESS_CONTROL_ALLOWED_EMAIL_DOMAINS=nhost.io,example.com
+```
+
+In the above example, users with the following emails would be able to register `bob@smith.com`, `emma@example.com`, `john@nhost.io`, whereas `mary@firebase.com` won't.
+
+Similarly, it is possible to provide a list of forbidden emails or domains with `AUTH_ACCESS_CONTROL_BLOCKED_EMAILS` and `AUTH_ACCESS_CONTROL_BLOCKED_EMAIL_DOMAINS`.
+
+### Password checks
+
+Hasura auth does not accepts passwords with less than three characters. This limit can be changed in changing the `AUTH_PASSWORD_MIN_LENGTH` environment variable.
+
+It is also possible to only allow [passwords that have not been pwned](https://haveibeenpwned.com/) in setting `AUTH_PASSWORD_HIBP_ENABLED` to `true`.
+
+<!-- TODO ### Change -->
+<!-- TODO ### Reset email -->
+
+<!-- TODO ### Reset password -->
+
+<!-- ---
+TODO ## Anonymous users -->
+
+---
+
+## Multi-factor authentication
+
+Hasura Auth supports different types of Multi-Factor Authentication (MFA): passwordless with emails (magic links), passwordless with SMS, and Time-based one-time passwords.
+
+### Passwordless with emails (magic links)
+
+Hasura Auth supports email [passwordless authentication](https://en.wikipedia.org/wiki/Passwordless_authentication). It requires [SMTP](#email-configuration) to be configured properly.
+
+Set `AUTH_EMAIL_PASSWORDLESS_ENABLED` to `true` to enable passwordless authentication.
+
+<!-- TODO ### Passwordless with SMS -->
+
+### Time-based one-time password (TOTP)
+
+It is possible to add a step to authentication with email and password authentication. Once users registered, they can activate MFA TOTP:
+
+1. Users generate a QR Code, that is then scanned in an authentication app such as [Authy](https://authy.com/) or [Google Authenticator](https://en.wikipedia.org/wiki/Google_Authenticator).
+2. They then send the TOTP code to Hasura Auth. MFA is now activated
+3. Next time they authenticate, Hasura Auth will first expect their email and password, but then, instead of completing authentication, Hasura Auth will expect the TOTP in order to return the refresh and the access tokens.
+
+In order for users to be able to activate MFA TOTP, `AUTH_MFA_ENABLED` must be set to `true`.
+
+<!-- ---
+
+TODO ## OAuth authentication -->
+
+---
+
+## Gravatar
+
+Hasura Auth stores the avatar URL of users in `auth.users.avatar_url`. By default, it will look for the Gravatar linked to the email, and store it into this field.
+It is possible to deactivate the use of Gravatar in setting the `AUTH_GRAVATAR_ENABLED` environment variable to `false`.
+
+---
+
+## Extending user schema
+
+Adding columns to the user tables may be tempting. However, all the tables and columns have a specific purpose, and changing the structure of the `auth` schema will very likely end in breaking the functionning of Hasura Auth. It's, therefore, **highly recommended** not to modify the database schema for any tables in the `auth` schema.
+
+Instead, we recommend adding extra user information in the following ways:
+
+- to store information in the `auth.users.metadata` column
+- to store information in a separate table located in the `public` PostgreSQL schema, and to point to `auth.users.id` through a foreign key.
+
+### `metadata` user field
+
+The `auth.users.metadata` field is a JSON column, that can be used as an option on registration:
+
+```json
+{
+  "email": "bob@bob.com",
+  "passord": "12345678",
+  "options": {
+    "metadata": {
+      "first_name": "Bob"
+    }
+  }
+}
+```
+
+### Additional user information in the `public` schema
+
+As previously explained, the alteration of the `auth` schema may seriously hamper the functionning of Hasura Auth. The `metadata` field in the `auth.users` table may tackle some use cases, but in some other cases, we want to keep a certain level of structure in the way data is structured.
+
+In that case, it is possible to create a dedicated table in the `public` schema, with a `user_id` foreign key column that would point to the `auth.users.id` column. It is then possible to add an Hasura object relationship that would join the two tables together.
+
+<!-- TODO hooks on the metadata field -->
+
+---
+
+## Custom Hasura JWT claims
+
+Hasura comes with a [powerful authorisation system](https://hasura.io/docs/latest/graphql/core/auth/authorization/index.html). Hasura Auth is already configured to add `x-hasura-user-id`, `x-hasura-allowed-roles`, and `x-hasura-user-isAnonymous` to the JSON Web Tokens it generates.
+
+In Hasura Auth, it is possible to define custom claims to add to the JWT, so they can be used by Hasura to determine the permissions of the received GraphQL operation.
+
+Each custom claim is defined by a pair of a key and a value:
+
+- The key determines the name of the claim, prefixed by `x-hasura`. For instance, `organisation-id` will become `x-hasura-organisation-id`.
+- The value is a representation of the path to look at to determine the value of the claim. For instance `profile.organisation.id` will look for the `user.profile` Hasura relationship, and the `profile.organisation` Hasura relationship. Array values are transformed into Postgres syntax so Hasura can interpret them. See the official Hasura documentation to understand the [session variables format](https://hasura.io/docs/latest/graphql/core/auth/authorization/roles-variables.html#format-of-session-variables).
+
+```bash
+AUTH_JWT_CUSTOM_CLAIMS={"organisation-id":"profile.organisation.id", "project-ids":"profile.contributesTo.project.id"}
+```
+
+Will automatically generate and fetch the following GraphQL query:
+
+```graphql
+{
+  user(id: "<user-id>") {
+    profile {
+      organisation {
+        id
+      }
+      contributesTo {
+        project {
+          id
+        }
+      }
+    }
+  }
+}
+```
+
+It will then use the same expressions e.g. `profile.contributesTo.project.id` to evaluate the result with [JSONata](https://jsonata.org/), and possibly transform arrays into Hasura-readable, PostgreSQL arrays.Finally, it adds the custom claims to the JWT in the `https://hasura.io/jwt/claims` namespace:
+
+```json
+{
+  "https://hasura.io/jwt/claims": {
+    "x-hasura-organisation-id": "8bdc4f57-7d64-4146-a663-6bcb05ea2ac1",
+    "x-hasura-project-ids": "{\"3af1b33f-fd0f-425e-92e2-0db09c8b2e29\",\"979cb94c-d873-4d5b-8ee0-74527428f58f\"}",
+    "x-hasura-allowed-roles": [ "me", "user" ],
+    "x-hasura-default-role": "user",
+    "x-hasura-user-id": "121bbea4-908e-4540-ac5d-52c7f6f93bec",
+    "x-hasura-user-isAnonymous": "false"
+  }
+  "sub": "f8776768-4bbd-46f8-bae1-3c40da4a89ff",
+  "iss": "hasura-auth",
+  "iat": 1643040189,
+  "exp": 1643041089
+}
+```

docs/content/docs/reference/hasura-auth/environment-variables.mdx

@@ -0,0 +1,107 @@
+---
+title: Environment Variables
+---
+
+## General environment variables
+
+| Name (a star**\*** means the variable is required) | Description                                                                                                                                                                                            | Default value                |
+| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- |
+| HASURA_GRAPHQL_JWT_SECRET**\***                    | Key used for generating JWTs. Must be `HMAC-SHA`-based and the same as configured in Hasura. [More info](https://hasura.io/docs/latest/graphql/core/auth/authentication/jwt.html#running-with-jwt)     |                              |
+| HASURA_GRAPHQL_DATABASE_URL**\***                  | [PostgreSQL connection URI](https://www.postgresql.org/docs/current/libpq-connect.html#LIBPQ-CONNSTRING). Required to inject the `auth` schema into the database.                                      |                              |
+| HASURA_GRAPHQL_GRAPHQL_URL**\***                   | Hasura GraphQL endpoint. Required to manipulate account data. For instance: `https://graphql-engine:8080/v1/graphql`                                                                                   |                              |
+| HASURA_GRAPHQL_ADMIN_SECRET**\***                  | Hasura GraphQL Admin Secret. Required to manipulate account data.                                                                                                                                      |                              |
+| AUTH_HOST                                          | Server host. [Docs](http://expressjs.com/en/5x/api.html#app.listen)                                                                                                                                    | `0.0.0.0`                    |
+| AUTH_PORT                                          | Server port. [Docs](http://expressjs.com/en/5x/api.html#app.listen)                                                                                                                                    | `4000`                       |
+| AUTH_SERVER_URL                                    | Server URL of where Hasura Backend Plus is running. This value is to used as a callback in email templates and for the OAuth authentication process.                                                   |                              |
+| AUTH_CLIENT_URL                                    | URL of your frontend application. Used to redirect users to the right page once actions based on emails or OAuth succeed.                                                                              |                              |
+| AUTH_SMTP_HOST                                     | SMTP server hostname used for sending emails                                                                                                                                                           |                              |
+| AUTH_SMTP_PORT                                     | SMTP port                                                                                                                                                                                              | `587`                        |
+| AUTH_SMTP_USER                                     | Username to use to authenticate on the SMTP server                                                                                                                                                     |                              |
+| AUTH_SMTP_PASS                                     | Password to use to authenticate on the SMTP server                                                                                                                                                     |                              |
+| AUTH_SMTP_SENDER                                   | Email to use in the `From` field of the email                                                                                                                                                          |                              |
+| AUTH_SMTP_AUTH_METHOD                              | SMTP authentication method                                                                                                                                                                             | `PLAIN`                      |
+| AUTH_SMTP_SECURE                                   | Enables SSL. [More info](https://nodemailer.com/smtp/#tls-options).                                                                                                                                    | `false`                      |
+| AUTH_GRAVATAR_ENABLED                              |                                                                                                                                                                                                        | `true`                       |
+| AUTH_GRAVATAR_DEFAULT                              |                                                                                                                                                                                                        | `blank`                      |
+| AUTH_GRAVATAR_RATING                               |                                                                                                                                                                                                        | `g`                          |
+| AUTH_ANONYMOUS_USERS_ENABLED                       | Enables users to register as an anonymous user.                                                                                                                                                        | `false`                      |
+| AUTH_DISABLE_NEW_USERS                             | If set, new users will be disabled after finishing registration and won't be able to connect.                                                                                                          | `false`                      |
+| AUTH_ACCESS_CONTROL_ALLOWED_EMAILS                 | Comma-separated list of emails that are allowed to register.                                                                                                                                           |                              |
+| AUTH_ACCESS_CONTROL_ALLOWED_EMAIL_DOMAINS          | Comma-separated list of email domains that are allowed to register. If `ALLOWED_EMAIL_DOMAINS` is `tesla.com,ikea.se`, only emails from tesla.com and ikea.se would be allowed to register an account. | `` (allow all email domains) |
+| AUTH_ACCESS_CONTROL_BLOCKED_EMAILS                 | Comma-separated list of emails that cannot register.                                                                                                                                                   |                              |
+| AUTH_ACCESS_CONTROL_BLOCKED_EMAIL_DOMAINS          | Comma-separated list of email domains that cannot register.                                                                                                                                            |                              |
+| AUTH_PASSWORD_MIN_LENGTH                           | Minimum password length.                                                                                                                                                                               | `3`                          |
+| AUTH_PASSWORD_HIBP_ENABLED                         | User's password is checked against [Pwned Passwords](https://haveibeenpwned.com/Passwords).                                                                                                            | `false`                      |
+| AUTH_USER_DEFAULT_ROLE                             | Default user role for registered users.                                                                                                                                                                | `user`                       |
+| AUTH_USER_DEFAULT_ALLOWED_ROLES                    | Comma-separated list of default allowed user roles.                                                                                                                                                    | `me,$AUTH_USER_DEFAULT_ROLE` |
+| AUTH_LOCALE_DEFAULT                                |                                                                                                                                                                                                        | `en`                         |
+| AUTH_LOCALE_ALLOWED_LOCALES                        |                                                                                                                                                                                                        | `en`                         |
+| AUTH_EMAIL_PASSWORDLESS_ENABLED                    | Enables passwordless authentication by email. The SMTP server must then be configured.                                                                                                                 | `false`                      |
+| AUTH_SMS_PASSWORDLESS_ENABLED                      | Enables passwordless authentication by SMS. An SMS provider must then be configured.                                                                                                                   | `false`                      |
+| AUTH_SMS_PROVIDER                                  | SMS provider name. Only `twilio` is possible as an option for now.                                                                                                                                     |                              |
+| AUTH_SMS_TWILIO_ACCOUNT_SID                        |                                                                                                                                                                                                        |                              |
+| AUTH_SMS_TWILIO_AUTH_TOKEN                         |                                                                                                                                                                                                        |                              |
+| AUTH_SMS_TWILIO_MESSAGING_SERVICE_ID               |                                                                                                                                                                                                        |                              |
+| AUTH_SMS_TWILIO_FROM                               |                                                                                                                                                                                                        |                              |
+| AUTH_EMAIL_SIGNIN_EMAIL_VERIFIED_REQUIRED          | When enabled, any email-based authentication requires emails to be verified by a link sent to this email.                                                                                              | `true`                       |
+| AUTH_ACCESS_CONTROL_ALLOWED_REDIRECT_URLS          |                                                                                                                                                                                                        |                              |
+| AUTH_MFA_ENABLED                                   | Enables users to use Multi Factor Authentication                                                                                                                                                       | `false`                      |
+| AUTH_MFA_TOTP_ISSUER                               | The name of the One Time Password (OTP) issuer. Probably your app's name.                                                                                                                              | `hasura-auth`                |
+| AUTH_ACCESS_TOKEN_EXPIRES_IN                       |                                                                                                                                                                                                        | `900`(15 minutes)            |
+| AUTH_REFRESH_TOKEN_EXPIRES_IN                      |                                                                                                                                                                                                        | `43200` (12 hours)           |
+| AUTH_EMAIL_TEMPLATE_FETCH_URL                      |                                                                                                                                                                                                        |                              |
+| AUTH_JWT_CUSTOM_CLAIMS                             |                                                                                                                                                                                                        |                              |
+
+## OAuth environment variables
+
+| Name (a star**\*** means the variable is required when the provider is enabled) | Default value                       |
+| ------------------------------------------------------------------------------- | ----------------------------------- |
+| AUTH_PROVIDER_GITHUB_ENABLED                                                    | `false`                             |
+| AUTH_PROVIDER_GITHUB_CLIENT_ID**\***                                            |                                     |
+| AUTH_PROVIDER_GITHUB_CLIENT_SECRET**\***                                        |                                     |
+| AUTH_PROVIDER_GITHUB_AUTHORIZATION_URL                                          |                                     |
+| AUTH_PROVIDER_GITHUB_TOKEN_URL                                                  |                                     |
+| AUTH_PROVIDER_GITHUB_USER_PROFILE_URL                                           |                                     |
+| AUTH_PROVIDER_GITHUB_SCOPE                                                      | `user:email `                       |
+| AUTH_PROVIDER_GOOGLE_ENABLED                                                    | `false`                             |
+| AUTH_PROVIDER_GOOGLE_CLIENT_ID**\***                                            |                                     |
+| AUTH_PROVIDER_GOOGLE_CLIENT_SECRET**\***                                        |                                     |
+| AUTH_PROVIDER_GOOGLE_SCOPE                                                      | `email,profile`                     |
+| AUTH_PROVIDER_FACEBOOK_ENABLED                                                  | `false`                             |
+| AUTH_PROVIDER_FACEBOOK_CLIENT_ID**\***                                          |                                     |
+| AUTH_PROVIDER_FACEBOOK_CLIENT_SECRET**\***                                      |                                     |
+| AUTH_PROVIDER_FACEBOOK_PROFILE_FIELDS                                           | `email,photos,displayName`          |
+| AUTH_PROVIDER_FACEBOOK_SCOPE                                                    | `email`                             |
+| AUTH_PROVIDER_TWITTER_ENABLED                                                   | `false`                             |
+| AUTH_PROVIDER_TWITTER_CONSUMER_KEY**\***                                        |                                     |
+| AUTH_PROVIDER_TWITTER_CONSUMER_SECRET**\***                                     |                                     |
+| AUTH_PROVIDER_LINKEDIN_ENABLED                                                  |                                     |
+| AUTH_PROVIDER_LINKEDIN_CLIENT_ID**\***                                          |                                     |
+| AUTH_PROVIDER_LINKEDIN_CLIENT_SECRET**\***                                      |                                     |
+| AUTH_PROVIDER_LINKEDIN_SCOPE                                                    | `r_emailaddress,r_liteprofile`      |
+| AUTH_PROVIDER_APPLE_ENABLED                                                     | `false`                             |
+| AUTH_PROVIDER_APPLE_CLIENT_ID**\***                                             |                                     |
+| AUTH_PROVIDER_APPLE_TEAM_ID**\***                                               |                                     |
+| AUTH_PROVIDER_APPLE_KEY_ID**\***                                                |                                     |
+| AUTH_PROVIDER_APPLE_PRIVATE_KEY**\***                                           | Base64 format                       |
+| AUTH_PROVIDER_APPLE_SCOPE                                                       | `name,email`                        |
+| AUTH_PROVIDER_WINDOWS_LIVE_ENABLED                                              | `false`                             |
+| AUTH_PROVIDER_WINDOWS_LIVE_CLIENT_ID**\***                                      |                                     |
+| AUTH_PROVIDER_WINDOWS_LIVE_CLIENT_SECRET**\***                                  |                                     |
+| AUTH_PROVIDER_WINDOWS_LIVE_SCOPE                                                | `wl.basic,wl.emails`                |
+| AUTH_PROVIDER_SPOTIFY_ENABLED                                                   | `false`                             |
+| AUTH_PROVIDER_SPOTIFY_CLIENT_ID**\***                                           |                                     |
+| AUTH_PROVIDER_SPOTIFY_CLIENT_SECRET**\***                                       |                                     |
+| AUTH_PROVIDER_SPOTIFY_SCOPE                                                     | `user-read-email,user-read-private` |
+| AUTH_PROVIDER_GITLAB_ENABLED                                                    | `false`                             |
+| AUTH_PROVIDER_GITLAB_CLIENT_ID**\***                                            |                                     |
+| AUTH_PROVIDER_GITLAB_CLIENT_SECRET**\***                                        |                                     |
+| AUTH_PROVIDER_GITLAB_BASE_URL                                                   |                                     |
+| AUTH_PROVIDER_GITLAB_SCOPE                                                      | `read_user`                         |
+| AUTH_PROVIDER_BITBUCKET_ENABLED                                                 | `false`                             |
+| AUTH_PROVIDER_BITBUCKET_CLIENT_ID**\***                                         |                                     |
+| AUTH_PROVIDER_BITBUCKET_CLIENT_SECRET**\***                                     |                                     |
+| AUTH_PROVIDER_STRAVA_ENABLED                                                    | `false`                             |
+| AUTH_PROVIDER_STRAVA_CLIENT_ID**\***                                            |                                     |
+| AUTH_PROVIDER_STRAVA_CLIENT_SECRET**\***                                        |                                     |
+| AUTH_PROVIDER_STRAVA_SCOPE                                                      | `profile:read_all`                  |

docs/content/docs/reference/hasura-auth/index.mdx

@@ -0,0 +1,41 @@
+---
+title: 'Overview'
+---
+
+Hasura Auth handles **authentication** for [Hasura](https://github.com/hasura/graphql-engine).
+
+Hasura Auth runs in a separate Docker container alongside Postgres and Hasura.
+
+## Features
+
+- 🧑‍🤝‍🧑 Users are stored in Postgres and accessed via GraphQL
+- 🔑 Multiple sign-in methods
+- ✨ Integrates with GraphQL and Hasura Permissions
+- 🔐 JWT tokens and Refresh Tokens.
+- ✉️ Emails sent on various operations
+<!-- - ✅ Optional checking for Pwned Passwords. -->
+- 🛡️ Two-factor authentication support.
+- 👨‍💻 Written 100% in TypeScript.
+
+### Authentication methods
+
+- **Email and Password**: simple email and password method.
+- **Email**, also called **passwordless email** or **magic link**.
+- **SMS**, also called **passwordless sms**.
+- **Anonymous**: sign in users without any method. Anonymous users can be
+  converted to _regular_ users at a later stage.
+- **OAuth providers**: Facebook, Google, GitHub, Twitter, Apple, LinkedIn, Windows Live, Spotify, Strave, GitLab, BitBucket
+
+## Integration with Hasura
+
+Hasura Auth's final purpose is to securely provide a JSON Web Token that can be added as an authorization header to GraphQL operation sent to Hasura.
+Hasura auth automatically generates and manages two kinds of tokens:
+
+- An access token (JWT), that will be used to authenticate the GraphQL operations in Hasura, and that has a limited expiration limit (15 minutes by default)
+- A refresh token, that is used to ask Hasura Auth for a new access token, and that can be consummed only once.
+
+Access tokens generated by Hasura Auth contains information and user id, its default role, and the roles they actually have. In addition, it is possible since version `0.2.0` to extend JWT claims with custom information such as organisation or project ownership, so your application can leverage the capabilities of the [Hasura permissions layer](https://hasura.io/docs/latest/graphql/core/auth/authorization/index.html).
+
+<!-- - Users and accounts are saved in the database. -->
+
+You can read further information about JWT and Hasura in the [official Hasura documentation](https://hasura.io/docs/latest/graphql/core/auth/authentication/jwt.html).

docs/content/docs/reference/hasura-auth/installation.mdx

@@ -0,0 +1,24 @@
+---
+title: Installation
+---
+
+Hasura Auth runs in a container alongside Postgres and Hasura.
+
+## Nhost (recommended)
+
+The recommended way to start using Hasura Auth is by using Nhost. With Nhost, you will get a complete backend ready in seconds with Hasura, authentication, storage and serverless functions.
+
+Go to [Nhost](https://nhost.io) and start building your app now.
+
+## Docker-compose
+
+```sh
+git clone https://github.com/nhost/hasura-auth.git
+cd hasura-auth
+cp .env.example .env
+docker-compose -f docker-compose-example.yaml up
+```
+
+Hasura Auth comes with plenty of options. They are explained in the [configuration section](/reference/hasura-auth/configuration).
+
+If you are already familiar with the application, you can also have a look at the [environment variables](/reference/hasura-auth/environment-variables) that can be passed on to your docker container.

docs/content/docs/reference/hasura-auth/schema.mdx

@@ -0,0 +1,85 @@
+---
+title: 'Schema'
+---
+
+Hasura Auth stores all its data in a dedicated `auth` PostgreSQL schema. When Hasura Auth starts, it checks if the `auth` schema exists, then automatically syncs the following tables and their corresponding Hasura metadata:
+
+```mermaid
+erDiagram
+migrations {
+    integer id PK
+    varchar name
+    varchar hash
+    timestamp executed_at "CURRENT_TIMESTAMP"
+}
+
+users ||--o{ user_roles : roles
+user_roles }o--|| roles: role
+users }o--|| roles: role
+users ||--o{ refresh_tokens: refreshTokens
+users ||--o{ user_providers: provider
+providers ||--o{ user_providers: user
+
+provider_requests {
+    uuid id PK "gen_random_uuid()"
+    test redirect_url
+}
+
+
+refresh_tokens {
+    uuid refresh_token PK
+    uuid user_id FK
+    timestamptz created_at "now()"
+    timestamptz expires_at
+}
+
+providers {
+    text id PK
+}
+user_providers {
+    uuid id PK "gen_random_uuid()"
+    timestamptz created_at "now()"
+    timestamptz updated_at "now()"
+    uuid user_id FK
+    text access_token
+    text refresh_token
+    text provider_id FK
+    text provider_user_id
+}
+user_roles {
+    uuid id PK "gen_random_uuid()"
+    timestamptz created_at "now()"
+    uuid user_id FK
+    text role FK
+}
+users {
+    uuid id PK "gen_random_uuid()"
+    timestamptz created_at "now()"
+    timestamptz updated_at "now()"
+    timestamptz last_seen "nullable"
+    boolean disabled "false"
+    text display_name "''"
+    text avatar_url "''"
+    varchar locale
+    email email "nullable"
+    text phone_number "nullable"
+    text password_hash "nullable"
+    boolean email_verified "false"
+    boolean phone_number_verified "false"
+    email new_email "nullable"
+    text otp_method_last_used "nullable"
+    text otp_hash "nullable"
+    timestamptz opt_hash_expires_at "now()"
+    text default_role FK "user"
+    boolean is_anonymous "false"
+    text totp_secret "nullable"
+    text active_mfa_type "nullable"
+    text ticket "nullable"
+    timestamptz ticket_expires_at "now()"
+    jsonb metadata "nullable"
+}
+
+roles {
+    text roles PK
+}
+```

docs/content/docs/reference/index.mdx

@@ -12,11 +12,27 @@ In this section:
 - [Storage](/reference/sdk/storage)
 - [Functions](/reference/sdk/functions)
 
+### React
+
+- [Getting started](./reference/react)
+- [Hooks](./reference/react/hooks)
+- [Protecting routes](./reference/react/protecting-routes)
+- [Apollo GraphQL](./reference/react/apollo)
+
+### Next.js
+
+- [Introduction](./reference/nextjs)
+- [Configuration](./reference/nextjs/configuration)
+- [Protecting routes](./reference/nextjs/protecting-routes)
+
 ### Nhost CLI
 
 - [CLI overview](/reference/cli)
+### Hasura Auth
 
-### Supporting libraries
-
-- [@nhost/react-auth](/reference/supporting-libraries/react-auth)
-- [@nhost/react-apollo](/reference/supporting-libraries/react-apollo)
+- [Overview](./reference/hasura-auth)
+- [Installation](./reference/hasura-auth/installation)
+- [Configuration](./reference/hasura-auth/configuration)
+- [Environment variables](./reference/hasura-auth/environment-variables)
+- [API](./reference/hasura-auth/api-reference)
+- [Schema](./reference/hasura-auth/api-reference)

docs/content/docs/reference/nextjs/configuration.mdx

@@ -0,0 +1,121 @@
+---
+title: 'Configuration'
+---
+
+## Installation
+
+With yarn:
+
+```sh
+yarn add @nhost/react @nhost/nextjs
+```
+
+With Npm:
+
+```sh
+npm install @nhost/react @nhost/nextjs
+```
+
+---
+
+## Configuration
+
+Configuring Nhost with Next.js follows the same logic as React, except we are initializing with the `NhostClient` from the `@nhost/nextjs` package.
+Under the hood, `NhostClient` uses cookies to store the refresh token, and disables auto-refresh and auto-login when running on the server-side.
+
+```jsx
+// {project-root}/pages/_app.tsx
+import type { AppProps } from 'next/app'
+
+import { NhostClient, NhostNextProvider } from '@nhost/nextjs'
+
+import Header from '../components/Header'
+
+const nhost = new NhostClient({ backendUrl: 'my-app.nhost.run' })
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <NhostNextProvider nhost={nhost} initial={pageProps.nhostSession}>
+      <div>
+        <Header />
+        <Component {...pageProps} />
+      </div>
+    </NhostNextProvider>
+  )
+}
+
+export default MyApp
+```
+
+---
+
+## Client-side rendering
+
+The logic is the same as in a classic React application:
+
+```jsx
+// {project-root}/pages/csr-page.tsx
+import { NextPageContext } from 'next'
+import React from 'react'
+
+import { useAccessToken, useAuthenticated, useUserData } from '@nhost/nextjs'
+
+const ClientSidePage: React.FC = () => {
+  const isAuthenticated = useAuthenticated()
+  const user = useUserData()
+  const accessToken = useAccessToken()
+  if (!isAuthenticated) return <div>User it not authenticated</div>
+  return (
+    <div>
+      <h1>{user?.displayName} is authenticated</h1>
+      <div>Access token: {accessToken}</div>
+    </div>
+  )
+}
+
+export default ClientSidePage
+```
+
+---
+
+## Server-side rendering
+
+You need to load the session from the server first from `getServerSideProps`. Once it is done, the `_app` component will make sure to load or update the session through `pageProps`.
+
+```jsx
+// {project-root}/pages/ssr-page.tsx
+import { NextPageContext } from 'next'
+import React from 'react'
+
+import {
+  getNhostSession,
+  NhostSession,
+  useAccessToken,
+  useAuthenticated,
+  useUserData
+} from '@nhost/nextjs'
+
+export async function getServerSideProps(context: NextPageContext) {
+  const nhostSession = await getNhostSession('my-app.nhost.run', context)
+  return {
+    props: {
+      nhostSession
+    }
+  }
+}
+
+const ServerSidePage: React.FC<{ initial: NhostSession }> = () => {
+  const authenticated = useAuthenticated()
+  const user = useUserData()
+  const accessToken = useAccessToken()
+  if (!authenticated) return <div>User it not authenticated</div>
+  return (
+    <div>
+      <h1>{user?.displayName} is authenticated</h1>
+      <div>Access token: {accessToken}</div>
+    </div>
+  )
+}
+
+export default ServerSidePage
+```

docs/content/docs/reference/nextjs/index.mdx

@@ -0,0 +1,116 @@
+---
+title: 'Introduction'
+---
+
+All the React hooks and helpers from [`@nhost/react`](/reference/react) are available in Next.js and are exported in the `@nhost/nextjs` package.
+
+When rendering a page from the server-side, Next.js needs to get some information from the client to determine their authentication status. Such communication is only available from cookies, and the Nhost client is designed to enable such a mechanism.
+
+The cookie is `same-site` and is used only to store the refresh cookie and the expiration date of the JWT so the browser can proactively ask for a new JWT before it expires.
+
+## Signing in
+
+There is no need to activate SSR on the sign-in page as there is no session information to capture. As a result, it is recommended to code it as a classic static page.
+
+The initial authentication would then work like this diagram:
+
+```mermaid
+sequenceDiagram
+    participant browser as Browser
+    participant next as Next.js
+    participant auth as Hasura Auth
+    browser->>auth: Authenticate
+    activate browser
+    activate auth
+    auth-->>browser: New refresh token + JWT + user data
+    deactivate auth
+    browser->>browser: Set the new refresh token in the cookie
+    deactivate browser
+```
+
+## Refreshing the JWT token
+
+For security considerations, the Nhost JS tools never persist the JWT anywhere in the browser either in `localStorage` or in a cookie, and the JWT expires regularly (15 minutes by default). As a result, the Nhost client regularly calls the `hasura-auth` service to get a new JWT from a valid refresh token. The new JWT is emitted together with a new refresh token, while the old one is invalidated.
+As a result, it is important to ensure both the browser and the Next.js will always use the last refresh token, as it will be the only one that is still valid.
+The above diagram illustrates how a JWT is renewed, while making sure the refresh token is updated:
+
+```mermaid
+sequenceDiagram
+    participant browser as Browser
+    participant next as Next.js
+    participant auth as Hasura Auth
+    browser->>auth: Initial refresh token
+    activate auth
+    activate browser
+    auth-->>browser: New refresh token + JWT + user data
+    deactivate auth
+    browser->>browser: Set the new refresh token in the cookie
+    deactivate browser
+```
+
+## Loading a SSR page
+
+When Nhost is activated on a specific page, the Next.js server will first check the refresh token in the cookie. If it is present, it will call the `hasura-auth` service to refresh the JWT, user data and the new refresh cookie.
+It then:
+
+- sets the new refresh cookie in the response headers
+- hydrates the page with user data and JWT
+- renders the page on the server side. At this stage, an authenticated GraphQL call can be done on the server-side as a valid JWT is available
+
+Once the SSR page is loaded, it is still possible to refetch data from Hasura as the JWT will then be available in the browser, and kept up to date as explained in the above diagram.
+
+```mermaid
+sequenceDiagram
+    participant browser as Browser
+    participant next as Next.js
+    participant auth as Hasura Auth
+    participant hasura as Hasura
+    browser->>next: Request SSR page (refresh token in cookie)
+    activate browser
+    activate next
+    next->>auth: Refresh token
+    activate auth
+    auth-->>next: New refresh token + JWT + user data
+    deactivate auth
+    next->>next: Set the new refresh token in the cookie
+    next->>next: getServerSideProps - Hydrate JWT + user data
+    next->>hasura: GraphQL operation with JWT
+    activate hasura
+    hasura-->>next: GraphQL data
+    deactivate hasura
+    next->>next: Render page
+    next-->>browser: HTML with the new refresh token in the cookie, and JWT + user data
+    deactivate next
+    deactivate browser
+    browser->>hasura: Refetch data with JWT
+    activate browser
+    activate hasura
+    hasura-->>browser: Updated data
+    deactivate hasura
+    browser->>browser: Re-render data
+    deactivate browser
+```
+
+## Loading a static page
+
+It is still possible to use the Nhost SDK in a more classic 'React' mode. It will then be handled in a very similar way, except that the refresh token will be stored in the cookie instead of `localStorage`.
+
+```mermaid
+sequenceDiagram
+    participant browser as Browser
+    participant next as Next.js
+    participant auth as Hasura Auth
+    participant hasura as Hasura
+    browser->>next: Request static page (refresh token in the cookie)
+    activate browser
+    activate next
+    next-->>browser: Static page (same cookie)
+    deactivate next
+    browser->>browser: Render "loading data" page
+    browser->>hasura: GraphQL operation with JWT
+    activate hasura
+    hasura-->>browser: GraphQL data
+    deactivate hasura
+    browser->>browser: Render data
+    deactivate browser
+```

docs/content/docs/reference/nextjs/protecting-routes.mdx

@@ -0,0 +1,40 @@
+---
+title: 'Protecting routes'
+---
+
+Create a `auth-protected.js` file:
+
+```jsx
+import { useRouter } from 'next/router'
+import { useAuthenticationStatus } from '@nhost/nextjs'
+
+export function authProtected(Comp) {
+  return function AuthProtected(props) {
+    const router = useRouter()
+    const { isLoading, isAuthenticated } = useAuthenticationStatus()
+
+    if (isLoading) {
+      return <div>Loading...</div>
+    }
+
+    if (!isAuthenticated) {
+      router.push('/login')
+      return null
+    }
+
+    return <Comp {...props} />
+  }
+}
+```
+
+Then wrap the Next.js page with `authProtected` to only allow signed in users to access the page.
+
+```js
+import { authProtected } from '<some-path>/auth-protected'
+
+function Index() {
+  return <div>Only signed in users can access this page.</div>
+}
+
+export default authProtected(Index)
+```

docs/content/docs/reference/react/apollo.mdx

@@ -0,0 +1,95 @@
+---
+title: 'Apollo GraphQL'
+---
+
+## Installation
+
+With Yarn:
+
+```sh
+yarn add @nhost/react @nhost/react-apollo @apollo/client
+```
+
+With Npm:
+
+```sh
+npm install @nhost/react @nhost/react-apollo @apollo/client
+```
+
+## Configuration
+
+Let's add a `NhostApolloProvider`. Make sure the Apollo Provider is nested into `NhostReactProvider`, as it will need the Nhost context to determine the authentication headers to be sent to the GraphQL endpoint.
+
+```jsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+import { NhostApolloProvider } from '@nhost/react-apollo'
+import { NhostClient, NhostReactProvider } from '@nhost/react'
+
+const nhost = new NhostClient({
+  backendUrl: 'http://localhost:1337'
+})
+
+ReactDOM.render(
+  <React.StrictMode>
+    <NhostReactProvider nhost={nhost}>
+      <NhostApolloProvider nhost={nhost}>
+        <App />
+      </NhostApolloProvider>
+    </NhostReactProvider>
+  </React.StrictMode>,
+  document.getElementById('root')
+)
+```
+
+## Usage
+
+All the [Apollo hooks](https://www.apollographql.com/docs/react/api/react/hooks/) will work together with the right authentication status, for any operation - queries, mutations, and subscriptions over websockets.
+
+As an example:
+
+```jsx
+import { gql, useQuery } from '@apollo/client'
+import { useAuthenticated } from '@nhost/react'
+
+const GET_BOOKS = gql`
+  query Books {
+    books {
+      id
+      name
+    }
+  }
+`
+export const BooksQuery = () => {
+  const isAuthenticated = useAuthenticated()
+  const { loading, data, error } = useQuery(GET_BOOKS)
+  if (!isAuthenticated) return <div>You must be authenticated to see this page</div>
+  if (loading) return <div>Loading...</div>
+  if (error) return <div>Error in the query {error.message}</div>
+  return (
+    <div>
+      <ul>
+        {data?.books.map((book) => (
+          <li key={book.id}>{book.name}</li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+```
+
+## Hooks
+
+### `useAuthQuery`
+
+Works exactly as the original Apollo's [`useQuery`](https://www.apollographql.com/docs/react/api/react/hooks/#usequery) except the query will be skipped if the user is not authenticated.
+
+---
+
+## Read more
+
+More information about the dependent packages:
+
+- [`@apollo/client`](https://www.npmjs.com/package/@apollo/client)
+- [`graphql`](https://www.npmjs.com/package/graphql)

docs/content/docs/reference/react/hooks.mdx

@@ -0,0 +1,466 @@
+---
+title: 'Hooks'
+---
+
+## Authentication Hooks
+
+### Email and Password Sign-Un
+
+```js
+const { signUpEmailPassword, isLoading, isSuccess, needsEmailVerification, isError, error } =
+  useSignUpEmailPassword(email?: string, password?: string, options?: Options )
+```
+
+| Name                     | Type                                                          | Notes                                                                                                                                                                                                             |
+| ------------------------ | ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `signUpEmailPassword`    | (email?: string, password?: string) => void                   | Used for a new user to sign up. The email/password arguments will take precedence over the possible state values used when creating the hook.                                                                     |
+| `isLoading`              | boolean                                                       | Returns `true` when the action is executing, `false` when it finished its execution.                                                                                                                              |
+| `needsEmailVerification` | boolean                                                       | Returns `true` if the sign-up has been accepted, but a verificaiton email has been sent and is awaiting.                                                                                                          |
+| `isSuccess`              | boolean                                                       | Returns `true` if the sign-up suceeded. Returns `false` if the new email needs to be verified first, or if an error occurred.                                                                                     |
+| `isError`                | boolean                                                       | Returns `true` if an error occurred.                                                                                                                                                                              |
+| `error`                  | {status: number, error: string, message: string} \| undefined | Provides details about the error.                                                                                                                                                                                 |
+| `options.locale`         | string \| undefined                                           | Locale of the user, in two digits, for instance `en`.                                                                                                                                                             |
+| `options.allowedRoles`   | string[] \| undefined                                         | Allowed roles of the user. Must be a subset of the default allowed roles defined in Hasura Auth.                                                                                                                  |
+| `options.defaultRole`    | string \| undefined                                           | Default role of the user. Must be part of the default allowed roles defined in Hasura Auth.                                                                                                                       |
+| `options.displayName`    | string \| undefined                                           |                                                                                                                                                                                                                   |
+| `options.metadata`       | Record<string, unknown> \| undefined                          | Custom additional user information stored in the `metadata` column. Can be any JSON object.                                                                                                                       |
+| `options.redirectTo`     | string \| undefined                                           | redirection path in the client application that will be used in the link in the verification email. For instance, if you want to redirect to `https://myapp.com/success`, the `redirectTo` value is `'/success'`. |
+
+#### Usage
+
+```jsx
+import { useState } from 'react'
+import { useSignUpEmailPassword } from '@nhost/react'
+
+const Component = () => {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const { signUpEmailPassword, isLoading, isSuccess, needsEmailVerification, isError, error } =
+    useSignUpEmailPassword(email, password)
+  return (
+    <div>
+      <input value={email} onChange={(event) => setEmail(event.target.value)} placeholder="Email" />
+      <input
+        value={password}
+        onChange={(event) => setPassword(event.target.value)}
+        placeholder="Password"
+      />
+      <button onClick={signUpEmailPassword}>Register</button>
+      {isSuccess && <div>Your account have beed created! You are now authenticated</div>}
+      {needsEmailVerification && (
+        <div>Please check your mailbox and follow the verification link to verify your email</div>
+      )}
+    </div>
+  )
+}
+```
+
+### Email and Password Sign-In
+
+```js
+const { signInEmailPassword, isLoading, needsEmailVerification, needsMfaOtp, sendMfaOtp, isSuccess, isError, error } =
+  useSignInEmailPassword(email?: string, password?: string)
+```
+
+| Name                     | Type                                                          | Notes                                                                                                                                       |
+| ------------------------ | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| `signInEmailPassword`    | (email?: string, password?: string) => void                   | Will try to authenticate. The email/password arguments will take precedence over the possible state values used when creating the hook.     |
+| `isLoading`              | boolean                                                       | Returns `true` when the action is executing, `false` when it finished its execution.                                                        |
+| `needsEmailVerification` | boolean                                                       | Returns `true` if the user email is still pending email verification.                                                                       |
+| `needsMfaOtp`            | boolean                                                       | Returns `true` if the server is awaiting an MFA one-time password to complete the authentication.                                           |
+| `sendMfaOtp`             | (otp: string) => void                                         | Sends MFA One-time password. Will turn either `isSuccess` or `isError` to true, and store potential error in `error`.                       |
+| `isSuccess`              | boolean                                                       | Returns `true` if the user has successfully authenticated. Returns `false` in case or error or if the new email needs to be verified first. |
+| `isError`                | boolean                                                       | Returns `true` if an error occurred.                                                                                                        |
+| `error`                  | {status: number, error: string, message: string} \| undefined | Provides details about the error.                                                                                                           |
+
+#### Usage
+
+```jsx
+import { useState } from 'react'
+import { useSignInEmailPassword } from '@nhost/react'
+
+const Component = () => {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const { signInEmailPassword, isLoading, isSuccess, needsEmailVerification, isError, error } =
+    useSignInEmailPassword(email, password)
+  return (
+    <div>
+      <input value={email} onChange={(event) => setEmail(event.target.value)} placeholder="Email" />
+      <input
+        value={password}
+        onChange={(event) => setPassword(event.target.value)}
+        placeholder="Password"
+      />
+      <button onClick={signInEmailPassword}>Register</button>
+      {isSuccess && <div>Authentication suceeded</div>}
+      {needsEmailVerification && (
+        <div>
+          You must verify your email to sign in. Check your mailbox and follow the instructions to
+          verify your email.
+        </div>
+      )}
+    </div>
+  )
+}
+```
+
+### Oauth Providers
+
+```js
+const providerLink = useProviderLink(options?: Options)
+```
+
+| Name                   | Type                                 | Notes                                                                                                                                                                                                             |
+| ---------------------- | ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `options.locale`       | string \| undefined                  | Locale of the user, in two digits, for instance `en`.                                                                                                                                                             |
+| `options.allowedRoles` | string[] \| undefined                | Allowed roles of the user. Must be a subset of the default allowed roles defined in Hasua Auth.                                                                                                                   |
+| `options.defaultRole`  | string \| undefined                  | Default role of the user. Must be part of the default allowed roles defined in Hasura Auth.                                                                                                                       |
+| `options.displayName`  | string \| undefined                  |
+| `options.metadata`     | Record<string, unknown> \| undefined | Custom additional user information stored in the `metadata` column. Can be any JSON object.                                                                                                                       |
+| `options.redirectTo`   | string \| undefined                  | Redirection path in the client application that will be used in the link in the verification email. For instance, if you want to redirect to `https://myapp.com/success`, the `redirectTo` value is `'/success'`. |
+
+#### Usage
+
+```js
+import { useProviderLink } from '@nhost/react'
+
+const Component = () => {
+  const { facebook, github } = useProviderLink()
+  return
+  ;<div>
+    <a href={facebook}>Authenticate with Facebook</a>
+    <a href={github}>Authenticate with GitHub</a>
+  </div>
+}
+```
+
+### Passwordless email authentication
+
+```js
+const { signInEmailPasswordless, isLoading, isSuccess, isError, error } =
+  useSignInEmailPasswordless(email?: string, options?: Options)
+```
+
+| Name                      | Type                                             | Notes                                                                                                                                                                                                             |
+| ------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `signInEmailPasswordless` | (email?: string) => void                         | Sends a magic link to the given email The email argument will take precedence over the the possible state value used when creating the hook.                                                                      |
+| `isLoading`               | boolean                                          | Returns `true` when the action is executing, `false` when it finished its execution.                                                                                                                              |
+| `isSuccess`               | boolean                                          | Returns `true` if the magic link email user has successfully send.                                                                                                                                                |
+| `isError`                 | boolean                                          | Returns `true` if an error occurred.                                                                                                                                                                              |
+| `error`                   | {status: number, error: string, message: string} | Provides details about the error.                                                                                                                                                                                 |
+| `options.locale`          | string \| undefined                              | Locale of the user, in two digits, for instance `en`.                                                                                                                                                             |
+| `options.allowedRoles`    | string[] \| undefined                            | Allowed roles of the user. Must be a subset of the default allowed roles defined in Hasua Auth.                                                                                                                   |
+| `options.defaultRole`     | string \| undefined                              | Default role of the user. Must be part of the default allowed roles defined in Hasura Auth.                                                                                                                       |
+| `options.displayName`     | string \| undefined                              |
+| `options.metadata`        | Record<string, unknown> \| undefined             | Custom additional user information stored in the `metadata` column. Can be any JSON object.                                                                                                                       |
+| `options.redirectTo`      | string \| undefined                              | Redirection path in the client application that will be used in the link in the verification email. For instance, if you want to redirect to `https://myapp.com/success`, the `redirectTo` value is `'/success'`. |
+
+#### Usage
+
+```jsx
+import { useState } from 'react'
+import { useSignInEmailPasswordless } from '@nhost/react'
+
+const Component = () => {
+  const [email, setEmail] = useState('')
+  const { signInEmailPasswordless, isLoading, isSuccess, isError, error } =
+    useSignInEmailPasswordless(email)
+  return (
+    <div>
+      <input value={email} onChange={(event) => setEmail(event.target.value)} placeholder="Email" />
+      <button onClick={signInEmailPasswordless}>Authenticate</button>
+      {isSuccess && (
+        <div>
+          An email has been sent to {email}. Please check your mailbox and click on the
+          authentication link.
+        </div>
+      )}
+    </div>
+  )
+}
+```
+
+### Sign Out
+
+The `useSignOut` hook accepts an `all` argument that will be used when the `signOut` method will be called. This value can be overriden in calling `signOut(allValue)`.
+
+```js
+const { signOut, isSuccess } = useSignOut(all?: boolean)
+```
+
+| Name        | Type                    | Notes                                                                                                                                                                                                                        |
+| ----------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `signOut`   | (all?: boolean) => void | Will log the current user out. If `all` is set to true, it will deactivate the active session from all other devices. The `all` argument will take precedence over the the possible state value used when creating the hook. |
+| `isSuccess` | boolean                 | Returns `true` when the user has successfully signed out.                                                                                                                                                                    |
+
+#### Usage
+
+```jsx
+import { useState } from 'react'
+import { useSignOut, useAuthenticated } from '@nhost/react'
+
+const Component = () => {
+  const { signOut, isSuccess } = useSignOut()
+  const authenticated = useAuthenticated()
+  if (authenticated)
+    return (
+      <div>
+        <button onClick={signUp}>Sign Out</button>
+        {isSuccess && <div>You have successfully signed out!</div>}
+      </div>
+    )
+  else return <div>Not authenticated</div>
+}
+```
+
+---
+
+## Authentication status
+
+### `useAuthenticationStatus`
+
+The Nhost client may need some initial steps to determine the authentication status during startup, like fetching a new JWT from an existing refresh token.
+
+`isLoading` will return `true` until the authentication status is known.
+
+#### Usage
+
+```jsx
+import { useAuthenticationStatus } from '@nhost/react'
+
+const Component = () => {
+  const { isLoading, isAuthenticated } = useAuthenticationStatus()
+  if (isLoading) return <div>Loading Nhost authentication status...</div>
+  else if (isAuthenticated) return <div>User is authenticated</div>
+  else return <div>Public section</div>
+}
+```
+
+### Get the JWT access token
+
+<!-- TODO ellaborate -->
+
+```js
+const accessToken = useAccessToken()
+```
+
+---
+
+## User management
+
+### Change email
+
+```js
+const { changeEmail, isLoading, isSuccess, needsEmailVerification, isError, error } =
+  useChangeEmail(email?: string, options?: { redirectTo?: string })
+```
+
+| Name                     | Type                                                          | Notes                                                                                                                                                                                                             |
+| ------------------------ | ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `changeEmail`            | (email?: string) => void                                      | Requests the email change. The arguement password will take precedence over the the possible state value used when creating the hook.                                                                             |
+| `isLoading`              | boolean                                                       | Returns `true` when the action is executing, `false` when it finished its execution.                                                                                                                              |
+| `needsEmailVerification` | boolean                                                       | Returns `true` if the email change has been requested, but that a email has been sent to the user to verify the new email.                                                                                        |
+| `isError`                | boolean                                                       | Returns `true` if an error occurred.                                                                                                                                                                              |
+| `error`                  | {status: number, error: string, message: string} \| undefined | Provides details about the error.                                                                                                                                                                                 |
+| `redirectTo`             | string \| undefined                                           | Redirection path in the client application that will be used in the link in the verification email. For instance, if you want to redirect to `https://myapp.com/success`, the `redirectTo` value is `'/success'`. |
+
+#### Usage
+
+```jsx
+import { useState } from 'react'
+import { useChangeEmail } from '@nhost/react'
+
+const Component = () => {
+  const [email, setEmail] = useState('')
+  const { changeEmail, isLoading, needsEmailVerification, isError, error } =
+    useChangeEmail(password)
+  return (
+    <div>
+      <input value={email} onChange={(event) => setEmail(event.target.value)} />
+      <button onClick={changeEmail}>Change password</button>
+      {needsEmailVerification && (
+        <div>
+          Please check your mailbox and follow the verification link to confirm your new email
+        </div>
+      )}
+    </div>
+  )
+}
+```
+
+### Change password
+
+```js
+const { changePassword, isLoading, isSuccess, isError, error } = useChangePassword(password?: string)
+```
+
+| Name             | Type                                                          | Notes                                                                                                                                    |
+| ---------------- | ------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `changePassword` | (password?: string) => void                                   | Requests the password change. The arguement password will take precedence over the the possible state value used when creating the hook. |
+| `isLoading`      | boolean                                                       | Returns `true` when the action is executing, `false` when it finished its execution.                                                     |
+| `isSuccess`      | boolean                                                       | Returns `true` if the password has beed successfully changed.                                                                            |
+| `isError`        | boolean                                                       | Returns `true` if an error occurred.                                                                                                     |
+| `error`          | {status: number, error: string, message: string} \| undefined | Provides details about the error.                                                                                                        |
+
+#### Usage
+
+```jsx
+import { useState } from 'react'
+import { useChangePassword } from '@nhost/react'
+
+const Component = () => {
+  const [password, setPassword] = useState('')
+  const { changePassword, isLoading, isSuccess, isError, error } = useChangePassword(password)
+  return (
+    <div>
+      <input value={password} onChange={(event) => setPassword(event.target.value)} />
+      <button onClick={changePassword}>Change password</button>
+    </div>
+  )
+}
+```
+
+### Reset password
+
+If a user loses their password, we can resend them an email to authenticate so that they can change it to a new one:
+
+```js
+const { resetPassword, isLoading, isSent, isError, error } = useResetPassword(email?: string, options?: { redirectTo?: string })
+```
+
+| Name            | Type                                                          | Notes                                                                                                                                                                                                             |
+| --------------- | ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `resetPassword` | (email?: string) => void                                      | Sends an email with a temporary connection link. The arguement email will take precedence over the the possible state value used when creating the hook.                                                          |
+| `isLoading`     | boolean                                                       | Returns `true` when the action is executing, `false` when it finished its execution.                                                                                                                              |
+| `isSent`        | boolean                                                       | Returns `true` when the email has been successfully sent.                                                                                                                                                         |
+| `isError`       | boolean                                                       | Returns `true` if an error occurred.                                                                                                                                                                              |
+| `error`         | {status: number, error: string, message: string} \| undefined | Provides details about the error.                                                                                                                                                                                 |
+| `redirectTo`    | string \| undefined                                           | Redirection path in the client application that will be used in the link in the verification email. For instance, if you want to redirect to `https://myapp.com/success`, the `redirectTo` value is `'/success'`. |
+
+#### Usage
+
+```jsx
+import { useState } from 'react'
+import { useResetPassword } from '@nhost/react'
+
+const Component = () => {
+  const [email, setEamil] = useState('')
+  const { resetPassword, isLoading, isSent, isError, error } = useResetPassword(email?: string)
+  return (
+    <div>
+      <input value={email} onChange={(event) => setEmail(event.target.value)} />
+      <button onClick={resetPassword}>Send reset link</button>
+    </div>
+  )
+}
+```
+
+### Send email verification
+
+```js
+const { sendEmail, isLoading, isSent, isError, error } =
+  useSendVerificationEmail(email?: string, options?: { redirectTo?: string })
+```
+
+| Name         | Type                                                          | Notes                                                                                                                                                                                                             |
+| ------------ | ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `sendEmail`  | (email?: string) => void                                      | Resend the verification email.                                                                                                                                                                                    |
+| `isLoading`  | boolean                                                       | Returns `true` when the action is executing, `false` when it finished its execution.                                                                                                                              |
+| `isSent`     | boolean                                                       | Returns `true` if the verification email has been sent                                                                                                                                                            |
+| `isError`    | boolean                                                       | Returns `true` if an error occurred.                                                                                                                                                                              |
+| `error`      | {status: number, error: string, message: string} \| undefined | Provides details about the error.                                                                                                                                                                                 |
+| `redirectTo` | string \| undefined                                           | Redirection path in the client application that will be used in the link in the verification email. For instance, if you want to redirect to `https://myapp.com/success`, the `redirectTo` value is `'/success'`. |
+
+#### Usage
+
+```jsx
+import { useState } from 'react'
+import { useSendVerificationEmail } from '@nhost/react'
+
+const Component = () => {
+  const [email, setEmail] = useState('')
+  const { sendEmail, isLoading, isSent, isError, error } = useSendVerificationEmail(email)
+  return (
+    <div>
+      <input value={email} onChange={(event) => setEmail(event.target.value)} />
+      <button onClick={sendEmail}>Send email verification</button>
+      {isSent && (
+        <div>Please check your mailbox and follow the verification link to confirm your email</div>
+      )}
+    </div>
+  )
+}
+```
+
+---
+
+## User data
+
+<!-- TODO ellaborate -->
+
+```js
+const userData = useUserData()
+```
+
+### Avatar
+
+```jsx
+import { useAvatarUrl } from '@nhost/react'
+
+const Avatar = () => {
+  const avatar = useAvatarUrl()
+  return <img src={avatar} alt="Avatar" />
+}
+```
+
+### User roles
+
+```jsx
+import { useUserRoles, useDefaultRole } from '@nhost/react'
+
+const Avatar = () => {
+  const roles = useUserRoles()
+  const defaultRole = useDefaultRole()
+  return (
+    <div>
+      Your default role is {defaultRole}. You have the following roles: {roles.join(', ')}
+    </div>
+  )
+}
+```
+
+### Display name
+
+```jsx
+import { displayName } from '@nhost/react'
+
+const Avatar = () => {
+  const displayName = useDisplayName()
+  return <div>Hello, {displayName}</div>
+}
+```
+
+### Email
+
+```js
+const email = useEmail()
+```
+
+### User Id
+
+```js
+const userId = useUserId()
+```
+
+### Anonymous user
+
+```js
+const isAnonymous = useIsAnonymous()
+```
+
+### Locale
+
+```js
+const locale = useUserLocale()
+```

docs/content/docs/reference/react/index.mdx

@@ -0,0 +1,68 @@
+---
+title: 'Getting started'
+---
+
+## Installation
+
+With Yarn:
+
+```sh
+yarn add @nhost/react
+```
+
+With Npm:
+
+```sh
+npm install @nhost/react
+```
+
+---
+
+## Configuration
+
+`@nhost/react` exports a React provider `NhostReactProvider` that makes the authentication state and the several hooks available in your application. Wrap this component around your whole App.
+
+```jsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import { NhostClient, NhostReactProvider } from '@nhost/react'
+
+import App from './App'
+
+const nhost = new NhostClient({
+  backendUrl: 'http://localhost:1337'
+})
+
+ReactDOM.render(
+  <React.StrictMode>
+    <NhostReactProvider nhost={nhost}>
+      <App />
+    </NhostReactProvider>
+  </React.StrictMode>,
+  document.getElementById('root')
+)
+```
+
+---
+
+### Options
+
+```js
+const nhost = new NhostClient({
+  backendUrl,
+  autoLogin,
+  autoRefreshToken,
+  clientStorageGetter,
+  clientStorageSetter
+})
+```
+
+| Name                  | Type                                | Default          | Notes                                                                                                                                                                                                                                          |
+| --------------------- | ----------------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `backendUrl`          | string                              |                  | The Nhost app url, for instance `https://my-app.nhost.run`. When using the CLI, its value is `http://localhost:1337`                                                                                                                           |
+| `autoLogin`           | boolean                             | `true`           | If set to `true`, the client will detect credentials in the current URL that could have been sent during an email verification or an Oauth authentication. It will also automatically authenticate all the active tabs in the current browser. |
+| `autoRefreshToken`    | boolean                             | `true`           | If set to `true`, the JWT (access token) will be automatically refreshed before it expires.                                                                                                                                                    |
+| `clientStorageGetter` | (key:string) => string \| null      | use localStorage | Nhost stores a refresh token in `localStorage` so the session can be restored when starting the browser.                                                                                                                                       |
+| `clientStorageGetter` | (key: string, value: string \| null | use localStorage |                                                                                                                                                                                                                                                |
+| `refreshIntervalTime` |                                     |                  |

docs/content/docs/reference/react/protecting-routes.mdx

@@ -0,0 +1,43 @@
+---
+title: 'Protecting routes'
+---
+
+## React Router
+
+You can protect routes by creating an `AuthGate` component when using `@nhost/react` with [React Router](https://reactrouter.com/web/guides/quick-start).
+
+```jsx
+import { Redirect } from 'react-router-dom'
+import { useAuthenticationStatus } from '@nhost/react'
+
+export function AuthGate(children) {
+  const { isLoading, isAuthenticated } = useAuthenticationStatus()
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  if (!isAuthenticated) {
+    return <Redirect to="/login" />
+  }
+
+  return children
+}
+```
+
+Then, in your React Router, wrap the `AuthGate` component around the routes you want to protect:
+
+```jsx
+<Router>
+  <Switch>
+    <Route path="/login">
+      <Login />
+    </Route>
+    <Route path="/" exact>
+      <AuthGate> // <--- Use AuthGate component like this
+        <div>My protected dashboard</div>
+      </AuthGate>
+    </Route>
+  </Switch>
+</Router>
+```

docs/content/docs/reference/sdk/authentication.mdx

@@ -119,3 +119,16 @@ Reset password for a user. Calling this function sends an email to the user with
 ```js
 const { error } = await nhost.auth.resetPassword({ email })
 ```
+
+## `nhost.auth.onAuthStateChanged(event, session)`
+
+Use `onAuthStateChanged` to add a custom function that is triggered
+whenever the user's state changes. For example, from signed in to signed out or
+vice versa.
+
+```js
+nhost.auth.onAuthStateChanged(({ event, session }) => {
+  // event = 'SIGNED_IN' | 'SIGNED_OUT'
+  console.log(`Auth state changed. State is now ${event} with the session: ${session}`)
+})
+```

docs/content/docs/reference/sdk/storage.mdx

@@ -19,12 +19,12 @@ const { fileMetadata, error } = await nhost.storage.upload({ file })
 
 ---
 
-## `nhost.storage.getUrl()`
+## `nhost.storage.getPublicUrl()`
 
 Get the public URL of a file. To access the file via public URL, the file must have the `select` permission for the `public` role.
 
 ```js
-const url = nhost.storage.getUrl({ fileId })
+const url = nhost.storage.getPublicUrl({ fileId })
 ```
 
 ---

docs/content/docs/reference/supporting-libraries/index.mdx

@@ -1,10 +0,0 @@
----
-title: 'Overview'
----
-
-We offer libraries and plugins for specific frameworks to make integration with Nhost easy on any given platform.
-
-Currently, the following supporting libraries are available:
-
-- [@nhost/react-apollo](/reference/supporting-libraries/react-apollo)
-- [@nhost/react-auth](/reference/supporting-libraries/react-auth)

docs/content/docs/reference/supporting-libraries/react-apollo.mdx

@@ -1,91 +0,0 @@
----
-title: '@nhost/react-apollo'
----
-
-`@nhost/react-apollo` makes it easy to use Apollo in your React app with Nhost.
-
-## Install
-
-Install `@nhost/react-apollo` and its dependencies.
-
-```sh
-npm install @nhost/nhost-js @nhost/react-apollo @apollo/client graphql
-```
-
----
-
-## Usage
-
-`@nhost/react-apollo` exposes one component: `<NhostApolloProvider>`. Wrap this component around your whole App.
-
-```js
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { NhostClient } from '@nhost/nhost-js'
-import { NhostApolloProvider } from '@nhost/react-apollo'
-
-import App from './App'
-
-const nhost = new NhostClient({
-  backendUrl: 'https://[app-subdomain].nhost.run'
-})
-
-ReactDOM.render(
-  <React.StrictMode>
-    <NhostApolloProvider nhost={nhost}>
-      <App />
-    </NhostApolloProvider>
-  </React.StrictMode>,
-  document.getElementById('root')
-)
-```
-
-Now you can use Apollo Client anywhere in your app:
-
-```js
-import { useQuery, gql } from '@apollo/client'
-
-export function App() {
-  const { loading, data } = useQuery(gql`
-    query {
-      todos {
-        id
-        name
-      }
-    }
-  `)
-
-  if (loading) {
-    return <div>Loading</div>
-  }
-
-  if (!data) {
-    return <div>No data</div>
-  }
-
-  return (
-    <div>
-      <ul>
-        {data.todos.map((todo) => {
-          return <li key={todo.id}>{todo.name}</li>
-        })}
-      </ul>
-    </div>
-  )
-}
-```
-
----
-
-## Permissions
-
-If you use @nhost/react-apollo and NhostApolloProvider without authentication (auth property) all GraphQL requests will be made with the public role.
-
----
-
-## Read more
-
-More information about the dependent packages:
-
-- [`@apollo/client`](https://www.npmjs.com/package/@apollo/client)
-- [`graphql`](https://www.npmjs.com/package/graphql)

docs/content/docs/reference/supporting-libraries/react-auth.mdx

@@ -1,147 +0,0 @@
----
-title: '@nhost/react-auth'
----
-
-`@nhost/react-auth` makes it easy to use authenticate with Nhost in your React app.
-
----
-
-## Install
-
-Install `@nhost/react-auth` and its dependencies:
-
-```sh
-npm install @nhost/nhost-js @nhost/react-auth
-```
-
----
-
-## Usage
-
-`@nhost/react-auth` exports a React provider `NhostAuthProvider` that can handle authentication state in your app. Wrap this component around your whole App.
-
-```js
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { NhostClient } from '@nhost/nhost-js'
-import { NhostAuthProvider } from '@nhost/react-auth'
-
-import App from './App'
-
-const nhost = new NhostClient({
-  backendUrl: 'https://[app-subdomain].nhost.run'
-})
-
-ReactDOM.render(
-  <React.StrictMode>
-    <NhostAuthProvider nhost={nhost}>
-      <App />
-    </NhostAuthProvider>
-  </React.StrictMode>,
-  document.getElementById('root')
-)
-```
-
-Now you can get the login state of the current user:
-
-```js
-const { isLoading, isAuthenticated } = useNhostAuth()
-
-console.log({ isLoading })
-console.log({ isAuthenticated })
-
-if (isLoading) {
-  console.log('Loading...')
-}
-
-if (!isAuthenticated) {
-  console.log('User is not authenticated')
-}
-
-console.log('User is authenticated')
-```
-
----
-
-## Protecting routes
-
-### React
-
-When using [React Router](https://reactrouter.com/web/guides/quick-start) with `@nhost/react-auth`, you can protect routes by creating an `AuthGate` component:
-
-```js
-import { Redirect } from 'react-router-dom'
-import { useNhostAuth } from '@nhost/react-auth'
-
-export function AuthGate(children) {
-  const { isLoading, isAuthenticated } = useNhostAuth()
-
-  if (isLoading) {
-    return <div>Loading...</div>
-  }
-
-  if (!isAuthenticated) {
-    return <Redirect to="/login" />
-  }
-
-  return children
-}
-```
-
-Then, in your React Router, wrap the `AuthGate` component around the routes you want to protect:
-
-```js
-<Router>
-  <Switch>
-    <Route path="/login">
-      <Login />
-    </Route>
-    <Route path="/" exact>
-      <AuthGate> // <--- Use AuthGate component like this
-        <div>My protected dashboard</div>
-      </AuthGate>
-    </Route>
-  </Switch>
-</Router>
-```
-
----
-
-### Next.js
-
-Create a `auth-protected.js` file:
-
-```js
-import { useRouter } from 'next/router'
-import { useNhostAuth } from '@nhost/react-auth'
-
-export function authProtected(Comp) {
-  return function AuthProtected(props) {
-    const router = useRouter()
-    const { isLoading, isAuthenticated } = useNhostAuth()
-
-    if (isLoading) {
-      return <div>Loading...</div>
-    }
-
-    if (!isAuthenticated) {
-      router.push('/login')
-      return null
-    }
-
-    return <Comp {...props} />
-  }
-}
-```
-
-Then wrap the Next.js page with `authProtected` to only allow signed in users to access the page.
-
-```js
-import { authProtected } from '<some-path>/auth-protected'
-
-function Index() {
-  return <div>Only signed in users can access this page.</div>
-}
-
-export default authProtected(Index)
-```

docs/lib/order.ts

@@ -2,19 +2,38 @@ export const orderTwo = {
   'get-started': {
     'quick-start': ['index', 'schema', 'javascript-client', 'permissions'],
     authentication: ['index'],
-    'cli-workflow': ['index', 'workflow-setup', 'install-cli', 'local-changes', 'metadata-and-serverless-functions'],
+    'cli-workflow': [
+      'index',
+      'workflow-setup',
+      'install-cli',
+      'local-changes',
+      'metadata-and-serverless-functions'
+    ],
     upgrade: ['index']
   },
   platform: {
     database: ['index', 'permissions', 'graphql'],
-    authentication: ['index', 'user-management', 'sign-in-methods', 'social-login'],
+    authentication: [
+      'index',
+      'user-management',
+      'sign-in-methods',
+      'social-sign-in',
+      'sign-in-with-google',
+      'sign-in-with-github',
+      'sign-in-with-facebook',
+      'sign-in-with-linkedin',
+      'sign-in-with-spotify',
+      'email-templates'
+    ],
     storage: ['index'],
     'serverless-functions': ['index', 'event-triggers'],
     nhost: ['index', 'environment-variables', 'github-integration', 'local-development']
   },
   reference: {
     sdk: ['index', 'graphql', 'authentication', 'storage', 'functions'],
+    react: ['index', 'hooks', 'protecting-routes', 'apollo'],
+    nextjs: ['index', 'configuration', 'protecting-routes', ],
     cli: ['index'],
-    'supporting-libraries': ['react-apollo', 'react-auth']
+    'hasura-auth': ['index', 'installation', 'configuration', 'environment-variables', 'schema', 'api-reference']
   }
 }

docs/lib/post.ts

@@ -4,7 +4,6 @@ import { join } from 'path'
 
 import { orderTwo } from './order'
 
-const { execSync } = require('child_process')
 const postsDirectory = join(process.cwd(), 'content', 'docs')
 
 export function createConvolutedNav(category) {

docs/next.config.js

@@ -15,6 +15,11 @@ module.exports = {
         source: '/reference/sdk/javascript-sdk',
         destination: '/reference/sdk',
         permanent: false
+      },
+      {
+        source: '/platform/authentication/social-login',
+        destination: '/platform/authentication/social-sign-in',
+        permanent: false
       }
     ]
   }

docs/package.json

@@ -1,6 +1,8 @@
 {
   "name": "nhost-documentation",
   "private": true,
+  "version": "0.0.1",
+
   "scripts": {
     "dev": "next",
     "build:next": "next build",
@@ -24,13 +26,16 @@
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "framer-motion": "^5.3.3",
     "gray-matter": "^4.0.3",
+    "mdx-mermaid": "^1.2.1",
+    "mermaid": "^8.14.0",
     "next": "^12.0.8",
     "next-mdx-remote": "^3.0.8",
     "next-seo": "^4.28.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-merge-refs": "^1.1.0",
-    "react-syntax-highlighter": "^15.4.5"
+    "react-syntax-highlighter": "^15.4.5",
+    "swagger-ui-react": "^4.5.2"
   },
   "devDependencies": {
     "@types/react": "^17.0.37",
@@ -42,6 +47,5 @@
     "tailwindcss": "^2.2.19",
     "typescript": "^4.5.2"
   },
-  "prettier": "../prettier.config.js",
-  "version": null
+  "prettier": "../prettier.config.js"
 }

docs/pages/[category].tsx

@@ -74,8 +74,9 @@ export async function getStaticProps({ params }) {
   const fullPath = join(postsDirectory, `${params.category}/index.mdx`)
   const fileContents = fs.readFileSync(fullPath, 'utf8')
   const { data, content } = matter(fileContents)
-  const mdxSource = await serialize(content)
-
+  const mdxSource = await serialize(content, {
+    mdxOptions: { remarkPlugins: [require('mdx-mermaid')] }
+  })
   return {
     props: {
       categoryTitle,

docs/pages/[category]/[subcategory].tsx

@@ -86,7 +86,9 @@ export async function getStaticProps({ params }) {
 
   const fileContents = fs.readFileSync(fullPath, 'utf8')
   const { data, content } = matter(fileContents)
-  const mdxSource = await serialize(content)
+  const mdxSource = await serialize(content, {
+    mdxOptions: { remarkPlugins: [require('mdx-mermaid')] }
+  })
 
   return {
     props: {

docs/pages/[category]/[subcategory]/[post].tsx

@@ -34,7 +34,7 @@ export default function Post({
       convolutedNav={convolutedNav}
       availableCategoryMenus={availableCategoryMenus}
     >
-      <div className="bg-white pt-2">
+      <div className="pt-2 bg-white">
         <Head>
           <title>
             {frontmatter.title} - {capitalize(subcategory)} - {capitalize(category)} | Nhost
@@ -91,7 +91,10 @@ export async function getStaticProps({ params }) {
   )
   const fileContents = fs.readFileSync(fullPath, 'utf8')
   const { data, content } = matter(fileContents)
-  const mdxSource = await serialize(content)
+  // const headings = getHeadingsByPost(content)
+  const mdxSource = await serialize(content, {
+    mdxOptions: { remarkPlugins: [require('mdx-mermaid')] }
+  })
 
   return {
     props: {

docs/public/sitemap.xml

@@ -1,41 +1,46 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://docs.nhost.io</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/get-started/cli-workflow/install-cli</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/get-started/cli-workflow/local-changes</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/get-started/cli-workflow/metadata-and-serverless-functions</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/get-started/cli-workflow/workflow-setup</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/get-started/quick-start/javascript-client</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/get-started/quick-start/permissions</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/get-started/quick-start/schema</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/authentication/sign-in-methods</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/authentication/social-login</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/authentication/user-management</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/database/graphql</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/database/permissions</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/nhost/environment-variables</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/nhost/github-integration</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/nhost/local-development</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/serverless-functions/event-triggers</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/reference/sdk/authentication</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/reference/sdk/functions</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/reference/sdk/graphql</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/reference/sdk/storage</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/reference/supporting-libraries/react-apollo</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/reference/supporting-libraries/react-auth</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/get-started/authentication</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/get-started/cli-workflow</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/get-started/quick-start</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/get-started/upgrade</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/authentication</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/database</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/nhost</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/serverless-functions</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/storage</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/reference/cli</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/reference/sdk</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/reference/supporting-libraries</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/get-started</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
-<url><loc>https://docs.nhost.io/reference</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/get-started</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/reference</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/get-started/authentication</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/get-started/cli-workflow</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/get-started/quick-start</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/get-started/upgrade</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/authentication</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/database</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/nhost</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/serverless-functions</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/storage</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/reference/cli</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/reference/nextjs</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/reference/react</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/reference/sdk</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/reference/supporting-libraries</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/get-started/cli-workflow/install-cli</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/get-started/cli-workflow/local-changes</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/get-started/cli-workflow/metadata-and-serverless-functions</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/get-started/cli-workflow/workflow-setup</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/get-started/quick-start/javascript-client</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/get-started/quick-start/permissions</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/get-started/quick-start/schema</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/authentication/sign-in-methods</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/authentication/social-login</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/authentication/user-management</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/database/graphql</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/database/permissions</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/nhost/environment-variables</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/nhost/github-integration</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/nhost/local-development</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/serverless-functions/event-triggers</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/reference/nextjs/server-side</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/reference/react/apollo</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/reference/react/hooks</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/reference/sdk/authentication</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/reference/sdk/functions</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/reference/sdk/graphql</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/reference/sdk/storage</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/reference/supporting-libraries/react-apollo</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
+<url><loc>https://docs.nhost.io/reference/supporting-libraries/react-auth</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-21T10:17:26.089Z</lastmod></url>
 </urlset>

docs/styles/markdown-styles.module.css

@@ -11,10 +11,19 @@
 }
 
 .markdown li {
-  @apply text-base- font-display text-greyscaleDark font-normal leading-7;
-  list-style: disc;
-  list-style-type: disc;
-  list-style-position: inside;
+  @apply font-normal leading-7 text-base- font-display text-greyscaleDark;
+}
+
+.markdown li::marker {
+  @apply font-normal leading-7 text-base- font-display text-greyscaleDark;
+}
+
+.markdown ul li {
+  list-style: disc inside;
+}
+
+.markdown ol li {
+  list-style: decimal inside;
 }
 
 .markdown table {

examples/docker-compose/.env.example

@@ -0,0 +1,5 @@
+POSTGRES_PASSWORD=secret-pg-password-never-use-this-value
+HASURA_GRAPHQL_ADMIN_SECRET=hello123
+HASURA_GRAPHQL_JWT_SECRET='{"type":"HS256", "key":"5152fa850c02dc222631cca898ed1485821a70912a6e3649c49076912daa3b62182ba013315915d64f40cddfbb8b58eb5bd11ba225336a6af45bbae07ca873f3","issuer":"hasura-auth"}'
+STORAGE_ACCESS_KEY=storage-access-key-never-use-this-value
+STORAGE_SECRET_KEY=storage-secret-key-never-use-this-value

examples/docker-compose/.gitignore

@@ -0,0 +1 @@
+data

examples/docker-compose/README.md

@@ -0,0 +1,26 @@
+# Docker-compose example
+
+Here is an example on how to reproduce the Nhost stack from a docker-compose file.
+
+## Configuration
+
+```sh
+git clone https://github.com/nhost/nhost
+cd nhost/examples/docker-compose
+cp .env.example .env
+docker-compose up -d
+```
+
+The following endpoints are now exposed:
+
+- `http://localhost:1337`: Hasura Console
+- `http://localhost:1337/v1/graphql`: Hasura GraphQL endpoint
+- `http://localhost:1337/v1/auth`: Hasura Auth
+- `http://localhost:1337/v1/storage`: Hasura Storage
+
+- `http://localhost:9090`: Traefik dashboad
+- `http://localhost:8025`: Mailhog SMTP testing dashboard
+
+## Limitations
+
+This example does not implement the custom functions that are available on the cloud-hosted Nhost offer.

examples/docker-compose/docker-compose.yaml

@@ -0,0 +1,121 @@
+version: '3.6'
+services:
+  traefik:
+    image: "traefik:v2.5"
+    container_name: "traefik"
+    command:
+      - "--api.insecure=true"
+      - "--providers.docker=true"
+      - "--providers.docker.exposedbydefault=false"
+      - "--entrypoints.web.address=:1337"
+    ports:
+      - "1337:1337"
+      - "9090:8080"
+    volumes:
+      - "/var/run/docker.sock:/var/run/docker.sock:ro"
+  postgres:
+    image: postgres
+    restart: always
+    volumes:
+      - ./data/db:/var/lib/postgresql/data
+      - ./initdb.d:/docker-entrypoint-initdb.d:ro
+    environment:
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-secretpgpassword}
+    ports:
+      - '5432:5432'
+  graphql-engine:
+    image: hasura/graphql-engine:v2.2.0
+    depends_on:
+      - 'postgres'
+    restart: always
+    expose:
+      - 8080
+    environment:
+      HASURA_GRAPHQL_DATABASE_URL: postgres://postgres:${POSTGRES_PASSWORD:-secretpgpassword}@postgres:5432/postgres
+      HASURA_GRAPHQL_JWT_SECRET: ${HASURA_GRAPHQL_JWT_SECRET}
+      HASURA_GRAPHQL_ADMIN_SECRET: ${HASURA_GRAPHQL_ADMIN_SECRET}
+      HASURA_GRAPHQL_UNAUTHORIZED_ROLE: public
+      HASURA_GRAPHQL_LOG_LEVEL: debug
+      HASURA_GRAPHQL_ENABLE_CONSOLE: 'true'
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.hasura.rule=Host(`localhost`) && PathPrefix(`/`)"
+      - "traefik.http.routers.hasura.entrypoints=web"
+  auth:
+    image: nhost/hasura-auth:latest
+    depends_on:
+      - postgres
+      - graphql-engine
+    restart: always
+    environment:
+      AUTH_HOST: '0.0.0.0'
+      HASURA_GRAPHQL_DATABASE_URL: postgres://postgres:${POSTGRES_PASSWORD:-secretpgpassword}@postgres:5432/postgres
+      HASURA_GRAPHQL_GRAPHQL_URL: http://graphql-engine:8080/v1/graphql
+      HASURA_GRAPHQL_JWT_SECRET: ${HASURA_GRAPHQL_JWT_SECRET}
+      HASURA_GRAPHQL_ADMIN_SECRET: ${HASURA_GRAPHQL_ADMIN_SECRET}
+      AUTH_SMTP_HOST: mailhog
+      AUTH_SMTP_PORT: 1025
+    expose: 
+      - 4000
+    healthcheck:
+      disable: true
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.middlewares.strip-auth.stripprefix.prefixes=/v1/auth"
+      - "traefik.http.routers.auth.rule=Host(`localhost`) && PathPrefix(`/v1/auth`)"
+      - "traefik.http.routers.auth.middlewares=strip-auth@docker"
+      - "traefik.http.routers.auth.entrypoints=web"
+  storage:
+    image: nhost/hasura-storage:latest
+    depends_on:
+      - postgres
+      - graphql-engine
+      - minio
+    restart: always
+    expose:
+      - 4000
+    healthcheck:
+      disable: true
+    environment:
+      STORAGE_HOST: '0.0.0.0'
+      STORAGE_PUBLIC_URL: http://localhost:${PROXY_PORT:-1337}/v1/storage
+      HASURA_GRAPHQL_GRAPHQL_URL: http://graphql-engine:8080/v1/graphql
+      HASURA_GRAPHQL_DATABASE_URL: postgres://postgres:${POSTGRES_PASSWORD:-secretpgpassword}@postgres:5432/postgres
+      HASURA_GRAPHQL_ADMIN_SECRET: ${HASURA_GRAPHQL_ADMIN_SECRET}
+      HASURA_GRAPHQL_JWT_SECRET: ${HASURA_GRAPHQL_JWT_SECRET}
+      S3_ACCESS_KEY: ${STORAGE_ACCESS_KEY}
+      S3_SECRET_KEY: ${STORAGE_SECRET_KEY}
+      S3_ENDPOINT: http://minio:8484
+      S3_BUCKET: nhost
+      STORAGE_FORCE_DOWNLOAD_FOR_CONTENT_TYPES: text/html,application/javascript
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.middlewares.strip-storage.stripprefix.prefixes=/v1/storage"
+      - "traefik.http.routers.storage.rule=Host(`localhost`) && PathPrefix(`/v1/storage`)"
+      - "traefik.http.routers.storage.middlewares=strip-storage@docker"
+      - "traefik.http.routers.storage.entrypoints=web"
+  minio:
+    image: minio/minio:RELEASE.2021-09-24T00-24-24Z
+    entrypoint: sh
+    command: -c 'mkdir -p /data/nhost && /opt/bin/minio server --address :8484 /data'
+    environment:
+      MINIO_ROOT_USER: ${STORAGE_ACCESS_KEY}
+      MINIO_ROOT_PASSWORD: ${STORAGE_SECRET_KEY}
+    ports:
+      - ${MINIO_PORT:-8484}:8484
+    volumes:
+      - ./data/minio:/data
+  mailhog:
+    image: mailhog/mailhog
+    environment:
+      SMTP_HOST: ${AUTH_SMTP_HOST:-mailhog}
+      SMTP_PORT: ${AUTH_SMTP_PORT:-1025}
+      SMTP_PASS: ${AUTH_SMTP_PASS:-password}
+      SMTP_USER: ${AUTH_SMTP_USER:-user}
+      SMTP_SECURE: "${AUTH_SMTP_SECURE:-false}"
+      SMTP_SENDER: ${AUTH_SMTP_SENDER:-hbp@hbp.com}
+    ports:
+      - ${AUTH_SMTP_PORT:-1025}:1025 
+      - 8025:8025
+    volumes:
+      - ./data/mailhog:/maildir

examples/docker-compose/initdb.d/0001-create-schema.sql

@@ -0,0 +1,13 @@
+-- auth schema
+CREATE SCHEMA IF NOT EXISTS auth;
+CREATE SCHEMA IF NOT EXISTS storage;
+-- https://github.com/hasura/graphql-engine/issues/3657
+CREATE EXTENSION IF NOT EXISTS pgcrypto WITH SCHEMA public;
+CREATE EXTENSION IF NOT EXISTS citext WITH SCHEMA public;
+CREATE OR REPLACE FUNCTION public.set_current_timestamp_updated_at() RETURNS trigger LANGUAGE plpgsql AS $$
+declare _new record;
+begin _new := new;
+_new."updated_at" = now();
+return _new;
+end;
+$$;

examples/nextjs/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": ["plugin:@next/next/recommended"],
+  "rules": {
+    "react/react-in-jsx-scope": "off"
+  }
+}

examples/nextjs/.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+.nhost

examples/nextjs/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @nhost-examples/nextjs
+
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies [207ae38]
+  - @nhost/react-apollo@3.0.0
+  - @nhost/apollo@0.2.0
+  - @nhost/client@0.2.0
+  - @nhost/nextjs@0.2.0
+  - @nhost/react@0.2.0

examples/nextjs/README.md

@@ -0,0 +1,25 @@
+## Nhost & Next.js example (WIP)
+
+This demo is a work in progress, further improvements are to come
+
+### Installation
+
+First, clone this repo. Then run the commands:
+
+```sh
+cd examples/nextjs
+yarn
+yarn dev
+```
+
+If you want to use this demo with your own cloud instance:
+
+- modify the `BACKEND_URL` value in `src/helpers/index.ts`
+- don't forget to change the client URL in the Nhost console so email verification will work: `Users -> Login Settings -> Client login URLs`: `http://localhost:4000`
+
+If you want to use a local Nhost instance, start the CLI in parallel to Nextjs:
+
+```sh
+# Inside examples/nextjs
+nhost -d
+```

examples/nextjs/components/Header.tsx

@@ -0,0 +1,15 @@
+import Link from 'next/link'
+
+export default function Header() {
+  return (
+    <header className="App-header">
+      <h1>Server-Side Rendering with Apollo GraphQL</h1>
+      <nav>
+        <Link href="/">Index</Link> <br />
+        <Link href="/second">Second</Link> <br />
+        <Link href="/third">SSR auth-guarded page</Link> <br />
+        <Link href="/client-side-auth-guard">CSR auth-guarded page</Link> <br />
+      </nav>
+    </header>
+  )
+}

examples/nextjs/components/protected-route.tsx

@@ -0,0 +1,21 @@
+import { useRouter } from 'next/router'
+
+import { useAuthenticationStatus } from '@nhost/nextjs'
+
+export function authProtected(Comp) {
+  return function AuthProtected(props) {
+    const router = useRouter()
+    const { isLoading, isAuthenticated } = useAuthenticationStatus()
+    console.log('Authentication guard: check auth status', { isLoading, isAuthenticated })
+    if (isLoading) {
+      return <div>Loading...</div>
+    }
+
+    if (!isAuthenticated) {
+      router.push('/')
+      return null
+    }
+
+    return <Comp {...props} />
+  }
+}

examples/nextjs/helpers/index.tsx

@@ -0,0 +1,2 @@
+export * from './queries'
+export const BACKEND_URL = 'http://127.0.0.1:1337'

examples/nextjs/helpers/queries.ts

@@ -0,0 +1,10 @@
+import { gql } from '@apollo/client'
+
+export const BOOKS_QUERY = gql`
+  query BookQuery {
+    books {
+      id
+      title
+    }
+  }
+`

examples/nextjs/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/nextjs/nhost/config.yaml

@@ -0,0 +1,133 @@
+metadata_directory: metadata
+services:
+  mailhog:
+    port: 8025
+  hasura:
+    version: v2.2.0
+    environment:
+      hasura_graphql_enable_remote_schema_permissions: false
+  auth:
+    version: 0.4.2
+auth:
+  access_control:
+    email:
+      allowed_email_domains: ''
+      allowed_emails: ''
+      blocked_email_domains: ''
+      blocked_emails: ''
+    url:
+      allowed_redirect_urls: ''
+  anonymous_users_enabled: false
+  client_url: http://localhost:3000
+  disable_new_users: false
+  email:
+    passwordless:
+      enabled: true
+    template_fetch_url: ''
+  gravatar:
+    default: ''
+    enabled: true
+    rating: ''
+  locale:
+    allowed: en
+    default: en
+  password:
+    hibp_enabled: false
+    min_length: 3
+  provider:
+    apple:
+      client_id: ''
+      enabled: false
+      key_id: ''
+      private_key: ''
+      scope: name,email
+      team_id: ''
+    bitbucket:
+      client_id: ''
+      client_secret: ''
+      enabled: false
+    facebook:
+      client_id: ''
+      client_secret: ''
+      enabled: false
+      scope: email,photos,displayName
+    github:
+      client_id: ''
+      client_secret: ''
+      enabled: false
+      scope: user:email
+      token_url: ''
+      user_profile_url: ''
+    gitlab:
+      base_url: ''
+      client_id: ''
+      client_secret: ''
+      enabled: false
+      scope: read_user
+    google:
+      client_id: ''
+      client_secret: ''
+      enabled: false
+      scope: email,profile
+    linkedin:
+      client_id: ''
+      client_secret: ''
+      enabled: false
+      scope: r_emailaddress,r_liteprofile
+    spotify:
+      client_id: ''
+      client_secret: ''
+      enabled: false
+      scope: user-read-email,user-read-private
+    strava:
+      client_id: ''
+      client_secret: ''
+      enabled: false
+    twilio:
+      account_sid: ''
+      auth_token: ''
+      enabled: false
+      messaging_service_id: ''
+    twitter:
+      consumer_key: ''
+      consumer_secret: ''
+      enabled: false
+    windows_live:
+      client_id: ''
+      client_secret: ''
+      enabled: false
+      scope: wl.basic,wl.emails,wl.contacts_emails
+  sms:
+    enabled: false
+    passwordless:
+      enabled: false
+    provider:
+      twilio:
+        account_sid: ''
+        auth_token: ''
+        from: ''
+        messaging_service_id: ''
+  smtp:
+    host: nhost_mailhog
+    method: ''
+    pass: password
+    port: 1807
+    secure: false
+    sender: hasura-auth@example.com
+    user: user
+  token:
+    access:
+      expires_in: 900
+    refresh:
+      expires_in: 43200
+  user:
+    allowed_roles: user,me
+    default_allowed_roles: user,me
+    default_role: user
+    mfa:
+      enabled: false
+      issuer: nhost
+    signin_email_verified_required: true
+storage:
+  force_download_for_content_types: text/html,application/javascript
+version: 3

examples/nextjs/nhost/emails/en/email-confirm-change/body.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <h2>Confirm Email Change</h2>
+    <p>Use this link to confirm changing email:</p>
+    <p>
+      <a
+        href="${serverUrl}/verify?&ticket=${ticket}&type=emailConfirmChange&redirectTo=${redirectTo}"
+      >
+        Change email
+      </a>
+    </p>
+  </body>
+</html>

examples/nextjs/nhost/emails/en/email-confirm-change/subject.txt

@@ -0,0 +1 @@
+Change your email address

examples/nextjs/nhost/emails/en/email-verify/body.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <h2>Verify Email</h2>
+    <p>Use this link to verify your email:</p>
+    <p>
+      <a href="${serverUrl}/verify?&ticket=${ticket}&type=emailVerify&redirectTo=${redirectTo}">
+        Verify Email
+      </a>
+    </p>
+  </body>
+</html>

examples/nextjs/nhost/emails/en/email-verify/subject.txt

@@ -0,0 +1 @@
+Verify your email

examples/nextjs/nhost/emails/en/password-reset/body.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <h2>Reset Password</h2>
+    <p>Use this link to reset your password:</p>
+    <p>
+      <a href="${serverUrl}/verify?&ticket=${ticket}&type=passwordReset&redirectTo=${redirectTo}">
+        Reset password
+      </a>
+    </p>
+  </body>
+</html>

examples/nextjs/nhost/emails/en/password-reset/subject.txt

@@ -0,0 +1 @@
+Reset your password

examples/nextjs/nhost/emails/en/signin-passwordless/body.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <h2>Magic Link</h2>
+    <p>Use this link to securely sign in:</p>
+    <p>
+      <a
+        href="${serverUrl}/verify?&ticket=${ticket}&type=signinPasswordless&redirectTo=${redirectTo}"
+      >
+        Sign In
+      </a>
+    </p>
+  </body>
+</html>

examples/nextjs/nhost/emails/en/signin-passwordless/subject.txt

@@ -0,0 +1 @@
+Secure sign-in link

examples/nextjs/nhost/emails/fr/email-confirm-change/body.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <h2>Confirmer changement de courriel</h2>
+    <p>Utilisez ce lien pour confirmer le changement de courriel:</p>
+    <p>
+      <a
+        href="${serverUrl}/verify?&ticket=${ticket}&type=emailConfirmChange&redirectTo=${redirectTo}"
+      >
+        Changer courriel
+      </a>
+    </p>
+  </body>
+</html>

examples/nextjs/nhost/emails/fr/email-confirm-change/subject.txt

@@ -0,0 +1 @@
+Changez votre adresse courriel

examples/nextjs/nhost/emails/fr/email-verify/body.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <h2>V&eacute;rifiez votre courriel</h2>
+    <p>Utilisez ce lien pour v&eacute;rifier votre courriel:</p>
+    <p>
+      <a href="${serverUrl}/verify?&ticket=${ticket}&type=emailVerify&redirectTo=${redirectTo}">
+        V&eacute;rifier courriel
+      </a>
+    </p>
+  </body>
+</html>

examples/nextjs/nhost/emails/fr/email-verify/subject.txt

@@ -0,0 +1 @@
+Vérifier votre courriel

examples/nextjs/nhost/emails/fr/password-reset/body.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <h2>R&eacute;initializer votre mot de passe</h2>
+    <p>Utilisez ce lien pour r&eacute;initializer votre mot de passe:</p>
+    <p>
+      <a href="${serverUrl}/verify?&ticket=${ticket}&type=passwordReset&redirectTo=${redirectTo}">
+        R&eacute;initializer mot de passe
+      </a>
+    </p>
+  </body>
+</html>

examples/nextjs/nhost/emails/fr/password-reset/subject.txt

@@ -0,0 +1 @@
+Réinitialiser votre mot de passe

examples/nextjs/nhost/emails/fr/signin-passwordless/body.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <h2>Lien magique</h2>
+    <p>Utilisez ce lien pour vous connecter de fa&ccedil;on s&eacute;curitaire:</p>
+    <p>
+      <a
+        href="${serverUrl}/verify?&ticket=${ticket}&type=signinPasswordless&redirectTo=${redirectTo}"
+      >
+        Connexion
+      </a>
+    </p>
+  </body>
+</html>