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>

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/.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,41 @@
 # @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

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/upgrade-project/upgrade-project.test.ts

@@ -24,23 +24,20 @@ test.beforeAll(async ({ browser }) => {
 });
 
 test('should create a new project', async () => {
-  await await gotoUrl(
-    page,
-    `/orgs/${getFreeUserStarterOrgSlug()}/projects/new`,
-  );
-  const projectName = faker.lorem.words(3);
+  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(await page.getByText('Creating the project...')).toBeVisible();
-  expect(await page.getByText('Internal info')).toBeVisible();
+  expect(page.getByText('Creating the project...')).toBeVisible();
+  expect(page.getByText('Internal info')).toBeVisible();
 
   await page.waitForSelector('button:has-text("Upgrade project")', {
-    timeout: 120000,
+    timeout: 180000,
   });
 
-  const newProjectSlug = getProjectSlugFromUrl(await page.url());
+  const newProjectSlug = getProjectSlugFromUrl(page.url());
   setNewProjectSlug(newProjectSlug);
   setNewProjectName(projectName);
 });
@@ -50,7 +47,7 @@ test('should upgrade the project', async () => {
     page,
     `/orgs/${getFreeUserStarterOrgSlug()}/projects/${getNewProjectSlug()}`,
   );
-  const upgradeProject = await page.getByText('Upgrade project');
+  const upgradeProject = page.getByText('Upgrade project');
   expect(upgradeProject).toBeVisible();
 
   await upgradeProject.click();
@@ -67,10 +64,10 @@ test('should upgrade the project', async () => {
   await page.waitForSelector('button:has-text("Create organization")', {
     state: 'hidden',
   });
-  const stripeFrame = await page
+  const stripeFrame = page
     .frameLocator('iframe[name="embedded-checkout"]')
     .first();
-  await stripeFrame.getByText('Subscribe to Nhost');
+  stripeFrame.getByText('Subscribe to Nhost');
   await stripeFrame.getByLabel('Email').fill(faker.internet.email());
 
   await stripeFrame
@@ -85,7 +82,7 @@ test('should upgrade the project', async () => {
   await stripeFrame.locator('#billingCountry').scrollIntoViewIfNeeded();
   // Need to comment out for local testing START
   await stripeFrame.getByPlaceholder('Address', { exact: true }).click();
-  await stripeFrame.locator('span:has-text("Enter address manually")');
+  stripeFrame.locator('span:has-text("Enter address manually")');
   await stripeFrame.getByText('Enter address manually').click();
   await stripeFrame
     .getByPlaceholder('Address line 1', { exact: true })
@@ -94,6 +91,7 @@ test('should upgrade the project', async () => {
     .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')
@@ -110,12 +108,12 @@ test('should upgrade the project', async () => {
     'div:has-text("Project has been upgraded successfully!")',
   );
 
-  await page.getByRole('button', { name: 'Create project' });
+  page.getByRole('button', { name: 'Create project' });
 
   await page.waitForSelector(`div:has-text("${newOrgName}")`);
   await page.waitForSelector(`p:has-text("${getNewProjectName()}")`);
 
-  setNewOrgSlug(getOrgSlugFromUrl(await page.url()));
+  setNewOrgSlug(getOrgSlugFromUrl(page.url()));
 });
 
 test('should delete the new organization', async () => {
@@ -126,12 +124,12 @@ test('should delete the new organization', async () => {
   await page.getByRole('button', { name: 'Delete' }).click();
 
   await page.waitForSelector('h2:has-text("Delete Organization")');
-  expect(await page.getByTestId('deleteOrgButton')).toBeDisabled();
+  expect(page.getByTestId('deleteOrgButton')).toBeDisabled();
 
   await page.getByLabel("I'm sure I want to delete this Organization").click();
-  expect(await page.getByTestId('deleteOrgButton')).toBeDisabled();
+  expect(page.getByTestId('deleteOrgButton')).toBeDisabled();
   await page.getByLabel('I understand this action cannot be undone').click();
-  expect(await page.getByTestId('deleteOrgButton')).not.toBeDisabled();
+  expect(page.getByTestId('deleteOrgButton')).not.toBeDisabled();
 
   await page.getByTestId('deleteOrgButton').click();
 

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "2.30.0",
+  "version": "2.33.0",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -39,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",
@@ -62,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",
@@ -87,6 +88,7 @@
     "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.26",
@@ -107,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",

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/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/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';

dashboard/src/features/auth/SignUp/SignUpTabs/SignUpWithSecurityKey/components/SignUpWithSecurityKeyForm.tsx

@@ -0,0 +1,75 @@
+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 useSignupWithSecurityKeyForm from '@/features/auth/SignUp/SignUpTabs/SignUpWithSecurityKey/hooks/useSignupWithSecurityKeyForm';
+import useSignupWithSecurityKeyHandler from '@/features/auth/SignUp/SignUpTabs/SignUpWithSecurityKey/hooks/useSignupWithSecurityKeyHandler';
+import { Turnstile } from '@marsidev/react-turnstile';
+
+function SignUpWithSecurityKeyForm() {
+  const form = useSignupWithSecurityKeyForm();
+  const onSignUpWithSecurityKey = useSignupWithSecurityKeyHandler();
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSignUpWithSecurityKey)}
+        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"
+        />
+        <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 SignUpWithSecurityKeyForm;

dashboard/src/features/auth/SignUp/SignUpTabs/SignUpWithSecurityKey/hooks/useSignupWithSecurityKeyForm.ts

@@ -0,0 +1,42 @@
+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' })
+      .min(1, { message: 'Email 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 SignUpWithSecurityKeyFormValues = z.infer<typeof validationSchema>;
+
+function useSignUpWithSecurityKey() {
+  const form = useForm<SignUpWithSecurityKeyFormValues>({
+    mode: 'onTouched',
+    reValidateMode: 'onBlur',
+    defaultValues: {
+      email: '',
+      displayName: '',
+      turnstileToken: '',
+    },
+    resolver: zodResolver(validationSchema),
+  });
+
+  return form;
+}
+
+export default useSignUpWithSecurityKey;

dashboard/src/features/auth/SignUp/SignUpTabs/SignUpWithSecurityKey/hooks/useSignupWithSecurityKeyHandler.ts

@@ -0,0 +1,61 @@
+import { getAnonId } from '@/lib/segment';
+import { isEmptyValue } from '@/lib/utils';
+import { useNhostClient } from '@/providers/nhost';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { startRegistration } from '@simplewebauthn/browser';
+import { useRouter } from 'next/router';
+import toast from 'react-hot-toast';
+import type { SignUpWithSecurityKeyFormValues } from './useSignupWithSecurityKeyForm';
+
+function useOnSignUpWithSecurityKeyHandler() {
+  const router = useRouter();
+  const nhost = useNhostClient();
+
+  async function onSignUpWithSecurityKey({
+    email,
+    displayName,
+    turnstileToken,
+  }: SignUpWithSecurityKeyFormValues) {
+    const metadata = { anonId: await getAnonId() };
+    try {
+      const webAuthnResponse = await nhost.auth.signUpWebauthn(
+        {
+          email,
+          options: {
+            displayName,
+            metadata,
+          },
+        },
+        {
+          headers: {
+            'x-cf-turnstile-response': turnstileToken,
+          },
+        },
+      );
+      const { body: webAuthnOptions } = webAuthnResponse;
+
+      const credential = await startRegistration(webAuthnOptions);
+
+      const verifyResponse = await nhost.auth.verifySignUpWebauthn({
+        credential,
+        options: {
+          displayName,
+          metadata,
+        },
+      });
+      if (verifyResponse.status === 200 && isEmptyValue(verifyResponse.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 onSignUpWithSecurityKey;
+}
+
+export default useOnSignUpWithSecurityKeyHandler;

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { GithubAuthButton } from '@/features/auth/AuthProviders/Github/components/GithubAuthButton';
+
+function SignUpWithGithub() {
+  return (
+    <GithubAuthButton
+      withAnonId
+      buttonText="Sign Up with GitHub"
+      errorText="An error occurred while trying to sign up using GitHub. Please try again."
+    />
+  );
+}
+
+export default SignUpWithGithub;

dashboard/src/features/auth/SignUp/SignUpWithGithub/index.ts

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

dashboard/src/features/orgs/components/CreateOrgFormDialog/CreateOrgFormDialog.tsx

@@ -27,6 +27,7 @@ import { StripeEmbeddedForm } from '@/features/orgs/components/StripeEmbeddedFor
 import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
 import { planDescriptions } from '@/features/orgs/projects/common/utils/planDescriptions';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
+import { useUserData } from '@/hooks/useUserData';
 import { cn } from '@/lib/utils';
 import {
   useCreateOrganizationRequestMutation,
@@ -34,7 +35,6 @@ import {
   type PrefetchNewAppPlansFragment,
 } from '@/utils/__generated__/graphql';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useUserData } from '@nhost/nextjs';
 import { DialogDescription } from '@radix-ui/react-dialog';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';
@@ -197,7 +197,7 @@ export default function CreateOrgDialog({
   const isPlatform = useIsPlatform();
   const [open, setOpen] = useState(false);
   const { data, loading, error } = usePrefetchNewAppQuery({
-    skip: !user,
+    skip: !user || !isPlatform,
   });
   const [createOrganizationRequest] = useCreateOrganizationRequestMutation();
   const [stripeClientSecret, setStripeClientSecret] = useState('');

dashboard/src/features/orgs/components/common/TransferOrUpgradeProjectDialog/TransferProjectForm.tsx

@@ -18,13 +18,13 @@ import {
 import { useOrgs, type Org } from '@/features/orgs/projects/hooks/useOrgs';
 import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
+import { useUserData } from '@/hooks/useUserData';
 import { cn, isNotEmptyValue } from '@/lib/utils';
 import {
   Organization_Members_Role_Enum,
   useBillingTransferAppMutation,
 } from '@/utils/__generated__/graphql';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useUserId } from '@nhost/nextjs';
 import { Plus } from 'lucide-react';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
@@ -53,7 +53,7 @@ function TransferProjectForm({
   const { push } = useRouter();
   const { orgs, currentOrg } = useOrgs();
   const { project } = useProject();
-  const currentUserId = useUserId();
+  const user = useUserData();
   const [transferProject] = useBillingTransferAppMutation();
 
   const form = useForm<z.infer<typeof transferProjectFormSchema>>({
@@ -133,7 +133,7 @@ function TransferProjectForm({
                       disabled={
                         org.plan.isFree || // disable the personal org
                         org.id === currentOrg.id || // disable the current org as it can't be a destination org
-                        !isUserAdminOfOrg(org, currentUserId) // disable orgs that the current user is not admin of
+                        !isUserAdminOfOrg(org, user?.id) // disable orgs that the current user is not admin of
                       }
                     >
                       {org.name}

dashboard/src/features/orgs/components/general/components/Soc2Download/Soc2Download.tsx

@@ -1,13 +1,14 @@
 import { Button } from '@/components/ui/v3/button';
 import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
+import { useNhostClient } from '@/providers/nhost';
 import { Organization_Status_Enum } from '@/utils/__generated__/graphql';
-import nhost from '@/utils/nhost/nhost';
 import { Download } from 'lucide-react';
 import { useState } from 'react';
 
 export default function Soc2Download() {
   const { org } = useCurrentOrg();
+  const nhost = useNhostClient();
   const [downloading, setDownloading] = useState(false);
 
   const showSoc2Download =
@@ -28,26 +29,18 @@ export default function Soc2Download() {
         if (!fileId) {
           throw new Error('SOC2 report file ID not configured');
         }
+        try {
+          const response = await nhost.storage.getFile(fileId);
+          const url = URL.createObjectURL(response.body);
+          const link = document.createElement('a');
+          link.href = url;
+          link.download = 'Nhost-SOC2-Report.pdf';
+          link.click();
 
-        const { file, error } = await nhost.storage.download({
-          fileId,
-        });
-
-        if (error) {
+          URL.revokeObjectURL(url);
+        } catch (error) {
           throw new Error(error.message || 'Failed to download SOC2 report');
         }
-
-        if (!file) {
-          throw new Error('No file data available');
-        }
-
-        const url = URL.createObjectURL(file);
-        const link = document.createElement('a');
-        link.href = url;
-        link.download = 'Nhost-SOC2-Report.pdf';
-        link.click();
-
-        URL.revokeObjectURL(url);
       },
       {
         loadingMessage: 'Downloading SOC2 report...',

dashboard/src/features/orgs/components/members/components/AnnouncementsTray/AnnouncementsTray.tsx

@@ -14,18 +14,18 @@ import {
   SheetTitle,
   SheetTrigger,
 } from '@/components/ui/v3/sheet';
+import { useAuth } from '@/providers/Auth';
 import {
   useDeleteAnnouncementReadMutation,
   useGetAnnouncementsQuery,
   useInsertAnnouncementReadMutation,
 } from '@/utils/__generated__/graphql';
-import { useAuthenticationStatus } from '@nhost/nextjs';
 import { formatDistance } from 'date-fns';
 import { EllipsisVertical, Megaphone } from 'lucide-react';
 import Link from 'next/link';
 
 export default function AnnouncementsTray() {
-  const { isAuthenticated } = useAuthenticationStatus();
+  const { isAuthenticated } = useAuth();
 
   const {
     data,

dashboard/src/features/orgs/components/members/components/NotificationsTray/NotificationsTray.tsx

@@ -16,8 +16,10 @@ import {
   SheetTrigger,
 } from '@/components/ui/v3/sheet';
 import { StripeEmbeddedForm } from '@/features/orgs/components/StripeEmbeddedForm';
+import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
 import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
+import { useUserData } from '@/hooks/useUserData';
 import { isEmptyValue } from '@/lib/utils';
 import {
   CheckoutStatus,
@@ -29,7 +31,6 @@ import {
   type OrganizationMemberInvitesQuery,
   type PostOrganizationRequestResponse,
 } from '@/utils/__generated__/graphql';
-import { useUserData } from '@nhost/nextjs';
 import { formatDistance } from 'date-fns';
 import { Bell } from 'lucide-react';
 import { useRouter } from 'next/router';
@@ -43,6 +44,7 @@ export default function NotificationsTray() {
   const { session_id } = query;
   const { refetch: refetchOrgs } = useOrgs();
   const [open, setOpen] = useState(false);
+  const isPlatForm = useIsPlatform();
 
   const [stripeFormDialogOpen, setStripeFormDialogOpen] = useState(false);
 
@@ -61,21 +63,21 @@ export default function NotificationsTray() {
   const [postOrganizationRequest] = usePostOrganizationRequestMutation();
 
   useEffect(() => {
-    if (userData) {
+    if (userData?.id) {
       getInvites({
         variables: {
-          userId: userData.id,
+          userId: userData?.id,
         },
       });
     }
-  }, [asPath, userData, getInvites]);
+  }, [asPath, userData?.id, getInvites]);
 
   useEffect(() => {
     const checkForPendingOrgRequests = async () => {
       const { data: { organizationNewRequests = [] } = {} } =
         await getOrganizationNewRequests({
           variables: {
-            userID: userData.id,
+            userID: userData?.id,
           },
         });
       if (organizationNewRequests.length > 0) {
@@ -111,6 +113,7 @@ export default function NotificationsTray() {
     };
 
     if (
+      isPlatForm &&
       userData &&
       !['/', '/orgs/verify'].includes(route) &&
       isRouterReady &&
@@ -125,6 +128,7 @@ export default function NotificationsTray() {
     getOrganizationNewRequests,
     postOrganizationRequest,
     session_id,
+    isPlatForm,
   ]);
 
   const [acceptInvite] = useOrganizationMemberInviteAcceptMutation();

dashboard/src/features/orgs/components/members/components/OrgMember/OrgMember.tsx

@@ -48,6 +48,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/v3/select';
+import { useUserData } from '@/hooks/useUserData';
 import {
   Organization_Members_Role_Enum,
   useDeleteOrganizationMemberMutation,
@@ -55,7 +56,6 @@ import {
   type GetOrganizationQuery,
 } from '@/utils/__generated__/graphql';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useUserData } from '@nhost/nextjs';
 import { Ellipsis } from 'lucide-react';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
@@ -76,7 +76,7 @@ const updateMemberRoleFormSchema = z.object({
 
 export default function OrgMember({ member, isAdmin }: OrgMemberProps) {
   const { maintenanceActive } = useUI();
-  const { id } = useUserData();
+  const user = useUserData();
   const { push } = useRouter();
   const { refetch: refetchOrgs } = useOrgs();
   const { org: { plan: { isFree } = {} } = {}, refetch: refetchCurrentOrg } =
@@ -87,7 +87,7 @@ export default function OrgMember({ member, isAdmin }: OrgMemberProps) {
   const [updateMemberRoleDialogOpen, setUpdateMemberRoleDialogOpen] =
     useState(false);
 
-  const isSelf = id === member.user.id;
+  const isSelf = user?.id === member.user.id;
 
   const [deleteMember] = useDeleteOrganizationMemberMutation({
     variables: {
@@ -98,7 +98,7 @@ export default function OrgMember({ member, isAdmin }: OrgMemberProps) {
   const handleRemoveMemberFromOrg = async () => {
     await execPromiseWithErrorToast(
       async () => {
-        const isRemovingSelf = id === member.user.id;
+        const isRemovingSelf = user?.id === member.user.id;
         await deleteMember();
         // TODO see if it makes sense to unify both of these
         await refetchCurrentOrg();
@@ -191,7 +191,7 @@ export default function OrgMember({ member, isAdmin }: OrgMemberProps) {
           <DropdownMenu open={dropDownOpen} onOpenChange={setDropDownOpen}>
             <DropdownMenuTrigger
               disabled={
-                (!isAdmin && id !== member.user.id) ||
+                (!isAdmin && user?.id !== member.user.id) ||
                 isFree ||
                 maintenanceActive
               }

dashboard/src/features/orgs/components/projects/projects-grid/projects-grid.tsx

@@ -50,7 +50,7 @@ function ProjectCard({ project }: { project: Project }) {
 }
 
 export default function ProjectsGrid() {
-  const { org } = useCurrentOrg();
+  const { org, loading: orgLoading } = useCurrentOrg();
 
   const { data, loading, error } = useGetProjectsQuery({
     variables: {
@@ -76,7 +76,7 @@ export default function ProjectsGrid() {
     throw error;
   }
 
-  if (loading) {
+  if (loading || orgLoading) {
     return <LoadingScreen />;
   }
 

dashboard/src/features/orgs/hooks/useFinishOrgCreation/useFinishOrgCreation.ts

@@ -1,10 +1,10 @@
 import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
+import { useAuth } from '@/providers/Auth';
 import {
   CheckoutStatus,
   type PostOrganizationRequestMutation,
   usePostOrganizationRequestMutation,
 } from '@/utils/__generated__/graphql';
-import { useAuthenticationStatus } from '@nhost/nextjs';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
@@ -24,7 +24,7 @@ function useFinishOrgCreation({
   const router = useRouter();
   const { session_id } = router.query;
 
-  const { isAuthenticated } = useAuthenticationStatus();
+  const { isAuthenticated } = useAuth();
   const [loading, setLoading] = useState(false);
   const [postOrganizationRequest] = usePostOrganizationRequestMutation();
   const [status, setPostOrganizationRequestStatus] =

dashboard/src/features/orgs/hooks/useIsOrgAdmin/useIsOrgAdmin.ts

@@ -1,6 +1,6 @@
 import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
+import { useUserData } from '@/hooks/useUserData';
 import { Organization_Members_Role_Enum } from '@/utils/__generated__/graphql';
-import { useUserData } from '@nhost/nextjs';
 
 export default function useIsOrgAdmin() {
   const { org: { members = [] } = {} } = useCurrentOrg();