Merge pull request #2201 from nhost/chore/add-missing-changeset

chore: add missing changeset

.changeset/config.json

@@ -6,5 +6,5 @@
   "access": "restricted",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": []
-}
+  "ignore": ["@nhost-examples/sveltekit"]
+}

.gitignore

@@ -19,10 +19,8 @@ logs/
 coverage/
 dist/
 umd/
-lib/
 node_modules/
 tmp/
-.docz/
 .pnpm-store
 .turbo
 .env
@@ -32,7 +30,6 @@ out/
 # Custom
 *.min.js
 *.map
-todo.md
 
 # Config files that are not part of the repository root anymore. Should be removed in the future.
 /.eslintignore

dashboard/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nhost/dashboard
 
+## 0.20.8
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.34
+- @nhost/nextjs@1.13.36
+
 ## 0.20.7
 
 ### Patch Changes

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.20.7",
+  "version": "0.20.8",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -106,6 +106,7 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/ace": "^0.0.48",
     "@types/bcryptjs": "^2.4.2",
+    "@types/jest": "^29.5.3",
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^16.11.7",
     "@types/pluralize": "^0.0.30",

dashboard/src/features/database/dataGrid/components/ColumnAutocomplete/ColumnAutocomplete.test.tsx

@@ -2,8 +2,9 @@ import permissionVariablesQuery from '@/tests/msw/mocks/graphql/permissionVariab
 import hasuraMetadataQuery from '@/tests/msw/mocks/rest/hasuraMetadataQuery';
 import tableQuery from '@/tests/msw/mocks/rest/tableQuery';
 import { render, screen } from '@/tests/testUtils';
+import '@testing-library/jest-dom';
 import { setupServer } from 'msw/node';
