chore: update versions (#3370)

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/hasura-storage-js@2.8.0

### Minor Changes

-   aee9a80: chore: update typescript version to the latest

## @nhost/nhost-js@3.3.0

### Minor Changes

-   aee9a80: chore: update typescript version to the latest

### Patch Changes

-   Updated dependencies [aee9a80]
    -   @nhost/hasura-storage-js@2.8.0

## @nhost/apollo@9.0.0

### Patch Changes

-   Updated dependencies [aee9a80]
    -   @nhost/nhost-js@3.3.0

## @nhost/react-apollo@18.0.1

### Patch Changes

-   @nhost/apollo@9.0.0
-   @nhost/react@3.11.1

## @nhost/react-urql@15.0.1

### Patch Changes

-   @nhost/react@3.11.1

## @nhost/nextjs@2.2.9

### Patch Changes

-   @nhost/react@3.11.1

## @nhost/react@3.11.1

### Patch Changes

-   Updated dependencies [aee9a80]
    -   @nhost/nhost-js@3.3.0

## @nhost/vue@2.9.7

### Patch Changes

-   Updated dependencies [aee9a80]
    -   @nhost/nhost-js@3.3.0

## @nhost/dashboard@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

## @nhost/docs@2.33.0

### Minor Changes

-   4ca9641: feat: added cloud development documentation

## @nhost-examples/cli@0.3.23

### Patch Changes

-   Updated dependencies [aee9a80]
    -   @nhost/nhost-js@3.3.0

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

### Patch Changes

-   @nhost/react@3.11.1
-   @nhost/react-apollo@18.0.1

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

### Patch Changes

-   @nhost/react@3.11.1

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

### Patch Changes

-   @nhost/react@3.11.1
-   @nhost/react-urql@15.0.1

## @nhost-examples/multi-tenant-one-to-many@2.2.24

### Patch Changes

-   Updated dependencies [aee9a80]
    -   @nhost/nhost-js@3.3.0

## @nhost-examples/nextjs@0.4.9

### Patch Changes

-   @nhost/react@3.11.1
-   @nhost/react-apollo@18.0.1
-   @nhost/nextjs@2.2.9

## @nhost-examples/node-storage@0.2.23

### Patch Changes

-   Updated dependencies [aee9a80]
    -   @nhost/nhost-js@3.3.0

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

### Patch Changes

-   Updated dependencies [aee9a80]
    -   @nhost/nhost-js@3.3.0

## @nhost-examples/sveltekit@0.8.2

### Patch Changes

-   Updated dependencies [aee9a80]
    -   @nhost/nhost-js@3.3.0

## @nhost-examples/react-apollo@1.6.2

### Patch Changes

-   @nhost/react@3.11.1
-   @nhost/react-apollo@18.0.1

## @nhost-examples/react-gqty@1.6.2

### Patch Changes

-   @nhost/react@3.11.1

## @nhost-examples/react-native@0.1.10

### Patch Changes

-   @nhost/react@3.11.1
-   @nhost/react-apollo@18.0.1

## @nhost-examples/vue-apollo@0.12.2

### Patch Changes

-   Updated dependencies [aee9a80]
    -   @nhost/nhost-js@3.3.0
    -   @nhost/apollo@9.0.0
    -   @nhost/vue@2.9.7

## @nhost-examples/vue-quickstart@0.6.2

### Patch Changes

-   @nhost/apollo@9.0.0
-   @nhost/vue@2.9.7

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 Upgrade project Dashboard e2e tests
+        if: matrix.package.path == 'dashboard'
+        timeout-minutes: 10
+        run: pnpm --filter="${{ matrix.package.name }}" run e2e:upgrade-project
       # * 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
 

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,80 @@
 # @nhost/dashboard
 
+## 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/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/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/upgrade-project/upgrade-project.test.ts

@@ -0,0 +1,142 @@
+import { expect, test } from '@/e2e/fixtures/auth-hook';
+import {
+  getCardExpiration,
+  getFreeUserStarterOrgSlug,
+  getNewOrgSlug,
+  getNewProjectName,
+  getNewProjectSlug,
+  getOrgSlugFromUrl,
+  getProjectSlugFromUrl,
+  gotoUrl,
+  loginWithFreeUser,
+  setNewOrgSlug,
+  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('should create a new project', async () => {
+  await gotoUrl(page, `/orgs/${getFreeUserStarterOrgSlug()}/projects/new`);
+  const projectName = faker.lorem.words(3).slice(0, 32);
+
+  await page.getByLabel('Project Name').fill(projectName);
+  await page.getByText('Create Project').click();
+
+  expect(page.getByText('Creating the project...')).toBeVisible();
+  expect(page.getByText('Internal info')).toBeVisible();
+
+  await page.waitForSelector('button:has-text("Upgrade project")', {
+    timeout: 180000,
+  });
+
+  const newProjectSlug = getProjectSlugFromUrl(page.url());
+  setNewProjectSlug(newProjectSlug);
+  setNewProjectName(projectName);
+});
+
+test('should upgrade the project', async () => {
+  await gotoUrl(
+    page,
+    `/orgs/${getFreeUserStarterOrgSlug()}/projects/${getNewProjectSlug()}`,
+  );
+  const upgradeProject = page.getByText('Upgrade project');
+  expect(upgradeProject).toBeVisible();
+
+  await upgradeProject.click();
+
+  await page.waitForSelector('h2:has-text("Upgrade project")');
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+  await page.waitForSelector('h2:has-text("New Organization")');
+
+  const newOrgName = faker.lorem.words(3);
+  await page.getByLabel('Organization Name').fill(newOrgName);
+
+  await page.getByText('Create organization').click();
+  await page.waitForSelector('button:has-text("Create organization")', {
+    state: 'hidden',
+  });
+  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
+  await stripeFrame
+    .getByTestId('hosted-payment-submit-button')
+    .scrollIntoViewIfNeeded();
+  await stripeFrame
+    .getByTestId('hosted-payment-submit-button')
+    .click({ force: true });
+
+  await page.waitForSelector('h2:has-text("Upgrade project")');
+  await page.waitForSelector(
+    'div:has-text("Organization created successfully.")',
+  );
+  await page.waitForSelector(
+    'div:has-text("Project has been upgraded successfully!")',
+  );
+
+  page.getByRole('button', { name: 'Create project' });
+
+  await page.waitForSelector(`div:has-text("${newOrgName}")`);
+  await page.waitForSelector(`p:has-text("${getNewProjectName()}")`);
+
+  setNewOrgSlug(getOrgSlugFromUrl(page.url()));
+});
+
+test('should delete the new organization', async () => {
+  await gotoUrl(page, `/orgs/${getNewOrgSlug()}/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(`div:has-text("Personal Organization")`);
+});

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, expect } from '@playwright/test';
+import { add, format } from 'date-fns-v4';
 
 /**
  * Open a project by navigating to the project's overview page.
@@ -213,8 +219,96 @@ 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.url;
+  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].replace('/projects', '');
+  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() * 5);
+}
+
+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();
+  expect(
+    await page.getByRole('button', { name: 'Create project' }),
+  ).not.toBeVisible();
+  await page.waitForSelector('h2:has-text("Welcome to")', { timeout: 20000 });
+  setFreeUserStarterOrgSlug(getOrgSlugFromUrl(await page.url()));
+}

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "2.27.0",
+  "version": "2.33.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:upgrade-project": "pnpm e2e:tests --project=upgrade-project"
   },
   "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.26",
     "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

@@ -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: ['upgrade-project.test.ts', 'cli-local-dashboard.test.ts'],
+    },
+    {
+      name: 'local',
+      use: {
+        ...devices['Desktop Chrome'],
+        baseURL: '', // Local dashboard URL
+      },
+      testMatch: 'cli-local-dashboard.test.ts',
+    },
+    {
+      name: 'upgrade-project',
+      testMatch: 'upgrade-project.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/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/common/UpgradeToProBanner/UpgradeToProBanner.tsx

@@ -3,7 +3,7 @@ import { Box } from '@/components/ui/v2/Box';
 import { ArrowSquareOutIcon } from '@/components/ui/v2/icons/ArrowSquareOutIcon';
 import { Link } from '@/components/ui/v2/Link';
 import { Text } from '@/components/ui/v2/Text';
-import { TransferProjectDialog } from '@/features/orgs/components/common/TransferProjectDialog';
+import { TransferOrUpgradeProjectDialog } from '@/features/orgs/components/common/TransferOrUpgradeProjectDialog';
 import { useState } from 'react';
 
 import { OpenTransferDialogButton } from '@/components/common/OpenTransferDialogButton';
@@ -51,7 +51,7 @@ export default function UpgradeToProBanner({
 
         <div className="flex flex-col gap-2 space-y-2 lg:flex-row lg:items-center lg:space-x-2 lg:space-y-0">
           <OpenTransferDialogButton onClick={handleTransferDialogOpen} />
-          <TransferProjectDialog
+          <TransferOrUpgradeProjectDialog
             open={transferProjectDialogOpen}
             setOpen={setTransferProjectDialogOpen}
           />

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,22 +2,23 @@ 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';
@@ -32,7 +33,7 @@ export default function AuthenticatedLayout({
   const isPlatform = useIsPlatform();
   const isMdOrLarger = useMediaQuery('md');
 
-  const { isAuthenticated, isLoading } = useAuthenticationStatus();
+  const { isAuthenticated, isLoading } = useAuth();
   const isHealthy = useIsHealthy();
   const [mainNavContainer, setMainNavContainer] = useState(null);
   const { mainNavPinned } = useTreeNavState();
@@ -43,7 +44,6 @@ export default function AuthenticatedLayout({
     if (!isPlatform || isLoading || isAuthenticated) {
       return;
     }
-
     router.push('/signin');
   }, [isLoading, isAuthenticated, router, isPlatform]);
 
@@ -65,11 +65,15 @@ export default function AuthenticatedLayout({
   if (isPlatform && isLoading) {
     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 && !isLoading && !isAuthenticated) {
+  //   return null;
+  // }
+
   if (!isPlatform && !isHealthy) {
     return (
       <BaseLayout className="h-full" {...props}>
@@ -142,6 +146,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/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/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,8 +6,8 @@ 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';
@@ -20,7 +20,7 @@ export default function UnauthenticatedLayout({
 }: UnauthenticatedLayoutProps) {
   const router = useRouter();
   const isPlatform = useIsPlatform();
-  const { isAuthenticated, isLoading } = useAuthenticationStatus();
+  const { isAuthenticated, isLoading } = useAuth();
   const isOnResetPassword = router.route === '/password/reset';
 
   useEffect(() => {

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/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,29 @@ 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(
+    () =>
+      nhost.auth.signInProviderURL('github', {
+        connect: token,
+        redirectTo: `${window.location.origin}/account`,
+      }),
+    // 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;

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

@@ -0,0 +1,54 @@
+import useOnSignInWithEmailAndPasswordHandler from '@/features/auth/SignIn/SignInWithEmailAndPassword/hooks/useOnSignInWithEmailAndPasswordHandler';
+import useRequestNewMfaTicket from '@/features/auth/SignIn/SignInWithEmailAndPassword/hooks/useRequestNewMfaTicket';
+import { useNhostClient } from '@/providers/nhost';
+import { useRef, useState } from 'react';
+import MfaSignInOtpForm from './MfaSignInOtpForm';
+import SignInWithEmailAndPasswordForm from './SignInWithEmailAndPasswordForm';
+
+function SignInWithEmailAndPassword() {
+  const [needsMfaOtp, setNeedsMfaOtp] = useState(false);
+  const mfaTicket = useRef<string | undefined>();
+  const [isMfaLoading, setIsMfaLoading] = useState(false);
+  const nhost = useNhostClient();
+
+  function onNeedsMfa(ticket: string) {
+    mfaTicket.current = ticket;
+    setNeedsMfaOtp(true);
+  }
+
+  const { onSignInWithEmailAndPassword, isLoading, emailAndPasswordRef } =
+    useOnSignInWithEmailAndPasswordHandler({ onNeedsMfa });
+  const requestNewMfaTicketFn = useRequestNewMfaTicket();
+
+  async function requestNewMfaTicket() {
+    const { email, password } = emailAndPasswordRef.current;
+    mfaTicket.current = await requestNewMfaTicketFn(email, password);
+  }
+
+  async function onHandleSendMfaOtp(otp: string) {
+    try {
+      setIsMfaLoading(true);
+      await nhost.auth.verifySignInMfaTotp({
+        ticket: mfaTicket.current,
+        otp,
+      });
+    } finally {
+      setIsMfaLoading(false);
+    }
+  }
+
+  return needsMfaOtp ? (
+    <MfaSignInOtpForm
+      sendMfaOtp={onHandleSendMfaOtp}
+      loading={isMfaLoading}
+      requestNewMfaTicket={requestNewMfaTicket}
+    />
+  ) : (
+    <SignInWithEmailAndPasswordForm
+      onSubmit={onSignInWithEmailAndPassword}
+      isLoading={isLoading}
+    />
+  );
+}
+
+export default SignInWithEmailAndPassword;

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

@@ -0,0 +1,60 @@
+import { FormInput } from '@/components/form/FormInput';
+import { ButtonWithLoading as Button } from '@/components/ui/v3/button';
+import { Form } from '@/components/ui/v3/form';
+import useSignInWithEmailAndPasswordForm, {
+  type SignInWithEmailAndPasswordFormValues,
+} from '@/features/auth/SignIn/SignInWithEmailAndPassword/hooks/useSignInWithEmailAndPasswordForm';
+import NextLink from 'next/link';
+
+interface Props {
+  onSubmit: (values: SignInWithEmailAndPasswordFormValues) => void;
+  isLoading: boolean;
+}
+
+function SignInWithEmailAndPassword({ onSubmit, isLoading }: Props) {
+  const form = useSignInWithEmailAndPasswordForm();
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="grid grid-flow-row gap-4 bg-transparent"
+      >
+        <FormInput
+          control={form.control}
+          label="Email"
+          name="email"
+          type="email"
+        />
+        <FormInput
+          control={form.control}
+          label="Password"
+          name="password"
+          type="password"
+        />
+        <NextLink
+          href="/password/new"
+          className="justify-self-start font-semibold"
+        >
+          Forgot password?
+        </NextLink>
+        <Button
+          type="submit"
+          variant="outline"
+          className="w-full !bg-white !text-black disabled:!text-black disabled:!text-opacity-60"
+          disabled={isLoading}
+          loading={isLoading}
+        >
+          Sign In
+        </Button>
+        <p color="secondary" className="text-center">
+          <span className="text-[#A2B3BE]">or </span>
+          <NextLink className="font-semibold" href="/signin">
+            sign in with GitHub
+          </NextLink>
+        </p>
+      </form>
+    </Form>
+  );
+}
+
+export default SignInWithEmailAndPassword;

dashboard/src/features/auth/SignIn/SignInWithEmailAndPassword/hooks/useOnSignInWithEmailAndPasswordHandler.ts

@@ -0,0 +1,65 @@
+import { isNotEmptyValue } from '@/lib/utils';
+import { useNhostClient } from '@/providers/nhost';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { useRouter } from 'next/router';
+import { useRef, useState } from 'react';
+import toast from 'react-hot-toast';
+import type { SignInWithEmailAndPasswordFormValues } from './useSignInWithEmailAndPasswordForm';
+
+interface Props {
+  onNeedsMfa: (mfaTicket: string) => void;
+}
+
+type EmailAndPasswordRef = {
+  email: string;
+  password: string;
+} | null;
+
+function useOnSignInWithEmailAndPasswordHandler({ onNeedsMfa }: Props) {
+  const [isLoading, setIsloading] = useState(false);
+  const nhost = useNhostClient();
+  const router = useRouter();
+  const emailAndPasswordRef = useRef<EmailAndPasswordRef>();
+
+  async function onSignInWithEmailAndPassword({
+    email,
+    password,
+  }: SignInWithEmailAndPasswordFormValues) {
+    try {
+      setIsloading(true);
+      const response = await nhost.auth.signInEmailPassword({
+        email,
+        password,
+      });
+
+      emailAndPasswordRef.current = {
+        email,
+        password,
+      };
+      if (response.body.mfa) {
+        onNeedsMfa(response.body.mfa.ticket);
+      }
+    } 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') {
+          await nhost.auth.sendVerificationEmail({ email });
+          router.push(`/email/verify?email=${encodeURIComponent(email)}`);
+          return;
+        }
+        errorMessage = error.body.message;
+      }
+      toast.error(errorMessage, getToastStyleProps());
+    } finally {
+      setIsloading(false);
+    }
+  }
+
+  return { onSignInWithEmailAndPassword, isLoading, emailAndPasswordRef };
+}
+
+export default useOnSignInWithEmailAndPasswordHandler;

dashboard/src/features/auth/SignIn/SignInWithEmailAndPassword/hooks/useRequestNewMfaTicket.ts

@@ -0,0 +1,29 @@
+import { useNhostClient } from '@/providers/nhost';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import toast from 'react-hot-toast';
+
+function useRequestNewMfaTicket() {
+  const nhost = useNhostClient();
+  async function requestNewMfaTicket(email: string, password: string) {
+    let mfaTicket: string;
+    try {
+      const response = await nhost.auth.signInEmailPassword({
+        email,
+        password,
+      });
+      mfaTicket = response.body?.mfa.ticket;
+    } catch (error) {
+      toast.error(
+        error?.message ||
+          'An error occurred while verifying TOTP. Please try again.',
+        getToastStyleProps(),
+      );
+    }
+
+    return mfaTicket;
+  }
+
+  return requestNewMfaTicket;
+}
+
+export default useRequestNewMfaTicket;

dashboard/src/features/auth/SignIn/SignInWithEmailAndPassword/hooks/useSignInWithEmailAndPasswordForm.ts

@@ -0,0 +1,30 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+const validationSchema = z
+  .object({
+    email: z.string().email({ message: 'Invalid email address' }),
+    password: z.string().min(1, { message: 'Password is required' }),
+  })
+  .required();
+
+export type SignInWithEmailAndPasswordFormValues = z.infer<
+  typeof validationSchema
+>;
+
+function useSignInWithEmailAndPasswordForm() {
+  const form = useForm<SignInWithEmailAndPasswordFormValues>({
+    mode: 'onTouched',
+    reValidateMode: 'onBlur',
+    defaultValues: {
+      email: '',
+      password: '',
+    },
+    resolver: zodResolver(validationSchema),
+  });
+
+  return form;
+}
+
+export default useSignInWithEmailAndPasswordForm;

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

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

dashboard/src/features/auth/SignIn/SignInWithGithub/SignInWithGithub.tsx

@@ -0,0 +1,15 @@
+import { GithubAuthButton } from '@/features/auth/AuthProviders/Github/components/GithubAuthButton';
+import { useHostName } from '@/features/orgs/projects/common/hooks/useHostName';
+
+function SignInWithGithub() {
+  const redirectTo = useHostName();
+  return (
+    <GithubAuthButton
+      redirectTo={redirectTo}
+      buttonText="Continue with GitHub"
+      errorText="An error occurred while trying to sign in using GitHub. Please try again later."
+    />
+  );
+}
+
+export default SignInWithGithub;

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

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

dashboard/src/features/auth/SignUp/SignUpTabs/SignUpTabs.tsx

@@ -0,0 +1,39 @@
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@/components/ui/v3/tabs';
+import { useState } from 'react';
+import { SignUpWithEmailAndPasswordForm } from './SignUpWithEmailAndPassword';
+import { SignUpWithSecurityKeyForm } from './SignUpWithSecurityKey';
+
+function SignUpTabs() {
+  const [tab, setTab] = useState<string>('password');
+  return (
+    <Tabs value={tab} onValueChange={setTab} className="w-full">
+      <TabsList className="w-full">
+        <TabsTrigger value="password" className="w-full">
+          Sign Up with a Password
+        </TabsTrigger>
+        <TabsTrigger value="security-key" className="w-full">
+          Sign Up with a Security key
+        </TabsTrigger>
+      </TabsList>
+      <div className="pt-7">
+        {tab === 'password' && (
+          <TabsContent value="password">
+            <SignUpWithEmailAndPasswordForm />
+          </TabsContent>
+        )}
+        {tab === 'security-key' && (
+          <TabsContent value="security-key">
+            <SignUpWithSecurityKeyForm />
+          </TabsContent>
+        )}
+      </div>
+    </Tabs>
+  );
+}
+
+export default SignUpTabs;

dashboard/src/features/auth/SignUp/SignUpTabs/SignUpWithEmailAndPassword/components/SignUpWithEmailAndPasswordForm.tsx

@@ -0,0 +1,81 @@
+import { FormInput } from '@/components/form/FormInput';
+import { Button } from '@/components/ui/v3/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/v3/form';
+import useOnSignUpWithPasswordHandler from '@/features/auth/SignUp/SignUpTabs/SignUpWithEmailAndPassword/hooks/useOnSignUpWithPasswordHandler';
+import useSignUpWithEmailAndPasswordForm from '@/features/auth/SignUp/SignUpTabs/SignUpWithEmailAndPassword/hooks/useSignUpWithEmailAndPasswordForm';
+import { Turnstile } from '@marsidev/react-turnstile';
+
+function SignUpWithEmailAndPasswordForm() {
+  const form = useSignUpWithEmailAndPasswordForm();
+  const onSignUpWithPassword = useOnSignUpWithPasswordHandler();
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSignUpWithPassword)}
+        className="grid grid-flow-row gap-4 bg-transparent"
+      >
+        <FormInput control={form.control} label="Name" name="displayName" />
+        <FormInput
+          control={form.control}
+          label="Email"
+          name="email"
+          type="email"
+        />
+        <FormInput
+          control={form.control}
+          label="Password"
+          name="password"
+          type="password"
+        />
+        <FormField
+          control={form.control}
+          name="turnstileToken"
+          render={() => (
+            <FormItem>
+              <FormLabel>Verification</FormLabel>
+              <FormControl>
+                <Turnstile
+                  siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY}
+                  options={{ theme: 'dark', size: 'flexible' }}
+                  onSuccess={(token) => {
+                    form.setValue('turnstileToken', token, {
+                      shouldValidate: true,
+                    });
+                  }}
+                  onError={() => {
+                    form.setValue('turnstileToken', '', {
+                      shouldValidate: true,
+                    });
+                  }}
+                  onExpire={() => {
+                    form.setValue('turnstileToken', '', {
+                      shouldValidate: true,
+                    });
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button
+          type="submit"
+          variant="outline"
+          className="w-full !bg-transparent"
+        >
+          Sign Up
+        </Button>
+      </form>
+    </Form>
+  );
+}
+
+export default SignUpWithEmailAndPasswordForm;

dashboard/src/features/auth/SignUp/SignUpTabs/SignUpWithEmailAndPassword/hooks/useOnSignUpWithPasswordHandler.ts

@@ -0,0 +1,51 @@
+import { getAnonId } from '@/lib/segment';
+import { isEmptyValue } from '@/lib/utils';
+import { useNhostClient } from '@/providers/nhost';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { useRouter } from 'next/router';
+import toast from 'react-hot-toast';
+import type { SignUpWithEmailAndPasswordFormValues } from './useSignUpWithEmailAndPasswordForm';
+
+function useOnSignUpWithPasswordHandler() {
+  const nhost = useNhostClient();
+  const router = useRouter();
+
+  async function onSignUpWithPassword({
+    email,
+    password,
+    displayName,
+    turnstileToken,
+  }: SignUpWithEmailAndPasswordFormValues) {
+    try {
+      const response = await nhost.auth.signUpEmailPassword(
+        {
+          email,
+          password,
+          options: {
+            displayName,
+            metadata: { anonId: await getAnonId() },
+          },
+        },
+        {
+          headers: {
+            'x-cf-turnstile-response': turnstileToken,
+          },
+        },
+      );
+
+      if (response.status === 200 && isEmptyValue(response.body)) {
+        router.push(`/email/verify?email=${encodeURIComponent(email)}`);
+      }
+    } catch (error) {
+      toast.error(
+        error.message ||
+          'An error occurred while signing up. Please try again.',
+        getToastStyleProps(),
+      );
+    }
+  }
+
+  return onSignUpWithPassword;
+}
+
+export default useOnSignUpWithPasswordHandler;

dashboard/src/features/auth/SignUp/SignUpTabs/SignUpWithEmailAndPassword/hooks/useSignUpWithEmailAndPasswordForm.ts

@@ -0,0 +1,43 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+const validationSchema = z
+  .object({
+    email: z.string().email({ message: 'Invalid email address' }),
+    password: z.string().min(1, { message: 'Password is required' }),
+    displayName: z
+      .string()
+      .regex(
+        /^[\p{L}\p{N}\p{S} ,.'-]+$/u,
+        'Use only letters, numbers, symbols and basic punctuation',
+      )
+      .min(1, { message: 'Name is required' })
+      .max(32, { message: 'Name must be 32 characters or less' }),
+    turnstileToken: z
+      .string()
+      .min(1, { message: 'Please complete the CAPTCHA' }),
+  })
+  .required();
+
+export type SignUpWithEmailAndPasswordFormValues = z.infer<
+  typeof validationSchema
+>;
+
+function useSignUpWithEmailAndPasswordForm() {
+  const form = useForm<SignUpWithEmailAndPasswordFormValues>({
+    mode: 'onTouched',
+    reValidateMode: 'onBlur',
+    defaultValues: {
+      email: '',
+      password: '',
+      displayName: '',
+      turnstileToken: '',
+    },
+    resolver: zodResolver(validationSchema),
+  });
+
+  return form;
+}
+
+export default useSignUpWithEmailAndPasswordForm;

dashboard/src/features/auth/SignUp/SignUpTabs/SignUpWithEmailAndPassword/index.ts

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