chore: update versions (#3383)

This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @nhost/nextjs@2.3.0

### Minor Changes

-   b8cb491: fix: update dependencies to fix vulnerabilities

## @nhost/dashboard@2.34.0

### Minor Changes

-   7eb9539: feat (dashboard): Allow upgrading free organizations
-   129ec1e: feat: dashboard: new onboarding
-   59249e5: fix: elevate permissions in password reset
-   5e9ddb4: fix: show Run service name in logs page
- 4ffff86: fix (dashboard): Disable settings pages when config server
env variable is not set
-   b8cb491: fix: update dependencies to fix vulnerabilities
- 5565451: fix: support page, can scroll all the way down in Chrome for
iOS
-   f7d7080: chore: dashboard: add gtag

### Patch Changes

-   181c0ab: fix (dashboard): Fix upgrade project e2e tests
- 56c87da: fix (dashboard): Use the correct http method when conneting
to new github
-   00132bd: fix (dashboard): Clear isSigningOut variable on Signin page
- 66e0cc8: fix (dashboard): Check if user is logged in before
redirecting
-   9c0a118: chore (dashboard): Add RetryLink to ApolloClient
-   df6b85e: fix (dashboard): fix password reset redirect url
-   ec24567: fix (dashboard): Add content-type header
-   57b2615: chore (dashboard): refactor redirect behaviour
- cffa161: fix (dashboard): disable settings in the header when
self-hosting
- 85316e8: fix (dashboard): Remove second loading indicator on projects
page
- 47ab341: fix (dashboard): Fix announcement layout when title is too
short

## @nhost/docs@2.34.0

### Minor Changes

- 40439b9: chore: updated postgres extension and added new custom claims
default option

### Patch Changes

-   906620a: fix: functions: added response payload limit

## @nhost-examples/codegen-react-apollo@0.9.0

### Minor Changes

-   b8cb491: fix: update dependencies to fix vulnerabilities

## @nhost-examples/codegen-react-query@0.9.0

### Minor Changes

-   b8cb491: fix: update dependencies to fix vulnerabilities

## @nhost-examples/codegen-react-urql@0.8.0

### Minor Changes

-   b8cb491: fix: update dependencies to fix vulnerabilities

## @nhost-examples/nextjs@0.5.0

### Minor Changes

-   b8cb491: fix: update dependencies to fix vulnerabilities

### Patch Changes

-   Updated dependencies [b8cb491]
    -   @nhost/nextjs@2.3.0

## @nhost-examples/nextjs-server-components@0.7.0

### Minor Changes

-   b8cb491: fix: update dependencies to fix vulnerabilities

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.github/labeler.yml

@@ -1,24 +1,25 @@
 dashboard:
-  - dashboard/**/*
+  - any:
+      - changed-files:
+          - any-glob-to-any-file: ['dashboard/**/*']
 
 documentation:
-  - any:
-      - docs/**/*
+  - any: ['docs/**/*']
 
 examples:
-  - examples/**/*
+  - any: ['examples/**/*']
 
 sdk:
-  - packages/**/*
+  - any: ['packages/**/*']
 
 integrations:
-  - integrations/**/*
+  - any: ['integrations/**/*']
 
 react:
-  - '{packages,examples,integrations}/*react*/**/*'
+  - any: ['{packages,examples,integrations}/*react*/**/*']
 
 nextjs:
-  - '{packages,examples}/*next*/**/*'
+  - any: ['{packages,examples}/*next*/**/*']
 
 vue:
-  - '{packages,examples,integrations}/*vue*/**/*'
+  - any: ['{packages,examples,integrations}/*vue*/**/*']

.github/workflows/ci.yaml

@@ -7,12 +7,14 @@ on:
       - 'assets/**'
       - '**.md'
       - 'LICENSE'
+      - 'docs/**'
   pull_request:
     types: [opened, synchronize]
     paths-ignore:
       - 'assets/**'
       - '**.md'
       - 'LICENSE'
+      - 'docs/**'
 env:
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
   TURBO_TEAM: nhost
@@ -27,7 +29,8 @@ env:
   NHOST_PRO_TEST_PROJECT_NAME: ${{ vars.NHOST_PRO_TEST_PROJECT_NAME }}
   NHOST_TEST_USER_EMAIL: ${{ secrets.NHOST_TEST_USER_EMAIL }}
   NHOST_TEST_USER_PASSWORD: ${{ secrets.NHOST_TEST_USER_PASSWORD }}
-  NHOST_TEST_PROJECT_ADMIN_SECRET: ${{ secrets.NHOST_TEST_PROJECT_ADMIN_SECRET }}
+  NHOST_TEST_PROJECT_ADMIN_SECRET: '${{ secrets.NHOST_TEST_PROJECT_ADMIN_SECRET }}'
+  NHOST_TEST_FREE_USER_EMAILS: ${{ secrets.NHOST_TEST_FREE_USER_EMAILS }}
 
 jobs:
   build:
@@ -169,6 +172,10 @@ jobs:
       - name: Set Dashboard Preview URL
         if: steps.fetch-dashboard-preview-url.outputs.preview_url != ''
         run: echo "NHOST_TEST_DASHBOARD_URL=https://${{ steps.fetch-dashboard-preview-url.outputs.preview_url }}" >> $GITHUB_ENV
+      - name: Run Onboarding Dashboard e2e tests
+        if: matrix.package.path == 'dashboard'
+        timeout-minutes: 10
+        run: pnpm --filter="${{ matrix.package.name }}" run e2e:onboarding
       # * Run the `ci` script of the current package of the matrix. Dependencies build is cached by Turborepo
       - name: Run e2e tests
         timeout-minutes: 20
@@ -177,13 +184,16 @@ jobs:
       - name: Run Local Dashboard e2e tests
         if: matrix.package.path == 'dashboard'
         timeout-minutes: 5
-        run: |
-          pnpm --filter="${{ matrix.package.name }}" run e2e-local
+        run: pnpm --filter="${{ matrix.package.name }}" run e2e:local
 
       - name: Stop Nhost CLI
         if: matrix.package.path == 'dashboard'
         working-directory: ./nhost-test-project
         run: nhost down
+      - name: Stop Nhost CLI for packages
+        if: always() && (matrix.package.path == 'packages/hasura-auth-js' || matrix.package.path == 'packages/hasura-storage-js')
+        working-directory: ./${{ matrix.package.path }}
+        run: nhost down
       - id: file-name
         if: ${{ failure() }}
         name: Transform package name into a valid file name

.github/workflows/deploy-dashboard.yaml

@@ -56,3 +56,31 @@ jobs:
           vercel pull --environment=production --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
           vercel build --prod --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
           vercel deploy --prebuilt --prod --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
+
+      - name: Send Discord notification (success)
+        if: success()
+        uses: tsickert/discord-webhook@v7.0.0
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_PRODUCTION }}
+          embed-title: "Dashboard Deployment"
+          embed-description: |
+            **Status**: success
+            **Triggered by**: ${{ github.actor }}
+
+            **Inputs**:
+            - Git Ref: ${{ inputs.git_ref }}
+          embed-color: '5763719'
+
+      - name: Send Discord notification (failure)
+        if: failure()
+        uses: tsickert/discord-webhook@v7.0.0
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_PRODUCTION }}
+          embed-title: "Dashboard Deployment"
+          embed-description: |
+            **Status**: failure
+            **Triggered by**: ${{ github.actor }}
+
+            **Inputs**:
+            - Git Ref: ${{ inputs.git_ref }}
+          embed-color: '15548997'

.github/workflows/labeler.yaml

@@ -3,13 +3,12 @@ on:
   - pull_request_target
 
 jobs:
-  triage:
+  labeler:
     permissions:
       contents: read
       pull-requests: write
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/labeler@v4
+      - uses: actions/labeler@v5
         with:
-          repo-token: '${{ secrets.GH_PAT }}'
-          sync-labels: ''
+          repo-token: ${{ secrets.GH_PAT }}

DEVELOPERS.md

@@ -2,9 +2,7 @@
 
 ## Requirements
 
-### Node.js v18
-
-_⚠️ Node.js v16 is also supported for the time being but support will be dropped in the near future_.
+### Node.js v20 or later
 
 ### [pnpm](https://pnpm.io/) package manager
 

README.md