-import { test, vi } from 'vitest';
+import { afterAll, afterEach, beforeAll, test, vi } from 'vitest';
 import ColumnAutocomplete from './ColumnAutocomplete';
 
 const server = setupServer(

dashboard/src/features/projects/permissions/settings/utils/getAllPermissionVariables/getAllPermissionVariables.test.ts

@@ -1,4 +1,5 @@
 import type { PermissionVariable } from '@/types/application';
+import { expect, test } from 'vitest';
 import getAllPermissionVariables from './getAllPermissionVariables';
 
 test('should convert permission variable object to array', () => {

dashboard/src/features/projects/resources/settings/utils/getAllocatedResources/getAllocatedResources.test.ts

@@ -1,4 +1,4 @@
-import { test } from 'vitest';
+import { expect, test } from 'vitest';
 import getAllocatedResources from './getAllocatedResources';
 
 test('should return the total number of allocated resources', () => {

examples/react-apollo/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @nhost-examples/react-apollo
 
+## 0.1.15
+
+### Patch Changes
+
+- dba71483d: chore: react-apollo-example: add profile to allowedUrls
+- e819903f1: chore: remove facebook login
+  - @nhost/react@2.0.30
+  - @nhost/react-apollo@5.0.34
+
 ## 0.1.14
 
 ### Patch Changes

examples/react-apollo/nhost/nhost.toml

@@ -32,6 +32,7 @@ version = '0.21.2'
 
 [auth.redirections]
 clientUrl = 'https://react-apollo.example.nhost.io/'
+allowedUrls = ['https://react-apollo.example.nhost.io/profile']
 
 [auth.signUp]
 enabled = true

examples/react-apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost-examples/react-apollo",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.7.14",

examples/react-apollo/src/components/OauthLinks.tsx

@@ -1,11 +1,11 @@
-import { FaFacebook, FaGithub, FaGoogle } from 'react-icons/fa/index.js'
+import { FaGithub, FaGoogle } from 'react-icons/fa/index.js'
 
 import { useProviderLink } from '@nhost/react'
 
 import AuthLink from './AuthLink'
 
 export default function OauthLinks() {
-  const { github, google, facebook } = useProviderLink({ redirectTo: window.location.origin })
+  const { github, google } = useProviderLink({ redirectTo: window.location.origin })
   return (
     <>
       <AuthLink leftIcon={<FaGithub />} link={github} color="#333">
@@ -14,9 +14,6 @@ export default function OauthLinks() {
       <AuthLink leftIcon={<FaGoogle />} link={google} color="#de5246">
         Continue with Google
       </AuthLink>
-      <AuthLink leftIcon={<FaFacebook />} link={facebook} color="#3b5998">
-        Continue with Facebook
-      </AuthLink>
     </>
   )
 }

examples/react-apollo/src/profile/security-keys.tsx

@@ -5,6 +5,7 @@ import { RemoveSecurityKeyMutation, SecurityKeysQuery } from 'src/generated'
 import { gql, useMutation } from '@apollo/client'
 import { ActionIcon, Button, Card, SimpleGrid, Table, TextInput, Title } from '@mantine/core'
 import { useInputState } from '@mantine/hooks'
+import { showNotification } from '@mantine/notifications'
 import { useAddSecurityKey, useUserId } from '@nhost/react'
 import { useAuthQuery } from '@nhost/react-apollo'
 
@@ -42,9 +43,14 @@ export const SecurityKeys: React.FC = () => {
 
   const addKey = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
-    const { key, error } = await add(nickname)
-    if (error) {
+    const { key, isError, error } = await add(nickname)
+    if (isError) {
       console.log(error)
+      showNotification({
+        color: 'red',
+        title: 'Error',
+        message: error?.message || null
+      })
     } else {
       setNickname('')
     }

examples/sveltekit/.gitignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+/test-results/
+/playwright-report/
+/playwright/.cache/

examples/sveltekit/.npmrc

@@ -0,0 +1 @@
+hoist-pattern[]=!@nhost/nhost-js

examples/sveltekit/CHANGELOG.md

@@ -0,0 +1,5 @@
+---
+'@nhost-examples/sveltekit': minor
+---
+
+feat: add nhost with sveltekit example project

examples/sveltekit/README.md

@@ -0,0 +1,44 @@
+# Nhost with SvelteKit Example
+
+## Get Started
+
+1. Clone the repository
+
+   ```sh
+   git clone https://github.com/nhost/nhost
+   cd nhost
+   ```
+
+2. Install and build dependencies
+
+   ```sh
+   pnpm install
+   pnpm build
+   ```
+
+3. Go to the SvelteKit example folder
+
+   ```sh
+   cd examples/sveltekit
+   ```
+
+4. Create a `.env` file and set the subdomain and region of your Nhost project. When running locally with the CLI, set the subdomain to `local`.
+
+   ```sh
+   PUBLIC_NHOST_SUBDOMAIN=
+   PUBLIC_NHOST_REGION=
+   ```
+
+5. Terminal 1: Start Nhost
+
+   > Make sure you have the [Nhost CLI installed](https://docs.nhost.io/platform/cli).
+
+   ```sh
+   nhost up
+   ```
+
+6. Terminal 2: Start the SvelteKit dev server
+
+   ```sh
+   pnpm dev
+   ```

examples/sveltekit/jsconfig.json

@@ -0,0 +1,17 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

examples/sveltekit/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@nhost-examples/sveltekit",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+    "install-browsers": "pnpm dlx playwright@1.31.0 install --with-deps",
+    "add-nhost-js": "pnpm add @nhost/nhost-js --ignore-workspace",
+    "test": "pnpm install-browsers && pnpm add-nhost-js && pnpm dlx playwright@1.31.0 test",
+    "lint": "eslint .",
+    "postinstall": "pnpm add-nhost-js"
+  },
+  "devDependencies": {
+    "@nhost/nhost-js": "2.2.13",
+    "@playwright/test": "^1.31.0",
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/kit": "^1.5.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte": "^2.26.0",
+    "postcss": "^8.4.23",
+    "prettier": "^2.8.0",
+    "prettier-plugin-svelte": "^2.8.1",
+    "svelte": "^3.54.0",
+    "svelte-check": "^3.0.1",
+    "tailwindcss": "^3.3.2",
+    "typescript": "^5.0.0",
+    "vite": "^4.3.0",
+    "vitest": "^0.25.3"
+  },
+  "type": "module",
+  "dependencies": {
+    "@apollo/client": "^3.8.1",
+    "graphql": "^16.7.1",
+    "graphql-tag": "^2.12.6",
+    "js-cookie": "^3.0.5",
+    "playwright": "^1.37.1",
+    "uuid": "^9.0.0"
+  }
+}

examples/sveltekit/playwright.config.js

@@ -0,0 +1,57 @@
+// @ts-check
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:5173',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry'
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] }
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] }
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] }
+    }
+  ],
+
+  webServer: {
+    command: 'pnpm dev',
+    url: 'http://localhost:5173',
+    reuseExistingServer: !process.env.CI
+  }
+})

examples/sveltekit/pnpm-lock.yaml

@@ -0,0 +1,179 @@
+lockfileVersion: '6.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+dependencies:
+  graphql:
+    specifier: ^16.7.1
+    version: 16.8.0
+
+devDependencies:
+  '@nhost/nhost-js':
+    specifier: 2.2.13
+    version: 2.2.13(graphql@16.8.0)
+
+packages:
+
+  /@graphql-typed-document-node/core@3.2.0(graphql@16.8.0):
+    resolution: {integrity: sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==}
+    peerDependencies:
+      graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+    dependencies:
+      graphql: 16.8.0
+    dev: true
+
+  /@nhost/graphql-js@0.1.4(graphql@16.8.0):
+    resolution: {integrity: sha512-IPHuGOf4iQrFsxG7Rh5jCCZzPCN9JkvldFww4Fz1lCVi9ZQNEaGaawIP5gBuBHeYIuALeaK1wVYKPc7vJ/euCA==}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      '@graphql-typed-document-node/core': 3.2.0(graphql@16.8.0)
+      graphql: 16.8.0
+      isomorphic-unfetch: 3.1.0
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
+  /@nhost/hasura-auth-js@2.1.7:
+    resolution: {integrity: sha512-dbi8zrmuE3xSlA7WMNyrZzVPLKYSBUlKtUjob+axhts0+4TsqsB7NvdLXrhM0fYjRY5SFUtN2JLs+EWDGKAoLQ==}
+    dependencies:
+      '@simplewebauthn/browser': 6.2.2
+      fetch-ponyfill: 7.1.0
+      js-cookie: 3.0.5
+      jwt-decode: 3.1.2
+      xstate: 4.38.2
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
+  /@nhost/hasura-storage-js@2.2.2:
+    resolution: {integrity: sha512-GMeB1m6YKZMZDSO6UtmgXYWxsFUNlphIZH9JeiDX+6UTmbd62UlDmhBcmx2OGy/tvv57D+HbohpV6AY9S6QL4w==}
+    dependencies:
+      fetch-ponyfill: 7.1.0
+      form-data: 4.0.0
+      xstate: 4.38.2
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
+  /@nhost/nhost-js@2.2.13(graphql@16.8.0):
+    resolution: {integrity: sha512-HU9eOpkVBGGMHsRThGyl654Y9W8bksSEnyEvDojUg76+3ngOn2ebrasXR/94YoR206soEzq3v4b0OKmn/1jlnQ==}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      '@nhost/graphql-js': 0.1.4(graphql@16.8.0)
+      '@nhost/hasura-auth-js': 2.1.7
+      '@nhost/hasura-storage-js': 2.2.2
+      graphql: 16.8.0
+      isomorphic-unfetch: 3.1.0
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
+  /@simplewebauthn/browser@6.2.2:
+    resolution: {integrity: sha512-VUtne7+s6BmW4usnbitjZEI1VNT/PNh6bYg+AI4OMdfpo5z+yAq+6iVAWBJlIUGVk5InetEQvTUp6OefBam8qg==}
+    dev: true
+
+  /asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+    dev: true
+
+  /combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      delayed-stream: 1.0.0
+    dev: true
+
+  /delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+    dev: true
+
+  /fetch-ponyfill@7.1.0:
+    resolution: {integrity: sha512-FhbbL55dj/qdVO3YNK7ZEkshvj3eQ7EuIGV2I6ic/2YiocvyWv+7jg2s4AyS0wdRU75s3tA8ZxI/xPigb0v5Aw==}
+    dependencies:
+      node-fetch: 2.6.12
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
+  /form-data@4.0.0:
+    resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
+    engines: {node: '>= 6'}
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+    dev: true
+
+  /graphql@16.8.0:
+    resolution: {integrity: sha512-0oKGaR+y3qcS5mCu1vb7KG+a89vjn06C7Ihq/dDl3jA+A8B3TKomvi3CiEcVLJQGalbu8F52LxkOym7U5sSfbg==}
+    engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
+
+  /isomorphic-unfetch@3.1.0:
+    resolution: {integrity: sha512-geDJjpoZ8N0kWexiwkX8F9NkTsXhetLPVbZFQ+JTW239QNOwvB0gniuR1Wc6f0AMTn7/mFGyXvHTifrCp/GH8Q==}
+    dependencies:
+      node-fetch: 2.6.12
+      unfetch: 4.2.0
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
+  /js-cookie@3.0.5:
+    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
+    engines: {node: '>=14'}
+    dev: true
+
+  /jwt-decode@3.1.2:
+    resolution: {integrity: sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==}
+    dev: true
+
+  /mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-db: 1.52.0
+    dev: true
+
+  /node-fetch@2.6.12:
+    resolution: {integrity: sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+    dependencies:
+      whatwg-url: 5.0.0
+    dev: true
+
+  /tr46@0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+    dev: true
+
+  /unfetch@4.2.0:
+    resolution: {integrity: sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA==}
+    dev: true
+
+  /webidl-conversions@3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+    dev: true
+
+  /whatwg-url@5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+    dev: true
+
+  /xstate@4.38.2:
+    resolution: {integrity: sha512-Fba/DwEPDLneHT3tbJ9F3zafbQXszOlyCJyQqqdzmtlY/cwE2th462KK48yaANf98jHlP6lJvxfNtN0LFKXPQg==}
+    dev: true

examples/sveltekit/postcss.config.js

@@ -0,0 +1,7 @@
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}