@@ -61,9 +61,9 @@ Visit [https://docs.nhost.io](http://docs.nhost.io) for the complete documentati
 
 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.
 
-## Sign In and Make a Graphql Request
+## Sign In and Make a GraphQL Request
 
-Install the `@nhost/nhost-js` package and start build your app:
+Install the `@nhost/nhost-js` package and start building your app:
 
 ```jsx
 import { NhostClient } from '@nhost/nhost-js'

audit-ci.jsonc

@@ -2,5 +2,5 @@
   // $schema provides code completion hints to IDEs.
   "$schema": "https://github.com/IBM/audit-ci/raw/main/docs/schema.json",
   "moderate": true,
-  "allowlist": ["vue-template-compiler"]
+  "allowlist": ["vue-template-compiler", { "id": "CVE-2025-48068", "path": "next" }]
 }

config/tsconfig.base.json

@@ -11,20 +11,9 @@
     "allowSyntheticDefaultImports": true,
     "skipLibCheck": true,
     "moduleResolution": "node",
-    "target": "ES6",
+    "target": "ESNext",
     "module": "CommonJS",
-    "lib": [
-      "es5",
-      "dom",
-      "es2015.promise",
-      "es2015.symbol",
-      "es2015.iterable",
-      "es2015.collection",
-      "es2015.symbol.wellknown",
-      "es2015.core",
-      "es2017.object",
-      "es2017.string"
-    ],
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "sourceMap": true,
@@ -79,4 +68,4 @@
     "**/*/__tests__",
     "**/*/__mocks__"
   ]
-}
+}

dashboard/.env.example

@@ -25,4 +25,6 @@ NEXT_PUBLIC_ZENDESK_USER_EMAIL=
 
 CODEGEN_GRAPHQL_URL=https://local.graphql.local.nhost.run/v1
 CODEGEN_HASURA_ADMIN_SECRET=nhost-admin-secret
-NEXT_PUBLIC_TURNSTILE_SITE_KEY=FIXME
+NEXT_PUBLIC_TURNSTILE_SITE_KEY=FIXME
+
+NEXT_PUBLIC_SOC2_REPORT_FILE_ID=

dashboard/.eslintrc.js

@@ -76,6 +76,13 @@ module.exports = {
         ],
       },
     ],
+    'jsx-a11y/label-has-associated-control': [
+      2,
+      {
+        controlComponents: ['Input'],
+        depth: 3,
+      },
+    ],
   },
   overrides: [
     {

dashboard/.storybook/preview.js

@@ -1,8 +1,9 @@
+import { NhostProvider } from '@/providers/nhost';
 import '@fontsource/inter';
 import '@fontsource/inter/500.css';
 import '@fontsource/inter/700.css';
 import { CssBaseline, ThemeProvider } from '@mui/material';
-import { NhostClient, NhostProvider } from '@nhost/nextjs';
+import { createClient } from '@nhost/nhost-js-beta';
 import { NhostApolloProvider } from '@nhost/react-apollo';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Buffer } from 'buffer';
@@ -58,7 +59,9 @@ export const decorators = [
     </NhostApolloProvider>
   ),
   (Story) => (
-    <NhostProvider nhost={new NhostClient({ subdomain: 'local' })}>
+    <NhostProvider
+      nhost={createClient({ subdomain: 'local', region: 'local' })}
+    >
       <Story />
     </NhostProvider>
   ),

dashboard/CHANGELOG.md

@@ -1,5 +1,107 @@
 # @nhost/dashboard
 
+## 2.34.0
+
+### Minor Changes
+
+- 7eb9539: feat (dashboard): Allow upgrading free organizations
+- 129ec1e: feat: dashboard: new onboarding
+- 59249e5: fix: elevate permissions in password reset
+- 5e9ddb4: fix: show Run service name in logs page
+- 4ffff86: fix (dashboard): Disable settings pages when config server env variable is not set
+- b8cb491: fix: update dependencies to fix vulnerabilities
+- 5565451: fix: support page, can scroll all the way down in Chrome for iOS
+- f7d7080: chore: dashboard: add gtag
+
+### Patch Changes
+
+- 181c0ab: fix (dashboard): Fix upgrade project e2e tests
+- 56c87da: fix (dashboard): Use the correct http method when conneting to new github
+- 00132bd: fix (dashboard): Clear isSigningOut variable on Signin page
+- 66e0cc8: fix (dashboard): Check if user is logged in before redirecting
+- 9c0a118: chore (dashboard): Add RetryLink to ApolloClient
+- df6b85e: fix (dashboard): fix password reset redirect url
+- ec24567: fix (dashboard): Add content-type header
+- 57b2615: chore (dashboard): refactor redirect behaviour
+- cffa161: fix (dashboard): disable settings in the header when self-hosting
+- 85316e8: fix (dashboard): Remove second loading indicator on projects page
+- 47ab341: fix (dashboard): Fix announcement layout when title is too short
+
+## 2.33.0
+
+### Minor Changes
+
+- aee9a80: chore: update typescript version to the latest
+- 5ef3f76: chore (dashboard): Use the new SDK in the Dashboard
+
+### Patch Changes
+
+- 9ed8ce8: fix (dashboard): Request new Mfa ticket after an invalid totp when signing in
+- fd3b5c7: fix (dashboard): Limit new project's name to a maximum of 32 charachters in E2E tests
+
+## 2.32.0
+
+### Minor Changes
+
+- 736862c: fix: update link to base directory docs in git settings
+- ea99fb3: chore: dashboard: improve messaging when git connected
+
+### Patch Changes
+
+- d738884: chore (dashboard): Add link about antivirus integration
+
+## 2.31.0
+
+### Minor Changes
+
+- 39b10a2: feat (dashboard): Add multi-factor authentication
+- 4b84780: feat (dashboard): Add Webauthn to dashboard
+
+### Patch Changes
+
+- 61eb6cd: fix (dashboard): Fix update project e2e test
+  - @nhost/react-apollo@18.0.0
+  - @nhost/nextjs@2.2.8
+
+## 2.30.0
+
+### Minor Changes
+
+- f6947a2: fix: fetch job-backup services logs using Live filter
+- 44a3e6b: fix: collapsed main navigation sidebar overlaps mobile navbar
+- 99b78f1: feat: dashboard: add download button for soc2 report
+- 9acae7d: fix: e2e tests, stop on error when refreshing metadata
+
+### Patch Changes
+
+- 31e636a: fix (dashboard): Use the correct payload to reset metadata before the e2e tests
+
+## 2.29.0
+
+### Minor Changes
+
+- c97b43f: fix: update vite to address vulnerability audit
+- a0931e2: fix: improve logs time range and filter selection
+- c0635ae: feat (dashboard): Add information about that free organization cannot be upgraded.
+- e87505c: fix: can downsize postgres storage capacity using local dashboard
+
+## 2.28.0
+
+### Minor Changes
+
+- 8552678: feat: dashboard: add additional events to segment
+- 0bf2808: chore: refresh metadata before end-to-end tests
+- 72a365c: fix: correct graphql page roles dropdown's source
+- cef6471: fix: dashboard: add anonid to user's metadata
+
+### Patch Changes
+
+- d9eb906: fix: update vite and nextjs because of vulnerability
+- 233232b: feat (dashboard): improve Upgrade project dialog
+- Updated dependencies [d9eb906]
+  - @nhost/nextjs@2.2.7
+  - @nhost/react-apollo@17.0.4
+
 ## 2.27.0
 
 ### Minor Changes

dashboard/docker-entrypoint.sh

@@ -21,6 +21,6 @@ find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_STORAGE_URL__~${NEXT_
 find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL__~${NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL}~g" {} +
 find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL__~${NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL}~g" {} +
 find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_HASURA_API_URL__~${NEXT_PUBLIC_NHOST_HASURA_API_URL}~g" {} +
-find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_CONFIGSERVER_URL__~${NEXT_PUBLIC_NHOST_CONFIGSERVER_URL}~g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_CONFIGSERVER_URL__~${NEXT_PUBLIC_NHOST_CONFIGSERVER_URL:-""}~g" {} +
 
 exec "$@"

dashboard/e2e/auth/ban-user.test.ts

@@ -13,6 +13,9 @@ test('should be able to ban and unban a user', async ({
   const password = faker.internet.password();
 
   await createUser({ page, email, password });
+  await page.waitForSelector(
+    'div:has-text("User has been created successfully.")',
+  );
 
   await page
     .getByRole('button', { name: `View ${email}`, exact: true })

dashboard/e2e/auth/create-user.test.ts

@@ -11,6 +11,9 @@ test('should create a user', async ({ authenticatedNhostPage: page }) => {
   const password = faker.internet.password();
 
   await createUser({ page, email, password });
+  await page.waitForSelector(
+    'div:has-text("User has been created successfully.")',
+  );
 
   await expect(
     page.getByRole('button', { name: `View ${email}`, exact: true }),

dashboard/e2e/auth/delete-user.test.ts

@@ -14,6 +14,9 @@ test('should be able to delete a user', async ({
   const password = faker.internet.password();
 
   await createUser({ page, email, password });
+  await page.waitForSelector(
+    'div:has-text("User has been created successfully.")',
+  );
 
   await expect(
     page.getByRole('button', { name: `View ${email}`, exact: true }),
@@ -49,6 +52,10 @@ test('should be able to delete a user from the details page', async ({
 
   await createUser({ page, email, password });
 
+  await page.waitForSelector(
+    'div:has-text("User has been created successfully.")',
+  );
+
   await page
     .getByRole('button', { name: `View ${email}`, exact: true })
     .click();

dashboard/e2e/auth/edit-user.test.ts

@@ -13,6 +13,9 @@ test('should be able to edit user roles from the details page', async ({
   const password = faker.internet.password();
 
   await createUser({ page, email, password });
+  await page.waitForSelector(
+    'div:has-text("User has been created successfully.")',
+  );
 
   await page
     .getByRole('button', { name: `View ${email}`, exact: true })

dashboard/e2e/auth/verify-user.test.ts

@@ -14,6 +14,10 @@ test('should be able to verify the email of a user', async ({
 
   await createUser({ page, email, password });
 
+  await page.waitForSelector(
+    'div:has-text("User has been created successfully.")',
+  );
+
   await page
     .getByRole('button', { name: `View ${email}`, exact: true })
     .click();

dashboard/e2e/env.ts

@@ -40,3 +40,7 @@ export const TEST_USER_EMAIL = process.env.NHOST_TEST_USER_EMAIL;
 export const TEST_USER_PASSWORD = process.env.NHOST_TEST_USER_PASSWORD;
 
 export const TEST_PERSONAL_ORG_SLUG = process.env.NHOST_TEST_PERSONAL_ORG_SLUG;
+
+const freeUserEmails = process.env.NHOST_TEST_FREE_USER_EMAILS;
+
+export const TEST_FREE_USER_EMAILS = JSON.parse(freeUserEmails);

dashboard/e2e/fixtures/auth-hook.ts

@@ -14,6 +14,7 @@ export const test = base.extend<{ authenticatedNhostPage: Page }>({
     );
     await use(page);
     // update the context to get the new refresh token
+    await page.waitForLoadState('networkidle');
     await page.context().storageState({ path: AUTH_CONTEXT });
     await page.close();
   },

dashboard/e2e/onboarding/onboarding.test.ts

@@ -0,0 +1,223 @@
+import { expect, test } from '@/e2e/fixtures/auth-hook';
+import {
+  getCardExpiration,
+  getOrgSlugFromUrl,
+  getProjectSlugFromUrl,
+  gotoUrl,
+  loginWithFreeUser,
+  setFreeUserStarterOrgSlug,
+  setNewProjectName,
+  setNewProjectSlug,
+} from '@/e2e/utils';
+import { faker } from '@faker-js/faker';
+import type { Page } from '@playwright/test';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+  await loginWithFreeUser(page);
+});
+
+test('user should be able to finish onboarding', async () => {
+  await gotoUrl(page, `/onboarding`);
+  expect(page.getByText('Welcome to Nhost!')).toBeVisible();
+  const organizationName = faker.lorem.words(3).slice(0, 32);
+
+  await page.getByLabel('Organization Name').fill(organizationName);
+  await page.getByText('Select organization type', { exact: true }).click();
+  await page.getByText('Personal Project').nth(1).click();
+
+  await page.getByText('Pro', { exact: true }).click();
+
+  await page.getByText('Create Organization').click();
+
+  const stripeFrame = page
+    .frameLocator('iframe[name="embedded-checkout"]')
+    .first();
+  stripeFrame.getByText('Subscribe to Nhost');
+  await stripeFrame.getByLabel('Email').fill(faker.internet.email());
+
+  await stripeFrame
+    .getByPlaceholder('1234 1234 1234 1234')
+    .fill('4242424242424242');
+
+  await stripeFrame.getByPlaceholder('MM / YY').fill(getCardExpiration());
+  await stripeFrame.getByPlaceholder('CVC').fill('123');
+  await stripeFrame
+    .getByPlaceholder('Full name on card')
+    .fill('EndyTo EndyTest');
+  await stripeFrame.locator('#billingCountry').scrollIntoViewIfNeeded();
+  // Need to comment out for local testing START
+  await stripeFrame.getByPlaceholder('Address', { exact: true }).click();
+  stripeFrame.locator('span:has-text("Enter address manually")');
+  await stripeFrame.getByText('Enter address manually').click();
+  await stripeFrame
+    .getByPlaceholder('Address line 1', { exact: true })
+    .fill('123 Main Street');
+  await stripeFrame
+    .getByPlaceholder('City', { exact: true })
+    .fill('Springfield');
+  await stripeFrame.getByPlaceholder('ZIP', { exact: true }).fill('62701');
+  await stripeFrame.locator('#enableStripePass').click({ force: true });
+  // local Comment end
+  stripeFrame
+    .getByTestId('hosted-payment-submit-button')
+    .scrollIntoViewIfNeeded();
+  await stripeFrame
+    .getByTestId('hosted-payment-submit-button')
+    .click({ force: true });
+
+  expect(
+    page.getByText('Processing new organization request').first(),
+  ).toBeVisible();
+  await page.waitForSelector(
+    'div:has-text("Organization created successfully. Redirecting...")',
+  );
+
+  expect(page.getByText('Create Your First Project')).toBeVisible();
+
+  const projectName = faker.lorem.words(3).slice(0, 32);
+  await page.getByLabel('Project Name').fill(projectName);
+
+  await page.getByText('Create Project', { exact: true }).click();
+
+  expect(page.getByText('Creating your project...')).toBeVisible();
+  expect(page.getByText('Project created successfully!')).toBeVisible();
+
+  expect(page.getByText('Internal info')).toBeVisible();
+
+  await page.waitForSelector('h3:has-text("Project Health")', {
+    timeout: 180000,
+  });
+
+  const newProjectSlug = getProjectSlugFromUrl(page.url());
+  setNewProjectSlug(newProjectSlug);
+  setNewProjectName(organizationName);
+  const newOrgSlug = getOrgSlugFromUrl(page.url());
+  setFreeUserStarterOrgSlug(newOrgSlug);
+});
+
+test('should delete the new organization', async () => {
+  const newOrgSlug = getOrgSlugFromUrl(page.url());
+  await gotoUrl(page, `/orgs/${newOrgSlug}/projects`);
+  await page.getByRole('link', { name: 'Settings' }).click();
+
+  await page.waitForSelector('h3:has-text("Delete Organization")');
+  await page.getByRole('button', { name: 'Delete' }).click();
+
+  await page.waitForSelector('h2:has-text("Delete Organization")');
+  expect(page.getByTestId('deleteOrgButton')).toBeDisabled();
+
+  await page.getByLabel("I'm sure I want to delete this Organization").click();
+  expect(page.getByTestId('deleteOrgButton')).toBeDisabled();
+  await page.getByLabel('I understand this action cannot be undone').click();
+  expect(page.getByTestId('deleteOrgButton')).not.toBeDisabled();
+
+  await page.getByTestId('deleteOrgButton').click();
+
+  await page.waitForSelector('div:has-text("Deleting the organization")');
+  await page.waitForSelector(
+    'div:has-text("Successfully deleted the organization")',
+  );
+
+  await page.waitForSelector('h2:has-text("Welcome to Nhost!")');
+});
+
+test('should be able to upgrade an organization', async () => {
+  await gotoUrl(page, `/onboarding`);
+  expect(page.getByText('Welcome to Nhost!')).toBeVisible();
+  const organizationName = faker.lorem.words(3).slice(0, 32);
+
+  await page.getByLabel('Organization Name').fill(organizationName);
+  await page.getByText('Select organization type', { exact: true }).click();
+  await page.getByText('Personal Project').nth(1).click();
+
+  await page.getByText('Create Organization').click();
+
+  await page.waitForSelector(
+    'div:has-text("Organization created successfully!")',
+  );
+  await page.getByText('Select organization', { exact: true }).click();
+  await page.getByLabel('Organizations').getByText(organizationName).click();
+
+  await page.waitForSelector('h2:has-text("Welcome to Nhost!")');
+  await page.getByRole('link', { name: 'Billing' }).click();
+
+  await page.waitForSelector('h4:has-text("Subscription plan")');
+  expect(page.getByText('Upgrade')).toBeEnabled();
+  await page.getByText('Upgrade').click();
+  await page.waitForSelector('h2:has-text("Upgrade Organization")');
+
+  await page.getByText('Pro', { exact: true }).click();
+
+  await page.getByTestId('upgradeOrgSubmitButton').click();
+  await page.waitForSelector('button[data-testid="upgradeOrgSubmitButton"]', {
+    state: 'hidden',
+  });
+
+  const stripeFrame = page
+    .frameLocator('iframe[name="embedded-checkout"]')
+    .first();
+  stripeFrame
+    .locator('div[data-testid="product-summary"]')
+    .waitFor({ state: 'visible' });
+  await stripeFrame.getByLabel('Email').fill(faker.internet.email());
+
+  await stripeFrame
+    .getByPlaceholder('1234 1234 1234 1234')
+    .fill('4242424242424242');
+
+  await stripeFrame.getByPlaceholder('MM / YY').fill(getCardExpiration());
+  await stripeFrame.getByPlaceholder('CVC').fill('123');
+  await stripeFrame
+    .getByPlaceholder('Full name on card')
+    .fill('EndyTo EndyTest');
+  await stripeFrame.locator('#billingCountry').scrollIntoViewIfNeeded();
+  // Need to comment out for local testing START
+  await stripeFrame.getByPlaceholder('Address', { exact: true }).click();
+  stripeFrame.locator('span:has-text("Enter address manually")');
+  await stripeFrame.getByText('Enter address manually').click();
+  await stripeFrame
+    .getByPlaceholder('Address line 1', { exact: true })
+    .fill('123 Main Street');
+  await stripeFrame
+    .getByPlaceholder('City', { exact: true })
+    .fill('Springfield');
+  await stripeFrame.getByPlaceholder('ZIP', { exact: true }).fill('62701');
+  await stripeFrame.locator('#enableStripePass').click({ force: true });
+  // local Comment end
+  stripeFrame
+    .getByTestId('hosted-payment-submit-button')
+    .scrollIntoViewIfNeeded();
+  await stripeFrame
+    .getByTestId('hosted-payment-submit-button')
+    .click({ force: true });
+  await page.waitForSelector('div:has-text("Upgrading organization")');
+  await page.waitForSelector(
+    'div:has-text("Organization has been upgraded successfully.")',
+  );
+  await page.waitForSelector('span:has-text("Spending Notifications")');
+
+  await page.getByRole('link', { name: 'Settings' }).click();
+
+  await page.waitForSelector('h3:has-text("Delete Organization")');
+  await page.getByRole('button', { name: 'Delete' }).click();
+
+  await page.waitForSelector('h2:has-text("Delete Organization")');
+  expect(page.getByTestId('deleteOrgButton')).toBeDisabled();
+
+  await page.getByLabel("I'm sure I want to delete this Organization").click();
+  expect(page.getByTestId('deleteOrgButton')).toBeDisabled();
+  await page.getByLabel('I understand this action cannot be undone').click();
+  expect(page.getByTestId('deleteOrgButton')).not.toBeDisabled();
+
+  await page.getByTestId('deleteOrgButton').click();
+
+  await page.waitForSelector('div:has-text("Deleting the organization")');
+  await page.waitForSelector(
+    'div:has-text("Successfully deleted the organization")',
+  );
+
+  await page.waitForSelector('h2:has-text("Welcome to Nhost!")');
+});

dashboard/e2e/setup/refresh-metadata.setup.ts

@@ -0,0 +1,55 @@
+/* eslint-disable no-console */
+import { TEST_PROJECT_ADMIN_SECRET, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { test as setup } from '@playwright/test';
+
+setup('refresh metadata', async () => {
+  try {
+    const response = await fetch(
+      `https://${TEST_PROJECT_SUBDOMAIN}.hasura.eu-central-1.staging.nhost.run/v1/metadata`,
+      {
+        method: 'POST',
+        headers: {
+          'x-hasura-admin-secret': TEST_PROJECT_ADMIN_SECRET,
+        },
+        body: JSON.stringify({
+          args: [
+            {
+              type: 'reload_metadata',
+              args: {
+                reload_sources: false,
+              },
+            },
+            {
+              args: {},
+              type: 'get_inconsistent_metadata',
+            },
+          ],
+          source: 'default',
+          type: 'bulk',
+        }),
+      },
+    );
+    const body = await response.json();
+
+    if (!response.ok) {
+      const message = `[${body.code}]:${body.error}`;
+      throw new Error(message);
+    } else {
+      const isConsistent = body[0].is_consistent;
+      if (isConsistent) {
+        console.log('Metadata is consistent.');
+      } else {
+        console.error('Metadata is not consistent.');
+        console.error(body[0].inconsistent_objects);
+        throw new Error('Metadata is not consistent');
+      }
+    }
+  } catch (error) {
+    // Log safe error information
+    console.error(
+      'Failed to refresh metadata:',
+      error instanceof Error ? error.message : 'Unknown error',
+    );
+    throw new Error('Failed to refresh metadata');
+  }
+});

dashboard/e2e/utils.ts

@@ -1,6 +1,12 @@
-import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import {
+  TEST_FREE_USER_EMAILS,
+  TEST_ORGANIZATION_SLUG,
+  TEST_PROJECT_SUBDOMAIN,
+  TEST_USER_PASSWORD,
+} from '@/e2e/env';
 import { faker } from '@faker-js/faker';