examples/sveltekit/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		interface Locals {}
+		interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export { };
+

examples/sveltekit/src/app.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

examples/sveltekit/src/lib/components/Button.svelte

@@ -0,0 +1,15 @@
+<script>
+	/** @type {("button" | "submit" | "reset" | null | undefined)} */
+	export let type = 'button';
+	export let disabled = false;
+</script>
+
+<button
+	{disabled}
+	{type}
+	class="{disabled == true
+		? 'bg-indigo-200 hover:bg-grey-700'
+		: 'bg-indigo-600 hover:bg-indigo-700 focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'} inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white focus:outline-none"
+>
+	<slot />
+</button>

examples/sveltekit/src/lib/components/Input.svelte

@@ -0,0 +1,40 @@
+<script>
+	export let value = '';
+
+	/** @type {string} */
+	export let id;
+
+	/** @type {string} */
+	export let label;
+
+	export let type = 'text';
+
+	/** @type {string} */
+	export let name;
+
+	export let required = false;
+
+	export let inputRef = null;
+
+	/** @param {HTMLInputElement} node */
+	function setType(node) {
+		node.type = type;
+	}
+</script>
+
+<div class={$$props.class}>
+	<label for={id} class="block text-sm font-medium text-gray-700">
+		{label}
+	</label>
+	<div class="mt-1">
+		<input
+			use:setType
+			{name}
+			{id}
+			{required}
+			bind:value
+			bind:this={inputRef}
+			class="block w-full p-3 border rounded-md border-slate-300 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+		/>
+	</div>
+</div>

examples/sveltekit/src/lib/components/Navigation.svelte

@@ -0,0 +1,66 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	/** @type {import('@nhost/nhost-js').User | undefined} */
+	export let user;
+
+	$: navigation = [
+		{
+			href: '/',
+			name: 'Home'
+		},
+		{
+			href: '/protected',
+			name: `${user ? '🔓' : '🔒'} Protected`
+		}
+	];
+
+	const dispatch = createEventDispatcher();
+
+	const handleSignOut = () => {
+		user = undefined;
+
+		dispatch('signout', {
+			signout: true
+		});
+	};
+</script>
+
+<header class="bg-indigo-600">
+	<nav class="container mx-auto">
+		<div class="flex items-center justify-between w-full py-4">
+			<div class="flex items-center">
+				<div class="ml-10 space-x-8">
+					{#each navigation as link}
+						<a href={link.href} class="text-lg font-medium text-white hover:text-indigo-50">
+							{link.name}
+						</a>
+					{/each}
+				</div>
+			</div>
+			<div class="ml-10 space-x-4">
+				{#if user}
+					<button
+						on:click={handleSignOut}
+						class="inline-block px-4 py-2 text-base font-medium text-white bg-indigo-500 border border-transparent rounded-md hover:bg-opacity-75"
+					>
+						Sign out
+					</button>
+				{:else}
+					<a
+						href="/sign-in"
+						class="inline-block px-4 py-2 text-base font-medium text-white bg-indigo-500 border border-transparent rounded-md hover:bg-opacity-75"
+					>
+						Sign in
+					</a>
+					<a
+						href="/sign-up"
+						class="inline-block px-4 py-2 text-base font-medium text-indigo-600 bg-white border border-transparent rounded-md hover:bg-indigo-50"
+					>
+						Sign up
+					</a>
+				{/if}
+			</div>
+		</div>
+	</nav>
+</header>

examples/sveltekit/src/lib/nhost-auth-sveltekit.js

@@ -0,0 +1,62 @@
+import { invalidate } from '$app/navigation';
+import { env } from '$env/dynamic/public';
+import { NhostClient } from '@nhost/nhost-js';
+import Cookies from 'js-cookie';
+
+export const NHOST_SESSION_KEY = 'nhostSession';
+const isBrowser = typeof window !== 'undefined';
+
+/** @type {import('@nhost/nhost-js').NhostClient | null} */
+let nhost;
+
+/** @param {import('@nhost/nhost-js').NhostSession | null} session */
+export const setNhostSessionInCookie = (session) => {
+	if (!session) {
+		Cookies.remove(NHOST_SESSION_KEY);
+		return;
+	}
+
+	const expires = new Date();
+
+	// * Expire the cookie 60 seconds before the token expires
+	expires.setSeconds(expires.getSeconds() + session.accessTokenExpiresIn - 60);
+
+	Cookies.set(NHOST_SESSION_KEY, JSON.stringify(session), {
+		sameSite: 'strict',
+		expires
+	});
+};
+
+/** @param {import('@sveltejs/kit').Cookies} cookies */
+export const getNhostSessionFromCookie = (cookies) => {
+	const nhostSessionCookie = cookies.get(NHOST_SESSION_KEY);
+	return nhostSessionCookie ? JSON.parse(nhostSessionCookie) : null;
+};
+
+/** @param {import('@nhost/nhost-js').NhostSession} session */
+export const getNhostLoadClient = async (session) => {
+	if (isBrowser && nhost) {
+		return nhost;
+	}
+
+	nhost = new NhostClient({
+		subdomain: env.PUBLIC_NHOST_SUBDOMAIN || 'local',
+		region: env.PUBLIC_NHOST_REGION,
+		start: false
+	});
+
+	if (isBrowser) {
+		nhost.auth.onAuthStateChanged((_, session) => {
+			setNhostSessionInCookie(session);
+			invalidate('nhost:auth');
+		});
+
+		nhost.auth.onTokenChanged((session) => {
+			setNhostSessionInCookie(session);
+		});
+	}
+
+	nhost.auth.client.start({ initialSession: session });
+
+	return nhost;
+};

examples/sveltekit/src/routes/+layout.js

@@ -0,0 +1,22 @@
+import { getNhostLoadClient } from '$lib/nhost-auth-sveltekit.js';
+import { redirect } from '@sveltejs/kit';
+
+const unProtectedRoutes = ['/', '/sign-in', '/sign-up'];
+
+export const load = async ({ data, depends, route }) => {
+	depends('nhost:auth');
+
+	const nhost = await getNhostLoadClient(data.nhostSession);
+	const session = nhost.auth.getSession();
+
+	if (!unProtectedRoutes.includes(route.id ?? '')) {
+		if (!session) {
+			throw redirect(303, '/');
+		}
+	}
+
+	return {
+		nhost: nhost,
+		session: session
+	};
+};

examples/sveltekit/src/routes/+layout.server.js

@@ -0,0 +1,8 @@
+import { getNhostSessionFromCookie } from '$lib/nhost-auth-sveltekit';
+
+/** @type {import('./$types').LayoutServerLoad} */
+export async function load({ cookies }) {
+	return {
+		nhostSession: getNhostSessionFromCookie(cookies)
+	};
+}

examples/sveltekit/src/routes/+layout.svelte

@@ -0,0 +1,24 @@
+<script>
+	import { goto } from '$app/navigation';
+	import Navigation from '$lib/components/Navigation.svelte';
+	import './styles.css';
+
+	export let data;
+	let { nhost } = data;
+
+	/**
+	 * @param {{ detail: { signout: any; }; }} event
+	 */
+	async function handleSignOut(event) {
+		await nhost.auth.signOut();
+		await goto(`/`);
+	}
+</script>
+
+<div class="app">
+	<Navigation user={data.session?.user} on:signout={handleSignOut} />
+
+	<div class="container p-4 mx-auto mt-8 antialiased">
+		<slot />
+	</div>
+</div>

examples/sveltekit/src/routes/+page.svelte

@@ -0,0 +1,6 @@
+<svelte:head>
+	<title>Login</title>
+	<meta name="description" content="About this app" />
+</svelte:head>
+
+<h1 class="text-2xl text-center">Hi, login/register to get started</h1>

examples/sveltekit/src/routes/protected/+page.svelte

@@ -0,0 +1,44 @@
+<script>
+	export let data;
+	let { session, nhost } = data;
+	import { gql } from 'graphql-tag';
+
+	const getFiles = async () => {
+		const response = await nhost.graphql.request(gql`
+			{
+				files {
+					id
+					name
+				}
+			}
+		`);
+
+		return response.data.files;
+	};
+</script>
+
+<svelte:head>
+	<title>Protected Page</title>
+	<meta name="description" content="About this app" />
+</svelte:head>
+
+<h1 class="text-2xl font-semibold text-center">
+	Hi! You are registered with email: {session?.user.email}.
+</h1>
+
+<h2>Files</h2>
+{#await getFiles()}
+	<p>Loading...</p>
+{:then files}
+	<p>Showing {files.length} files</p>
+
+	<ul>
+		{#each files as file}
+			<li>
+				{file.name}
+			</li>
+		{/each}
+	</ul>
+{:catch error}
+	<p>{error.message}</p>
+{/await}

examples/sveltekit/src/routes/sign-in/+page.svelte

@@ -0,0 +1,56 @@
+<script>
+	import Input from '$lib/components/Input.svelte';
+	import Button from '$lib/components/Button.svelte';
+	import { goto, invalidate } from '$app/navigation';
+
+	export let data;
+	let { nhost } = data;
+
+	/** @type {string}*/
+	let email;
+
+	/** @type {string}*/
+	let password;
+
+	/** @type {import('@nhost/nhost-js').AuthErrorPayload | null} */
+	let error;
+
+	const handleSignIn = async () => {
+		const { error: signInError } = await nhost.auth.signIn({
+			email,
+			password
+		});
+
+		error = signInError;
+
+		if (!error) {
+			await invalidate('nhost:auth');
+			await goto('/protected');
+		}
+	};
+</script>
+
+<svelte:head>
+	<title>Sign In</title>
+</svelte:head>
+
+<h1 class="text-2xl font-semibold text-center">Sign In</h1>
+
+{#if error}
+	<p class="mt-3 font-semibold text-center text-red-500">{error.message}</p>
+{/if}
+
+<form class="space-y-5" on:submit={handleSignIn}>
+	<Input label="Email" id="email" name="email" type="email" bind:value={email} required />
+
+	<Input
+		label="Password"
+		id="password"
+		name="password"
+		type="password"
+		bind:value={password}
+		required
+	/>
+
+	<Button type="submit">Sign In</Button>
+</form>

examples/sveltekit/src/routes/sign-up/+page.svelte

@@ -0,0 +1,82 @@
+<script>
+	import Input from '$lib/components/Input.svelte';
+	import Button from '$lib/components/Button.svelte';
+	import { goto } from '$app/navigation';
+
+	export let data;
+	let { nhost } = data;
+
+	/** @type {string}*/
+	let firstName;
+
+	/** @type {string}*/
+	let lastName;
+
+	/** @type {string}*/
+	let email;
+
+	/** @type {string}*/
+	let password;
+
+	/** @type {import('@nhost/nhost-js').AuthErrorPayload | null} */
+	let error;
+
+	const handleSignUp = async () => {
+		const { error: signUpError } = await nhost.auth.signUp({
+			email,
+			password,
+			options: {
+				displayName: `${firstName} ${lastName}`
+			}
+		});
+
+		error = signUpError;
+
+		if (!error) {
+			await goto('/sign-in');
+		}
+	};
+</script>
+
+<svelte:head>
+	<title>Sign Up</title>
+</svelte:head>
+
+<h1 class="text-2xl font-semibold text-center">Sign Up</h1>
+
+{#if error}
+	<p class="mt-3 font-semibold text-center text-red-500">{error.message}</p>
+{/if}
+
+<form class="space-y-5" on:submit={handleSignUp}>
+	<Input
+		label="First Name"
+		id="firstName"
+		name="firstName"
+		type="text"
+		bind:value={firstName}
+		required
+	/>
+
+	<Input
+		label="Last Name"
+		id="lastName"
+		name="lastName"
+		type="text"
+		bind:value={lastName}
+		required
+	/>
+
+	<Input label="Email" id="email" name="email" type="email" bind:value={email} required />
+
+	<Input
+		label="Password"
+		id="password"
+		name="password"
+		type="password"
+		bind:value={password}
+		required
+	/>
+
+	<Button type="submit">Sign Up</Button>
+</form>

examples/sveltekit/src/routes/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/sveltekit/svelte.config.js

@@ -0,0 +1,13 @@
+import adapter from '@sveltejs/adapter-auto';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;

examples/sveltekit/tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+}

examples/sveltekit/tests/example.spec.js

@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test'
+
+test('has title', async ({ page }) => {
+  await page.goto('/')
+  await expect(page).toHaveTitle(/Login/)
+})

examples/sveltekit/vite.config.js

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [sveltekit()]
+})

integrations/apollo/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/apollo
 
+## 5.2.17
+
+### Patch Changes
+
+- @nhost/nhost-js@2.2.15
+
 ## 5.2.16
 
 ### Patch Changes

integrations/apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/apollo",
-  "version": "5.2.16",
+  "version": "5.2.17",
   "description": "Nhost Apollo Client library",
   "license": "MIT",
   "keywords": [

integrations/react-apollo/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nhost/react-apollo
 
+## 5.0.34
+
+### Patch Changes
+
+- @nhost/apollo@5.2.17
+- @nhost/react@2.0.30
+
 ## 5.0.33
 
 ### Patch Changes

integrations/react-apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react-apollo",
-  "version": "5.0.33",
+  "version": "5.0.34",
   "description": "Nhost React Apollo client",
   "license": "MIT",
   "keywords": [

integrations/react-urql/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/react-urql
 
+## 2.0.31
+
+### Patch Changes
+
+- @nhost/react@2.0.30
+
 ## 2.0.30
 
 ### Patch Changes

integrations/react-urql/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react-urql",
-  "version": "2.0.30",
+  "version": "2.0.31",
   "description": "Nhost React URQL client",
   "license": "MIT",
   "keywords": [

packages/hasura-auth-js/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/hasura-auth-js
 
+## 2.1.8
+
+### Patch Changes
+
+- 032c0bd21: fix: make sure errors are correctly thrown on non v8 browsers
+
 ## 2.1.7
 
 ### Patch Changes

packages/hasura-auth-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/hasura-auth-js",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "Hasura-auth client",
   "license": "MIT",
   "keywords": [

packages/hasura-auth-js/src/errors.ts

@@ -15,7 +15,9 @@ export class CodifiedError extends Error {
   error: AuthErrorPayload
   constructor(original: Error | AuthErrorPayload) {
     super(original.message)
-    Error.captureStackTrace(this, this.constructor)
+
+    if (Error.captureStackTrace) Error.captureStackTrace(this, this.constructor)
+
     if (original instanceof Error) {
       this.name = original.name
       this.error = {

packages/nextjs/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/nextjs
 
+## 1.13.36
+
+### Patch Changes
+
+- @nhost/react@2.0.30
+
 ## 1.13.35
 
 ### Patch Changes

packages/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/nextjs",
-  "version": "1.13.35",
+  "version": "1.13.36",
   "description": "Nhost NextJS library",
   "license": "MIT",
   "keywords": [

packages/nhost-js/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nhost/nhost-js
 
+## 2.2.15
+
+### Patch Changes
+
+- Updated dependencies [032c0bd21]
+  - @nhost/hasura-auth-js@2.1.8
+
 ## 2.2.14
 
 ### Patch Changes

packages/nhost-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/nhost-js",
-  "version": "2.2.14",
+  "version": "2.2.15",
   "description": "Nhost JavaScript SDK",
   "license": "MIT",
   "keywords": [

packages/react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/react
 
+## 2.0.30
+
+### Patch Changes
+
+- @nhost/nhost-js@2.2.15
+
 ## 2.0.29
 
 ### Patch Changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react",
-  "version": "2.0.29",
+  "version": "2.0.30",
   "description": "Nhost React library",
   "license": "MIT",
   "keywords": [

packages/vue/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/vue
 
+## 1.13.35
+
+### Patch Changes
+
+- @nhost/nhost-js@2.2.15
+
 ## 1.13.34
 
 ### Patch Changes

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/vue",
-  "version": "1.13.34",
+  "version": "1.13.35",
   "description": "Nhost Vue library",
   "license": "MIT",
   "keywords": [