-import type { Page } from '@playwright/test';
+import { type Page } from '@playwright/test';
+import { add, format } from 'date-fns-v4';
 
 /**
  * Open a project by navigating to the project's overview page.
@@ -213,8 +219,94 @@ export async function clickPermissionButton({
     .click();
 }
 
-export async function gotoAuthURL(page) {
+export async function gotoAuthURL(page: Page) {
   const authUrl = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/users`;
   await page.goto(authUrl);
   await page.waitForURL(authUrl, { waitUntil: 'networkidle' });
 }
+
+export async function gotoUrl(page: Page, url: string) {
+  await page.goto(url);
+  await page.waitForURL(url, { waitUntil: 'networkidle' });
+}
+
+let newOrgSlug: string;
+
+export function getNewOrgSlug() {
+  return newOrgSlug;
+}
+
+export function setNewOrgSlug(slug: string) {
+  newOrgSlug = slug;
+}
+
+let freeUserStarterOrgSlug: string;
+
+export function getFreeUserStarterOrgSlug() {
+  return freeUserStarterOrgSlug;
+}
+
+export function setFreeUserStarterOrgSlug(slug: string) {
+  freeUserStarterOrgSlug = slug;
+}
+
+let newProjectSlug: string;
+
+export function getNewProjectSlug() {
+  return newProjectSlug;
+}
+
+export function setNewProjectSlug(slug: string) {
+  newProjectSlug = slug;
+}
+
+export function getProjectSlugFromUrl(url: string) {
+  const [, projectSlug] = url.split('/projects/');
+
+  return projectSlug;
+}
+
+export function getOrgSlugFromUrl(url: string) {
+  const orgSlug = url.split('/orgs/')[1].split('/projects/')[0];
+  return orgSlug;
+}
+
+export function getCardExpiration() {
+  const now = add(new Date(), { years: 3 });
+  return format(now, 'MMyy');
+}
+
+let newProjectName: string;
+
+export function getNewProjectName() {
+  return newProjectName;
+}
+
+export function setNewProjectName(name: string) {
+  newProjectName = name;
+}
+
+function getRandomUserIndex(): number {
+  return Math.floor(Math.random() * TEST_FREE_USER_EMAILS.length);
+}
+
+export async function loginWithFreeUser(page: Page) {
+  const userIndex = getRandomUserIndex();
+
+  const freeUserEmail = TEST_FREE_USER_EMAILS[userIndex];
+
+  // eslint-disable-next-line no-console
+  console.log(`Selected userIndex: ${userIndex}`);
+  await page.goto('/');
+  await page.waitForURL('/signin');
+  await page.getByRole('link', { name: /continue with email/i }).click();
+
+  await page.waitForURL('/signin/email');
+  await page.getByLabel('Email').fill(freeUserEmail);
+  await page.getByLabel('Password').fill(TEST_USER_PASSWORD);
+  await page.getByRole('button', { name: /sign in/i }).click();
+
+  await page.waitForSelector('h2:has-text("Welcome to Nhost!")', {
+    timeout: 20000,
+  });
+}

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "2.27.0",
+  "version": "2.34.0",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -16,8 +16,10 @@
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook",
     "install-browsers": "pnpm playwright install && pnpm playwright install-deps",
-    "e2e": "pnpm install-browsers && pnpm playwright test --config=playwright.config.ts",
-    "e2e-local": "pnpm install-browsers && pnpm playwright test --config=playwright.local.config.ts"
+    "e2e:tests": "pnpm install-browsers && pnpm playwright test --config=playwright.config.ts -x",
+    "e2e": "pnpm e2e:tests --project=main",
+    "e2e:local": "pnpm e2e:tests --project=local",
+    "e2e:onboarding": "pnpm e2e:tests --project=onboarding"
   },
   "dependencies": {
     "@apollo/client": "^3.9.9",
@@ -37,13 +39,13 @@
     "@heroicons/react": "^1.0.6",
     "@hookform/resolvers": "^3.9.0",
     "@iarna/toml": "^2.2.5",
+    "@icons-pack/react-simple-icons": "^9.6.0",
     "@marsidev/react-turnstile": "^1.0.2",
     "@mui/base": "5.0.0-beta.31",
     "@mui/material": "^5.15.14",
     "@mui/system": "^5.15.14",
     "@mui/x-date-pickers": "^5.0.20",
-    "@nhost/nextjs": "workspace:*",
-    "@nhost/react-apollo": "workspace:*",
+    "@nhost/nhost-js-beta": "npm:@nhost/nhost-js@5.0.0-beta.7",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-alert-dialog": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.1.2",
@@ -60,6 +62,7 @@
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@segment/analytics-next": "^1.77.0",
+    "@simplewebauthn/browser": "^9.0.1",
     "@stripe/react-stripe-js": "^2.6.2",
     "@stripe/stripe-js": "^1.54.2",
     "@tailwindcss/forms": "^0.5.7",
@@ -85,9 +88,10 @@
     "graphql-tag": "^2.12.6",
     "graphql-ws": "^5.16.0",
     "just-kebab-case": "^4.2.0",
+    "jwt-decode": "^4.0.0",
     "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.416.0",
-    "next": "^14.2.25",
+    "next": "^14.2.30",
     "next-nprogress-bar": "^2.3.13",
     "next-seo": "^6.5.0",
     "next-themes": "^0.3.0",
@@ -105,7 +109,7 @@
     "react-is": "18.2.0",
     "react-loading-skeleton": "^2.2.0",
     "react-markdown": "^9.0.1",
-    "react-merge-refs": "^1.1.0",
+    "react-merge-refs": "^3.0.2",
     "react-resizable-layout": "^0.7.2",
     "react-table": "^7.8.0",
     "recoil": "^0.7.7",
@@ -194,7 +198,7 @@
     "tailwindcss": "^3.4.12",
     "ts-node": "^10.9.2",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "vite": "^5.4.17",
+    "vite": "^5.4.19",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^0.32.4"
   },

dashboard/playwright.config.ts

@@ -6,7 +6,7 @@ dotenv.config({ path: path.resolve(__dirname, '.env.test') });
 
 export default defineConfig({
   testDir: './e2e',
-  timeout: 60 * 1000,
+  timeout: 120 * 1000,
   expect: {
     timeout: 10000,
   },
@@ -17,7 +17,7 @@ export default defineConfig({
   reporter: 'html',
   use: {
     actionTimeout: 0,
-    trace: 'on-first-retry',
+    trace: 'retain-on-failure',
     baseURL: process.env.NHOST_TEST_DASHBOARD_URL,
     launchOptions: {
       slowMo: 500,
@@ -34,13 +34,28 @@ export default defineConfig({
       testMatch: ['**/teardown/*.teardown.ts'],
     },
     {
-      name: 'chromium',
+      name: 'main',
       use: {
         ...devices['Desktop Chrome'],
         storageState: 'e2e/.auth/user.json',
       },
       dependencies: ['setup'],
-      grepInvert: [/Local Dashboard CLI e2e tests/],
+      testIgnore: ['onboarding.test.ts', 'cli-local-dashboard.test.ts'],
+    },
+    {
+      name: 'local',
+      use: {
+        ...devices['Desktop Chrome'],
+        baseURL: '', // Local dashboard URL
+      },
+      testMatch: 'cli-local-dashboard.test.ts',
+    },
+    {
+      name: 'onboarding',
+      testMatch: 'onboarding.test.ts',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
     },
   ],
 });

dashboard/playwright.local.config.ts

@@ -1,31 +0,0 @@
-import { defineConfig, devices } from '@playwright/test';
-
-export default defineConfig({
-  testDir: './e2e',
-  timeout: 30 * 1000,
-  expect: {
-    timeout: 5000,
-  },
-  fullyParallel: false,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
-  workers: 1,
-  reporter: 'html',
-  use: {
-    actionTimeout: 0,
-    trace: 'on-first-retry',
-    baseURL: '', // Local dashboard URL
-    launchOptions: {
-      slowMo: 500,
-    },
-  },
-  projects: [
-    {
-      name: 'chromium',
-      use: {
-        ...devices['Desktop Chrome'],
-      },
-      testMatch: ['**/e2e/cli-local-dashboard/**'],
-    },
-  ],
-});

dashboard/src/components/auth/SignInRightColumn.tsx

@@ -0,0 +1,59 @@
+import Image from 'next/image';
+
+export function SignInRightColumn() {
+  return (
+    <div className="grid gap-6 font-[Inter]">
+      <div className="text-center">
+        <h2 className="mb-2 text-2xl font-semibold text-white">
+          Ship 10x faster
+        </h2>
+        <p className="text-sm text-[#A2B3BE]">
+          Skip months of backend setup and focus on building what matters
+        </p>
+      </div>
+
+      <div className="rounded-lg border border-white/10 bg-gradient-to-r from-[#0052CD]/10 to-[#FF02F5]/10 p-5">
+        <div className="flex items-start gap-4">
+          <div className="flex-shrink-0">
+            <Image
+              src="/assets/signup/CircleWavyCheck.svg"
+              width={20}
+              height={20}
+              alt="Check"
+            />
+          </div>
+          <div>
+            <h3 className="mb-2 text-sm font-semibold text-white">
+              From idea to production
+            </h3>
+            <p className="text-xs text-[#A2B3BE]">
+              Everything you need to ship fast, without the setup complexity.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="rounded-lg border border-white/10 bg-gradient-to-r from-[#0052CD]/10 to-[#FF02F5]/10 p-5">
+        <div className="flex items-start gap-4">
+          <div className="flex-shrink-0">
+            <Image
+              src="/assets/key.svg"
+              width={20}
+              height={20}
+              alt="Security"
+            />
+          </div>
+          <div>
+            <h3 className="mb-2 text-sm font-semibold text-white">
+              Sleep easy at night
+            </h3>
+            <p className="text-xs text-[#A2B3BE]">
+              Rock-solid security so you can focus on building, not
+              vulnerabilities.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

dashboard/src/components/common/CookieConsent/CookieConsent.tsx

@@ -0,0 +1,93 @@
+import { Button } from '@/components/ui/v3/button';
+import { useSSRLocalStorage } from '@/hooks/useSSRLocalStorage';
+import { X } from 'lucide-react';
+import NextLink from 'next/link';
+import { useEffect, useState } from 'react';
+
+interface CookieConsentProps {
+  onAccept: () => void;
+}
+
+export default function CookieConsent({ onAccept }: CookieConsentProps) {
+  const [consentGiven, setConsentGiven] = useSSRLocalStorage(
+    'cookie-consent',
+    null,
+  );
+  const [showBanner, setShowBanner] = useState(false);
+
+  useEffect(() => {
+    if (consentGiven === null) {
+      setShowBanner(true);
+    } else if (consentGiven === true) {
+      onAccept();
+    }
+  }, [consentGiven, onAccept]);
+
+  const handleAccept = () => {
+    setConsentGiven(true);
+    setShowBanner(false);
+    onAccept();
+  };
+
+  const handleDecline = () => {
+    setConsentGiven(false);
+    setShowBanner(false);
+  };
+
+  const handleClose = () => {
+    handleDecline();
+  };
+
+  if (!showBanner) {
+    return null;
+  }
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 w-96">
+      <div className="rounded-lg border bg-black/95 p-6 shadow-lg backdrop-blur-sm">
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex-1">
+            <h3 className="mb-3 text-sm font-semibold text-white">
+              We use cookies for payments and analytics to improve our services.
+            </h3>
+            <p className="mb-4 text-xs text-[#A2B3BE]">
+              <NextLink
+                href="https://nhost.io/legal/privacy-policy"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-white underline hover:no-underline"
+              >
+                Learn more
+              </NextLink>
+            </p>
+            <div className="flex gap-2">
+              <Button
+                onClick={handleAccept}
+                size="sm"
+                className="bg-blue-600 px-3 py-1 text-xs text-white hover:bg-blue-700"
+              >
+                Accept all
+              </Button>
+              <Button
+                onClick={handleDecline}
+                variant="outline"
+                size="sm"
+                className="border-gray-600 px-3 py-1 text-xs text-white hover:bg-gray-800"
+              >
+                Essential only
+              </Button>
+            </div>
+          </div>
+          <button
+            onClick={handleClose}
+            type="button"
+            className="text-[#A2B3BE] hover:text-white"
+            aria-label="Close cookie banner"
+          >
+            <X size={16} />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

dashboard/src/components/common/CookieConsent/index.ts

@@ -0,0 +1,2 @@
+export { default as CookieConsent } from './CookieConsent';
+

dashboard/src/components/common/DateTimePicker/DateTimePicker.test.tsx

@@ -82,7 +82,7 @@ describe('DateTimePicker', () => {
     const secondsInput = await screen.getByLabelText('Seconds');
     await user.type(secondsInput, '13');
 
-    user.click(await screen.getByRole('button', { name: 'Select' }));
+    await user.click(await screen.getByRole('button', { name: 'Select' }));
 
     await waitFor(async () =>
       expect(

dashboard/src/components/common/MfaOtpForm/MfaOtpForm.test.tsx

@@ -0,0 +1,518 @@
+import { render, screen, TestUserEvent, waitFor } from '@/tests/testUtils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import MfaOtpForm from './MfaOtpForm';
+
+const mocks = vi.hoisted(() => ({
+  toastError: vi.fn(),
+}));
+// Mock react-hot-toast
+vi.mock('react-hot-toast', async () => {
+  const actualToast = await vi.importActual<any>('react-hot-toast');
+  return {
+    ...actualToast,
+    default: {
+      ...actualToast.default,
+      error: mocks.toastError,
+    },
+  };
+});
+
+// Mock the toast style props utility
+vi.mock('@/utils/constants/settings', () => ({
+  getToastStyleProps: vi.fn(() => ({})),
+}));
+
+describe('MfaOtpForm', () => {
+  const mockSendMfaOtp = vi.fn();
+  const mockRequestNewMfaTicket = vi.fn();
+  const user = new TestUserEvent();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.clearAllTimers();
+  });
+
+  const defaultProps = {
+    sendMfaOtp: mockSendMfaOtp,
+    loading: false,
+    requestNewMfaTicket: mockRequestNewMfaTicket,
+  } as any;
+
+  describe('Rendering and Initial State', () => {
+    it('renders with correct initial state', () => {
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      expect(input).toBeInTheDocument();
+      expect(input).toHaveValue('');
+      expect(button).toBeInTheDocument();
+      expect(button).toBeDisabled();
+    });
+
+    it('focuses input on mount', () => {
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      expect(input).toHaveFocus();
+    });
+  });
+
+  describe('Input Validation and Formatting', () => {
+    it('only accepts numeric characters', async () => {
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      await user.type(input, 'abc123def456');
+
+      expect(input).toHaveValue('123456');
+    });
+
+    it('filters out non-numeric characters in real time', async () => {
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      await user.type(input, '1a2b3c');
+
+      expect(input).toHaveValue('123');
+    });
+
+    it('button is disabled when input has fewer than 6 digits', async () => {
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '12345');
+      expect(button).toBeDisabled();
+    });
+
+    it('button is enabled when input has exactly 6 digits', async () => {
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+      expect(button).toBeEnabled();
+    });
+
+    it('button is disabled when input has more than 6 digits', async () => {
+      render(<MfaOtpForm {...defaultProps} />);
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '6123457');
+      expect(button).toBeDisabled();
+    });
+  });
+
+  describe('Loading States', () => {
+    it('disables input and button when loading prop is true', () => {
+      render(<MfaOtpForm {...defaultProps} loading />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button');
+
+      expect(input).toBeDisabled();
+      expect(button).toBeDisabled();
+      expect(
+        screen.getByRole('button', { name: 'Verifying...' }),
+      ).toBeInTheDocument();
+    });
+
+    it('input and button are disabled during submission', async () => {
+      // Mock sendMfaOtp to return a promise that we can control
+      const promise = new Promise(() => {}); // Never resolves
+      mockSendMfaOtp.mockReturnValue(promise);
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+      await user.click(button);
+
+      expect(input).toBeDisabled();
+      expect(button).toBeDisabled();
+    });
+  });
+
+  describe('Form Submission', () => {
+    it('triggers sendMfaOtp with correct code on button click', async () => {
+      mockSendMfaOtp.mockResolvedValue({ success: true });
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+      await user.click(button);
+
+      expect(mockSendMfaOtp).toHaveBeenCalledWith('123456');
+      expect(mockSendMfaOtp).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not submit when input has fewer than 6 digits', async () => {
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '12345');
+      await user.click(button);
+
+      expect(mockSendMfaOtp).not.toHaveBeenCalled();
+    });
+
+    it('does not submit multiple times when already submitting', async () => {
+      let resolvePromise: (value: any) => void;
+      const promise = new Promise((resolve) => {
+        resolvePromise = resolve;
+      });
+      mockSendMfaOtp.mockReturnValue(promise);
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+      await user.click(button);
+      await user.click(button); // Second click should be ignored
+
+      expect(mockSendMfaOtp).toHaveBeenCalledTimes(1);
+
+      // Resolve the promise to clean up
+      resolvePromise!({ success: true });
+      await waitFor(async () => {
+        await promise;
+      });
+    });
+
+    it('manages submission state properly', async () => {
+      let resolvePromise: (value: any) => void;
+      const promise = new Promise((resolve) => {
+        resolvePromise = resolve;
+      });
+      mockSendMfaOtp.mockReturnValue(promise);
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+      await user.click(button);
+
+      // During submission
+      expect(button).toBeDisabled();
+      expect(input).toBeDisabled();
+
+      // Resolve the promise
+      resolvePromise!({ success: true });
+      await waitFor(async () => {
+        await promise;
+      });
+
+      // After submission
+      await waitFor(() => {
+        expect(button).not.toBeDisabled();
+        expect(input).not.toBeDisabled();
+      });
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('displays error toast when sendMfaOtp returns an error', async () => {
+      const errorMessage = 'Invalid TOTP code';
+
+      mockSendMfaOtp.mockRejectedValueOnce({ message: errorMessage });
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+      await user.click(button);
+
+      await waitFor(() => {
+        expect(mocks.toastError).toHaveBeenCalledWith(errorMessage, {});
+      });
+    });
+
+    it('shows generic error message when no specific error message is provided', async () => {
+      mockSendMfaOtp.mockRejectedValueOnce({});
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+      await user.click(button);
+
+      await waitFor(() => {
+        expect(mocks.toastError).toHaveBeenCalledWith(
+          'An error occurred. Please try again.',
+          {},
+        );
+      });
+    });
+
+    it('handles undefined error gracefully', async () => {
+      mockSendMfaOtp.mockResolvedValue({
+        error: undefined,
+      });
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+      await user.click(button);
+
+      // Should not throw an error
+      await waitFor(() => {
+        expect(mockSendMfaOtp).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('MFA Ticket Renewal', () => {
+    it('calls requestNewMfaTicket when ticket is invalid', async () => {
+      // First call - set ticket as invalid
+      mockSendMfaOtp.mockRejectedValueOnce({ message: 'Invalid ticket' });
+      // Second call - should work
+      mockSendMfaOtp.mockResolvedValueOnce({ success: true });
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      // First submission - creates error and marks ticket invalid
+      await user.type(input, '123456');
+      await user.click(button);
+
+      await waitFor(() => {
+        expect(mocks.toastError).toHaveBeenCalled();
+      });
+
+      // Clear input and try again
+      await user.clear(input);
+      await user.type(input, '654321');
+      await user.click(button);
+
+      await waitFor(() => {
+        expect(mockRequestNewMfaTicket).toHaveBeenCalled();
+      });
+    });
+
+    it('does not call requestNewMfaTicket on first submission', async () => {
+      mockSendMfaOtp.mockResolvedValue({ success: true });
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+      await user.click(button);
+
+      expect(mockRequestNewMfaTicket).not.toHaveBeenCalled();
+    });
+
+    it('works correctly when requestNewMfaTicket is not provided', async () => {
+      const propsWithoutTicketRenewal = {
+        sendMfaOtp: mockSendMfaOtp,
+        loading: false,
+      } as any;
+
+      mockSendMfaOtp.mockRejectedValueOnce({ message: 'Some error' });
+
+      render(<MfaOtpForm {...propsWithoutTicketRenewal} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+      await user.click(button);
+
+      // Should not throw an error even without requestNewMfaTicket
+      await waitFor(() => {
+        expect(mocks.toastError).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('User Interactions', () => {
+    it('updates input value correctly when typing', async () => {
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+
+      await user.type(input, '123');
+      expect(input).toHaveValue('123');
+
+      await user.type(input, '456');
+      expect(input).toHaveValue('123456');
+    });
+
+    it('can clear and retype input value', async () => {
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+
+      await user.type(input, '123456');
+      expect(input).toHaveValue('123456');
+
+      await user.clear(input);
+      expect(input).toHaveValue('');
+
+      await user.type(input, '654321');
+      expect(input).toHaveValue('654321');
+    });
+
+    it('button triggers submission with valid code', async () => {
+      mockSendMfaOtp.mockResolvedValue({ success: true });
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+      await user.click(button);
+
+      expect(mockSendMfaOtp).toHaveBeenCalledWith('123456');
+    });
+    it('submits form when pressing Enter key with valid code', async () => {
+      mockSendMfaOtp.mockResolvedValue({ success: true });
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+
+      await user.type(input, '123456');
+      await user.type(input, '{Enter}');
+
+      expect(mockSendMfaOtp).toHaveBeenCalledWith('123456');
+      expect(mockSendMfaOtp).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not submit when pressing Enter with invalid code length', async () => {
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+
+      await user.type(input, '12345');
+      await user.type(input, '{Enter}');
+
+      expect(mockSendMfaOtp).not.toHaveBeenCalled();
+    });
+
+    it('does not submit when pressing Enter while loading', async () => {
+      render(<MfaOtpForm {...defaultProps} loading />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+
+      await user.type(input, '123456');
+      await user.type(input, '{Enter}');
+
+      expect(mockSendMfaOtp).not.toHaveBeenCalled();
+    });
+
+    it('does not submit multiple times when pressing Enter while submitting', async () => {
+      let resolvePromise: (value: any) => void;
+      const promise = new Promise((resolve) => {
+        resolvePromise = resolve;
+      });
+      mockSendMfaOtp.mockReturnValue(promise);
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+
+      await user.type(input, '123456');
+      await user.type(input, '{Enter}');
+      await user.type(input, '{Enter}'); // Second Enter should be ignored
+
+      expect(mockSendMfaOtp).toHaveBeenCalledTimes(1);
+
+      // Clean up
+      resolvePromise!({ success: true });
+      await waitFor(async () => {
+        await promise;
+      });
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles null error message gracefully', async () => {
+      mockSendMfaOtp.mockRejectedValueOnce({ message: null });
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+      await user.click(button);
+
+      await waitFor(() => {
+        expect(mocks.toastError).toHaveBeenCalledWith(
+          'An error occurred. Please try again.',
+          {},
+        );
+      });
+    });
+
+    it('prevents multiple rapid submissions', async () => {
+      let resolvePromise: (value: any) => void;
+      const promise = new Promise((resolve) => {
+        resolvePromise = resolve;
+      });
+      mockSendMfaOtp.mockReturnValue(promise);
+
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const input = screen.getByPlaceholderText('Enter TOTP');
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.type(input, '123456');
+
+      // Rapid clicks
+      await user.click(button);
+      await user.click(button);
+      await user.click(button);
+
+      expect(mockSendMfaOtp).toHaveBeenCalledTimes(1);
+
+      // Clean up
+      resolvePromise!({ success: true });
+      await waitFor(async () => {
+        await promise;
+      });
+    });
+
+    it('handles empty input correctly', async () => {
+      render(<MfaOtpForm {...defaultProps} />);
+
+      const button = screen.getByRole('button', { name: 'Verify' });
+
+      await user.click(button);
+
+      expect(mockSendMfaOtp).not.toHaveBeenCalled();
+      expect(button).toBeDisabled();
+    });
+  });
+});

dashboard/src/components/common/MfaOtpForm/MfaOtpForm.tsx

@@ -0,0 +1,87 @@
+import { Button } from '@/components/ui/v3/button';
+import { Input } from '@/components/ui/v3/input';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import {
+  useEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type KeyboardEvent,
+} from 'react';
+import toast from 'react-hot-toast';
+
+interface Props {
+  sendMfaOtp: (code: string) => Promise<any>;
+  loading: boolean;
+  requestNewMfaTicket?: () => Promise<void>;
+}
+
+function MfaOtpForm({ sendMfaOtp, loading, requestNewMfaTicket }: Props) {
+  const [otpValue, setOtpValue] = useState<string>('');
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const isMfaTicketInvalid = useRef(false);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  async function submitTOTP() {
+    if (otpValue.length === 6 && !isSubmitting) {
+      try {
+        setIsSubmitting(true);
+
+        if (requestNewMfaTicket && isMfaTicketInvalid.current) {
+          await requestNewMfaTicket();
+        }
+        await sendMfaOtp(otpValue);
+      } catch (error) {
+        isMfaTicketInvalid.current = true;
+        toast.error(
+          error?.message || 'An error occurred. Please try again.',
+          getToastStyleProps(),
+        );
+        setTimeout(() => {
+          inputRef.current?.focus();
+        }, 10);
+      } finally {
+        setIsSubmitting(false);
+      }
+    }
+  }
+
+  async function handleChange(event: ChangeEvent<HTMLInputElement>) {
+    const code = event.target.value.replace(/[^0-9]/g, '');
+    setOtpValue(code);
+  }
+
+  async function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+    if (event.key === 'Enter') {
+      submitTOTP();
+    }
+  }
+
+  const isInputDisabled = loading || isSubmitting;
+  const isButtonDisabled = isInputDisabled || otpValue.length !== 6;
+
+  return (
+    <div className="relative grid w-full grid-flow-row gap-4 bg-transparent">
+      <Input
+        ref={inputRef}
+        value={otpValue}
+        placeholder="Enter TOTP"
+        className="!bg-transparent"
+        disabled={isInputDisabled}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+      />
+      <Button disabled={isButtonDisabled} onClick={submitTOTP}>
+        {loading ? 'Verifying...' : 'Verify'}
+      </Button>
+    </div>
+  );
+}
+
+export default MfaOtpForm;

dashboard/src/components/common/MfaOtpForm/index.ts

@@ -0,0 +1 @@
+export { default as MfaOtpForm } from './MfaOtpForm';

dashboard/src/components/common/SelectOrgAndProject/SelectOrgAndProject.tsx

@@ -7,7 +7,6 @@ import { List } from '@/components/ui/v2/List';
 import { ListItem } from '@/components/ui/v2/ListItem';
 import { Text } from '@/components/ui/v2/Text';
 import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
-import {} from '@/utils/__generated__/graphql';
 import { Divider } from '@mui/material';
 import debounce from 'lodash.debounce';
 import Image from 'next/image';

dashboard/src/components/form/ControlledAutocomplete/ControlledAutocomplete.tsx

@@ -8,7 +8,7 @@ import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
 import type { FieldValues, UseControllerProps } from 'react-hook-form';
 import { useController, useFormContext } from 'react-hook-form';
-import mergeRefs from 'react-merge-refs';
+import { mergeRefs } from 'react-merge-refs';
 
 export interface ControlledAutocompleteProps<
   TOption extends AutocompleteOption = AutocompleteOption,

dashboard/src/components/form/ControlledCheckbox/ControlledCheckbox.tsx

@@ -5,7 +5,7 @@ import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
 import type { FieldValues, UseControllerProps } from 'react-hook-form';
 import { useController, useFormContext } from 'react-hook-form';
-import mergeRefs from 'react-merge-refs';
+import { mergeRefs } from 'react-merge-refs';
 
 export interface ControlledCheckboxProps<TFieldValues extends FieldValues = any>
   extends CheckboxProps {
@@ -38,7 +38,7 @@ function ControlledCheckbox(
     uncheckWhenDisabled,
     ...props
   }: ControlledCheckboxProps,
-  ref: ForwardedRef<HTMLInputElement>,
+  ref: ForwardedRef<HTMLButtonElement>,
 ) {
   const { setValue } = useFormContext();
   const { field } = useController({

dashboard/src/components/form/ControlledSelect/ControlledSelect.tsx

@@ -4,7 +4,7 @@ import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
 import type { FieldValues, UseControllerProps } from 'react-hook-form';
 import { useController, useFormContext } from 'react-hook-form';
-import mergeRefs from 'react-merge-refs';
+import { mergeRefs } from 'react-merge-refs';
 
 export interface ControlledSelectProps<TFieldValues extends FieldValues = any>
   extends SelectProps<TFieldValues> {
@@ -24,7 +24,7 @@ export interface ControlledSelectProps<TFieldValues extends FieldValues = any>
 
 function ControlledSelect(
   { controllerProps, name, control, ...props }: ControlledSelectProps,
-  ref: ForwardedRef<HTMLInputElement>,
+  ref: ForwardedRef<HTMLButtonElement>,
 ) {
   const { setValue } = useFormContext();
   const { field } = useController({

dashboard/src/components/form/ControlledSwitch/ControlledSwitch.tsx

@@ -2,13 +2,13 @@ import type { SwitchProps } from '@/components/ui/v2/Switch';
 import { Switch } from '@/components/ui/v2/Switch';
 import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
-import { useController, useFormContext } from 'react-hook-form';
 import type {
   ControllerProps,
   FieldValues,
   UseControllerProps,
-} from 'react-hook-form/dist/types';
-import mergeRefs from 'react-merge-refs';
+} from 'react-hook-form';
+import { useController, useFormContext } from 'react-hook-form';
+import { mergeRefs } from 'react-merge-refs';
 
 export interface ControlledSwitchProps<TFieldValues extends FieldValues = any>
   extends SwitchProps {

dashboard/src/components/form/FormInput/FormInput.tsx

@@ -0,0 +1,59 @@
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/v3/form';
+import { Input } from '@/components/ui/v3/input';
+import type { Control, FieldPath, FieldValues } from 'react-hook-form';
+
+const inputClasses =
+  '!bg-transparent aria-[invalid=true]:border-red-500 aria-[invalid=true]:focus:border-red-500 aria-[invalid=true]:focus:ring-red-500';
+
+interface FormInputProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> {
+  control: Control<TFieldValues>;
+  name: TName;
+  label: string;
+  placeholder?: string;
+  className?: string;
+  type?: string;
+}
+
+function FormInput<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  control,
+  name,
+  label,
+  placeholder,
+  className = '',
+  type = 'text',
+}: FormInputProps<TFieldValues, TName>) {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{label}</FormLabel>
+          <FormControl>
+            <Input
+              type={type}
+              placeholder={placeholder || label}
+              {...field}
+              className={`${inputClasses} ${className}`}
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+export default FormInput;

dashboard/src/components/form/FormInput/index.ts

@@ -0,0 +1 @@
+export { default as FormInput } from './FormInput';

dashboard/src/components/layout/AccountMenu/AccountMenu.tsx

@@ -6,19 +6,24 @@ import { Button } from '@/components/ui/v2/Button';
 import { Divider } from '@/components/ui/v2/Divider';
 import { Dropdown, useDropdown } from '@/components/ui/v2/Dropdown';
 import { Text } from '@/components/ui/v2/Text';
+import { useUserData } from '@/hooks/useUserData';
+import { useAuth } from '@/providers/Auth';
 import { useApolloClient } from '@apollo/client';
-import { useSignOut, useUserData } from '@nhost/nextjs';
 import getConfig from 'next/config';
-import { useRouter } from 'next/router';
 
 function AccountMenuContent() {
   const user = useUserData();
-  const { signOut } = useSignOut();
-  const router = useRouter();
+  const { signout } = useAuth();
   const apolloClient = useApolloClient();
   const { handleClose } = useDropdown();
   const { publicRuntimeConfig } = getConfig();
 
+  async function handleSignOut() {
+    handleClose();
+    await apolloClient.clearStore();
+    await signout();
+  }
+
   return (
     <Box className="grid grid-flow-row">
       <Box className="grid grid-flow-col items-center justify-start gap-3 p-4">
@@ -70,12 +75,7 @@ function AccountMenuContent() {
           color="error"
           variant="borderless"
           className="w-full justify-start"
-          onClick={async () => {
-            handleClose();
-            await apolloClient.clearStore();
-            await signOut();
-            await router.push('/signin');
-          }}
+          onClick={handleSignOut}
         >
           Sign out
         </Button>

dashboard/src/components/layout/AuthenticatedLayout/AuthenticatedLayout.tsx

@@ -2,48 +2,48 @@ import type { BaseLayoutProps } from '@/components/layout/BaseLayout';
 import { BaseLayout } from '@/components/layout/BaseLayout';
 import { Container } from '@/components/layout/Container';
 import { Header } from '@/components/layout/Header';
-import { MainNav } from '@/components/layout/MainNav';
-import { useTreeNavState } from '@/components/layout/MainNav/TreeNavStateContext';
 import { HighlightedText } from '@/components/presentational/HighlightedText';
-import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import { Link } from '@/components/ui/v2/Link';
 import { Text } from '@/components/ui/v2/Text';
 import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
-import { useAuthenticationStatus } from '@nhost/nextjs';
 
+import Analytics from '@/components/analytics/analytics';
 import { useMediaQuery } from '@/components/common/useMediaQuery';
+import { MainNav } from '@/components/layout/MainNav';
 import PinnedMainNav from '@/components/layout/MainNav/PinnedMainNav';
+import { useTreeNavState } from '@/components/layout/MainNav/TreeNavStateContext';
+import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
 import { OrgStatus } from '@/features/orgs/components/OrgStatus';
 import { useIsHealthy } from '@/features/orgs/projects/common/hooks/useIsHealthy';
-import { useNotFoundRedirect } from '@/features/orgs/projects/common/hooks/useNotFoundRedirect';
 import { cn } from '@/lib/utils';
+import { useAuth } from '@/providers/Auth';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
-export interface AuthenticatedLayoutProps extends BaseLayoutProps {}
+export interface AuthenticatedLayoutProps extends BaseLayoutProps {
+  withMainNav?: boolean;
+}
 
 export default function AuthenticatedLayout({
   children,
+  withMainNav = true,
   ...props
 }: AuthenticatedLayoutProps) {
   const router = useRouter();
   const isPlatform = useIsPlatform();
   const isMdOrLarger = useMediaQuery('md');
 
-  const { isAuthenticated, isLoading } = useAuthenticationStatus();
-  const isHealthy = useIsHealthy();
+  const { isAuthenticated, isLoading, isSigningOut } = useAuth();
+  const { isHealthy, isLoading: isHealthyLoading } = useIsHealthy();
   const [mainNavContainer, setMainNavContainer] = useState(null);
   const { mainNavPinned } = useTreeNavState();
 
-  useNotFoundRedirect();
-
   useEffect(() => {
     if (!isPlatform || isLoading || isAuthenticated) {
       return;
     }
-
     router.push('/signin');
   }, [isLoading, isAuthenticated, router, isPlatform]);
 
@@ -62,15 +62,15 @@ export default function AuthenticatedLayout({
     router.push('/orgs/local/projects/local');
   }, [isPlatform, router]);
 
-  if (isPlatform && isLoading) {
+  if ((isPlatform && isLoading) || isSigningOut) {
     return (
       <BaseLayout className="h-full" {...props}>
-        <Header className="flex max-h-[59px] flex-auto" />
+        <Header className="flex max-h-[59px] flex-auto py-1" />
       </BaseLayout>
     );
   }
 
-  if (!isPlatform && !isHealthy) {
+  if (!isPlatform && !isHealthy && !isHealthyLoading) {
     return (
       <BaseLayout className="h-full" {...props}>
         <Header className="flex max-h-[59px] flex-auto" />
@@ -124,10 +124,9 @@ export default function AuthenticatedLayout({
         {mainNavPinned && isMdOrLarger && <PinnedMainNav />}
 
         <div
-          className={cn(
-            'relative flex h-full w-full flex-row bg-accent',
-            mainNavPinned && isMdOrLarger ? 'overflow-x-auto' : '',
-          )}
+          className={cn('relative flex h-full w-full flex-row bg-accent', {
+            'overflow-x-auto': mainNavPinned && isMdOrLarger && withMainNav,
+          })}
         >
           {(!mainNavPinned || !isMdOrLarger) && (
             <div className="flex h-full w-6 justify-center">
@@ -142,6 +141,7 @@ export default function AuthenticatedLayout({
           >
             <div className="flex h-full w-full flex-col overflow-auto">
               <OrgStatus />
+              <Analytics />
               {children}
             </div>
           </RetryableErrorBoundary>

dashboard/src/components/layout/Header/ProjectPagesComboBox.tsx

@@ -33,6 +33,7 @@ import {
   PopoverTrigger,
 } from '@/components/ui/v3/popover';
 import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
+import { useSettingsDisabled } from '@/hooks/useSettingsDisabled';
 import { cn } from '@/lib/utils';
 import { useRouter } from 'next/router';
 import { useEffect, useMemo, useState, type ReactElement } from 'react';
@@ -55,6 +56,8 @@ export default function ProjectPagesComboBox() {
 
   const isPlatform = useIsPlatform();
 
+  const isSettingsDisabled = useSettingsDisabled();
+
   const projectPages = useMemo(
     () => [
       {
@@ -146,10 +149,10 @@ export default function ProjectPagesComboBox() {
         value: 'settings',
         icon: <CogIcon className="h-4 w-4" />,
         slug: 'settings',
-        disabled: false,
+        disabled: isSettingsDisabled,
       },
     ],
-    [isPlatform],
+    [isPlatform, isSettingsDisabled],
   );
 
   const pathSegments = useMemo(() => asPath.split('/'), [asPath]);

dashboard/src/components/layout/MainNav/MainNav.tsx

@@ -41,7 +41,7 @@ export default function MainNav({ container }: MainNavProps) {
   return (
     <Sheet open={open} onOpenChange={setOpen}>
       <div
-        className="min- absolute left-0 z-50 flex h-full w-6 justify-center border-r-[1px] bg-background pt-1 hover:bg-accent"
+        className="min- absolute left-0 z-[39] flex h-full w-6 justify-center border-r-[1px] bg-background pt-1 hover:bg-accent"
         onMouseEnter={() => setOpen(true)}
       >
         <Menu className="h-4 w-4" />

dashboard/src/components/layout/MainNav/NavTree.tsx

@@ -12,9 +12,9 @@ import { StorageIcon } from '@/components/ui/v2/icons/StorageIcon';
 import { UserIcon } from '@/components/ui/v2/icons/UserIcon';
 import { Badge } from '@/components/ui/v3/badge';
 import { Button } from '@/components/ui/v3/button';
-import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
 import { useOrgs, type Org } from '@/features/orgs/projects/hooks/useOrgs';
 import { cn } from '@/lib/utils';
+import { getConfigServerUrl, isPlatform as getIsPlatform } from '@/utils/env';
 import { Box, ChevronDown, ChevronRight, Plus } from 'lucide-react';
 import Link from 'next/link';
 import { useMemo, type ReactElement } from 'react';
@@ -160,7 +160,12 @@ const projectSettingsPages = [
   { name: 'Configuration Editor', slug: 'editor', route: 'editor' },
 ];
 
-const createOrganization = (org: Org, isPlatform: boolean) => {
+const createOrganization = (org: Org) => {
+  const isNotPlatform = !getIsPlatform();
+  const configServerVariableNotSet = getConfigServerUrl() === '';
+  const shouldDisableSettings = isNotPlatform && configServerVariableNotSet;
+  const shouldDisableGraphite = shouldDisableSettings;
+
   const result = {};
 
   result[org.slug] = {
@@ -211,7 +216,7 @@ const createOrganization = (org: Org, isPlatform: boolean) => {
       slug: 'new',
       icon: <Plus className="mr-1 h-4 w-4 font-bold" strokeWidth={3} />,
       targetUrl: `/orgs/${org.slug}/projects/new`,
-      disabled: !isPlatform,
+      disabled: isNotPlatform,
     },
   };
 
@@ -238,9 +243,9 @@ const createOrganization = (org: Org, isPlatform: boolean) => {
       result[`${org.slug}-${_app.subdomain}-${_page.slug}`] = {
         index: `${org.slug}-${_app.subdomain}-${_page.slug}`,
         canMove: false,
-        isFolder: _page.name === 'Settings',
+        isFolder: _page.name === 'Settings' && !shouldDisableSettings,
         children:
-          _page.name === 'Settings'
+          _page.name === 'Settings' && !shouldDisableSettings
             ? projectSettingsPages.map(
                 (p) => `${org.slug}-${_app.subdomain}-settings-${p.slug}`,
               )
@@ -251,9 +256,12 @@ const createOrganization = (org: Org, isPlatform: boolean) => {
           isProjectPage: true,
           targetUrl: `/orgs/${org.slug}/projects/${_app.subdomain}/${_page.route}`,
           disabled:
-            ['deployments', 'backups', 'logs', 'metrics'].includes(
+            (['deployments', 'backups', 'logs', 'metrics'].includes(
               _page.slug,
-            ) && !isPlatform,
+            ) &&
+              isNotPlatform) ||
+            (_page.name === 'Settings' && shouldDisableSettings) ||
+            (_page.name === 'AI' && shouldDisableGraphite),
         },
         canRename: false,
       };
@@ -272,6 +280,7 @@ const createOrganization = (org: Org, isPlatform: boolean) => {
             p.slug === 'general'
               ? `/orgs/${org.slug}/projects/${_app.subdomain}/settings`
               : `/orgs/${org.slug}/projects/${_app.subdomain}/settings/${p.route}`,
+          disabled: shouldDisableSettings,
         },
         canRename: false,
       };
@@ -286,7 +295,7 @@ const createOrganization = (org: Org, isPlatform: boolean) => {
     data: {
       name: 'Settings',
       targetUrl: `/orgs/${org.slug}/settings`,
-      disabled: !isPlatform,
+      disabled: isNotPlatform,
     },
     canRename: false,
   };
@@ -299,7 +308,7 @@ const createOrganization = (org: Org, isPlatform: boolean) => {
     data: {
       name: 'Members',
       targetUrl: `/orgs/${org.slug}/members`,
-      disabled: !isPlatform,
+      disabled: isNotPlatform,
     },
     canRename: false,
   };
@@ -312,7 +321,7 @@ const createOrganization = (org: Org, isPlatform: boolean) => {
     data: {
       name: 'Billing',
       targetUrl: `/orgs/${org.slug}/billing`,
-      disabled: !isPlatform,
+      disabled: isNotPlatform,
     },
     canRename: false,
   };
@@ -333,7 +342,6 @@ type NavItem = {
 
 const buildNavTreeData = (
   org: Org,
-  isPlatform: boolean,
 ): { items: Record<TreeItemIndex, TreeItem<NavItem>> } => {
   if (!org) {
     return {
@@ -365,7 +373,7 @@ const buildNavTreeData = (
         data: { name: 'root' },
         canRename: false,
       },
-      ...createOrganization(org, isPlatform),
+      ...createOrganization(org),
     },
   };
 
@@ -374,11 +382,8 @@ const buildNavTreeData = (
 
 export default function NavTree() {
   const { currentOrg: org } = useOrgs();
-  const isPlatform = useIsPlatform();
-  const navTree = useMemo(
-    () => buildNavTreeData(org, isPlatform),
-    [org, isPlatform],
-  );
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const navTree = useMemo(() => buildNavTreeData(org), [org?.slug]);
   const { orgsTreeViewState, setOrgsTreeViewState, setOpen } =
     useTreeNavState();
 

dashboard/src/components/layout/MobileNav/MobileNav.tsx

@@ -10,8 +10,8 @@ import { List } from '@/components/ui/v2/List';
 import { ListItem } from '@/components/ui/v2/ListItem';
 import { Text } from '@/components/ui/v2/Text';
 import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
+import { useAuth } from '@/providers/Auth';
 import { useApolloClient } from '@apollo/client';
-import { useSignOut } from '@nhost/nextjs';
 import getConfig from 'next/config';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
@@ -22,11 +22,18 @@ export interface MobileNavProps extends ButtonProps {}
 export default function MobileNav({ className, ...props }: MobileNavProps) {
   const isPlatform = useIsPlatform();
   const [menuOpen, setMenuOpen] = useState(false);
-  const { signOut } = useSignOut();
+  const { signout } = useAuth();
   const apolloClient = useApolloClient();
   const router = useRouter();
   const { publicRuntimeConfig } = getConfig();
 
+  async function handleSignOut() {
+    setMenuOpen(false);
+    await apolloClient.clearStore();
+    await signout();
+    await router.push('/signin');
+  }
+
   return (
     <>
       <Button
@@ -120,12 +127,7 @@ export default function MobileNav({ className, ...props }: MobileNavProps) {
                   variant="borderless"
                   sx={{ color: 'error.main' }}
                   className="justify-start border-none px-2 py-2.5 text-[16px]"
-                  onClick={async () => {
-                    setMenuOpen(false);
-                    await apolloClient.clearStore();
-                    await signOut();
-                    await router.push('/signin');
-                  }}
+                  onClick={handleSignOut}
                 >
                   Sign Out
                 </ListItem.Button>

dashboard/src/components/layout/UnauthenticatedLayout/UnauthenticatedLayout.tsx

@@ -6,21 +6,24 @@ import { RetryableErrorBoundary } from '@/components/presentational/RetryableErr
 import { Box } from '@/components/ui/v2/Box';
 import { ThemeProvider } from '@/components/ui/v2/ThemeProvider';
 import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
+import { useAuth } from '@/providers/Auth';
 import GlobalStyles from '@mui/material/GlobalStyles';
-import { useAuthenticationStatus } from '@nhost/nextjs';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 
-export interface UnauthenticatedLayoutProps extends BaseLayoutProps {}
+export interface UnauthenticatedLayoutProps extends BaseLayoutProps {
+  rightColumnContent?: React.ReactNode;
+}
 
 export default function UnauthenticatedLayout({
   children,
+  rightColumnContent,
   ...props
 }: UnauthenticatedLayoutProps) {
   const router = useRouter();
   const isPlatform = useIsPlatform();
-  const { isAuthenticated, isLoading } = useAuthenticationStatus();
+  const { isAuthenticated, isLoading } = useAuth();
   const isOnResetPassword = router.route === '/password/reset';
 
   useEffect(() => {
@@ -63,38 +66,46 @@ export default function UnauthenticatedLayout({
           >
             <Container
               rootClassName="bg-transparent h-full"
-              className="grid h-full w-full items-center justify-items-center gap-12 bg-transparent pb-12 pt-8 lg:grid-cols-2 lg:gap-4 lg:pb-0 lg:pt-0"
+              className="grid h-full w-full items-center justify-items-center gap-12 bg-transparent pb-12 pt-8 lg:grid-cols-2 lg:gap-4 lg:pb-0 lg:pt-8"
             >
               <div className="relative z-10 order-2 grid w-full max-w-[544px] grid-flow-row gap-12 lg:order-1">
                 {children}
               </div>
 
-              <div className="relative z-0 order-1 flex h-full w-full items-center justify-center md:min-h-[150px] lg:order-2 lg:min-h-[none]">
-                <div className="absolute bottom-0 left-0 right-0 top-0 mx-auto flex h-full w-full max-w-xl items-center justify-center overflow-hidden opacity-70">
+              <div className="relative z-0 order-1 flex h-full w-full flex-col items-center justify-center md:min-h-[150px] lg:order-2 lg:min-h-[none] lg:gap-8">
+                <div className="relative flex items-center justify-center">
+                  <div className="absolute bottom-0 left-0 right-0 top-0 mx-auto flex h-full w-full max-w-xl items-center justify-center overflow-hidden opacity-70">
+                    <Image
+                      priority
+                      src="/assets/line-grid.svg"
+                      width={1003}
+                      height={644}
+                      alt="Transparent lines"
+                      objectFit="fill"
+                      className="h-full w-full scale-[200%]"
+                    />
+                  </div>
+
+                  <Box
+                    className="backface-hidden absolute left-0 right-0 z-0 mx-auto h-20 w-20 transform-gpu rounded-full opacity-80 blur-[56px]"
+                    sx={{
+                      backgroundColor: (theme) => theme.palette.primary.main,
+                    }}
+                  />
+
                   <Image
-                    priority
-                    src="/assets/line-grid.svg"
-                    width={1003}
-                    height={644}
-                    alt="Transparent lines"
-                    objectFit="fill"
-                    className="h-full w-full scale-[200%]"
+                    src="/assets/logo.svg"
+                    width={119}
+                    height={40}
+                    alt="Nhost Logo"
                   />
                 </div>
 
-                <Box
-                  className="backface-hidden absolute left-0 right-0 z-0 mx-auto h-20 w-20 transform-gpu rounded-full opacity-80 blur-[56px]"
-                  sx={{
-                    backgroundColor: (theme) => theme.palette.primary.main,
-                  }}
-                />
-
-                <Image
-                  src="/assets/logo.svg"
-                  width={119}
-                  height={40}
-                  alt="Nhost Logo"
-                />
+                {rightColumnContent && (
+                  <div className="relative z-10 w-full max-w-md px-4 lg:px-0">
+                    {rightColumnContent}
+                  </div>
+                )}
               </div>
             </Container>
           </Box>

dashboard/src/components/presentational/CodeBlock/CodeBlock.tsx

@@ -6,8 +6,8 @@ import {
   type ReactElement,
 } from 'react';
 
+import { CopyToClipboardButton as CopyToClipboardButtonOriginal } from '@/components/presentational/CopyToClipboardButton';
 import { Box } from '@/components/ui/v2/Box';
-import { CopyToClipboardButton as CopyToClipboardButtonOriginal } from './CopyToClipboardButton';
 import { getNodeText } from './getNodeText';
 
 export interface CodeBlockPropsBase {

dashboard/src/components/presentational/CopyToClipboardButton/CopyToClipboardButton.tsx

@@ -1,14 +1,11 @@
+import { Button, type ButtonProps } from '@/components/ui/v3/button';
+import { isNotEmptyValue } from '@/lib/utils';
+import { copy } from '@/utils/copy';
 import { clsx } from 'clsx';
+import { Copy } from 'lucide-react';
 import { useEffect, useState } from 'react';
 
-import {
-  IconButton,
-  type IconButtonProps,
-} from '@/components/ui/v2/IconButton';
-import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
-import { copy } from '@/utils/copy';
-
-export function CopyToClipboardButton({
+function CopyToClipboardButton({
   textToCopy,
   className,
   title,
@@ -16,7 +13,7 @@ export function CopyToClipboardButton({
 }: {
   textToCopy: string;
   title: string;
-} & IconButtonProps) {
+} & ButtonProps) {
   const [disabled, setDisabled] = useState(true);
 
   useEffect(() => {
@@ -35,12 +32,18 @@ export function CopyToClipboardButton({
   if (!textToCopy || disabled) {
     return null;
   }
+  const hasChildren = isNotEmptyValue(props.children);
 
   return (
-    <IconButton
-      variant="borderless"
-      color="secondary"
-      className={clsx('group', className)}
+    <Button
+      type="button"
+      size="icon"
+      variant="outline"
+      className={clsx(
+        'group h-fit w-fit border-0 bg-transparent p-[2px] hover:bg-[#d6eefb] dark:hover:bg-[#1e2942]',
+        className,
+        { 'gap-3': hasChildren },
+      )}
       onClick={(event) => {
         event.stopPropagation();
 
@@ -49,7 +52,9 @@ export function CopyToClipboardButton({
       aria-label={textToCopy}
       {...props}
     >
-      <CopyIcon className="top-5 h-4 w-4" />
-    </IconButton>
+      {props.children}
+      <Copy className="top-5 h-4 w-4" />
+    </Button>
   );
 }
+export default CopyToClipboardButton;

dashboard/src/components/presentational/CopyToClipboardButton/index.ts

@@ -0,0 +1 @@
+export { default as CopyToClipboardButton } from './CopyToClipboardButton';

dashboard/src/components/ui/v2/Checkbox/Checkbox.tsx

@@ -92,7 +92,7 @@ function Checkbox(
     'aria-label': ariaLabel,
     ...props
   }: CheckboxProps,
-  ref: ForwardedRef<HTMLInputElement>,
+  ref: ForwardedRef<HTMLButtonElement>,
 ) {
   if (!label) {
     return (

dashboard/src/components/ui/v2/ErrorToast/ErrorToast.tsx

@@ -3,10 +3,10 @@ import { ChevronUpIcon } from '@/components/ui/v2/icons/ChevronUpIcon';
 import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
 import { XIcon } from '@/components/ui/v2/icons/XIcon';
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
+import { useUserData } from '@/hooks/useUserData';
 import { getToastBackgroundColor } from '@/utils/constants/settings';
 import { copy } from '@/utils/copy';
 import type { ApolloError } from '@apollo/client';
-import { useUserData } from '@nhost/nextjs';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useRouter } from 'next/router';
 import { useState } from 'react';

dashboard/src/components/ui/v2/Input/Input.tsx

@@ -5,7 +5,7 @@ import type { InputBaseProps as MaterialInputBaseProps } from '@mui/material/Inp
 import MaterialInputBase, { inputBaseClasses } from '@mui/material/InputBase';
 import type { DetailedHTMLProps, ForwardedRef, HTMLProps } from 'react';
 import { forwardRef } from 'react';
-import mergeRefs from 'react-merge-refs';
+import { mergeRefs } from 'react-merge-refs';
 
 export interface InputProps
   extends Omit<MaterialInputBaseProps, 'componentsProps' | 'slotProps'>,

dashboard/src/components/ui/v2/Radio/Radio.tsx

@@ -57,7 +57,7 @@ const StyledRadio = styled(MaterialRadio)(({ theme }) => ({
 
 function Radio(
   { label, value, slotProps, ...props }: RadioProps,
-  ref: ForwardedRef<HTMLInputElement>,
+  ref: ForwardedRef<HTMLButtonElement>,
 ) {
   return (
     <StyledFormControlLabel

dashboard/src/components/ui/v2/ThemeProvider/ThemeProvider.tsx

@@ -29,9 +29,6 @@ function ThemeProviderContent({
           'html, body': {
             backgroundColor: `${theme.palette.background.default} !important`,
           },
-          html: {
-            class: `${preferredColor}`,
-          },
         }}
       />
       <Head>

dashboard/src/components/ui/v3/dialog.tsx

@@ -30,36 +30,44 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 interface DialogContentProps
   extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
   disableOutsideClick?: boolean;
+  hideCloseButton?: boolean;
 }
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   DialogContentProps
->(({ className, children, disableOutsideClick, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay>
-      <DialogPrimitive.Content
-        ref={ref}
-        className={cn(
-          'relative z-50 grid w-full max-w-lg gap-4 bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg md:w-full',
-          className,
-        )}
-        onInteractOutside={
-          disableOutsideClick
-            ? (e) => e.preventDefault()
-            : props.onInteractOutside
-        }
-        {...props}
-      >
-        {children}
-        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-          <X className="h-4 w-4" />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
-      </DialogPrimitive.Content>
-    </DialogOverlay>
-  </DialogPortal>
-));
+>(
+  (
+    { className, children, disableOutsideClick, hideCloseButton, ...props },
+    ref,
+  ) => (
+    <DialogPortal>
+      <DialogOverlay>
+        <DialogPrimitive.Content
+          ref={ref}
+          className={cn(
+            'relative z-50 grid w-full max-w-lg gap-4 bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg md:w-full',
+            className,
+          )}
+          onInteractOutside={
+            disableOutsideClick
+              ? (e) => e.preventDefault()
+              : props.onInteractOutside
+          }
+          {...props}
+        >
+          {children}
+          {!hideCloseButton && (
+            <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+              <X className="h-4 w-4" />
+              <span className="sr-only">Close</span>
+            </DialogPrimitive.Close>
+          )}
+        </DialogPrimitive.Content>
+      </DialogOverlay>
+    </DialogPortal>
+  ),
+);
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({

dashboard/src/features/account/settings/components/AccountMfaSettings/components/AccountMfaSettings.tsx

@@ -0,0 +1,44 @@
+import { Badge } from '@/components/ui/v3/badge';
+import useMfaEnabled from '@/features/account/settings/components/AccountMfaSettings/hooks/useMfaEnabled';
+import DisableMfaButton from './DisableMfaButton/DisableMfaButton';
+import EnableMfaButton from './EnableMfaButton/EnableMfaButton';
+
+function MFaEnabledBadge() {
+  return (
+    <Badge variant="outline" className="border-green-400 text-green-400">
+      Enabled
+    </Badge>
+  );
+}
+
+function MFaDisabledBadge() {
+  return (
+    <Badge
+      variant="outline"
+      className="text- border-destructive text-destructive"
+    >
+      Disabled
+    </Badge>
+  );
+}
+
+function AccountMfaSettings() {
+  const { isMfaEnabled } = useMfaEnabled();
+  return (
+    <div className="rounded-lg border border-[#EAEDF0] bg-white font-['Inter_var'] dark:border-[#2F363D] dark:bg-paper">
+      <div className="flex w-full flex-col items-start gap-6 p-4">
+        <div className="flex w-full items-center justify-between">
+          <h3 className="flex items-center text-[1.125rem] font-semibold leading-[1.75]">
+            <span className="mr-4">Multi-Factor Authentication </span>
+            {isMfaEnabled ? <MFaEnabledBadge /> : <MFaDisabledBadge />}
+          </h3>
+        </div>
+      </div>
+      <div className="flex w-full items-center border-t border-[#EAEDF0] px-4 py-2 dark:border-[#2F363D]">
+        {isMfaEnabled ? <DisableMfaButton /> : <EnableMfaButton />}
+      </div>
+    </div>
+  );
+}
+
+export default AccountMfaSettings;

dashboard/src/features/account/settings/components/AccountMfaSettings/components/DisableMfaButton/DisableMfaButton.tsx

@@ -0,0 +1,69 @@
+import { MfaOtpForm } from '@/components/common/MfaOtpForm';
+import { Button } from '@/components/ui/v3/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/v3/dialog';
+import useMfaEnabled from '@/features/account/settings/components/AccountMfaSettings/hooks/useMfaEnabled';
+import { useNhostClient } from '@/providers/nhost';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { useState } from 'react';
+import { toast } from 'react-hot-toast';
+
+function DisableMfaButton() {
+  const nhost = useNhostClient();
+  const [open, setOpen] = useState(false);
+  const [isDisabling, setIsDisabling] = useState(false);
+  const { loading, refetch } = useMfaEnabled();
+  const buttonDisabled = loading || isDisabling;
+
+  async function onSendMfaOtp(code: string) {
+    try {
+      setIsDisabling(true);
+      await nhost.auth.verifyChangeUserMfa({
+        code,
+        activeMfaType: '',
+      });
+      toast.success(
+        'Multi-factor authentication has been disabled.',
+        getToastStyleProps(),
+      );
+      await refetch();
+      setOpen(false);
+
+      return true;
+    } finally {
+      setIsDisabling(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          variant="outline"
+          disabled={buttonDisabled}
+          className="p-y[0.375rem] h-9 gap-2 border-destructive px-2 text-destructive hover:bg-destructive"
+        >
+          Disable multi-factor authentication
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="z-[9999] max-w-[28rem] text-foreground">
+        <DialogHeader>
+          <DialogTitle>Disable multi-factor authentication</DialogTitle>
+        </DialogHeader>
+        <DialogDescription className="hidden">
+          Disable multi-factor authentication
+        </DialogDescription>
+
+        <MfaOtpForm loading={isDisabling} sendMfaOtp={onSendMfaOtp} />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default DisableMfaButton;

dashboard/src/features/account/settings/components/AccountMfaSettings/components/DisableMfaButton/index.ts

@@ -0,0 +1 @@
+export { default as DisableMfaButton } from './DisableMfaButton';

dashboard/src/features/account/settings/components/AccountMfaSettings/components/EnableMfaButton/CopyMfaTOTPSecret.tsx

@@ -0,0 +1,19 @@
+import { CopyToClipboardButton } from '@/components/presentational/CopyToClipboardButton';
+
+interface Props {
+  totpSecret: string | null;
+}
+
+function CopyMfaTOTPSecret({ totpSecret }: Props) {
+  return (
+    <CopyToClipboardButton
+      className="p-2"
+      textToCopy={totpSecret}
+      title="TOTP secret"
+    >
+      OR Copy TOTP secret
+    </CopyToClipboardButton>
+  );
+}
+
+export default CopyMfaTOTPSecret;

dashboard/src/features/account/settings/components/AccountMfaSettings/components/EnableMfaButton/EnableMfaButton.tsx

@@ -0,0 +1,48 @@
+import { Button } from '@/components/ui/v3/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/v3/dialog';
+import useMfaEnabled from '@/features/account/settings/components/AccountMfaSettings/hooks/useMfaEnabled';
+import { useState } from 'react';
+import MfaQRCodeAndTOTPSecret from './MfaQRCodeAndTOTPSecret';
+
+function EnableMfaButton() {
+  const [open, setOpen] = useState(false);
+  const { isMfaEnabled, loading, refetch } = useMfaEnabled();
+  const buttonDisabled = loading || isMfaEnabled;
+
+  async function handleOnSuccess() {
+    setOpen(false);
+    await refetch();
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          variant="outline"
+          disabled={buttonDisabled}
+          className="p-y[0.375rem] h-9 gap-2 border-green-600 px-2 text-green-600 hover:bg-destructive hover:bg-green-600"
+        >
+          Enable multi-factor authentication
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="z-[9999] max-w-[28rem] text-foreground">
+        <DialogHeader>
+          <DialogTitle>Enable multi-factor authentication</DialogTitle>
+        </DialogHeader>
+        <DialogDescription className="hidden">
+          Enable multi-factor authentication
+        </DialogDescription>
+        <MfaQRCodeAndTOTPSecret onSuccess={handleOnSuccess} />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default EnableMfaButton;

dashboard/src/features/account/settings/components/AccountMfaSettings/components/EnableMfaButton/MfaQRCodeAndTOTPSecret.tsx

@@ -0,0 +1,75 @@
+/* eslint-disable @next/next/no-img-element */
+import { MfaOtpForm } from '@/components/common/MfaOtpForm';
+import { Spinner } from '@/components/ui/v3/spinner';
+import { useNhostClient } from '@/providers/nhost';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-hot-toast';
+import CopyMfaTOTPSecret from './CopyMfaTOTPSecret';
+
+interface Props {
+  onSuccess: () => void;
+}
+
+function MfaQRCodeAndTOTPSecret({ onSuccess }: Props) {
+  const [qrCodeDataUrl, setQrCodeDataUrl] = useState<string | undefined>();
+  const [totpSecret, setTotpSecret] = useState<string | undefined>();
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [isActivating, setIsActivating] = useState(false);
+  const nhost = useNhostClient();
+
+  async function onSendMfaOtp(code: string) {
+    try {
+      setIsActivating(true);
+      await nhost.auth.verifyChangeUserMfa({
+        code,
+        activeMfaType: 'totp',
+      });
+      toast.success(
+        'Multi-factor authentication has been enabled.',
+        getToastStyleProps(),
+      );
+      onSuccess();
+      return true;
+    } finally {
+      setIsActivating(false);
+    }
+  }
+
+  useEffect(() => {
+    async function generate() {
+      try {
+        setIsGenerating(true);
+        const response = await nhost.auth.changeUserMfa();
+        setQrCodeDataUrl(response.body.imageUrl);
+        setTotpSecret(response.body.totpSecret);
+      } catch (error) {
+        toast.error(error?.message, getToastStyleProps());
+      } finally {
+        setIsGenerating(false);
+      }
+    }
+    generate();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className="flex w-full flex-col items-center justify-center gap-4">
+      {isGenerating && <Spinner />}
+      {qrCodeDataUrl && (
+        <>
+          <div className="flex flex-col justify-center gap-4">
+            <p className="text-base">
+              Scan the QR Code with your authenticator app
+            </p>
+            <img alt="qrcode" src={qrCodeDataUrl} className="mx-auto w-64" />
+          </div>
+          <CopyMfaTOTPSecret totpSecret={totpSecret} />
+          <MfaOtpForm loading={isActivating} sendMfaOtp={onSendMfaOtp} />
+        </>
+      )}
+    </div>
+  );
+}
+
+export default MfaQRCodeAndTOTPSecret;

dashboard/src/features/account/settings/components/AccountMfaSettings/components/EnableMfaButton/index.ts

@@ -0,0 +1 @@
+export { default as EnableMfaButton } from './EnableMfaButton';

dashboard/src/features/account/settings/components/AccountMfaSettings/hooks/useMfaEnabled.ts

@@ -0,0 +1,17 @@
+import { useUserData } from '@/hooks/useUserData';
+import { isNotEmptyValue } from '@/lib/utils';
+import { useGetActiveMfaTypeQuery } from '@/utils/__generated__/graphql';
+
+function useMfaEnabled() {
+  const userData = useUserData();
+  const { data, loading, refetch } = useGetActiveMfaTypeQuery({
+    variables: { id: userData?.id },
+    fetchPolicy: 'cache-first',
+  });
+
+  const isMfaEnabled = isNotEmptyValue(data?.user?.activeMfaType);
+
+  return { loading, isMfaEnabled, refetch };
+}
+
+export default useMfaEnabled;

dashboard/src/features/account/settings/components/AccountMfaSettings/index.ts

@@ -0,0 +1 @@
+export { default as AccountMfaSettings } from './components/AccountMfaSettings';

dashboard/src/features/account/settings/components/CreatePATForm/CreatePATForm.tsx

@@ -10,17 +10,16 @@ import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
 import { Input } from '@/components/ui/v2/Input';
 import { Option } from '@/components/ui/v2/Option';
 import { Text } from '@/components/ui/v2/Text';
+import useActionWithElevatedPermissions from '@/features/account/settings/hooks/useActionWithElevatedPermissions';
+import { useNhostClient } from '@/providers/nhost';
 import type { DialogFormProps } from '@/types/common';
 import { GetPersonalAccessTokensDocument } from '@/utils/__generated__/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
 import { copy } from '@/utils/copy';
 import { getDateComponents } from '@/utils/getDateComponents';
 import { useApolloClient } from '@apollo/client';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { useNhostClient } from '@nhost/nextjs';
 import { useEffect, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';
 
 export const createPATFormValidationSchema = Yup.object({
@@ -84,6 +83,25 @@ export default function CreatePATForm({
     resolver: yupResolver(createPATFormValidationSchema),
   });
 
+  const createPAT = useActionWithElevatedPermissions({
+    actionFn: async (
+      expiresAt: string,
+      metadata?: Record<string, string | number>,
+    ) => {
+      const result = await nhostClient.auth.createPAT({ expiresAt, metadata });
+      return result;
+    },
+    successMessage: 'The personal access token has been created successfully.',
+    onSuccess: ({ body }) => {
+      setPersonalAccessToken(body.personalAccessToken);
+      apolloClient.refetchQueries({
+        include: [GetPersonalAccessTokensDocument],
+      });
+
+      form.reset();
+    },
+  });
+
   const { register, formState } = form;
 
   const isDirty = Object.keys(formState.dirtyFields).length > 0;
@@ -93,44 +111,12 @@ export default function CreatePATForm({
   }, [isDirty, location, onDirtyStateChange]);
 
   async function handleSubmit(formValues: CreatePATFormValues) {
-    try {
-      const { error, data } = await nhostClient.auth.createPAT(
-        new Date(formValues.expiresAt),
-        {
-          name: formValues.name,
-          application: 'dashboard',
-          userAgent: window.navigator.userAgent,
-        },
-      );
-
-      const toastStyle = getToastStyleProps();
-
-      if (error) {
-        toast.error(error.message, {
-          style: toastStyle.style,
-          ...toastStyle.error,
-        });
-        return;
-      }
-
-      toast.success(
-        'The personal access token has been created successfully.',
-        {
-          style: toastStyle.style,
-          ...toastStyle.success,
-        },
-      );
-
-      setPersonalAccessToken(data?.personalAccessToken);
-
-      apolloClient.refetchQueries({
-        include: [GetPersonalAccessTokensDocument],
-      });
-
-      form.reset();
-    } catch {
-      // Note: This error is handled by the toast.
-    }
+    const expiresAt = new Date(formValues.expiresAt).toISOString();
+    await createPAT(expiresAt, {
+      name: formValues.name,
+      application: 'dashboard',
+      userAgent: window.navigator.userAgent,
+    });
   }
 
   if (personalAccessToken) {

dashboard/src/features/account/settings/components/DeleteAccount/DeleteAccount.tsx

@@ -5,9 +5,9 @@ import { Button } from '@/components/ui/v2/Button';
 import { Checkbox } from '@/components/ui/v2/Checkbox';
 import { Text } from '@/components/ui/v2/Text';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
+import { useUserData } from '@/hooks/useUserData';
+import { useAuth } from '@/providers/Auth';
 import { useDeleteUserAccountMutation } from '@/utils/__generated__/graphql';
-import { useSignOut, useUserData } from '@nhost/nextjs';
-import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
@@ -82,14 +82,12 @@ function ConfirmDeleteAccountModal({
 }
 
 export default function DeleteAccount() {
-  const router = useRouter();
-  const { signOut } = useSignOut();
+  const { signout } = useAuth();
 
   const { openDialog, closeDialog } = useDialog();
 
   const onDelete = async () => {
-    await signOut();
-    await router.push('/signin');
+    await signout();
   };
 
   const confirmDeleteAccount = async () => {

dashboard/src/features/account/settings/components/DisplayNameSetting/DisplayNameSetting.tsx

@@ -2,9 +2,9 @@ import { Form } from '@/components/form/Form';
 import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { Input } from '@/components/ui/v2/Input';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
+import { useUserData } from '@/hooks/useUserData';
 import { useUpdateUserDisplayNameMutation } from '@/utils/__generated__/graphql';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { useUserData } from '@nhost/nextjs';
 import { FormProvider, useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
@@ -19,7 +19,9 @@ export type DisplayNameSettingFormValues = Yup.InferType<
 >;
 
 export default function DisplayNameSetting() {
-  const { id: userID, displayName } = useUserData();
+  const user = useUserData();
+
+  const { id: userID, displayName } = user || {};
 
   const [updateUserDisplayName] = useUpdateUserDisplayNameMutation();
 

dashboard/src/features/account/settings/components/EmailSetting/EmailSetting.tsx

@@ -1,9 +1,10 @@
 import { Form } from '@/components/form/Form';
 import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { Input } from '@/components/ui/v2/Input';
-import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
+import useActionWithElevatedPermissions from '@/features/account/settings/hooks/useActionWithElevatedPermissions';
+import { useUserData } from '@/hooks/useUserData';
+import { useNhostClient } from '@/providers/nhost';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { useNhostClient, useUserData } from '@nhost/nextjs';
 import { FormProvider, useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
@@ -15,36 +16,34 @@ export type EmailSettingFormValues = Yup.InferType<typeof validationSchema>;
 
 export default function EmailSetting() {
   const nhost = useNhostClient();
-  const { email } = useUserData();
+  const user = useUserData();
 
   const form = useForm<EmailSettingFormValues>({
     reValidateMode: 'onSubmit',
-    defaultValues: { email },
+    defaultValues: { email: user?.email },
     resolver: yupResolver(validationSchema),
   });
 
   const { register, formState } = form;
   const isDirty = Object.keys(formState.dirtyFields).length > 0;
 
+  const changeEmail = useActionWithElevatedPermissions({
+    actionFn: async (newEmail: string) => {
+      const result = await nhost.auth.changeUserEmail({
+        newEmail,
+        options: {
+          redirectTo: `${window.location.origin}/account`,
+        },
+      });
+      return result;
+    },
+    successMessage:
+      'Please check your inbox. Follow the link to finalize changing your email.',
+    onSuccess: () => form.reset(),
+  });
+
   async function handleSubmit(formValues: EmailSettingFormValues) {
-    await execPromiseWithErrorToast(
-      async () => {
-        await nhost.auth.changeEmail({
-          newEmail: formValues.email,
-          options: {
-            redirectTo: `${window.location.origin}/account`,
-          },
-        });
-        form.reset({ email: formValues.email });
-      },
-      {
-        loadingMessage: 'Updating your email...',
-        successMessage:
-          'Please check your inbox. Follow the link to finalize changing your email.',
-        errorMessage:
-          'An error occurred while trying to update your email. Please try again.',
-      },
-    );
+    await changeEmail(formValues.email);
   }
 
   return (

dashboard/src/features/account/settings/components/PasswordSettings/PasswordSettings.tsx

@@ -1,93 +0,0 @@
-import { Form } from '@/components/form/Form';
-import { SettingsContainer } from '@/components/layout/SettingsContainer';
-import { Input } from '@/components/ui/v2/Input';
-import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
-import { yupResolver } from '@hookform/resolvers/yup';
-import { useChangePassword } from '@nhost/nextjs';
-import { FormProvider, useForm } from 'react-hook-form';
-import * as Yup from 'yup';
-
-const validationSchema = Yup.object({
-  newPassword: Yup.string()
-    .label('New Password')
-    .nullable()
-    .required('This field is required.'),
-  confirmPassword: Yup.string()
-    .label('Confirm Password')
-    .nullable()
-    .required('This field is required.')
-    .test(
-      'passwords-match',
-      'Passwords must match.',
-      (value, ctx) => ctx.parent.newPassword === value,
-    ),
-});
-
-export type PasswordSettingsFormValues = Yup.InferType<typeof validationSchema>;
-
-export default function PasswordSettings() {
-  const { changePassword } = useChangePassword();
-  const form = useForm<PasswordSettingsFormValues>({
-    reValidateMode: 'onSubmit',
-    resolver: yupResolver(validationSchema),
-  });
-
-  const { register, formState } = form;
-  const isDirty = Object.keys(formState.dirtyFields).length > 0;
-
-  async function handleSubmit(formValues: PasswordSettingsFormValues) {
-    await execPromiseWithErrorToast(
-      async () => {
-        // TODO fix changePassword should throw an error if something happens
-        await changePassword(formValues.newPassword);
-        form.reset();
-      },
-      {
-        loadingMessage: 'Changing password...',
-        successMessage: 'The password has been changed successfully.',
-        errorMessage:
-          'An error occurred while trying to update the password. Please try again.',
-      },
-    );
-  }
-
-  return (
-    <FormProvider {...form}>
-      <Form onSubmit={handleSubmit}>
-        <SettingsContainer
-          title="Change Password"
-          description="Update your account password."
-          slotProps={{
-            submitButton: {
-              disabled: !isDirty,
-              loading: formState.isSubmitting,
-            },
-          }}
-          className="grid grid-flow-row lg:grid-cols-5"
-        >
-          <Input
-            {...register('newPassword')}
-            className="col-span-2"
-            type="password"
-            id="new-password"
-            label="New Password"
-            fullWidth
-            helperText={formState.errors.newPassword?.message}
-            error={Boolean(formState.errors.newPassword)}
-          />
-
-          <Input
-            {...register('confirmPassword')}
-            className="col-span-2 row-start-2"
-            type="password"
-            id="confirm-password"
-            label="Confirm Password"
-            fullWidth
-            helperText={formState.errors.confirmPassword?.message}
-            error={Boolean(formState.errors.confirmPassword)}
-          />
-        </SettingsContainer>
-      </Form>
-    </FormProvider>
-  );
-}

dashboard/src/features/account/settings/components/PasswordSettings/components/PasswordSettings.tsx

@@ -0,0 +1,50 @@
+import { FormInput } from '@/components/form/FormInput';
+import { Button } from '@/components/ui/v3/button';
+import { Form } from '@/components/ui/v3/form';
+import useChangePasswordForm from '@/features/account/settings/components/PasswordSettings/hooks/useChangePasswordForm';
+import useOnChangePasswordHandler from '@/features/account/settings/components/PasswordSettings/hooks/useOnChangePasswordHandler';
+
+export default function PasswordSettings() {
+  const form = useChangePasswordForm();
+  const onSubmit = useOnChangePasswordHandler({
+    onSuccess: () => form.reset(),
+  });
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <div className="rounded-lg border border-[#EAEDF0] bg-white font-['Inter_var'] dark:border-[#2F363D] dark:bg-paper">
+          <div className="flex w-full flex-col items-start gap-4 p-4">
+            <div className="flex w-full flex-col items-start">
+              <h3 className="text-[1.125rem] font-semibold leading-[1.75]">
+                Change Password
+              </h3>
+              <p className="text-[#556378] dark:text-[#A2B3BE]">
+                Update your account password.
+              </p>
+            </div>
+            <div className="flex w-[370px] flex-col gap-4">
+              <FormInput
+                control={form.control}
+                name="newPassword"
+                type="password"
+                label="New Password"
+              />
+              <FormInput
+                control={form.control}
+                name="confirmPassword"
+                type="password"
+                label="Confirm Password"
+              />
+            </div>
+          </div>
+          <div className="flex w-full items-center justify-end border-t border-[#EAEDF0] px-4 py-2 dark:border-[#2F363D]">
+            <Button type="submit" variant="outline">
+              Save
+            </Button>
+          </div>
+        </div>
+      </form>
+    </Form>
+  );
+}

dashboard/src/features/account/settings/components/PasswordSettings/hooks/useChangePasswordForm.ts

@@ -0,0 +1,39 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+const validationSchema = z
+  .object({
+    newPassword: z
+      .string({
+        required_error: 'This field is required.',
+      })
+      .min(1, 'This field is required.'),
+    confirmPassword: z
+      .string({
+        required_error: 'This field is required.',
+      })
+      .min(1, 'This field is required.'),
+  })
+  .refine((data) => data.newPassword === data.confirmPassword, {
+    message: 'Passwords must match.',
+    path: ['confirmPassword'],
+  });
+
+export type ChangePasswordFormValues = z.infer<typeof validationSchema>;
+
+function useChangePasswordForm() {
+  const form = useForm<ChangePasswordFormValues>({
+    mode: 'onTouched',
+    reValidateMode: 'onBlur',
+    defaultValues: {
+      newPassword: '',
+      confirmPassword: '',
+    },
+    resolver: zodResolver(validationSchema),
+  });
+
+  return form;
+}
+
+export default useChangePasswordForm;

dashboard/src/features/account/settings/components/PasswordSettings/hooks/useOnChangePasswordHandler.ts

@@ -0,0 +1,27 @@
+import useActionWithElevatedPermissions from '@/features/account/settings/hooks/useActionWithElevatedPermissions';
+import { useNhostClient } from '@/providers/nhost';
+import { type ChangePasswordFormValues } from './useChangePasswordForm';
+
+interface Props {
+  onSuccess: () => void;
+}
+
+function useOnChangePasswordHandler({ onSuccess }: Props) {
+  const nhost = useNhostClient();
+
+  const changePassword = useActionWithElevatedPermissions({
+    actionFn: nhost.auth.changeUserPassword,
+    onSuccess,
+    successMessage: 'The password has been changed successfully.',
+  });
+
+  async function onSubmit(values: ChangePasswordFormValues) {
+    const { newPassword } = values;
+
+    await changePassword({ newPassword });
+  }
+
+  return onSubmit;
+}
+
+export default useOnChangePasswordHandler;

dashboard/src/features/account/settings/components/PasswordSettings/index.ts

@@ -1,2 +1 @@
-export * from './PasswordSettings';
-export { default as PasswordSettings } from './PasswordSettings';
+export { default as PasswordSettings } from './components/PasswordSettings';

dashboard/src/features/account/settings/components/SecurityKeysSettings/components/AddSecurityKeyButton.tsx

@@ -0,0 +1,45 @@
+import { Button } from '@/components/ui/v3/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/v3/dialog';
+import { Plus } from 'lucide-react';
+import { useState } from 'react';
+
+import SecurityKeyForm from './NewSecurityKeyForm';
+
+function AddSecurityKeyButton() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          variant="ghost"
+          className="h-9 gap-2 px-2 py-[0.375rem] hover:bg-[#d6eefb] dark:hover:bg-[#1e2942]"
+        >
+          <Plus className="h-5 w-5" />
+          Add New Security Key
+        </Button>
+      </DialogTrigger>
+      <DialogContent
+        className="sr z-[9999] text-foreground sm:max-w-xl"
+        aria-describedby="Add a Security Key"
+      >
+        <DialogHeader>
+          <DialogTitle>Add a Security Key</DialogTitle>
+        </DialogHeader>
+        <DialogDescription className="sr-only">
+          Add a Security Key
+        </DialogDescription>
+        <SecurityKeyForm onSuccess={() => setOpen(false)} />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default AddSecurityKeyButton;

dashboard/src/features/account/settings/components/SecurityKeysSettings/components/NewSecurityKeyForm.tsx

@@ -0,0 +1,56 @@
+import { Button } from '@/components/ui/v3/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/v3/form';
+import { Input } from '@/components/ui/v3/input';
+import useNewSecurityKeyForm from '@/features/account/settings/components/SecurityKeysSettings/hooks/useNewSecurityKeyForm';
+import useOnAddNewSecurityKeyHandler from '@/features/account/settings/components/SecurityKeysSettings/hooks/useOnAddNewSecurityKeyHandler';
+
+interface Props {
+  onSuccess: () => void;
+}
+
+function NewSecurityKeyForm({ onSuccess }: Props) {
+  const form = useNewSecurityKeyForm();
+  const onSubmit = useOnAddNewSecurityKeyHandler({ onSuccess });
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="grid grid-flow-row gap-4 bg-transparent"
+      >
+        <FormField
+          control={form.control}
+          name="nickname"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Name</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder="Name"
+                  {...field}
+                  className="!bg-transparent"
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button
+          type="submit"
+          variant="outline"
+          className="w-full !bg-transparent"
+        >
+          Add new security key
+        </Button>
+      </form>
+    </Form>
+  );
+}
+
+export default NewSecurityKeyForm;

dashboard/src/features/account/settings/components/SecurityKeysSettings/components/RemoveSecurityKeyButton.tsx

@@ -0,0 +1,34 @@
+import { Button } from '@/components/ui/v3/button';
+import useRemoveSecurityKey from '@/features/account/settings/components/SecurityKeysSettings/hooks/useRemoveSecurityKey';
+import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
+import { Trash } from 'lucide-react';
+import { memo } from 'react';
+
+interface Props {
+  id: string;
+}
+
+function RemoveSecurityKeyButton({ id }: Props) {
+  const removeSecurityKey = useRemoveSecurityKey();
+
+  function handleClick() {
+    execPromiseWithErrorToast(async () => removeSecurityKey(id), {
+      loadingMessage: 'Removing security key...',
+      successMessage: 'Security key has been removed successfully.',
+      errorMessage:
+        'An error occurred while trying to remove security key. Please try again.',
+    });
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      onClick={handleClick}
+      aria-label={`Remove security key ${id}`}
+    >
+      <Trash />
+    </Button>
+  );
+}
+
+export default memo(RemoveSecurityKeyButton);

dashboard/src/features/account/settings/components/SecurityKeysSettings/components/SecurityKeyList.tsx

@@ -0,0 +1,43 @@
+import { Spinner } from '@/components/ui/v3/spinner';
+import useGetSecurityKeys from '@/features/account/settings/hooks/useGetSecurityKeys';
+import { InfoAlert } from '@/features/orgs/components/InfoAlert';
+import { Fingerprint } from 'lucide-react';
+import { memo } from 'react';
+import RemoveSecurityKeyButton from './RemoveSecurityKeyButton';
+
+type SecurityKeyProps = {
+  id: string;
+  nickname?: string;
+};
+
+function SecurityKey({ id, nickname }: SecurityKeyProps) {
+  return (
+    <div className="flex w-full items-center justify-between rounded-lg border border-[#EAEDF0] px-2 py-2 dark:border-[#2F363D]">
+      <div className="flex justify-start gap-3">
+        <Fingerprint />
+        <span>{nickname || id}</span>
+      </div>
+      <RemoveSecurityKeyButton id={id} />
+    </div>
+  );
+}
+
+const MemoizedSecurityKey = memo(SecurityKey);
+
+function SecurityKeyList() {
+  const { data, loading } = useGetSecurityKeys();
+
+  return (
+    <div>
+      {loading && <Spinner />}
+      {!loading && data?.authUserSecurityKeys.length === 0 && (
+        <InfoAlert>No security keys have been added yet!</InfoAlert>
+      )}
+      {data?.authUserSecurityKeys.map(({ id, nickname }) => (
+        <MemoizedSecurityKey key={id} id={id} nickname={nickname} />
+      ))}
+    </div>
+  );
+}
+
+export default SecurityKeyList;

dashboard/src/features/account/settings/components/SecurityKeysSettings/components/SecurityKeysSettings.tsx

@@ -0,0 +1,24 @@
+import AddSecurityKeyButton from './AddSecurityKeyButton';
+import SecurityKeyList from './SecurityKeyList';
+
+function SecurityKeysSettings() {
+  return (
+    <div className="rounded-lg border border-[#EAEDF0] bg-white font-display dark:border-[#2F363D] dark:bg-paper">
+      <div className="flex w-full flex-col items-start gap-6 p-4">
+        <div className="flex w-full items-center justify-between">
+          <h3 className="text-[1.125rem] font-semibold leading-[1.75]">
+            Manage your security keys
+          </h3>
+        </div>
+        <div className="flex w-full flex-col gap-4">
+          <SecurityKeyList />
+        </div>
+      </div>
+      <div className="flex w-full items-center border-t border-[#EAEDF0] px-4 py-2 dark:border-[#2F363D]">
+        <AddSecurityKeyButton />
+      </div>
+    </div>
+  );
+}
+
+export default SecurityKeysSettings;

dashboard/src/features/account/settings/components/SecurityKeysSettings/hooks/useNewSecurityKeyForm.ts

@@ -0,0 +1,25 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+const validationSchema = z
+  .object({
+    nickname: z.string().min(1, { message: 'Nickname is required' }),
+  })
+  .required();
+
+export type NewSecurityKeyFormValues = z.infer<typeof validationSchema>;
+
+function useNewSecurityKeyForm() {
+  const form = useForm<NewSecurityKeyFormValues>({
+    reValidateMode: 'onSubmit',
+    defaultValues: {
+      nickname: '',
+    },
+    resolver: zodResolver(validationSchema),
+  });
+
+  return form;
+}
+
+export default useNewSecurityKeyForm;

dashboard/src/features/account/settings/components/SecurityKeysSettings/hooks/useOnAddNewSecurityKeyHandler.ts

@@ -0,0 +1,38 @@
+import useActionWithElevatedPermissions from '@/features/account/settings/hooks/useActionWithElevatedPermissions';
+import useGetSecurityKeys from '@/features/account/settings/hooks/useGetSecurityKeys';
+import { useNhostClient } from '@/providers/nhost';
+import { startRegistration } from '@simplewebauthn/browser';
+import { type NewSecurityKeyFormValues } from './useNewSecurityKeyForm';
+
+interface Props {
+  onSuccess: () => void;
+}
+
+function useOnAddNewSecurityKeyHandler({ onSuccess }: Props) {
+  const { refetch } = useGetSecurityKeys();
+  const nhost = useNhostClient();
+
+  async function actionFn(nickname: string) {
+    const webAuthnOptions = await nhost.auth.addSecurityKey();
+    const credential = await startRegistration(webAuthnOptions.body);
+    await nhost.auth.verifyAddSecurityKey({ credential, nickname });
+  }
+
+  const addSecurityKey = useActionWithElevatedPermissions({
+    actionFn,
+    onSuccess: async () => {
+      await refetch();
+      onSuccess();
+    },
+    successMessage: 'Security key has been added.',
+  });
+
+  async function onSubmit(values: NewSecurityKeyFormValues) {
+    const { nickname } = values;
+    await addSecurityKey(nickname);
+  }
+
+  return onSubmit;
+}
+
+export default useOnAddNewSecurityKeyHandler;

dashboard/src/features/account/settings/components/SecurityKeysSettings/hooks/useRemoveSecurityKey.ts

@@ -0,0 +1,22 @@
+import useElevatedPermissions from '@/features/account/settings/hooks/useElevatedPermissions';
+import useGetSecurityKeys from '@/features/account/settings/hooks/useGetSecurityKeys';
+import { useRemoveSecurityKeyMutation } from '@/utils/__generated__/graphql';
+
+function useRemoveSecurityKey() {
+  const [removeSecurityKeyMutation] = useRemoveSecurityKeyMutation();
+  const elevatePermissions = useElevatedPermissions();
+  const { refetch: refetchSecurityKeys } = useGetSecurityKeys();
+
+  async function removeSecurityKey(id: string) {
+    const permissionGranted = await elevatePermissions(true);
+
+    if (permissionGranted) {
+      await removeSecurityKeyMutation({ variables: { id } });
+      await refetchSecurityKeys();
+    }
+  }
+
+  return removeSecurityKey;
+}
+
+export default useRemoveSecurityKey;

dashboard/src/features/account/settings/components/SecurityKeysSettings/index.ts

@@ -0,0 +1 @@
+export { default as SecurityKeysSettings } from './components/SecurityKeysSettings';

dashboard/src/features/account/settings/components/SocialProvidersSettings/SocialProvidersSettings.tsx

@@ -4,20 +4,33 @@ import { Box } from '@/components/ui/v2/Box';
 import { Button } from '@/components/ui/v2/Button';
 import { GitHubIcon } from '@/components/ui/v2/icons/GitHubIcon';
 import { Text } from '@/components/ui/v2/Text';
+import { useAccessToken } from '@/hooks/useAccessToken';
+import { useNhostClient } from '@/providers/nhost';
 import { useGetAuthUserProvidersQuery } from '@/utils/__generated__/graphql';
-import { useProviderLink } from '@nhost/nextjs';
 import NavLink from 'next/link';
+import { useMemo } from 'react';
 
 export default function SocialProvidersSettings() {
+  const nhost = useNhostClient();
+  const token = useAccessToken();
   const { data, loading, error } = useGetAuthUserProvidersQuery();
   const isGithubConnected = data?.authUserProviders?.some(
     (item) => item.providerId === 'github',
   );
 
-  const { github } = useProviderLink({
-    connect: true,
-    redirectTo: `${window.location.origin}/account`,
-  });
+  const github = useMemo(
+    () => {
+      if (typeof window !== 'undefined') {
+        return nhost.auth.signInProviderURL('github', {
+          connect: token,
+          redirectTo: `${window.location.origin}/account`,
+        });
+      }
+      return '';
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [token],
+  );
 
   if (!data && loading) {
     return (

dashboard/src/features/account/settings/gql/getActiveMfaType.gql

@@ -0,0 +1,5 @@
+query getActiveMfaType($id: uuid!) {
+  user(id: $id) {
+    activeMfaType
+  }
+}

dashboard/src/features/account/settings/gql/getSecurityKeys.gql

@@ -0,0 +1,6 @@
+query securityKeys($userId: uuid!) {
+  authUserSecurityKeys(where: { userId: { _eq: $userId } }) {
+    id
+    nickname
+  }
+}

dashboard/src/features/account/settings/gql/removeSecurityKey.gql

@@ -0,0 +1,5 @@
+mutation removeSecurityKey($id: uuid!) {
+  deleteAuthUserSecurityKey(id: $id) {
+    id
+  }
+}

dashboard/src/features/account/settings/hooks/useActionWithElevatedPermissions.ts

@@ -0,0 +1,54 @@
+import useElevatedPermissions from '@/features/account/settings/hooks/useElevatedPermissions';
+import useGetSecurityKeys from '@/features/account/settings/hooks/useGetSecurityKeys';
+import { toast } from 'react-hot-toast';
+
+type Action = (...args: any[]) => Promise<any>;
+
+type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
+
+interface Props<Fn extends Action> {
+  actionFn: Fn;
+  onSuccess?: (result: UnwrapPromise<ReturnType<Fn>>) => void;
+  onError?: () => void;
+  successMessage?: string;
+}
+
+function useActionWithElevatedPermissions<F extends Action>({
+  actionFn,
+  onSuccess,
+  onError,
+  successMessage,
+}: Props<F>) {
+  const elevatePermissions = useElevatedPermissions();
+  const { data } = useGetSecurityKeys();
+
+  async function requestPermissions() {
+    if (data?.authUserSecurityKeys.length === 0) {
+      return true;
+    }
+    const isPermissionsElevated = await elevatePermissions();
+    return isPermissionsElevated;
+  }
+
+  async function actionWithElevatedPermissions(...args: Parameters<F>) {
+    let isSuccess = false;
+    const permissionGranted = await requestPermissions();
+    if (!permissionGranted) {
+      return isSuccess;
+    }
+    try {
+      const response = await actionFn(...args);
+      toast.success(successMessage || 'Success.');
+      onSuccess?.(response as UnwrapPromise<ReturnType<F>>);
+      isSuccess = true;
+    } catch (error) {
+      toast.error(error?.message || 'Something went wrong.');
+      onError?.();
+    }
+
+    return isSuccess;
+  }
+  return actionWithElevatedPermissions;
+}
+
+export default useActionWithElevatedPermissions;

dashboard/src/features/account/settings/hooks/useElevatedPermissions.ts

@@ -0,0 +1,37 @@
+import { useElevateEmail } from '@/hooks/useElevateEmail';
+import { useHasuraClaims } from '@/hooks/useHasuraClaims';
+
+import { useUserData } from '@/hooks/useUserData';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { toast } from 'react-hot-toast';
+
+function useElevatedPermissions() {
+  const user = useUserData();
+  const elevateEmail = useElevateEmail();
+  const claims = useHasuraClaims();
+
+  async function elevatePermissions(shouldThrowError = false) {
+    const elevated = user
+      ? claims?.['x-hasura-auth-elevated'] === user?.id
+      : false;
+    if (elevated) {
+      return true;
+    }
+    try {
+      await elevateEmail();
+      return true;
+    } catch (e) {
+      if (shouldThrowError) {
+        throw e;
+      } else {
+        const message = e?.message || 'Could not elevate permissions';
+        toast.error(message, getToastStyleProps());
+        return false;
+      }
+    }
+  }
+
+  return elevatePermissions;
+}
+
+export default useElevatedPermissions;

dashboard/src/features/account/settings/hooks/useGetSecurityKeys.ts

@@ -0,0 +1,15 @@
+import { useUserData } from '@/hooks/useUserData';
+import { useSecurityKeysQuery } from '@/utils/__generated__/graphql';
+
+function useGetSecurityKeys() {
+  const user = useUserData();
+  const query = useSecurityKeysQuery({
+    variables: {
+      userId: user?.id,
+    },
+  });
+
+  return query;
+}
+
+export default useGetSecurityKeys;

dashboard/src/features/auth/AuthProviders/Github/components/GithubAuthButton/GithubAuthButton.tsx

@@ -0,0 +1,35 @@
+import { ButtonWithLoading as Button } from '@/components/ui/v3/button';
+import {
+  useGithubAuthentication,
+  type UseGithubAuthenticationHookProps,
+} from '@/features/auth/AuthProviders/Github/hooks/useGithubAuthentication';
+import { SiGithub } from '@icons-pack/react-simple-icons';
+
+interface Props extends UseGithubAuthenticationHookProps {
+  buttonText?: string;
+  withAnonId?: boolean;
+  redirectTo?: string;
+}
+
+function GithubAuthButton({
+  buttonText = 'Continue with GitHub',
+  withAnonId = false,
+  redirectTo,
+}: Props) {
+  const { mutate: signInWithGithub, isLoading } = useGithubAuthentication({
+    withAnonId,
+    redirectTo,
+  });
+  return (
+    <Button
+      className="gap-2 !bg-white text-sm+ !text-black hover:ring-2 hover:ring-white hover:ring-opacity-50 disabled:!text-black disabled:!text-opacity-60"
+      disabled={isLoading}
+      loading={isLoading}
+      onClick={() => signInWithGithub()}
+    >
+      <SiGithub size={14} /> {buttonText}
+    </Button>
+  );
+}
+
+export default GithubAuthButton;

dashboard/src/features/auth/AuthProviders/Github/components/GithubAuthButton/index.ts

@@ -0,0 +1 @@
+export { default as GithubAuthButton } from './GithubAuthButton';

dashboard/src/features/auth/AuthProviders/Github/hooks/useGithubAuthentication/index.ts

@@ -0,0 +1,2 @@
+export * from './useGithubAuthentication';
+export { default as useGithubAuthentication } from './useGithubAuthentication';

dashboard/src/features/auth/AuthProviders/Github/hooks/useGithubAuthentication/useGithubAuthentication.ts

@@ -0,0 +1,47 @@
+import { getAnonId } from '@/lib/segment';
+import { isNotEmptyValue } from '@/lib/utils';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { nhost } from '@/utils/nhost';
+import type { SignInProviderParams } from '@nhost/nhost-js-beta/auth';
+import { useMutation } from '@tanstack/react-query';
+import { toast } from 'react-hot-toast';
+
+export interface UseGithubAuthenticationHookProps {
+  withAnonId?: boolean;
+  redirectTo?: string;
+  errorText?: string;
+}
+
+function useGithubAuthentication({
+  withAnonId = false,
+  redirectTo,
+  errorText,
+}: UseGithubAuthenticationHookProps) {
+  const githubAuthenticationMutation = useMutation(
+    async () => {
+      let options: SignInProviderParams | undefined;
+      if (isNotEmptyValue(redirectTo)) {
+        options = {
+          redirectTo,
+        };
+      }
+      if (withAnonId) {
+        options = {
+          metadata: { anonId: await getAnonId() },
+          ...options,
+        };
+      }
+
+      const redirectURl = nhost.auth.signInProviderURL('github', options);
+      window.location.href = redirectURl;
+    },
+    {
+      onError: () => {
+        toast.error(errorText, getToastStyleProps());
+      },
+    },
+  );
+
+  return githubAuthenticationMutation;
+}
+export default useGithubAuthentication;

dashboard/src/features/auth/SignIn/SecurityKey/components/SignInWithSecurityKey/SignInWithSecurityKey.tsx

@@ -0,0 +1,31 @@
+import { Button } from '@/components/ui/v3/button';
+import { useSignInWithSecurityKey } from '@/features/auth/SignIn/SecurityKey/hooks/useSignInWithSecurityKey';
+import { Fingerprint } from 'lucide-react';
+import { useState } from 'react';
+import { VerifyEmailDialog } from './VerifyEmailDialog';
+
+function SignInWithSecurityKey() {
+  const [open, setOpen] = useState(false);
+  function onNeedsEmailVerification() {
+    setOpen(true);
+  }
+  const { disabled, signInWithSecurityKey } = useSignInWithSecurityKey({
+    onNeedsEmailVerification,
+  });
+  return (
+    <>
+      <VerifyEmailDialog open={open} setOpen={setOpen} />
+      <Button
+        variant="ghost"
+        className="gap-2 !bg-white text-sm+ !text-black hover:ring-2 hover:ring-white hover:ring-opacity-50 disabled:!text-black disabled:!text-opacity-60"
+        disabled={disabled}
+        onClick={signInWithSecurityKey}
+      >
+        <Fingerprint size={14} />
+        Continue with a security key
+      </Button>
+    </>
+  );
+}
+
+export default SignInWithSecurityKey;

dashboard/src/features/auth/SignIn/SecurityKey/components/SignInWithSecurityKey/VerifyEmailDialog.tsx

@@ -0,0 +1,28 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/v3/dialog';
+
+interface Props {
+  open: boolean;
+  setOpen: (openState: boolean) => void;
+}
+
+export function VerifyEmailDialog({ open, setOpen }: Props) {
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="text-foreground sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Email verification required</DialogTitle>
+          <DialogDescription>
+            You need to verify your email first. Please check your mailbox and
+            follow the confirmation link to complete the registration.
+          </DialogDescription>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  );
+}

dashboard/src/features/auth/SignIn/SecurityKey/hooks/useSignInWithSecurityKey/index.ts

@@ -0,0 +1 @@
+export { default as useSignInWithSecurityKey } from './useSignInWithSecurityKey';

dashboard/src/features/auth/SignIn/SecurityKey/hooks/useSignInWithSecurityKey/useSignInWithSecurityKey.ts

@@ -0,0 +1,47 @@
+import { isNotEmptyValue } from '@/lib/utils';
+import { useNhostClient } from '@/providers/nhost';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { startAuthentication } from '@simplewebauthn/browser';
+import { useState } from 'react';
+import { toast } from 'react-hot-toast';
+
+interface Props {
+  onNeedsEmailVerification: () => void;
+}
+
+function useSignInWithSecurityKey({ onNeedsEmailVerification }: Props) {
+  const nhost = useNhostClient();
+  const [disabled, setDisabled] = useState(false);
+
+  async function signInWithSecurityKey() {
+    try {
+      setDisabled(true);
+      const signInWebauthnResponse = await nhost.auth.signInWebauthn();
+      const { body: options } = signInWebauthnResponse;
+      const credential = await startAuthentication(options);
+      await nhost.auth.verifySignInWebauthn({
+        credential,
+      });
+    } catch (error) {
+      let errorMessage =
+        error?.message ||
+        'An error occurred while signing in. Please try again.';
+
+      if (isNotEmptyValue(error?.body)) {
+        const errorCode = error.body.error;
+        if (errorCode === 'unverified-user') {
+          onNeedsEmailVerification();
+          return;
+        }
+        errorMessage = error.body.message;
+      }
+      toast.error(errorMessage, getToastStyleProps());
+    } finally {
+      setDisabled(false);
+    }
+  }
+
+  return { disabled, signInWithSecurityKey };
+}
+
+export default useSignInWithSecurityKey;

dashboard/src/features/auth/SignIn/SecurityKey/index.ts

@@ -0,0 +1 @@
+export { default as SignInWithSecurityKey } from './components/SignInWithSecurityKey/SignInWithSecurityKey';

dashboard/src/features/auth/SignIn/SignInWithEmailAndPassword/components/MfaSignInOtpForm.tsx

@@ -0,0 +1,30 @@
+import { MfaOtpForm } from '@/components/common/MfaOtpForm';
+import { Smartphone } from 'lucide-react';
+
+interface Props {
+  sendMfaOtp: (code: string) => Promise<any>;
+  loading: boolean;
+  requestNewMfaTicket: () => Promise<void>;
+}
+
+function MfaSignInOtpForm({ sendMfaOtp, loading, requestNewMfaTicket }: Props) {
+  return (
+    <div className="ws-full relative grid grid-flow-row gap-4 bg-transparent">
+      <div className="flex w-full flex-col items-center justify-center gap-3">
+        <Smartphone size={32} />
+        <h2 className="text-[1.25rem]">Authentication Code</h2>
+      </div>
+      <MfaOtpForm
+        loading={loading}
+        sendMfaOtp={sendMfaOtp}
+        requestNewMfaTicket={requestNewMfaTicket}
+      />
+      <p className="text-center">
+        Open your authenticator app or browser extension to view your
+        authentication code.
+      </p>
+    </div>
+  );
+}
+
+export default MfaSignInOtpForm;