Next.js 16, React 19.2, Identities page, Invitations identities step, PNPM Catalogs (#381)

* Upgraded to Next.js 16 * Refactored code to comply with React 19.2 ESLint rules * Refactored some useEffect usages with the new useEffectEvent * Added Identities page and added second step to set up an identity after accepting an invitation * Updated all dependencies * Introduced PNPM catalogs for some frequently updated dependencies * Bugs fixing and improvements
2025-10-22 11:47:47 +09:00
parent ea0c1dde80
commit 2c0d0bf7a1
98 changed files with 4812 additions and 4394 deletions
--- a/.prettierignore
+++ b/.prettierignore
@@ -2,3 +2,7 @@ database.types.ts
 playwright-report
 *.hbs
 *.md
+dist
+build
+.next
+next-env.d.ts
--- a/apps/dev-tool/app/lib/connectivity-service.ts
+++ b/apps/dev-tool/app/lib/connectivity-service.ts
@@ -19,10 +19,9 @@ class ConnectivityService {
      };
    }

-    const anonKey = await getVariable(
-      'NEXT_PUBLIC_SUPABASE_ANON_KEY',
-      this.mode,
-    );
+    const anonKey =
+      (await getVariable('NEXT_PUBLIC_SUPABASE_ANON_KEY', this.mode)) ||
+      (await getVariable('NEXT_PUBLIC_SUPABASE_PUBLIC_KEY', this.mode));

    if (!anonKey) {
      return {
@@ -71,10 +70,9 @@ class ConnectivityService {

    const endpoint = `${url}/rest/v1/accounts`;

-    const apikey = await getVariable(
-      'NEXT_PUBLIC_SUPABASE_ANON_KEY',
-      this.mode,
-    );
+    const apikey =
+      (await getVariable('NEXT_PUBLIC_SUPABASE_ANON_KEY', this.mode)) ||
+      (await getVariable('NEXT_PUBLIC_SUPABASE_PUBLIC_KEY', this.mode));

    if (!apikey) {
      return {
@@ -83,7 +81,9 @@ class ConnectivityService {
      };
    }

-    const adminKey = await getVariable('SUPABASE_SERVICE_ROLE_KEY', this.mode);
+    const adminKey =
+      (await getVariable('SUPABASE_SERVICE_ROLE_KEY', this.mode)) ||
+      (await getVariable('SUPABASE_SECRET_KEY', this.mode));

    if (!adminKey) {
      return {
--- a/apps/dev-tool/app/translations/lib/translations-loader.ts
+++ b/apps/dev-tool/app/translations/lib/translations-loader.ts
@@ -13,7 +13,12 @@ export type Translations = {

 export async function loadTranslations() {
  const localesPath = join(process.cwd(), '../web/public/locales');
-  const locales = readdirSync(localesPath);
+  const localesDirents = readdirSync(localesPath, { withFileTypes: true });
+
+  const locales = localesDirents
+    .filter((dirent) => dirent.isDirectory())
+    .map((dirent) => dirent.name);
+
  const translations: Translations = {};

  for (const locale of locales) {
--- a/apps/dev-tool/next.config.ts
+++ b/apps/dev-tool/next.config.ts
@@ -3,9 +3,7 @@ import type { NextConfig } from 'next';
 const nextConfig: NextConfig = {
  reactStrictMode: true,
  transpilePackages: ['@kit/ui', '@kit/shared'],
-  experimental: {
  reactCompiler: true,
-  },
  devIndicators: {
    position: 'bottom-right',
  },
--- a/apps/dev-tool/package.json
+++ b/apps/dev-tool/package.json
@@ -4,20 +4,20 @@
  "private": true,
  "scripts": {
    "clean": "git clean -xdf .next .turbo node_modules",
-    "dev": "next dev --turbo --port=3010 | pino-pretty -c",
-    "format": "prettier --check --write \"**/*.{js,cjs,mjs,ts,tsx,md,json}\""
+    "dev": "next dev --port=3010 | pino-pretty -c",
+    "format": "prettier --check --write \"**/*.{ts,tsx}\" --ignore-path=\"../../.prettierignore\""
  },
  "dependencies": {
-    "@ai-sdk/openai": "^2.0.42",
-    "@faker-js/faker": "^10.0.0",
+    "@ai-sdk/openai": "^2.0.53",
+    "@faker-js/faker": "^10.1.0",
    "@hookform/resolvers": "^5.2.2",
-    "@tanstack/react-query": "5.90.2",
-    "ai": "5.0.59",
-    "lucide-react": "^0.544.0",
-    "next": "15.5.5",
-    "nodemailer": "^7.0.6",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
+    "@tanstack/react-query": "5.90.5",
+    "ai": "5.0.76",
+    "lucide-react": "^0.546.0",
+    "next": "16.0.0",
+    "nodemailer": "^7.0.9",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
    "rxjs": "^7.8.2"
  },
  "devDependencies": {
@@ -29,16 +29,16 @@
    "@kit/shared": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
-    "@tailwindcss/postcss": "^4.1.14",
-    "@types/node": "^24.6.2",
+    "@tailwindcss/postcss": "^4.1.15",
+    "@types/node": "catalog:",
    "@types/nodemailer": "7.0.2",
-    "@types/react": "19.1.16",
-    "@types/react-dom": "19.1.9",
-    "babel-plugin-react-compiler": "19.1.0-rc.3",
-    "pino-pretty": "13.0.0",
-    "react-hook-form": "^7.63.0",
+    "@types/react": "catalog:",
+    "@types/react-dom": "19.2.2",
+    "babel-plugin-react-compiler": "1.0.0",
+    "pino-pretty": "13.1.2",
+    "react-hook-form": "^7.65.0",
    "recharts": "2.15.3",
-    "tailwindcss": "4.1.14",
+    "tailwindcss": "4.1.15",
    "tailwindcss-animate": "^1.0.7",
    "typescript": "^5.9.3",
    "zod": "^3.25.74"
--- a/apps/e2e/package.json
+++ b/apps/e2e/package.json
@@ -11,9 +11,9 @@
  },
  "author": "Makerkit",
  "devDependencies": {
-    "@playwright/test": "^1.55.1",
-    "@supabase/supabase-js": "2.58.0",
-    "@types/node": "^24.6.2",
+    "@playwright/test": "^1.56.1",
+    "@supabase/supabase-js": "2.76.1",
+    "@types/node": "catalog:",
    "dotenv": "17.2.3",
    "node-html-parser": "^7.0.1",
    "totp-generator": "^2.0.0"
--- a/apps/e2e/tests/admin/admin.spec.ts
+++ b/apps/e2e/tests/admin/admin.spec.ts
@@ -103,9 +103,6 @@ test.describe('Admin', () => {
        ),
      ]);

-      // TODO: remove when https://github.com/makerkit/next-supabase-saas-kit-turbo/issues/356 is solved
-      await page.reload();
-
      await expect(page.getByText('Banned').first()).toBeVisible();

      await page.context().clearCookies();
@@ -154,9 +151,6 @@ test.describe('Admin', () => {

      await page.waitForTimeout(250);

-      // TODO: remove when https://github.com/makerkit/next-supabase-saas-kit-turbo/issues/356 is solved
-      await page.reload();
-
      // Verify ban badge is removed
      await expect(page.getByText('Banned')).not.toBeVisible();

--- a/apps/e2e/tests/authentication/password-reset.spec.ts
+++ b/apps/e2e/tests/authentication/password-reset.spec.ts
@@ -29,22 +29,15 @@ test.describe('Password Reset Flow', () => {
        subject: 'Reset your password',
      });

-      await page.waitForURL('/update-password');
+      await page.waitForURL(new RegExp('/update-password?.*'));

      await auth.updatePassword(newPassword);

-      await page
-        .locator('a', {
-          hasText: 'Back to Home Page',
-        })
-        .click();
-
      await page.waitForURL('/home');
    }).toPass();

    await page.context().clearCookies();
-
-    await page.waitForURL('/');
+    await page.reload();
    await page.goto('/auth/sign-in');

    await auth.loginAsUser({
--- a/apps/e2e/tests/invitations/invitations.po.ts
+++ b/apps/e2e/tests/invitations/invitations.po.ts
@@ -115,19 +115,37 @@ export class InvitationsPageObject {
  async acceptInvitation() {
    console.log('Accepting invitation...');

-    await Promise.all([
-      this.page
+    const click = this.page
      .locator('[data-test="join-team-form"] button[type="submit"]')
-        .click(),
-      this.page.waitForResponse((response) => {
+      .click();
+
+    const response = this.page.waitForResponse((response) => {
      return (
        response.url().includes('/join') &&
        response.request().method() === 'POST'
      );
-      }),
-    ]);
+    });

-    console.log('Invitation accepted');
+    await Promise.all([click, response]);
+
+    // wait for animation to complete
+    await this.page.waitForTimeout(500);
+
+    // skip authentication setup
+    const skipIdentitiesButton = this.page.locator(
+      '[data-test="skip-identities-button"]',
+    );
+
+    if (
+      await skipIdentitiesButton.isVisible({
+        timeout: 1000,
+      })
+    ) {
+      await skipIdentitiesButton.click();
+    }
+
+    // wait for redirect to account home
+    await this.page.waitForURL(new RegExp('/home/[a-z0-9-]+'));
  }

  private getInviteForm() {
--- a/apps/web/app/(marketing)/_components/site-header-account-section.tsx
+++ b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
@@ -21,10 +21,12 @@ const ModeToggle = dynamic(
  { ssr: false },
 );

-const MobileModeToggle = dynamic(() =>
+const MobileModeToggle = dynamic(
+  () =>
    import('@kit/ui/mobile-mode-toggle').then((mod) => ({
      default: mod.MobileModeToggle,
    })),
+  { ssr: false },
 );

 const paths = {
--- a/apps/web/app/(marketing)/docs/_components/docs-navigation.tsx
+++ b/apps/web/app/(marketing)/docs/_components/docs-navigation.tsx
@@ -29,27 +29,60 @@ function Node({
  const url = `${prefix}/${node.slug}`;
  const label = node.label ? node.label : node.title;

-  const Container = (props: React.PropsWithChildren) => {
+  return (
+    <NodeContainer node={node} prefix={prefix}>
+      <NodeTrigger node={node} label={label} url={url} />
+
+      <NodeContentContainer node={node}>
+        <Tree pages={node.children ?? []} level={level + 1} prefix={prefix} />
+      </NodeContentContainer>
+    </NodeContainer>
+  );
+}
+
+function NodeContentContainer({
+  node,
+  children,
+}: {
+  node: Cms.ContentItem;
+  children: React.ReactNode;
+}) {
+  if (node.collapsible) {
+    return <CollapsibleContent>{children}</CollapsibleContent>;
+  }
+
+  return children;
+}
+
+function NodeContainer({
+  node,
+  prefix,
+  children,
+}: {
+  node: Cms.ContentItem;
+  prefix: string;
+  children: React.ReactNode;
+}) {
  if (node.collapsible) {
    return (
      <DocsNavigationCollapsible node={node} prefix={prefix}>
-          {props.children}
+        {children}
      </DocsNavigationCollapsible>
    );
  }

-    return props.children;
-  };
-
-  const ContentContainer = (props: React.PropsWithChildren) => {
-    if (node.collapsible) {
-      return <CollapsibleContent>{props.children}</CollapsibleContent>;
+  return children;
 }

-    return props.children;
-  };
-
-  const Trigger = () => {
+function NodeTrigger({
+  node,
+  label,
+  url,
+}: {
+  node: Cms.ContentItem;
+  label: string;
+  url: string;
+}) {
  if (node.collapsible) {
    return (
      <CollapsibleTrigger asChild>
@@ -64,17 +97,6 @@ function Node({
  }

  return <DocsNavLink label={label} url={url} />;
-  };
-
-  return (
-    <Container>
-      <Trigger />
-
-      <ContentContainer>
-        <Tree pages={node.children ?? []} level={level + 1} prefix={prefix} />
-      </ContentContainer>
-    </Container>
-  );
 }

 function Tree({
--- a/apps/web/app/(marketing)/docs/_components/floating-docs-navigation.tsx
+++ b/apps/web/app/(marketing)/docs/_components/floating-docs-navigation.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useEffectEvent, useMemo, useState } from 'react';

 import { usePathname } from 'next/navigation';

@@ -21,27 +21,26 @@ export function FloatingDocumentationNavigation(

  const [isVisible, setIsVisible] = useState(false);

-  const enableScrolling = (element: HTMLElement) =>
-    (element.style.overflowY = '');
+  const enableScrolling = useEffectEvent(
+    () => body && (body.style.overflowY = ''),
+  );

-  const disableScrolling = (element: HTMLElement) =>
-    (element.style.overflowY = 'hidden');
+  const disableScrolling = useEffectEvent(
+    () => body && (body.style.overflowY = 'hidden'),
+  );

  // enable/disable body scrolling when the docs are toggled
  useEffect(() => {
-    if (!body) {
-      return;
-    }
-
    if (isVisible) {
-      disableScrolling(body);
+      disableScrolling();
    } else {
-      enableScrolling(body);
+      enableScrolling();
    }
-  }, [isVisible, body]);
+  }, [isVisible]);

  // hide docs when navigating to another page
  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
    setIsVisible(false);
  }, [activePath]);

--- a/apps/web/app/auth/sign-in/page.tsx
+++ b/apps/web/app/auth/sign-in/page.tsx
@@ -12,7 +12,6 @@ import { withI18n } from '~/lib/i18n/with-i18n';

 interface SignInPageProps {
  searchParams: Promise<{
-    invite_token?: string;
    next?: string;
  }>;
 }
--- a/apps/web/app/global-error.tsx
+++ b/apps/web/app/global-error.tsx
@@ -26,14 +26,14 @@ const GlobalErrorPage = ({
    <html lang="en">
      <body>
        <RootProviders>
-          <GlobalErrorPageContent reset={reset} />
+          <GlobalErrorContent reset={reset} />
        </RootProviders>
      </body>
    </html>
  );
 };

-function GlobalErrorPageContent({ reset }: { reset: () => void }) {
+function GlobalErrorContent({ reset }: { reset: () => void }) {
  const user = useUser();

  return (
--- a/apps/web/app/home/(user)/settings/page.tsx
+++ b/apps/web/app/home/(user)/settings/page.tsx
@@ -19,10 +19,10 @@ const features = {
 const providers = authConfig.providers.oAuth;

 const callbackPath = pathsConfig.auth.callback;
-const accountHomePath = pathsConfig.app.accountHome;
+const accountSettingsPath = pathsConfig.app.accountSettings;

 const paths = {
-  callback: callbackPath + `?next=${accountHomePath}`,
+  callback: callbackPath + `?next=${accountSettingsPath}`,
 };

 export const generateMetadata = async () => {
--- a/apps/web/app/home/[account]/_components/team-account-navigation-menu.tsx
+++ b/apps/web/app/home/[account]/_components/team-account-navigation-menu.tsx
@@ -64,7 +64,6 @@ export function TeamAccountNavigationMenu(props: {
        <div>
          <ProfileAccountDropdownContainer
            user={user}
-            account={account}
            showProfileName={false}
          />
        </div>
--- a/apps/web/app/home/[account]/billing/page.tsx
+++ b/apps/web/app/home/[account]/billing/page.tsx
@@ -61,30 +61,7 @@ async function TeamAccountBillingPage({ params }: TeamAccountBillingPageProps) {
  const canManageBilling =
    workspace.account.permissions.includes('billing.manage');

-  const Checkout = () => {
-    if (!canManageBilling) {
-      return <CannotManageBillingAlert />;
-    }
-
-    return (
-      <TeamAccountCheckoutForm customerId={customerId} accountId={accountId} />
-    );
-  };
-
-  const BillingPortal = () => {
-    if (!canManageBilling || !customerId) {
-      return null;
-    }
-
-    return (
-      <form action={createBillingPortalSession}>
-        <input type="hidden" name={'accountId'} value={accountId} />
-        <input type="hidden" name={'slug'} value={account} />
-
-        <BillingPortalCard />
-      </form>
-    );
-  };
+  const shouldShowBillingPortal = canManageBilling && customerId;

  return (
    <>
@@ -97,7 +74,15 @@ async function TeamAccountBillingPage({ params }: TeamAccountBillingPageProps) {
      <PageBody>
        <div className={cn(`flex max-w-2xl flex-col space-y-4`)}>
          <If condition={!hasBillingData}>
-            <Checkout />
+            <If
+              condition={canManageBilling}
+              fallback={<CannotManageBillingAlert />}
+            >
+              <TeamAccountCheckoutForm
+                customerId={customerId}
+                accountId={accountId}
+              />
+            </If>
          </If>

          <If condition={subscription}>
@@ -124,7 +109,9 @@ async function TeamAccountBillingPage({ params }: TeamAccountBillingPageProps) {
            }}
          </If>

-          <BillingPortal />
+          {shouldShowBillingPortal ? (
+            <BillingPortalForm accountId={accountId} account={account} />
+          ) : null}
        </div>
      </PageBody>
    </>
@@ -148,3 +135,20 @@ function CannotManageBillingAlert() {
    </Alert>
  );
 }
+
+function BillingPortalForm({
+  accountId,
+  account,
+}: {
+  accountId: string;
+  account: string;
+}) {
+  return (
+    <form action={createBillingPortalSession}>
+      <input type="hidden" name={'accountId'} value={accountId} />
+      <input type="hidden" name={'slug'} value={account} />
+
+      <BillingPortalCard />
+    </form>
+  );
+}
--- a/apps/web/app/identities/page.tsx
+++ b/apps/web/app/identities/page.tsx
@@ -0,0 +1,152 @@
+import { Metadata } from 'next';
+
+import Link from 'next/link';
+import { redirect } from 'next/navigation';
+
+import type { Provider } from '@supabase/supabase-js';
+
+import { LinkAccountsList } from '@kit/accounts/personal-account-settings';
+import { AuthLayoutShell } from '@kit/auth/shared';
+import { requireUser } from '@kit/supabase/require-user';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import { Button } from '@kit/ui/button';
+import { Heading } from '@kit/ui/heading';
+import { Trans } from '@kit/ui/trans';
+
+import { AppLogo } from '~/components/app-logo';
+import authConfig from '~/config/auth.config';
+import pathsConfig from '~/config/paths.config';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+export const meta = async (): Promise<Metadata> => {
+  const i18n = await createI18nServerInstance();
+
+  return {
+    title: i18n.t('auth:setupAccount'),
+  };
+};
+
+type IdentitiesPageProps = {
+  searchParams: Promise<{ next?: string }>;
+};
+
+/**
+ * @name IdentitiesPage
+ * @description Displays linked accounts and available authentication methods.
+ */
+async function IdentitiesPage(props: IdentitiesPageProps) {
+  const {
+    nextPath,
+    showPasswordOption,
+    showEmailOption,
+    oAuthProviders,
+    enableIdentityLinking,
+  } = await fetchData(props);
+
+  return (
+    <AuthLayoutShell
+      Logo={AppLogo}
+      contentClassName="max-w-md overflow-y-hidden"
+    >
+      <div
+        className={
+          'flex max-h-[70vh] w-full flex-col items-center space-y-6 overflow-y-auto'
+        }
+      >
+        <div className={'flex flex-col items-center gap-1'}>
+          <Heading level={4} className="text-center">
+            <Trans i18nKey={'auth:linkAccountToSignIn'} />
+          </Heading>
+
+          <Heading
+            level={6}
+            className={'text-muted-foreground text-center text-sm'}
+          >
+            <Trans i18nKey={'auth:linkAccountToSignInDescription'} />
+          </Heading>
+        </div>
+
+        <IdentitiesStep
+          nextPath={nextPath}
+          showPasswordOption={showPasswordOption}
+          showEmailOption={showEmailOption}
+          oAuthProviders={oAuthProviders}
+          enableIdentityLinking={enableIdentityLinking}
+        />
+      </div>
+    </AuthLayoutShell>
+  );
+}
+
+export default withI18n(IdentitiesPage);
+
+/**
+ * @name IdentitiesStep
+ * @description Displays linked accounts and available authentication methods.
+ * LinkAccountsList component handles all authentication options including OAuth and Email/Password.
+ */
+function IdentitiesStep(props: {
+  nextPath: string;
+  showPasswordOption: boolean;
+  showEmailOption: boolean;
+  enableIdentityLinking: boolean;
+  oAuthProviders: Provider[];
+}) {
+  return (
+    <div
+      className={
+        'animate-in fade-in slide-in-from-bottom-4 mx-auto flex w-full max-w-md flex-col space-y-4 duration-500'
+      }
+      data-test="join-step-two"
+    >
+      <LinkAccountsList
+        providers={props.oAuthProviders}
+        showPasswordOption={props.showPasswordOption}
+        showEmailOption={props.showEmailOption}
+        redirectTo={props.nextPath}
+        enabled={props.enableIdentityLinking}
+      />
+
+      <Button asChild data-test="skip-identities-button">
+        <Link href={props.nextPath}>
+          <Trans i18nKey={'common:continueKey'} />
+        </Link>
+      </Button>
+    </div>
+  );
+}
+
+async function fetchData(props: IdentitiesPageProps) {
+  const searchParams = await props.searchParams;
+  const client = getSupabaseServerClient();
+  const auth = await requireUser(client);
+
+  // If not authenticated, redirect to sign in
+  if (!auth.data) {
+    throw redirect(pathsConfig.auth.signIn);
+  }
+
+  // Get the next path from URL params (where to redirect after setup)
+  const nextPath = searchParams.next || pathsConfig.app.home;
+
+  // Available auth methods to add
+  const showPasswordOption = authConfig.providers.password;
+
+  // Show email option if password, magic link, or OTP is enabled
+  const showEmailOption =
+    authConfig.providers.password ||
+    authConfig.providers.magicLink ||
+    authConfig.providers.otp;
+
+  const oAuthProviders = authConfig.providers.oAuth;
+  const enableIdentityLinking = authConfig.enableIdentityLinking;
+
+  return {
+    nextPath,
+    showPasswordOption,
+    showEmailOption,
+    oAuthProviders,
+    enableIdentityLinking,
+  };
+}
--- a/apps/web/app/join/page.tsx
+++ b/apps/web/app/join/page.tsx
@@ -14,6 +14,7 @@ import { Heading } from '@kit/ui/heading';
 import { Trans } from '@kit/ui/trans';

 import { AppLogo } from '~/components/app-logo';
+import authConfig from '~/config/auth.config';
 import pathsConfig from '~/config/paths.config';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
@@ -21,6 +22,7 @@ import { withI18n } from '~/lib/i18n/with-i18n';
 interface JoinTeamAccountPageProps {
  searchParams: Promise<{
    invite_token?: string;
+    type?: 'invite' | 'magic-link';
    email?: string;
  }>;
 }
@@ -127,6 +129,26 @@ async function JoinTeamAccountPage(props: JoinTeamAccountPageProps) {
    invitation.account.slug,
  );

+  // Determine if we should show the account setup step (Step 2)
+  // Decision logic:
+  // 1. Only show for new accounts (linkType === 'invite')
+  // 2. Only if we have auth options available (password OR OAuth)
+  // 3. Users can always skip and set up auth later in account settings
+  const linkType = searchParams.type;
+  const supportsPasswordSignUp = authConfig.providers.password;
+  const supportsOAuthProviders = authConfig.providers.oAuth.length > 0;
+  const isNewAccount = linkType === 'invite';
+
+  const shouldSetupAccount =
+    isNewAccount && (supportsPasswordSignUp || supportsOAuthProviders);
+
+  // Determine redirect destination after joining:
+  // - If shouldSetupAccount: redirect to /identities with next param (Step 2)
+  // - Otherwise: redirect directly to team home (skip Step 2)
+  const nextPath = shouldSetupAccount
+    ? `/identities?next=${encodeURIComponent(accountHome)}`
+    : accountHome;
+
  const email = auth.data.email ?? '';

  return (
@@ -137,7 +159,7 @@ async function JoinTeamAccountPage(props: JoinTeamAccountPageProps) {
        invitation={invitation}
        paths={{
          signOutNext,
-          accountHome,
+          nextPath,
        }}
      />
    </AuthLayoutShell>
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -5,7 +5,7 @@ import { Toaster } from '@kit/ui/sonner';
 import { RootProviders } from '~/components/root-providers';
 import { getFontsClassName } from '~/lib/fonts';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
-import { generateRootMetadata } from '~/lib/root-metdata';
+import { generateRootMetadata } from '~/lib/root-metadata';
 import { getRootTheme } from '~/lib/root-theme';

 import '../styles/globals.css';
--- a/apps/web/components/analytics-provider.tsx
+++ b/apps/web/components/analytics-provider.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useEffectEvent } from 'react';

 import { usePathname, useSearchParams } from 'next/navigation';

@@ -28,19 +28,38 @@ function useAnalyticsMapping<T extends ConsumerProvidedEventTypes>(
 ) {
  const appEvents = useAppEvents<T>();

+  const subscribeToAppEvent = useEffectEvent(
+    (
+      eventType: AppEventType<T>,
+      handler: (event: AppEvent<T, AppEventType<T>>) => unknown,
+    ) => {
+      appEvents.on(eventType, handler);
+    },
+  );
+
+  const unsubscribeFromAppEvent = useEffectEvent(
+    (
+      eventType: AppEventType<T>,
+      handler: (event: AppEvent<T, AppEventType<T>>) => unknown,
+    ) => {
+      appEvents.off(eventType, handler);
+    },
+  );
+
  useEffect(() => {
    const subscriptions = Object.entries(mapping).map(
      ([eventType, handler]) => {
-        appEvents.on(eventType as AppEventType<T>, handler);
+        subscribeToAppEvent(eventType as AppEventType<T>, handler);

-        return () => appEvents.off(eventType as AppEventType<T>, handler);
+        return () =>
+          unsubscribeFromAppEvent(eventType as AppEventType<T>, handler);
      },
    );

    return () => {
      subscriptions.forEach((unsubscribe) => unsubscribe());
    };
-  }, [appEvents, mapping]);
+  }, [mapping]);
 }

 /**
@@ -96,9 +115,14 @@ function useReportPageView(reportAnalyticsFn: (url: string) => unknown) {
  const pathname = usePathname();
  const searchParams = useSearchParams();

-  useEffect(() => {
+  const callAnalyticsOnPathChange = useEffectEvent(() => {
    const url = [pathname, searchParams.toString()].filter(Boolean).join('?');

-    reportAnalyticsFn(url);
-  }, [pathname, reportAnalyticsFn, searchParams]);
+    return reportAnalyticsFn(url);
+  });
+
+  useEffect(() => {
+    callAnalyticsOnPathChange();
+    // call whenever the pathname changes
+  }, [pathname]);
 }
--- a/apps/web/components/auth-provider.tsx
+++ b/apps/web/components/auth-provider.tsx
@@ -8,8 +8,6 @@ import { useMonitoring } from '@kit/monitoring/hooks';
 import { useAppEvents } from '@kit/shared/events';
 import { useAuthChangeListener } from '@kit/supabase/hooks/use-auth-change-listener';

-import pathsConfig from '~/config/paths.config';
-
 export function AuthProvider(props: React.PropsWithChildren) {
  const dispatchEvent = useDispatchAppEventFromAuthEvent();

@@ -23,7 +21,6 @@ export function AuthProvider(props: React.PropsWithChildren) {
  );

  useAuthChangeListener({
-    appHomePath: pathsConfig.app.home,
    onEvent,
  });

--- a/apps/web/lib/root-metadata.ts
+++ b/apps/web/lib/root-metadata.ts
--- a/apps/web/next.config.mjs
+++ b/apps/web/next.config.mjs
@@ -28,9 +28,7 @@ const config = {
  reactStrictMode: true,
  /** Enables hot reloading for local packages without a build step */
  transpilePackages: INTERNAL_PACKAGES,
-  images: {
-    remotePatterns: getRemotePatterns(),
-  },
+  images: getImagesConfig(),
  logging: {
    fetches: {
      fullUrl: true,
@@ -52,10 +50,10 @@ const config = {
      : {
          position: 'bottom-right',
        },
+  reactCompiler: ENABLE_REACT_COMPILER,
  experimental: {
    mdxRs: true,
-    reactCompiler: ENABLE_REACT_COMPILER,
-    clientSegmentCache: true,
+    turbopackFileSystemCacheForDev: true,
    optimizePackageImports: [
      'recharts',
      'lucide-react',
@@ -72,7 +70,6 @@ const config = {
    },
  },
  /** We already do linting and typechecking as separate tasks in CI */
-  eslint: { ignoreDuringBuilds: true },
  typescript: { ignoreBuildErrors: true },
 };

@@ -80,8 +77,8 @@ export default withBundleAnalyzer({
  enabled: process.env.ANALYZE === 'true',
 })(config);

-function getRemotePatterns() {
-  /** @type {import('next').NextConfig['remotePatterns']} */
+/** @returns {import('next').NextConfig['images']} */
+function getImagesConfig() {
  const remotePatterns = [];

  if (SUPABASE_URL) {
@@ -93,9 +90,14 @@ function getRemotePatterns() {
    });
  }

-  return IS_PRODUCTION
-    ? remotePatterns
-    : [
+  if (IS_PRODUCTION) {
+    return {
+      remotePatterns,
+    };
+  }
+
+  remotePatterns.push(
+    ...[
      {
        protocol: 'http',
        hostname: '127.0.0.1',
@@ -104,7 +106,12 @@ function getRemotePatterns() {
        protocol: 'http',
        hostname: 'localhost',
      },
-      ];
+    ],
+  );
+
+  return {
+    remotePatterns,
+  };
 }

 async function getRedirects() {
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -7,12 +7,12 @@
  "scripts": {
    "analyze": "ANALYZE=true pnpm run build",
    "build": "next build",
-    "build:test": "NODE_ENV=test next build --turbopack",
+    "build:test": "NODE_ENV=test next build",
    "clean": "git clean -xdf .next .turbo node_modules",
-    "dev": "next dev --turbo | pino-pretty -c",
+    "dev": "next dev | pino-pretty -c",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
-    "format": "prettier --check \"**/*.{js,cjs,mjs,ts,tsx,md,json}\"",
+    "format": "prettier --check \"**/*.{ts,tsx}\" --ignore-path=\"../../.prettierignore\"",
    "start": "next start",
    "start:test": "NODE_ENV=test next start",
    "typecheck": "tsc --noEmit",
@@ -54,20 +54,20 @@
    "@makerkit/data-loader-supabase-core": "^0.0.10",
    "@makerkit/data-loader-supabase-nextjs": "^1.2.5",
    "@marsidev/react-turnstile": "^1.3.1",
-    "@nosecone/next": "1.0.0-beta.12",
+    "@nosecone/next": "1.0.0-beta.13",
    "@radix-ui/react-icons": "^1.3.2",
-    "@supabase/supabase-js": "2.58.0",
-    "@tanstack/react-query": "5.90.2",
+    "@supabase/supabase-js": "2.76.1",
+    "@tanstack/react-query": "5.90.5",
    "@tanstack/react-table": "^8.21.3",
    "date-fns": "^4.1.0",
-    "lucide-react": "^0.544.0",
-    "next": "15.5.5",
+    "lucide-react": "^0.546.0",
+    "next": "16.0.0",
    "next-sitemap": "^4.2.3",
    "next-themes": "0.4.6",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
-    "react-hook-form": "^7.63.0",
-    "react-i18next": "^16.0.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-hook-form": "^7.65.0",
+    "react-i18next": "^16.1.4",
    "recharts": "2.15.3",
    "tailwind-merge": "^3.3.1",
    "zod": "^3.25.74"
@@ -76,17 +76,17 @@
    "@kit/eslint-config": "workspace:*",
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@next/bundle-analyzer": "15.5.5",
-    "@tailwindcss/postcss": "^4.1.14",
-    "@types/node": "^24.6.2",
-    "@types/react": "19.1.16",
-    "@types/react-dom": "19.1.9",
-    "babel-plugin-react-compiler": "19.1.0-rc.3",
+    "@next/bundle-analyzer": "16.0.0",
+    "@tailwindcss/postcss": "^4.1.15",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "19.2.2",
+    "babel-plugin-react-compiler": "1.0.0",
    "cssnano": "^7.1.1",
-    "pino-pretty": "13.0.0",
+    "pino-pretty": "13.1.2",
    "prettier": "^3.6.2",
-    "supabase": "2.48.3",
-    "tailwindcss": "4.1.14",
+    "supabase": "2.53.6",
+    "tailwindcss": "4.1.15",
    "tailwindcss-animate": "^1.0.7",
    "typescript": "^5.9.3"
  },
--- a/apps/web/middleware.ts
+++ b/apps/web/middleware.ts
@@ -23,7 +23,7 @@ const getUser = (request: NextRequest, response: NextResponse) => {
  return supabase.auth.getClaims();
 };

-export async function middleware(request: NextRequest) {
+export async function proxy(request: NextRequest) {
  const secureHeaders = await createResponseWithSecureHeaders();
  const response = NextResponse.next(secureHeaders);

@@ -164,9 +164,7 @@ function getPatterns() {
      pattern: new URLPattern({ pathname: '/home/*?' }),
      handler: async (req: NextRequest, res: NextResponse) => {
        const { data } = await getUser(req, res);
-
-        const origin = req.nextUrl.origin;
-        const next = req.nextUrl.pathname;
+        const { origin, pathname: next } = req.nextUrl;

        // If user is not logged in, redirect to sign in page.
        if (!data?.claims) {
--- a/apps/web/public/locales/en/account.json
+++ b/apps/web/public/locales/en/account.json
@@ -126,15 +126,24 @@
  "accountLinked": "Account linked",
  "unlinkAccount": "Unlink Account",
  "failedToLinkAccount": "Failed to link account",
-  "availableAccounts": "Available Accounts",
-  "availableAccountsDescription": "Connect other authentication providers to your account",
-  "alreadyLinkedAccountsDescription": "You have already linked these accounts",
+  "availableMethods": "Available Methods",
+  "availableMethodsDescription": "Connect your account to one or more of the following methods to sign in",
+  "linkedMethods": "Sign-in methods linked to your account",
+  "alreadyLinkedMethodsDescription": "You have already linked these accounts",
  "confirmUnlinkAccount": "You are unlinking this provider.",
  "unlinkAccountConfirmation": "Are you sure you want to unlink this provider from your account? This action cannot be undone.",
  "unlinkingAccount": "Unlinking account...",
  "accountUnlinked": "Account successfully unlinked",
  "linkEmailPassword": "Email & Password",
-  "linkEmailPasswordDescription": "Add an email and password to your account for additional sign-in options",
-  "noAccountsAvailable": "No additional accounts available to link",
-  "linkAccountDescription": "Link account to sign in with {{provider}}"
+  "linkEmailPasswordDescription": "Add password authentication to your account",
+  "noAccountsAvailable": "No other method is available at this time",
+  "linkAccountDescription": "Link account to sign in with {{provider}}",
+  "updatePasswordDescription": "Add password authentication to your account",
+  "setEmailAddress": "Set Email Address",
+  "setEmailDescription": "Add an email address to your account",
+  "setEmailSuccess": "Email set successfully",
+  "setEmailSuccessMessage": "We sent you an email to confirm your email address. Please check your inbox and click on the link to confirm your email address.",
+  "setEmailLoading": "Setting your email...",
+  "setEmailError": "Email not set. Please try again",
+  "emailNotChanged": "Your email address has not changed"
 }
--- a/apps/web/public/locales/en/auth.json
+++ b/apps/web/public/locales/en/auth.json
@@ -78,6 +78,8 @@
  "methodOauthWithProvider": "<provider>{{provider}}</provider>",
  "methodDefault": "another method",
  "existingAccountHint": "You previously signed in with <method>{{method}}</method>. <signInLink>Already have an account?</signInLink>",
+  "linkAccountToSignIn": "Link account to sign in",
+  "linkAccountToSignInDescription": "Add one or more sign-in methods to your account",
  "errors": {
    "Invalid login credentials": "The credentials entered are invalid",
    "User already registered": "This credential is already in use. Please try with another one.",
--- a/apps/web/public/locales/en/common.json
+++ b/apps/web/public/locales/en/common.json
@@ -41,8 +41,9 @@
  "contactUs": "Contact Us",
  "loading": "Loading. Please wait...",
  "yourAccounts": "Your Accounts",
-  "continue": "Continue",
+  "continueKey": "Continue",
  "skip": "Skip",
+  "info": "Info",
  "signedInAs": "Signed in as",
  "pageOfPages": "Page {{page}} of {{total}}",
  "showingRecordCount": "Showing {{pageSize}} of {{totalCount}} rows",
--- a/apps/web/public/locales/en/teams.json
+++ b/apps/web/public/locales/en/teams.json
@@ -151,8 +151,8 @@
  "renewInvitationErrorDescription": "We encountered an error renewing the invitation. Please try again.",
  "signInWithDifferentAccount": "Sign in with a different account",
  "signInWithDifferentAccountDescription": "If you wish to accept the invitation with a different account, please sign out and back in with the account you wish to use.",
-  "acceptInvitationHeading": "Accept Invitation to join {{accountName}}",
-  "acceptInvitationDescription": "You have been invited to join the team {{accountName}}. If you wish to accept the invitation, please click the button below.",
+  "acceptInvitationHeading": "Join {{accountName}}",
+  "acceptInvitationDescription": "Click the button below to accept the invitation to join {{accountName}}",
  "continueAs": "Continue as {{email}}",
  "joinTeamAccount": "Join Team",
  "joiningTeam": "Joining team...",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "next-supabase-saas-kit-turbo",
-  "version": "2.18.3",
+  "version": "2.19.0",
  "private": true,
  "sideEffects": false,
  "engines": {
@@ -37,7 +37,7 @@
    "env:validate": "turbo gen validate-env"
  },
  "prettier": "@kit/prettier-config",
-  "packageManager": "pnpm@10.17.1",
+  "packageManager": "pnpm@10.19.0",
  "devDependencies": {
    "@manypkg/cli": "^0.25.1",
    "@turbo/gen": "^2.5.8",
--- a/packages/analytics/package.json
+++ b/packages/analytics/package.json
@@ -17,7 +17,7 @@
    "@kit/eslint-config": "workspace:*",
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@types/node": "^24.6.2"
+    "@types/node": "catalog:"
  },
  "typesVersions": {
    "*": {
--- a/packages/billing/gateway/package.json
+++ b/packages/billing/gateway/package.json
@@ -26,14 +26,14 @@
    "@kit/supabase": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
-    "@supabase/supabase-js": "2.58.0",
-    "@types/react": "19.1.16",
+    "@supabase/supabase-js": "2.76.1",
+    "@types/react": "catalog:",
    "date-fns": "^4.1.0",
-    "lucide-react": "^0.544.0",
-    "next": "15.5.5",
-    "react": "19.1.1",
-    "react-hook-form": "^7.63.0",
-    "react-i18next": "^16.0.0",
+    "lucide-react": "^0.546.0",
+    "next": "16.0.0",
+    "react": "19.2.0",
+    "react-hook-form": "^7.65.0",
+    "react-i18next": "^16.1.4",
    "zod": "^3.25.74"
  },
  "typesVersions": {
--- a/packages/billing/gateway/src/components/embedded-checkout.tsx
+++ b/packages/billing/gateway/src/components/embedded-checkout.tsx
@@ -1,11 +1,27 @@
-import { Suspense, forwardRef, lazy, memo, useMemo } from 'react';
+import { Suspense, lazy } from 'react';

 import { Enums } from '@kit/supabase/database';
 import { LoadingOverlay } from '@kit/ui/loading-overlay';

 type BillingProvider = Enums<'billing_provider'>;

-const Fallback = <LoadingOverlay fullPage={false} />;
+// Create lazy components at module level (not during render)
+const StripeCheckoutLazy = lazy(async () => {
+  const { StripeCheckout } = await import('@kit/stripe/components');
+  return { default: StripeCheckout };
+});
+
+const LemonSqueezyCheckoutLazy = lazy(async () => {
+  const { LemonSqueezyEmbeddedCheckout } = await import(
+    '@kit/lemon-squeezy/components'
+  );
+  return { default: LemonSqueezyEmbeddedCheckout };
+});
+
+type CheckoutProps = {
+  onClose: (() => unknown) | undefined;
+  checkoutToken: string;
+};

 export function EmbeddedCheckout(
  props: React.PropsWithChildren<{
@@ -14,100 +30,54 @@ export function EmbeddedCheckout(
    onClose?: () => void;
  }>,
 ) {
-  const CheckoutComponent = useMemo(
-    () => loadCheckoutComponent(props.provider),
-    [props.provider],
-  );
-
  return (
    <>
-      <CheckoutComponent
+      <Suspense fallback={<LoadingOverlay fullPage={false} />}>
+        <CheckoutSelector
+          provider={props.provider}
          onClose={props.onClose}
          checkoutToken={props.checkoutToken}
        />
+      </Suspense>

      <BlurryBackdrop />
    </>
  );
 }

-function loadCheckoutComponent(provider: BillingProvider) {
-  switch (provider) {
-    case 'stripe': {
-      return buildLazyComponent(() => {
-        return import('@kit/stripe/components').then(({ StripeCheckout }) => {
-          return {
-            default: StripeCheckout,
-          };
-        });
-      });
-    }
-
-    case 'lemon-squeezy': {
-      return buildLazyComponent(() => {
-        return import('@kit/lemon-squeezy/components').then(
-          ({ LemonSqueezyEmbeddedCheckout }) => {
-            return {
-              default: LemonSqueezyEmbeddedCheckout,
-            };
-          },
-        );
-      });
-    }
-
-    case 'paddle': {
-      throw new Error('Paddle is not yet supported');
-    }
-
-    default:
-      throw new Error(`Unsupported provider: ${provider as string}`);
-  }
-}
-
-function buildLazyComponent<
-  Component extends React.ComponentType<{
-    onClose: (() => unknown) | undefined;
-    checkoutToken: string;
-  }>,
->(
-  load: () => Promise<{
-    default: Component;
-  }>,
-  fallback = Fallback,
+function CheckoutSelector(
+  props: CheckoutProps & { provider: BillingProvider },
 ) {
-  let LoadedComponent: ReturnType<typeof lazy<Component>> | null = null;
-
-  const LazyComponent = forwardRef<
-    React.ElementRef<'div'>,
-    {
-      onClose: (() => unknown) | undefined;
-      checkoutToken: string;
-    }
-  >(function LazyDynamicComponent(props, ref) {
-    if (!LoadedComponent) {
-      LoadedComponent = lazy(load);
-    }
-
+  switch (props.provider) {
+    case 'stripe':
      return (
-      <Suspense fallback={fallback}>
-        {/* @ts-expect-error: weird TS */}
-        <LoadedComponent
+        <StripeCheckoutLazy
          onClose={props.onClose}
          checkoutToken={props.checkoutToken}
-          ref={ref}
        />
-      </Suspense>
      );
-  });

-  return memo(LazyComponent);
+    case 'lemon-squeezy':
+      return (
+        <LemonSqueezyCheckoutLazy
+          onClose={props.onClose}
+          checkoutToken={props.checkoutToken}
+        />
+      );
+
+    case 'paddle':
+      throw new Error('Paddle is not yet supported');
+
+    default:
+      throw new Error(`Unsupported provider: ${props.provider as string}`);
+  }
 }

 function BlurryBackdrop() {
  return (
    <div
      className={
-        'bg-background/30 fixed left-0 top-0 w-full backdrop-blur-sm' +
+        'bg-background/30 fixed top-0 left-0 w-full backdrop-blur-sm' +
        ' !m-0 h-full'
      }
    />
--- a/packages/billing/gateway/src/components/plan-picker.tsx
+++ b/packages/billing/gateway/src/components/plan-picker.tsx
@@ -316,7 +316,7 @@ export function PlanPicker(

                            <div
                              className={
-                                'flex flex-col gap-y-3 lg:flex-row lg:items-center lg:space-x-4 lg:space-y-0 lg:text-right'
+                                'flex flex-col gap-y-3 lg:flex-row lg:items-center lg:space-y-0 lg:space-x-4 lg:text-right'
                              }
                            >
                              <div>
@@ -415,6 +415,7 @@ function PlanDetails({
  const isRecurring = selectedPlan.paymentType === 'recurring';

  // trick to force animation on re-render
+  // eslint-disable-next-line react-hooks/purity
  const key = Math.random();

  return (
--- a/packages/billing/gateway/src/components/pricing-table.tsx
+++ b/packages/billing/gateway/src/components/pricing-table.tsx
@@ -422,7 +422,7 @@ function PlanIntervalSwitcher(
        const selected = plan === props.interval;

        const className = cn(
-          'animate-in fade-in !outline-hidden rounded-full transition-all focus:!ring-0',
+          'animate-in fade-in rounded-full !outline-hidden transition-all focus:!ring-0',
          {
            'border-r-transparent': index === 0,
            ['hover:text-primary text-muted-foreground']: !selected,
--- a/packages/billing/lemon-squeezy/package.json
+++ b/packages/billing/lemon-squeezy/package.json
@@ -24,9 +24,9 @@
    "@kit/supabase": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
-    "@types/react": "19.1.16",
-    "next": "15.5.5",
-    "react": "19.1.1",
+    "@types/react": "catalog:",
+    "next": "16.0.0",
+    "react": "19.2.0",
    "zod": "^3.25.74"
  },
  "typesVersions": {
--- a/packages/billing/lemon-squeezy/src/services/lemon-squeezy-billing-strategy.service.ts
+++ b/packages/billing/lemon-squeezy/src/services/lemon-squeezy-billing-strategy.service.ts
@@ -56,8 +56,6 @@ export class LemonSqueezyBillingStrategyService
    const { data: response, error } = await createLemonSqueezyCheckout(params);

    if (error ?? !response?.data.id) {
-      console.log(error);
-
      logger.error(
        {
          ...ctx,
--- a/packages/billing/stripe/package.json
+++ b/packages/billing/stripe/package.json
@@ -15,9 +15,9 @@
    "./components": "./src/components/index.ts"
  },
  "dependencies": {
-    "@stripe/react-stripe-js": "^5.0.0",
-    "@stripe/stripe-js": "^8.0.0",
-    "stripe": "^19.0.0"
+    "@stripe/react-stripe-js": "^5.2.0",
+    "@stripe/stripe-js": "^8.1.0",
+    "stripe": "^19.1.0"
  },
  "devDependencies": {
    "@kit/billing": "workspace:*",
@@ -27,10 +27,10 @@
    "@kit/supabase": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
-    "@types/react": "19.1.16",
+    "@types/react": "catalog:",
    "date-fns": "^4.1.0",
-    "next": "15.5.5",
-    "react": "19.1.1",
+    "next": "16.0.0",
+    "react": "19.2.0",
    "zod": "^3.25.74"
  },
  "typesVersions": {
--- a/packages/cms/core/package.json
+++ b/packages/cms/core/package.json
@@ -20,7 +20,7 @@
    "@kit/shared": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@kit/wordpress": "workspace:*",
-    "@types/node": "^24.6.2"
+    "@types/node": "catalog:"
  },
  "typesVersions": {
    "*": {
--- a/packages/cms/keystatic/package.json
+++ b/packages/cms/keystatic/package.json
@@ -26,9 +26,9 @@
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
-    "@types/node": "^24.6.2",
-    "@types/react": "19.1.16",
-    "react": "19.1.1",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "react": "19.2.0",
    "zod": "^3.25.74"
  },
  "typesVersions": {
--- a/packages/cms/wordpress/package.json
+++ b/packages/cms/wordpress/package.json
@@ -20,8 +20,8 @@
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
-    "@types/node": "^24.6.2",
-    "@types/react": "19.1.16",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
    "wp-types": "^4.68.1"
  },
  "typesVersions": {
--- a/packages/database-webhooks/package.json
+++ b/packages/database-webhooks/package.json
@@ -21,7 +21,7 @@
    "@kit/stripe": "workspace:*",
    "@kit/supabase": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@supabase/supabase-js": "2.58.0",
+    "@supabase/supabase-js": "2.76.1",
    "zod": "^3.25.74"
  },
  "typesVersions": {
--- a/packages/email-templates/package.json
+++ b/packages/email-templates/package.json
@@ -13,7 +13,7 @@
    ".": "./src/index.ts"
  },
  "dependencies": {
-    "@react-email/components": "0.5.5"
+    "@react-email/components": "0.5.7"
  },
  "devDependencies": {
    "@kit/eslint-config": "workspace:*",
--- a/packages/email-templates/src/emails/invite.email.tsx
+++ b/packages/email-templates/src/emails/invite.email.tsx
@@ -103,7 +103,7 @@ export async function renderInviteEmail(props: Props) {
                </Section>
              )}

-              <Section className="mb-[32px] mt-[32px] text-center">
+              <Section className="mt-[32px] mb-[32px] text-center">
                <CtaButton href={props.link}>{joinTeam}</CtaButton>
              </Section>

--- a/packages/email-templates/src/emails/otp.email.tsx
+++ b/packages/email-templates/src/emails/otp.email.tsx
@@ -69,9 +69,9 @@ export async function renderOtpEmail(props: Props) {

              <Text className="text-[16px] text-[#242424]">{otpText}</Text>

-              <Section className="mb-[16px] mt-[16px] text-center">
+              <Section className="mt-[16px] mb-[16px] text-center">
                <Button className={'w-full rounded bg-neutral-950 text-center'}>
-                  <Text className="text-[16px] font-medium font-semibold leading-[16px] text-white">
+                  <Text className="text-[16px] leading-[16px] font-medium font-semibold text-white">
                    {props.otp}
                  </Text>
                </Button>
--- a/packages/features/accounts/package.json
+++ b/packages/features/accounts/package.json
@@ -34,17 +34,17 @@
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
    "@radix-ui/react-icons": "^1.3.2",
-    "@supabase/supabase-js": "2.58.0",
-    "@tanstack/react-query": "5.90.2",
-    "@types/react": "19.1.16",
-    "@types/react-dom": "19.1.9",
-    "lucide-react": "^0.544.0",
-    "next": "15.5.5",
+    "@supabase/supabase-js": "2.76.1",
+    "@tanstack/react-query": "5.90.5",
+    "@types/react": "catalog:",
+    "@types/react-dom": "19.2.2",
+    "lucide-react": "^0.546.0",
+    "next": "16.0.0",
    "next-themes": "0.4.6",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
-    "react-hook-form": "^7.63.0",
-    "react-i18next": "^16.0.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-hook-form": "^7.65.0",
+    "react-i18next": "^16.1.4",
    "zod": "^3.25.74"
  },
  "prettier": "@kit/prettier-config",
--- a/packages/features/accounts/src/components/account-selector.tsx
+++ b/packages/features/accounts/src/components/account-selector.tsx
@@ -68,27 +68,9 @@ export function AccountSelector({
    return selectedAccount ?? PERSONAL_ACCOUNT_SLUG;
  }, [selectedAccount]);

-  const Icon = (props: { item: string }) => {
-    return (
-      <CheckCircle
-        className={cn(
-          'ml-auto h-4 w-4',
-          value === props.item ? 'opacity-100' : 'opacity-0',
-        )}
-      />
-    );
-  };
-
  const selected = accounts.find((account) => account.value === value);
  const pictureUrl = personalData.data?.picture_url;

-  const PersonalAccountAvatar = () =>
-    pictureUrl ? (
-      <UserAvatar pictureUrl={pictureUrl} />
-    ) : (
-      <PersonIcon className="h-5 w-5" />
-    );
-
  return (
    <>
      <Popover open={open} onOpenChange={setOpen}>
@@ -117,7 +99,7 @@ export function AccountSelector({
                    'gap-x-2': !collapsed,
                  })}
                >
-                  <PersonalAccountAvatar />
+                  <PersonalAccountAvatar pictureUrl={pictureUrl} />

                  <span
                    className={cn('truncate', {
@@ -136,7 +118,7 @@ export function AccountSelector({
                    'gap-x-2': !collapsed,
                  })}
                >
-                  <Avatar className={'rounded-xs h-6 w-6'}>
+                  <Avatar className={'h-6 w-6 rounded-xs'}>
                    <AvatarImage src={account.image ?? undefined} />

                    <AvatarFallback
@@ -176,6 +158,7 @@ export function AccountSelector({
            <CommandList>
              <CommandGroup>
                <CommandItem
+                  className="shadow-none"
                  onSelect={() => onAccountChange(undefined)}
                  value={PERSONAL_ACCOUNT_SLUG}
                >
@@ -185,7 +168,7 @@ export function AccountSelector({
                    <Trans i18nKey={'teams:personalAccount'} />
                  </span>

-                  <Icon item={PERSONAL_ACCOUNT_SLUG} />
+                  <Icon selected={value === PERSONAL_ACCOUNT_SLUG} />
                </CommandItem>
              </CommandGroup>

@@ -206,7 +189,7 @@ export function AccountSelector({
                      data-name={account.label}
                      data-slug={account.value}
                      className={cn(
-                        'group my-1 flex justify-between transition-colors',
+                        'group my-1 flex justify-between shadow-none transition-colors',
                        {
                          ['bg-muted']: value === account.value,
                        },
@@ -222,7 +205,7 @@ export function AccountSelector({
                      }}
                    >
                      <div className={'flex items-center'}>
-                        <Avatar className={'rounded-xs mr-2 h-6 w-6'}>
+                        <Avatar className={'mr-2 h-6 w-6 rounded-xs'}>
                          <AvatarImage src={account.image ?? undefined} />

                          <AvatarFallback
@@ -241,7 +224,7 @@ export function AccountSelector({
                        </span>
                      </div>

-                      <Icon item={account.value ?? ''} />
+                      <Icon selected={(account.value ?? '') === value} />
                    </CommandItem>
                  ))}
                </CommandGroup>
@@ -286,8 +269,24 @@ export function AccountSelector({

 function UserAvatar(props: { pictureUrl?: string }) {
  return (
-    <Avatar className={'rounded-xs h-6 w-6'}>
+    <Avatar className={'h-6 w-6 rounded-xs'}>
      <AvatarImage src={props.pictureUrl} />
    </Avatar>
  );
 }
+
+function Icon({ selected }: { selected: boolean }) {
+  return (
+    <CheckCircle
+      className={cn('ml-auto h-4 w-4', selected ? 'opacity-100' : 'opacity-0')}
+    />
+  );
+}
+
+function PersonalAccountAvatar({ pictureUrl }: { pictureUrl?: string | null }) {
+  return pictureUrl ? (
+    <UserAvatar pictureUrl={pictureUrl} />
+  ) : (
+    <PersonIcon className="h-5 w-5" />
+  );
+}
--- a/packages/features/accounts/src/components/personal-account-settings/account-settings-container.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/account-settings-container.tsx
@@ -156,7 +156,6 @@ export function PersonalAccountSettingsContainer(
        </CardContent>
      </Card>

-      <If condition={props.features.enableAccountLinking}>
      <Card>
        <CardHeader>
          <CardTitle>
@@ -169,10 +168,14 @@ export function PersonalAccountSettingsContainer(
        </CardHeader>

        <CardContent>
-            <LinkAccountsList providers={props.providers} />
+          <LinkAccountsList
+            providers={props.providers}
+            enabled={props.features.enableAccountLinking}
+            showEmailOption
+            showPasswordOption
+          />
        </CardContent>
      </Card>
-      </If>

      <If condition={props.features.enableAccountDeletion}>
        <Card className={'border-destructive'}>
--- a/packages/features/accounts/src/components/personal-account-settings/email/update-email-form.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/email/update-email-form.tsx
@@ -27,26 +27,46 @@ import { Trans } from '@kit/ui/trans';

 import { UpdateEmailSchema } from '../../../schema/update-email.schema';

-function createEmailResolver(currentEmail: string, errorMessage: string) {
+function createEmailResolver(
+  currentEmail: string | null,
+  emailsNotMatchingMessage: string,
+  emailNotChangedMessage: string,
+) {
+  const schema = UpdateEmailSchema.withTranslation(emailsNotMatchingMessage);
+
+  // If there's a current email, ensure the new email is different
+  if (currentEmail) {
    return zodResolver(
-    UpdateEmailSchema.withTranslation(errorMessage).refine((schema) => {
-      return schema.email !== currentEmail;
-    }),
+      schema.refine(
+        (data) => {
+          return data.email !== currentEmail;
+        },
+        {
+          path: ['email'],
+          message: emailNotChangedMessage,
+        },
+      ),
    );
  }

+  // If no current email, just validate the schema
+  return zodResolver(schema);
+}
+
 export function UpdateEmailForm({
  email,
  callbackPath,
+  onSuccess,
 }: {
-  email: string;
+  email?: string | null;
  callbackPath: string;
+  onSuccess?: () => void;
 }) {
  const { t } = useTranslation('account');
  const updateUserMutation = useUpdateUser();
+  const isSettingEmail = !email;

  const updateEmail = ({ email }: { email: string }) => {
-    // then, we update the user's email address
    const promise = async () => {
      const redirectTo = new URL(
        callbackPath,
@@ -54,17 +74,25 @@ export function UpdateEmailForm({
      ).toString();

      await updateUserMutation.mutateAsync({ email, redirectTo });
+
+      if (onSuccess) {
+        onSuccess();
+      }
    };

    toast.promise(promise, {
-      success: t(`updateEmailSuccess`),
-      loading: t(`updateEmailLoading`),
-      error: t(`updateEmailError`),
+      success: t(isSettingEmail ? 'setEmailSuccess' : 'updateEmailSuccess'),
+      loading: t(isSettingEmail ? 'setEmailLoading' : 'updateEmailLoading'),
+      error: t(isSettingEmail ? 'setEmailError' : 'updateEmailError'),
    });
  };

  const form = useForm({
-    resolver: createEmailResolver(email, t('emailNotMatching')),
+    resolver: createEmailResolver(
+      email ?? null,
+      t('emailNotMatching'),
+      t('emailNotChanged'),
+    ),
    defaultValues: {
      email: '',
      repeatEmail: '',
@@ -83,11 +111,23 @@ export function UpdateEmailForm({
            <CheckIcon className={'h-4'} />

            <AlertTitle>
-              <Trans i18nKey={'account:updateEmailSuccess'} />
+              <Trans
+                i18nKey={
+                  isSettingEmail
+                    ? 'account:setEmailSuccess'
+                    : 'account:updateEmailSuccess'
+                }
+              />
            </AlertTitle>

            <AlertDescription>
-              <Trans i18nKey={'account:updateEmailSuccessMessage'} />
+              <Trans
+                i18nKey={
+                  isSettingEmail
+                    ? 'account:setEmailSuccessMessage'
+                    : 'account:updateEmailSuccessMessage'
+                }
+              />
            </AlertDescription>
          </Alert>
        </If>
@@ -107,7 +147,11 @@ export function UpdateEmailForm({
                        data-test={'account-email-form-email-input'}
                        required
                        type={'email'}
-                        placeholder={t('account:newEmail')}
+                        placeholder={t(
+                          isSettingEmail
+                            ? 'account:emailAddress'
+                            : 'account:newEmail',
+                        )}
                        {...field}
                      />
                    </InputGroup>
@@ -147,7 +191,13 @@ export function UpdateEmailForm({

          <div>
            <Button disabled={updateUserMutation.isPending}>
-              <Trans i18nKey={'account:updateEmailSubmitLabel'} />
+              <Trans
+                i18nKey={
+                  isSettingEmail
+                    ? 'account:setEmailAddress'
+                    : 'account:updateEmailSubmitLabel'
+                }
+              />
            </Button>
          </div>
        </div>
--- a/packages/features/accounts/src/components/personal-account-settings/link-accounts/link-accounts-list.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/link-accounts/link-accounts-list.tsx
@@ -1,11 +1,14 @@
 'use client';

+import { Suspense, useState } from 'react';
+
+import { usePathname } from 'next/navigation';
+
 import type { Provider, UserIdentity } from '@supabase/supabase-js';

-import { CheckCircle } from 'lucide-react';
-
 import { useLinkIdentityWithProvider } from '@kit/supabase/hooks/use-link-identity-with-provider';
 import { useUnlinkUserIdentity } from '@kit/supabase/hooks/use-unlink-user-identity';
+import { useUser } from '@kit/supabase/hooks/use-user';
 import { useUserIdentities } from '@kit/supabase/hooks/use-user-identities';
 import {
  AlertDialog,
@@ -19,6 +22,14 @@ import {
  AlertDialogTrigger,
 } from '@kit/ui/alert-dialog';
 import { Button } from '@kit/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@kit/ui/dialog';
 import { If } from '@kit/ui/if';
 import {
  Item,
@@ -35,9 +46,21 @@ import { toast } from '@kit/ui/sonner';
 import { Spinner } from '@kit/ui/spinner';
 import { Trans } from '@kit/ui/trans';

-export function LinkAccountsList(props: { providers: Provider[] }) {
+import { UpdateEmailForm } from '../email/update-email-form';
+import { UpdatePasswordForm } from '../password/update-password-form';
+
+interface LinkAccountsListProps {
+  providers: Provider[];
+  showPasswordOption?: boolean;
+  showEmailOption?: boolean;
+  enabled?: boolean;
+  redirectTo?: string;
+}
+
+export function LinkAccountsList(props: LinkAccountsListProps) {
  const unlinkMutation = useUnlinkUserIdentity();
  const linkMutation = useLinkIdentityWithProvider();
+  const pathname = usePathname();

  const {
    identities,
@@ -46,14 +69,40 @@ export function LinkAccountsList(props: { providers: Provider[] }) {
    isLoading: isLoadingIdentities,
  } = useUserIdentities();

-  // Only show providers from the allowed list that aren't already connected
-  const availableProviders = props.providers.filter(
-    (provider) => !isProviderConnected(provider),
+  // Get user email from email identity
+  const emailIdentity = identities.find(
+    (identity) => identity.provider === 'email',
+  );
+
+  const userEmail = (emailIdentity?.identity_data?.email as string) || '';
+
+  // If enabled, display available providers
+  const availableProviders = props.enabled
+    ? props.providers.filter((provider) => !isProviderConnected(provider))
+    : [];
+
+  const user = useUser();
+  const amr = user.data ? user.data.amr : [];
+
+  const isConnectedWithPassword = amr.some(
+    (item: { method: string }) => item.method === 'password',
  );

  // Show all connected identities, even if their provider isn't in the allowed providers list
  const connectedIdentities = identities;

+  const canLinkEmailAccount = !emailIdentity && props.showEmailOption;
+
+  const canLinkPassword =
+    emailIdentity && props.showPasswordOption && !isConnectedWithPassword;
+
+  const shouldDisplayAvailableAccountsSection =
+    canLinkEmailAccount || canLinkPassword || availableProviders.length;
+
+  /**
+   * @name handleUnlinkAccount
+   * @param identity
+   */
  const handleUnlinkAccount = (identity: UserIdentity) => {
    const promise = unlinkMutation.mutateAsync(identity);

@@ -64,6 +113,10 @@ export function LinkAccountsList(props: { providers: Provider[] }) {
    });
  };

+  /**
+   * @name handleLinkAccount
+   * @param provider
+   */
  const handleLinkAccount = (provider: Provider) => {
    const promise = linkMutation.mutateAsync(provider);

@@ -83,33 +136,32 @@ export function LinkAccountsList(props: { providers: Provider[] }) {
  }

  return (
-    <div className="space-y-6">
-      {/* Linked Accounts Section */}
+    <div className="space-y-4">
      <If condition={connectedIdentities.length > 0}>
-        <div className="space-y-3">
+        <div className="space-y-2.5">
          <div>
            <h3 className="text-foreground text-sm font-medium">
-              <Trans i18nKey={'account:linkedAccounts'} />
+              <Trans i18nKey={'account:linkedMethods'} />
            </h3>

            <p className="text-muted-foreground text-xs">
-              <Trans i18nKey={'account:alreadyLinkedAccountsDescription'} />
+              <Trans i18nKey={'account:alreadyLinkedMethodsDescription'} />
            </p>
          </div>

          <div className="flex flex-col space-y-2">
            {connectedIdentities.map((identity) => (
-              <Item key={identity.id} variant="outline">
+              <Item key={identity.id} variant="muted">
                <ItemMedia>
+                  <div className="text-muted-foreground flex h-5 w-5 items-center justify-center">
                    <OauthProviderLogoImage providerId={identity.provider} />
+                  </div>
                </ItemMedia>

                <ItemContent>
-                  <ItemHeader className="flex items-center gap-3">
+                  <ItemHeader>
                    <div className="flex flex-col">
-                      <ItemTitle className="flex items-center gap-x-2 text-sm font-medium capitalize">
-                        <CheckCircle className="h-3 w-3 text-green-500" />
-
+                      <ItemTitle className="text-sm font-medium capitalize">
                        <span>{identity.provider}</span>
                      </ItemTitle>

@@ -174,22 +226,35 @@ export function LinkAccountsList(props: { providers: Provider[] }) {
        </div>
      </If>

-      {/* Available Accounts Section */}
-      <If condition={availableProviders.length > 0}>
+      <If
+        condition={shouldDisplayAvailableAccountsSection}
+        fallback={<NoAccountsAvailable />}
+      >
        <Separator />

-        <div className="space-y-3">
+        <div className="space-y-2.5">
          <div>
            <h3 className="text-foreground text-sm font-medium">
-              <Trans i18nKey={'account:availableAccounts'} />
+              <Trans i18nKey={'account:availableMethods'} />
            </h3>

            <p className="text-muted-foreground text-xs">
-              <Trans i18nKey={'account:availableAccountsDescription'} />
+              <Trans i18nKey={'account:availableMethodsDescription'} />
            </p>
          </div>

          <div className="flex flex-col space-y-2">
+            <If condition={canLinkEmailAccount}>
+              <UpdateEmailDialog redirectTo={pathname} />
+            </If>
+
+            <If condition={canLinkPassword}>
+              <UpdatePasswordDialog
+                userEmail={userEmail}
+                redirectTo={props.redirectTo || '/home'}
+              />
+            </If>
+
            {availableProviders.map((provider) => (
              <Item
                key={provider}
@@ -217,16 +282,134 @@ export function LinkAccountsList(props: { providers: Provider[] }) {
          </div>
        </div>
      </If>
-
-      <If
-        condition={
-          connectedIdentities.length === 0 && availableProviders.length === 0
-        }
-      >
-        <div className="text-muted-foreground py-8 text-center">
-          <Trans i18nKey={'account:noAccountsAvailable'} />
-        </div>
-      </If>
    </div>
  );
 }
+
+function NoAccountsAvailable() {
+  return (
+    <div>
+      <span className="text-muted-foreground text-xs">
+        <Trans i18nKey={'account:noAccountsAvailable'} />
+      </span>
+    </div>
+  );
+}
+
+function UpdateEmailDialog(props: { redirectTo: string }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Item variant="outline" role="button" className="hover:bg-muted/50">
+          <ItemMedia>
+            <div className="text-muted-foreground flex h-5 w-5 items-center justify-center">
+              <OauthProviderLogoImage providerId={'email'} />
+            </div>
+          </ItemMedia>
+
+          <ItemContent>
+            <ItemHeader>
+              <div className="flex flex-col">
+                <ItemTitle className="text-sm font-medium">
+                  <Trans i18nKey={'account:setEmailAddress'} />
+                </ItemTitle>
+
+                <ItemDescription>
+                  <Trans i18nKey={'account:setEmailDescription'} />
+                </ItemDescription>
+              </div>
+            </ItemHeader>
+          </ItemContent>
+        </Item>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans i18nKey={'account:setEmailAddress'} />
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans i18nKey={'account:setEmailDescription'} />
+          </DialogDescription>
+        </DialogHeader>
+
+        <Suspense
+          fallback={
+            <div className="flex items-center justify-center">
+              <Spinner />
+            </div>
+          }
+        >
+          <UpdateEmailForm
+            callbackPath={props.redirectTo}
+            onSuccess={() => {
+              setOpen(false);
+            }}
+          />
+        </Suspense>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function UpdatePasswordDialog(props: {
+  redirectTo: string;
+  userEmail: string;
+}) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Item variant="outline" role="button" className="hover:bg-muted/50">
+          <ItemMedia>
+            <div className="text-muted-foreground flex h-5 w-5 items-center justify-center">
+              <OauthProviderLogoImage providerId={'password'} />
+            </div>
+          </ItemMedia>
+
+          <ItemContent>
+            <ItemHeader>
+              <div className="flex flex-col">
+                <ItemTitle className="text-sm font-medium">
+                  <Trans i18nKey={'account:linkEmailPassword'} />
+                </ItemTitle>
+
+                <ItemDescription>
+                  <Trans i18nKey={'account:updatePasswordDescription'} />
+                </ItemDescription>
+              </div>
+            </ItemHeader>
+          </ItemContent>
+        </Item>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans i18nKey={'account:linkEmailPassword'} />
+          </DialogTitle>
+        </DialogHeader>
+
+        <Suspense
+          fallback={
+            <div className="flex items-center justify-center">
+              <Spinner />
+            </div>
+          }
+        >
+          <UpdatePasswordForm
+            callbackPath={props.redirectTo}
+            email={props.userEmail}
+            onSuccess={() => {
+              setOpen(false);
+            }}
+          />
+        </Suspense>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/packages/features/accounts/src/components/personal-account-settings/password/update-password-form.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/password/update-password-form.tsx
@@ -2,9 +2,11 @@

 import { useState } from 'react';

+import type { PostgrestError } from '@supabase/supabase-js';
+
 import { zodResolver } from '@hookform/resolvers/zod';
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
-import { Check, Lock } from 'lucide-react';
+import { Check, Lock, XIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';

@@ -33,9 +35,11 @@ import { PasswordUpdateSchema } from '../../../schema/update-password.schema';
 export const UpdatePasswordForm = ({
  email,
  callbackPath,
+  onSuccess,
 }: {
  email: string;
  callbackPath: string;
+  onSuccess?: () => void;
 }) => {
  const { t } = useTranslation('account');
  const updateUserMutation = useUpdateUser();
@@ -46,6 +50,7 @@ export const UpdatePasswordForm = ({

    const promise = updateUserMutation
      .mutateAsync({ password, redirectTo })
+      .then(onSuccess)
      .catch((error) => {
        if (
          typeof error === 'string' &&
@@ -57,11 +62,13 @@ export const UpdatePasswordForm = ({
        }
      });

-    toast.promise(() => promise, {
+    toast
+      .promise(() => promise, {
        success: t(`updatePasswordSuccess`),
        error: t(`updatePasswordError`),
        loading: t(`updatePasswordLoading`),
-    });
+      })
+      .unwrap();
  };

  const updatePasswordCallback = async ({
@@ -99,6 +106,10 @@ export const UpdatePasswordForm = ({
            <SuccessAlert />
          </If>

+          <If condition={updateUserMutation.error}>
+            {(error) => <ErrorAlert error={error as PostgrestError} />}
+          </If>
+
          <If condition={needsReauthentication}>
            <NeedsReauthenticationAlert />
          </If>
@@ -177,6 +188,27 @@ export const UpdatePasswordForm = ({
  );
 };

+function ErrorAlert({ error }: { error: { code: string } }) {
+  const { t } = useTranslation();
+
+  return (
+    <Alert variant={'destructive'}>
+      <XIcon className={'h-4'} />
+
+      <AlertTitle>
+        <Trans i18nKey={'account:updatePasswordError'} />
+      </AlertTitle>
+
+      <AlertDescription>
+        <Trans
+          i18nKey={`auth:errors.${error.code}`}
+          defaults={t('auth:resetPasswordError')}
+        />
+      </AlertDescription>
+    </Alert>
+  );
+}
+
 function SuccessAlert() {
  return (
    <Alert variant={'success'}>
--- a/packages/features/admin/package.json
+++ b/packages/features/admin/package.json
@@ -20,15 +20,15 @@
    "@kit/ui": "workspace:*",
    "@makerkit/data-loader-supabase-core": "^0.0.10",
    "@makerkit/data-loader-supabase-nextjs": "^1.2.5",
-    "@supabase/supabase-js": "2.58.0",
-    "@tanstack/react-query": "5.90.2",
+    "@supabase/supabase-js": "2.76.1",
+    "@tanstack/react-query": "5.90.5",
    "@tanstack/react-table": "^8.21.3",
-    "@types/react": "19.1.16",
-    "lucide-react": "^0.544.0",
-    "next": "15.5.5",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
-    "react-hook-form": "^7.63.0",
+    "@types/react": "catalog:",
+    "lucide-react": "^0.546.0",
+    "next": "16.0.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-hook-form": "^7.65.0",
    "zod": "^3.25.74"
  },
  "exports": {
--- a/packages/features/admin/src/components/admin-accounts-table.tsx
+++ b/packages/features/admin/src/components/admin-accounts-table.tsx
@@ -6,7 +6,7 @@ import { usePathname, useRouter } from 'next/navigation';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { ColumnDef } from '@tanstack/react-table';
 import { EllipsisVertical } from 'lucide-react';
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';

 import { Tables } from '@kit/supabase/database';
@@ -103,6 +103,8 @@ function AccountsTableFilters(props: {
    router.push(url);
  };

+  const type = useWatch({ control: form.control, name: 'type' });
+
  return (
    <Form {...form}>
      <form
@@ -110,7 +112,7 @@ function AccountsTableFilters(props: {
        onSubmit={form.handleSubmit((data) => onSubmit(data))}
      >
        <Select
-          value={form.watch('type')}
+          value={type}
          onValueChange={(value) => {
            form.setValue(
              'type',
--- a/packages/features/admin/src/components/admin-create-user-dialog.tsx
+++ b/packages/features/admin/src/components/admin-create-user-dialog.tsx
@@ -143,7 +143,7 @@ export function AdminCreateUserDialog(props: React.PropsWithChildren) {
            <FormField
              name={'emailConfirm'}
              render={({ field }) => (
-                <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
+                <FormItem className="flex flex-row items-start space-y-0 space-x-3 rounded-md border p-4">
                  <FormControl>
                    <Checkbox
                      checked={field.value}
--- a/packages/features/auth/package.json
+++ b/packages/features/auth/package.json
@@ -29,13 +29,13 @@
    "@kit/ui": "workspace:*",
    "@marsidev/react-turnstile": "^1.3.1",
    "@radix-ui/react-icons": "^1.3.2",
-    "@supabase/supabase-js": "2.58.0",
-    "@tanstack/react-query": "5.90.2",
-    "@types/react": "19.1.16",
-    "lucide-react": "^0.544.0",
-    "next": "15.5.5",
-    "react-hook-form": "^7.63.0",
-    "react-i18next": "^16.0.0",
+    "@supabase/supabase-js": "2.76.1",
+    "@tanstack/react-query": "5.90.5",
+    "@types/react": "catalog:",
+    "lucide-react": "^0.546.0",
+    "next": "16.0.0",
+    "react-hook-form": "^7.65.0",
+    "react-i18next": "^16.1.4",
    "sonner": "^2.0.7",
    "zod": "^3.25.74"
  },
--- a/packages/features/auth/src/components/auth-layout.tsx
+++ b/packages/features/auth/src/components/auth-layout.tsx
@@ -1,21 +1,29 @@
+import { cn } from '@kit/ui/utils';
+
 export function AuthLayoutShell({
  children,
+  className,
  Logo,
+  contentClassName,
 }: React.PropsWithChildren<{
  Logo?: React.ComponentType;
+  className?: string;
+  contentClassName?: string;
 }>) {
  return (
    <div
-      className={
-        'flex h-screen flex-col items-center justify-center' +
-        ' bg-background lg:bg-muted/30 gap-y-10 lg:gap-y-8' +
-        ' animate-in fade-in slide-in-from-top-16 zoom-in-95 duration-1000'
-      }
+      className={cn(
+        'bg-background lg:bg-muted/30 animate-in fade-in slide-in-from-top-16 zoom-in-95 flex h-screen flex-col items-center justify-center gap-y-10 duration-1000 lg:gap-y-8',
+        className,
+      )}
    >
      {Logo ? <Logo /> : null}

      <div
-        className={`bg-background flex w-full max-w-[23rem] flex-col gap-y-6 rounded-lg px-6 md:w-8/12 md:px-8 md:py-6 lg:w-5/12 lg:px-8 xl:w-4/12 xl:py-8`}
+        className={cn(
+          'bg-background flex w-full max-w-[23rem] flex-col gap-y-6 rounded-lg px-6 md:w-8/12 md:px-8 md:py-6 lg:w-5/12 lg:px-8 xl:w-4/12 xl:py-8',
+          contentClassName,
+        )}
      >
        {children}
      </div>
--- a/packages/features/auth/src/components/multi-factor-challenge-container.tsx
+++ b/packages/features/auth/src/components/multi-factor-challenge-container.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { useEffect } from 'react';
+import { useEffect, useEffectEvent } from 'react';

 import { useRouter } from 'next/navigation';

@@ -227,12 +227,16 @@ function FactorsListContainer({

  const isSuccess = factors && !isLoading && !error;

+  const signOutFn = useEffectEvent(() => {
+    void signOut.mutateAsync();
+  });
+
  useEffect(() => {
    // If there is an error, sign out
    if (error) {
-      void signOut.mutateAsync();
+      void signOutFn();
    }
-  }, [error, signOut]);
+  }, [error]);

  useEffect(() => {
    // If there is only one factor, select it automatically
--- a/packages/features/auth/src/components/update-password-form.tsx
+++ b/packages/features/auth/src/components/update-password-form.tsx
@@ -1,12 +1,12 @@
 'use client';

-import Link from 'next/link';
+import { useRouter } from 'next/navigation';

 import { zodResolver } from '@hookform/resolvers/zod';
-import { CheckIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons';
-import { ArrowRightIcon } from 'lucide-react';
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
 import type { z } from 'zod';

 import { useUpdateUser } from '@kit/supabase/hooks/use-update-user-mutation';
@@ -26,8 +26,13 @@ import { Trans } from '@kit/ui/trans';

 import { PasswordResetSchema } from '../schemas/password-reset.schema';

-export function UpdatePasswordForm(params: { redirectTo: string }) {
+export function UpdatePasswordForm(params: {
+  redirectTo: string;
+  heading?: React.ReactNode;
+}) {
  const updateUser = useUpdateUser();
+  const router = useRouter();
+  const { t } = useTranslation();

  const form = useForm<z.infer<typeof PasswordResetSchema>>({
    resolver: zodResolver(PasswordResetSchema),
@@ -43,26 +48,28 @@ export function UpdatePasswordForm(params: { redirectTo: string }) {
    return <ErrorState error={error} onRetry={() => updateUser.reset()} />;
  }

-  if (updateUser.data && !updateUser.isPending) {
-    return <SuccessState redirectTo={params.redirectTo} />;
-  }
-
  return (
    <div className={'flex w-full flex-col space-y-6'}>
      <div className={'flex justify-center'}>
-        <Heading level={5} className={'tracking-tight'}>
-          <Trans i18nKey={'auth:passwordResetLabel'} />
+        {params.heading && (
+          <Heading className={'text-center'} level={4}>
+            {params.heading}
          </Heading>
+        )}
      </div>

      <Form {...form}>
        <form
          className={'flex w-full flex-1 flex-col'}
-          onSubmit={form.handleSubmit(({ password }) => {
-            return updateUser.mutateAsync({
+          onSubmit={form.handleSubmit(async ({ password }) => {
+            await updateUser.mutateAsync({
              password,
              redirectTo: params.redirectTo,
            });
+
+            router.replace(params.redirectTo);
+
+            toast.success(t('account:updatePasswordSuccessMessage'));
          })}
        >
          <div className={'flex-col space-y-4'}>
@@ -75,7 +82,12 @@ export function UpdatePasswordForm(params: { redirectTo: string }) {
                  </FormLabel>

                  <FormControl>
-                    <Input required type="password" {...field} />
+                    <Input
+                      required
+                      type="password"
+                      autoComplete={'new-password'}
+                      {...field}
+                    />
                  </FormControl>

                  <FormMessage />
@@ -114,34 +126,6 @@ export function UpdatePasswordForm(params: { redirectTo: string }) {
  );
 }

-function SuccessState(props: { redirectTo: string }) {
-  return (
-    <div className={'flex flex-col space-y-4'}>
-      <Alert variant={'success'}>
-        <CheckIcon className={'s-6'} />
-
-        <AlertTitle>
-          <Trans i18nKey={'account:updatePasswordSuccess'} />
-        </AlertTitle>
-
-        <AlertDescription>
-          <Trans i18nKey={'account:updatePasswordSuccessMessage'} />
-        </AlertDescription>
-      </Alert>
-
-      <Link href={props.redirectTo}>
-        <Button variant={'outline'} className={'w-full'}>
-          <span>
-            <Trans i18nKey={'common:backToHomePage'} />
-          </span>
-
-          <ArrowRightIcon className={'ml-2 h-4'} />
-        </Button>
-      </Link>
-    </div>
-  );
-}
-
 function ErrorState(props: {
  onRetry: () => void;
  error: {
--- a/packages/features/notifications/package.json
+++ b/packages/features/notifications/package.json
@@ -19,13 +19,13 @@
    "@kit/supabase": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
-    "@supabase/supabase-js": "2.58.0",
-    "@tanstack/react-query": "5.90.2",
-    "@types/react": "19.1.16",
-    "lucide-react": "^0.544.0",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
-    "react-i18next": "^16.0.0"
+    "@supabase/supabase-js": "2.76.1",
+    "@tanstack/react-query": "5.90.5",
+    "@types/react": "catalog:",
+    "lucide-react": "^0.546.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-i18next": "^16.1.4"
  },
  "prettier": "@kit/prettier-config",
  "typesVersions": {
@@ -34,5 +34,8 @@
        "src/*"
      ]
    }
+  },
+  "dependencies": {
+    "@types/node": "catalog:"
  }
 }
--- a/packages/features/notifications/src/components/notifications-popover.tsx
+++ b/packages/features/notifications/src/components/notifications-popover.tsx
@@ -116,7 +116,7 @@ export function NotificationsPopover(params: {

          <span
            className={cn(
-              `fade-in animate-in zoom-in absolute right-1 top-1 mt-0 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-red-500 text-[0.65rem] text-white`,
+              `fade-in animate-in zoom-in absolute top-1 right-1 mt-0 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-red-500 text-[0.65rem] text-white`,
              {
                hidden: !notifications.length,
              },
@@ -176,7 +176,7 @@ export function NotificationsPopover(params: {
              <div
                key={notification.id.toString()}
                className={cn(
-                  'min-h-18 flex flex-col items-start justify-center gap-y-1 px-3 py-2',
+                  'flex min-h-18 flex-col items-start justify-center gap-y-1 px-3 py-2',
                )}
                onClick={() => {
                  if (params.onClick) {
--- a/packages/features/team-accounts/package.json
+++ b/packages/features/team-accounts/package.json
@@ -36,19 +36,19 @@
    "@kit/supabase": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
-    "@supabase/supabase-js": "2.58.0",
-    "@tanstack/react-query": "5.90.2",
+    "@supabase/supabase-js": "2.76.1",
+    "@tanstack/react-query": "5.90.5",
    "@tanstack/react-table": "^8.21.3",
-    "@types/react": "19.1.16",
-    "@types/react-dom": "19.1.9",
+    "@types/react": "catalog:",
+    "@types/react-dom": "19.2.2",
    "class-variance-authority": "^0.7.1",
    "date-fns": "^4.1.0",
-    "lucide-react": "^0.544.0",
-    "next": "15.5.5",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
-    "react-hook-form": "^7.63.0",
-    "react-i18next": "^16.0.0",
+    "lucide-react": "^0.546.0",
+    "next": "16.0.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-hook-form": "^7.65.0",
+    "react-i18next": "^16.1.4",
    "zod": "^3.25.74"
  },
  "prettier": "@kit/prettier-config",
--- a/packages/features/team-accounts/src/components/invitations/accept-invitation-container.tsx
+++ b/packages/features/team-accounts/src/components/invitations/accept-invitation-container.tsx
@@ -25,7 +25,7 @@ export function AcceptInvitationContainer(props: {

  paths: {
    signOutNext: string;
-    accountHome: string;
+    nextPath: string;
  };
 }) {
  return (
@@ -71,7 +71,7 @@ export function AcceptInvitationContainer(props: {
          <input
            type={'hidden'}
            name={'nextPath'}
-            value={props.paths.accountHome}
+            value={props.paths.nextPath}
          />

          <InvitationSubmitButton
--- a/packages/features/team-accounts/src/schema/create-team.schema.ts
+++ b/packages/features/team-accounts/src/schema/create-team.schema.ts
@@ -25,7 +25,6 @@ export const TeamNameSchema = z
  .max(50)
  .refine(
    (name) => {
-      console.log(name);
      return !SPECIAL_CHARACTERS_REGEX.test(name);
    },
    {
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -20,14 +20,14 @@
    "@kit/prettier-config": "workspace:*",
    "@kit/shared": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@tanstack/react-query": "5.90.2",
-    "next": "15.5.5",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
-    "react-i18next": "^16.0.0"
+    "@tanstack/react-query": "5.90.5",
+    "next": "16.0.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-i18next": "^16.1.4"
  },
  "dependencies": {
-    "i18next": "25.5.3",
+    "i18next": "25.6.0",
    "i18next-browser-languagedetector": "8.2.0",
    "i18next-resources-to-backend": "^1.2.1"
  },
--- a/packages/mailers/core/package.json
+++ b/packages/mailers/core/package.json
@@ -20,7 +20,7 @@
    "@kit/resend": "workspace:*",
    "@kit/shared": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@types/node": "^24.6.2",
+    "@types/node": "catalog:",
    "zod": "^3.25.74"
  },
  "typesVersions": {
--- a/packages/mailers/nodemailer/package.json
+++ b/packages/mailers/nodemailer/package.json
@@ -13,7 +13,7 @@
    ".": "./src/index.ts"
  },
  "dependencies": {
-    "nodemailer": "^7.0.6"
+    "nodemailer": "^7.0.9"
  },
  "devDependencies": {
    "@kit/eslint-config": "workspace:*",
--- a/packages/mailers/resend/package.json
+++ b/packages/mailers/resend/package.json
@@ -17,7 +17,7 @@
    "@kit/mailers-shared": "workspace:*",
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@types/node": "^24.6.2",
+    "@types/node": "catalog:",
    "zod": "^3.25.74"
  },
  "typesVersions": {
--- a/packages/mcp-server/package.json
+++ b/packages/mcp-server/package.json
@@ -24,8 +24,8 @@
  "devDependencies": {
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@modelcontextprotocol/sdk": "1.18.2",
-    "@types/node": "^24.6.2",
+    "@modelcontextprotocol/sdk": "1.20.1",
+    "@types/node": "catalog:",
    "postgres": "3.4.7",
    "zod": "^3.25.74"
  },
--- a/packages/mcp-server/src/tools/migrations.ts
+++ b/packages/mcp-server/src/tools/migrations.ts
@@ -1,8 +1,7 @@
 import type { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
-import { exec } from 'node:child_process';
+import { execSync } from 'node:child_process';
 import { readFile, readdir } from 'node:fs/promises';
 import { join } from 'node:path';
-import { promisify } from 'node:util';
 import { z } from 'zod';

 export class MigrationsTool {
@@ -20,11 +19,11 @@ export class MigrationsTool {
  }

  static CreateMigration(name: string) {
-    return promisify(exec)(`pnpm --filter web supabase migrations new ${name}`);
+    return execSync(`pnpm --filter web supabase migrations new ${name}`);
  }

  static Diff() {
-    return promisify(exec)(`supabase db diff`);
+    return execSync(`pnpm --filter web supabase db diff`);
  }
 }

@@ -40,13 +39,14 @@ function createDiffMigrationTool(server: McpServer) {
    'diff_migrations',
    'Compare differences between the declarative schemas and the applied migrations in Supabase',
    async () => {
-      const { stdout } = await MigrationsTool.Diff();
+      const result = MigrationsTool.Diff();
+      const text = result.toString('utf8');

      return {
        content: [
          {
            type: 'text',
-            text: stdout,
+            text,
          },
        ],
      };
@@ -64,13 +64,14 @@ function createCreateMigrationTool(server: McpServer) {
      }),
    },
    async ({ state }) => {
-      const { stdout } = await MigrationsTool.CreateMigration(state.name);
+      const result = MigrationsTool.CreateMigration(state.name);
+      const text = result.toString('utf8');

      return {
        content: [
          {
            type: 'text',
-            text: stdout,
+            text,
          },
        ],
      };
--- a/packages/monitoring/api/package.json
+++ b/packages/monitoring/api/package.json
@@ -23,8 +23,8 @@
    "@kit/sentry": "workspace:*",
    "@kit/shared": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@types/react": "19.1.16",
-    "react": "19.1.1",
+    "@types/react": "catalog:",
+    "react": "19.2.0",
    "zod": "^3.25.74"
  },
  "typesVersions": {
--- a/packages/monitoring/core/package.json
+++ b/packages/monitoring/core/package.json
@@ -17,8 +17,8 @@
    "@kit/eslint-config": "workspace:*",
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@types/react": "19.1.16",
-    "react": "19.1.1"
+    "@types/react": "catalog:",
+    "react": "19.2.0"
  },
  "typesVersions": {
    "*": {
--- a/packages/monitoring/sentry/package.json
+++ b/packages/monitoring/sentry/package.json
@@ -16,16 +16,15 @@
    "./config/server": "./src/sentry.client.server.ts"
  },
  "dependencies": {
-    "@sentry/nextjs": "^10.17.0",
-    "import-in-the-middle": "1.14.4"
+    "@sentry/nextjs": "^10.21.0"
  },
  "devDependencies": {
    "@kit/eslint-config": "workspace:*",
    "@kit/monitoring-core": "workspace:*",
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@types/react": "19.1.16",
-    "react": "19.1.1"
+    "@types/react": "catalog:",
+    "react": "19.2.0"
  },
  "typesVersions": {
    "*": {
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -20,8 +20,8 @@
    "@kit/prettier-config": "workspace:*",
    "@kit/supabase": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@supabase/supabase-js": "2.58.0",
-    "next": "15.5.5",
+    "@supabase/supabase-js": "2.76.1",
+    "next": "16.0.0",
    "zod": "^3.25.74"
  },
  "typesVersions": {
--- a/packages/otp/package.json
+++ b/packages/otp/package.json
@@ -25,12 +25,12 @@
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
    "@radix-ui/react-icons": "^1.3.2",
-    "@supabase/supabase-js": "2.58.0",
-    "@types/react": "19.1.16",
-    "@types/react-dom": "19.1.9",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
-    "react-hook-form": "^7.63.0",
+    "@supabase/supabase-js": "2.76.1",
+    "@types/react": "catalog:",
+    "@types/react-dom": "19.2.2",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-hook-form": "^7.65.0",
    "zod": "^3.25.74"
  },
  "typesVersions": {
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -20,10 +20,10 @@
    "@kit/eslint-config": "workspace:*",
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@types/react": "19.1.16"
+    "@types/react": "catalog:"
  },
  "dependencies": {
-    "pino": "^9.12.0"
+    "pino": "^10.1.0"
  },
  "typesVersions": {
    "*": {
--- a/packages/supabase/package.json
+++ b/packages/supabase/package.json
@@ -26,11 +26,12 @@
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@supabase/ssr": "^0.7.0",
-    "@supabase/supabase-js": "2.58.0",
-    "@tanstack/react-query": "5.90.2",
-    "@types/react": "19.1.16",
-    "next": "15.5.5",
-    "react": "19.1.1",
+    "@supabase/supabase-js": "2.76.1",
+    "@tanstack/react-query": "5.90.5",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "next": "16.0.0",
+    "react": "19.2.0",
    "zod": "^3.25.74"
  },
  "typesVersions": {
--- a/packages/supabase/src/auth-callback.service.ts
+++ b/packages/supabase/src/auth-callback.service.ts
@@ -73,7 +73,6 @@ class AuthCallbackService {

    // remove the query params from the url
    searchParams.delete('token_hash');
-    searchParams.delete('type');
    searchParams.delete('next');

    // if we have a next path, we redirect to that path
--- a/packages/supabase/src/hooks/use-auth-change-listener.ts
+++ b/packages/supabase/src/hooks/use-auth-change-listener.ts
@@ -1,8 +1,6 @@
 'use client';

-import { useEffect } from 'react';
-
-import { usePathname } from 'next/navigation';
+import { useEffect, useEffectEvent } from 'react';

 import type { AuthChangeEvent, Session } from '@supabase/supabase-js';

@@ -12,7 +10,13 @@ import { useSupabase } from './use-supabase';
 * @name PRIVATE_PATH_PREFIXES
 * @description A list of private path prefixes
 */
-const PRIVATE_PATH_PREFIXES = ['/home', '/admin', '/join', '/update-password'];
+const PRIVATE_PATH_PREFIXES = [
+  '/home',
+  '/admin',
+  '/join',
+  '/identities',
+  '/update-password',
+];

 /**
 * @name AUTH_PATHS
@@ -28,19 +32,23 @@ const AUTH_PATHS = ['/auth'];
 */
 export function useAuthChangeListener({
  privatePathPrefixes = PRIVATE_PATH_PREFIXES,
-  appHomePath,
  onEvent,
 }: {
-  appHomePath: string;
  privatePathPrefixes?: string[];
  onEvent?: (event: AuthChangeEvent, user: Session | null) => void;
 }) {
  const client = useSupabase();
-  const pathName = usePathname();

-  useEffect(() => {
+  const setupAuthListener = useEffectEvent(() => {
+    // don't run on the server
+    if (typeof window === 'undefined') {
+      return;
+    }
+
    // keep this running for the whole session unless the component was unmounted
-    const listener = client.auth.onAuthStateChange((event, user) => {
+    return client.auth.onAuthStateChange((event, user) => {
+      const pathName = window.location.pathname;
+
      if (onEvent) {
        onEvent(event, user);
      }
@@ -68,10 +76,16 @@ export function useAuthChangeListener({
        window.location.reload();
      }
    });
+  });
+
+  useEffect(() => {
+    const listener = setupAuthListener();

    // destroy listener on un-mounts
-    return () => listener.data.subscription.unsubscribe();
-  }, [client.auth, pathName, appHomePath, privatePathPrefixes, onEvent]);
+    return () => {
+      listener?.data.subscription.unsubscribe();
+    };
+  }, []);
 }

 /**
--- a/packages/supabase/src/require-user.ts
+++ b/packages/supabase/src/require-user.ts
@@ -1,4 +1,4 @@
-import type { SupabaseClient } from '@supabase/supabase-js';
+import type { AMREntry, SupabaseClient } from '@supabase/supabase-js';

 import { checkRequiresMultiFactorAuthentication } from './check-requires-mfa';
 import { JWTUserData } from './types';
@@ -24,6 +24,7 @@ type UserClaims = {
  aal: `aal1` | `aal2`;
  session_id: string;
  is_anonymous: boolean;
+  amr: AMREntry[];
 };

 /**
@@ -97,6 +98,7 @@ export async function requireUser(
      app_metadata: user.app_metadata,
      user_metadata: user.user_metadata,
      id: user.sub,
+      amr: user.amr,
    },
  };
 }
--- a/packages/supabase/src/types.ts
+++ b/packages/supabase/src/types.ts
@@ -1,3 +1,5 @@
+import type { AMREntry } from '@supabase/supabase-js';
+
 /**
 * @name JWTUserData
 * @description The user data mapped from the JWT claims.
@@ -10,4 +12,5 @@ export type JWTUserData = {
  app_metadata: Record<string, unknown>;
  user_metadata: Record<string, unknown>;
  id: string;
+  amr: AMREntry[];
 };
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -14,7 +14,7 @@
    "clsx": "^2.1.1",
    "cmdk": "1.1.1",
    "input-otp": "1.4.2",
-    "lucide-react": "^0.544.0",
+    "lucide-react": "^0.546.0",
    "radix-ui": "1.4.3",
    "react-dropzone": "^14.3.8",
    "react-top-loading-bar": "3.0.2",
@@ -25,22 +25,22 @@
    "@kit/eslint-config": "workspace:*",
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@supabase/supabase-js": "2.58.0",
-    "@tanstack/react-query": "5.90.2",
+    "@supabase/supabase-js": "2.76.1",
+    "@tanstack/react-query": "5.90.5",
    "@tanstack/react-table": "^8.21.3",
-    "@types/react": "19.1.16",
-    "@types/react-dom": "19.1.9",
+    "@types/react": "catalog:",
+    "@types/react-dom": "19.2.2",
    "class-variance-authority": "^0.7.1",
    "date-fns": "^4.1.0",
-    "eslint": "^9.35.0",
-    "next": "15.5.5",
+    "eslint": "^9.38.0",
+    "next": "16.0.0",
    "next-themes": "0.4.6",
    "prettier": "^3.6.2",
-    "react-day-picker": "^9.11.0",
-    "react-hook-form": "^7.63.0",
-    "react-i18next": "^16.0.0",
+    "react-day-picker": "^9.11.1",
+    "react-hook-form": "^7.65.0",
+    "react-i18next": "^16.1.4",
    "sonner": "^2.0.7",
-    "tailwindcss": "4.1.14",
+    "tailwindcss": "4.1.15",
    "tailwindcss-animate": "^1.0.7",
    "typescript": "^5.9.3",
    "zod": "^3.25.74"
--- a/packages/ui/src/hooks/use-supabase-upload.tsx
+++ b/packages/ui/src/hooks/use-supabase-upload.tsx
@@ -196,19 +196,23 @@ export const useSupabaseUpload = (options: UseSupabaseUploadOptions) => {

    setLoading(false);
  }, [
-    files,
-    path,
    bucketName,
-    errors,
-    successes,
-    onUploadSuccess,
-    client,
    cacheControl,
+    client.storage,
+    errors,
+    files,
+    onUploadSuccess,
+    setLoading,
+    setErrors,
+    setSuccesses,
+    path,
+    successes,
    upsert,
  ]);

  useEffect(() => {
    if (files.length === 0) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
      setErrors([]);
    }

--- a/packages/ui/src/makerkit/image-upload-input.tsx
+++ b/packages/ui/src/makerkit/image-upload-input.tsx
@@ -109,30 +109,19 @@ export const ImageUploadInput: React.FC<Props> =
      [forwardedRef],
    );

-    useEffect(() => {
+    if (image !== state.image) {
      setState((state) => ({ ...state, image }));
-    }, [image]);
+    }

    useEffect(() => {
      if (!image) {
+        // eslint-disable-next-line react-hooks/set-state-in-effect
        onRemove();
      }
    }, [image, onRemove]);

-    const Input = () => (
-      <input
-        {...props}
-        className={cn('hidden', props.className)}
-        ref={setRef}
-        type={'file'}
-        onInput={onInputChange}
-        accept="image/*"
-        aria-labelledby={'image-upload-input'}
-      />
-    );
-
    if (!visible) {
-      return <Input />;
+      return <Input {...props} onInput={onInputChange} ref={setRef} />;
    }

    return (
@@ -140,7 +129,7 @@ export const ImageUploadInput: React.FC<Props> =
        id={'image-upload-input'}
        className={`border-input bg-background ring-primary ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring relative flex h-10 w-full cursor-pointer rounded-md border border-dashed px-3 py-2 text-sm ring-offset-2 outline-hidden transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium focus:ring-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50`}
      >
-        <Input />
+        <Input ref={setRef} onInput={onInputChange} />

        <div className={'flex items-center space-x-4'}>
          <div className={'flex'}>
@@ -198,3 +187,19 @@ export const ImageUploadInput: React.FC<Props> =
      </label>
    );
  };
+
+function Input(
+  props: React.InputHTMLAttributes<unknown> & {
+    ref: (input: HTMLInputElement) => void;
+  },
+) {
+  return (
+    <input
+      {...props}
+      className={cn('hidden', props.className)}
+      type={'file'}
+      accept="image/*"
+      aria-labelledby={'image-upload-input'}
+    />
+  );
+}
--- a/packages/ui/src/makerkit/image-uploader.tsx
+++ b/packages/ui/src/makerkit/image-uploader.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';

 import { Image as ImageIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
@@ -44,7 +44,13 @@ export function ImageUploader(
    [props],
  );

-  const Input = () => (
+  if (props.value !== image) {
+    setImage(props.value);
+  }
+
+  if (!image) {
+    return (
+      <FallbackImage descriptionSection={props.children}>
        <ImageUploadInput
          {...control}
          accept={'image/*'}
@@ -53,16 +59,6 @@ export function ImageUploader(
          multiple={false}
          onValueChange={onValueChange}
        />
-  );
-
-  useEffect(() => {
-    setImage(props.value);
-  }, [props.value]);
-
-  if (!image) {
-    return (
-      <FallbackImage descriptionSection={props.children}>
-        <Input />
      </FallbackImage>
    );
  }
@@ -84,7 +80,14 @@ export function ImageUploader(
          alt={''}
        />

-        <Input />
+        <ImageUploadInput
+          {...control}
+          accept={'image/*'}
+          className={'absolute h-full w-full'}
+          visible={false}
+          multiple={false}
+          onValueChange={onValueChange}
+        />
      </label>

      <div>
--- a/packages/ui/src/makerkit/multi-step-form.tsx
+++ b/packages/ui/src/makerkit/multi-step-form.tsx
@@ -386,6 +386,7 @@ function AnimatedStep({

  useEffect(() => {
    if (isActive) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
      setShouldRender(true);
    } else {
      const timer = setTimeout(() => setShouldRender(false), 300);
--- a/packages/ui/src/makerkit/oauth-provider-logo-image.tsx
+++ b/packages/ui/src/makerkit/oauth-provider-logo-image.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image';

-import { AtSign, Phone } from 'lucide-react';
+import { AtSign, Mail, Phone } from 'lucide-react';

 const DEFAULT_IMAGE_SIZE = 18;

@@ -33,7 +33,8 @@ export function OauthProviderLogoImage({

 function getOAuthProviderLogos(): Record<string, string | React.ReactNode> {
  return {
-    email: <AtSign className={'size-[16px]'} />,
+    password: <AtSign className={'s-[18px]'} />,
+    email: <Mail className={'s-[18px]'} />,
    phone: <Phone className={'size-[16px]'} />,
    google: '/images/oauth/google.webp',
    facebook: '/images/oauth/facebook.webp',
--- a/packages/ui/src/makerkit/sidebar.tsx
+++ b/packages/ui/src/makerkit/sidebar.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { useContext, useId, useRef, useState } from 'react';
+import { useContext, useId, useState } from 'react';

 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
@@ -43,23 +43,20 @@ export function Sidebar(props: {
      }) => React.ReactNode);
 }) {
  const [collapsed, setCollapsed] = useState(props.collapsed ?? false);
-  const isExpandedRef = useRef<boolean>(false);
+  const [isExpanded, setIsExpanded] = useState(false);

  const expandOnHover =
    props.expandOnHover ??
    process.env.NEXT_PUBLIC_EXPAND_SIDEBAR_ON_HOVER === 'true';

-  const sidebarSizeClassName = getSidebarSizeClassName(
-    collapsed,
-    isExpandedRef.current,
-  );
+  const sidebarSizeClassName = getSidebarSizeClassName(collapsed, isExpanded);

  const className = getClassNameBuilder(
    cn(props.className ?? '', sidebarSizeClassName, {}),
  )();

  const containerClassName = cn(sidebarSizeClassName, 'bg-inherit', {
-    'max-w-[4rem]': expandOnHover && isExpandedRef.current,
+    'max-w-[4rem]': expandOnHover && isExpanded,
  });

  const ctx = { collapsed, setCollapsed };
@@ -68,7 +65,7 @@ export function Sidebar(props: {
    props.collapsed && expandOnHover
      ? () => {
          setCollapsed(false);
-          isExpandedRef.current = true;
+          setIsExpanded(true);
        }
      : undefined;

@@ -77,11 +74,11 @@ export function Sidebar(props: {
      ? () => {
          if (!isRadixPopupOpen()) {
            setCollapsed(true);
-            isExpandedRef.current = false;
+            setIsExpanded(false);
          } else {
            onRadixPopupClose(() => {
              setCollapsed(true);
-              isExpandedRef.current = false;
+              setIsExpanded(false);
            });
          }
        }
@@ -124,33 +121,21 @@ export function SidebarContent({
  return <div className={className}>{children}</div>;
 }

-export function SidebarGroup({
+function SidebarGroupWrapper({
+  id,
+  sidebarCollapsed,
+  collapsible,
+  isGroupCollapsed,
+  setIsGroupCollapsed,
  label,
-  collapsed = false,
-  collapsible = true,
-  children,
-}: React.PropsWithChildren<{
-  label: string | React.ReactNode;
-  collapsible?: boolean;
-  collapsed?: boolean;
-}>) {
-  const { collapsed: sidebarCollapsed } = useContext(SidebarContext);
-  const [isGroupCollapsed, setIsGroupCollapsed] = useState(collapsed);
-  const id = useId();
-
-  const Title = (props: React.PropsWithChildren) => {
-    if (sidebarCollapsed) {
-      return null;
-    }
-
-    return (
-      <span className={'text-muted-foreground text-xs font-semibold uppercase'}>
-        {props.children}
-      </span>
-    );
-  };
-
-  const Wrapper = () => {
+}: {
+  id: string;
+  sidebarCollapsed: boolean;
+  collapsible: boolean;
+  isGroupCollapsed: boolean;
+  setIsGroupCollapsed: (isGroupCollapsed: boolean) => void;
+  label: React.ReactNode;
+}) {
  const className = cn(
    'px-container group flex items-center justify-between space-x-2.5',
    {
@@ -166,7 +151,11 @@ export function SidebarGroup({
        onClick={() => setIsGroupCollapsed(!isGroupCollapsed)}
        className={className}
      >
-          <Title>{label}</Title>
+        <span
+          className={'text-muted-foreground text-xs font-semibold uppercase'}
+        >
+          {label}
+        </span>

        <If condition={collapsible}>
          <ChevronDown
@@ -179,12 +168,32 @@ export function SidebarGroup({
    );
  }

+  if (sidebarCollapsed) {
+    return null;
+  }
+
  return (
    <div className={className}>
-        <Title>{label}</Title>
+      <span className={'text-muted-foreground text-xs font-semibold uppercase'}>
+        {label}
+      </span>
    </div>
  );
-  };
+}
+
+export function SidebarGroup({
+  label,
+  collapsed = false,
+  collapsible = true,
+  children,
+}: React.PropsWithChildren<{
+  label: string | React.ReactNode;
+  collapsible?: boolean;
+  collapsed?: boolean;
+}>) {
+  const { collapsed: sidebarCollapsed } = useContext(SidebarContext);
+  const [isGroupCollapsed, setIsGroupCollapsed] = useState(collapsed);
+  const id = useId();

  return (
    <div
@@ -192,7 +201,14 @@ export function SidebarGroup({
        'gap-y-2 py-1': !collapsed,
      })}
    >
-      <Wrapper />
+      <SidebarGroupWrapper
+        id={id}
+        sidebarCollapsed={sidebarCollapsed}
+        collapsible={collapsible}
+        isGroupCollapsed={isGroupCollapsed}
+        setIsGroupCollapsed={setIsGroupCollapsed}
+        label={label}
+      />

      <If condition={collapsible ? !isGroupCollapsed : true}>
        <div id={id} className={'flex flex-col space-y-1.5'}>
--- a/packages/ui/src/makerkit/stepper.tsx
+++ b/packages/ui/src/makerkit/stepper.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { Fragment, useCallback } from 'react';
+import { Fragment } from 'react';

 import { cva } from 'class-variance-authority';

@@ -12,25 +12,18 @@ type Variant = 'numbers' | 'default' | 'dots';

 const classNameBuilder = getClassNameBuilder();

-/**
- * Renders a stepper component with multiple steps.
- *
- * @param {Object} props - The props object containing the following properties:
- *   - steps {string[]} - An array of strings representing the step labels.
- *   - currentStep {number} - The index of the currently active step.
- *   - variant {string} (optional) - The variant of the stepper component (default: 'default').
- **/
-export function Stepper(props: {
+function Steps({
+  steps,
+  currentStep,
+  variant,
+}: {
  steps: string[];
  currentStep: number;
  variant?: Variant;
 }) {
-  const variant = props.variant ?? 'default';
-
-  const Steps = useCallback(() => {
-    return props.steps.map((labelOrKey, index) => {
-      const selected = props.currentStep === index;
-      const complete = props.currentStep > index;
+  return steps.map((labelOrKey, index) => {
+    const selected = currentStep === index;
+    const complete = currentStep > index;

    const className = classNameBuilder({
      selected,
@@ -65,7 +58,22 @@ export function Stepper(props: {
      </Fragment>
    );
  });
-  }, [props.steps, props.currentStep, variant]);
+}
+
+/**
+ * Renders a stepper component with multiple steps.
+ *
+ * @param {Object} props - The props object containing the following properties:
+ *   - steps {string[]} - An array of strings representing the step labels.
+ *   - currentStep {number} - The index of the currently active step.
+ *   - variant {string} (optional) - The variant of the stepper component (default: 'default').
+ **/
+export function Stepper(props: {
+  steps: string[];
+  currentStep: number;
+  variant?: Variant;
+}) {
+  const variant = props.variant ?? 'default';

  // If there are no steps, don't render anything.
  if (props.steps.length < 2) {
@@ -75,12 +83,16 @@ export function Stepper(props: {
  const containerClassName = cn('w-full', {
    ['flex justify-between']: variant === 'numbers',
    ['flex space-x-0.5']: variant === 'default',
-    ['flex gap-x-4 self-center']: variant === 'dots',
+    ['flex space-x-2.5 self-center']: variant === 'dots',
  });

  return (
    <div className={containerClassName}>
-      <Steps />
+      <Steps
+        steps={props.steps}
+        currentStep={props.currentStep}
+        variant={variant}
+      />
    </div>
  );
 }
--- a/packages/ui/src/makerkit/version-updater.tsx
+++ b/packages/ui/src/makerkit/version-updater.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { useEffect, useState } from 'react';
+import { useState } from 'react';

 import { useQuery } from '@tanstack/react-query';
 import { RocketIcon } from 'lucide-react';
@@ -38,12 +38,10 @@ export function VersionUpdater(props: { intervalTimeInSecond?: number }) {
  const [dismissed, setDismissed] = useState(false);
  const [showDialog, setShowDialog] = useState<boolean>(false);

-  useEffect(() => {
-    setShowDialog(data?.didChange ?? false);
-  }, [data?.didChange]);
-
  if (!data?.didChange || dismissed) {
    return null;
+  } else {
+    setShowDialog(data?.didChange ?? false);
  }

  return (
--- a/packages/ui/src/shadcn/sidebar.tsx
+++ b/packages/ui/src/shadcn/sidebar.tsx
@@ -677,6 +677,7 @@ const SidebarMenuSkeleton: React.FC<
 > = ({ className, showIcon = false, ...props }) => {
  // Random width between 50 to 90%.
  const width = React.useMemo(() => {
+    // eslint-disable-next-line react-hooks/purity
    return `${Math.floor(Math.random() * 40) + 50}%`;
  }, []);

--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -3,6 +3,10 @@ packages:
  - packages/**
  - tooling/*

+catalog:
+  '@types/node': 24.9.1
+  '@types/react': 19.2.2
+
 onlyBuiltDependencies:
  - '@tailwindcss/oxide'
  - '@sentry/cli'
--- a/tooling/eslint/base.js
+++ b/tooling/eslint/base.js
@@ -1,17 +1,21 @@
+import { defineConfig } from '@eslint/config-helpers';
 import eslint from '@eslint/js';
-import turboConfig from 'eslint-config-turbo/flat';
+import turbo from 'eslint-config-turbo';
 import tsEsLint from 'typescript-eslint';

 import nextConfig from './nextjs.js';

-export default tsEsLint.config(
+export default defineConfig(
  eslint.configs.recommended,
+  tsEsLint.configs.recommended,
  nextConfig,
-  turboConfig,
  {
+    plugins: {
+      turbo,
+    },
    settings: {
      react: {
-        version: '19.0',
+        version: '19.2',
      },
    },
    languageOptions: {
--- a/tooling/eslint/package.json
+++ b/tooling/eslint/package.json
@@ -13,16 +13,16 @@
    "format": "prettier --check \"**/*.{js,json}\""
  },
  "dependencies": {
-    "@next/eslint-plugin-next": "15.5.5",
+    "@next/eslint-plugin-next": "16.0.0-beta.0",
    "@types/eslint": "9.6.1",
-    "eslint-config-next": "15.5.5",
+    "eslint-config-next": "16.0.0-beta.0",
    "eslint-config-turbo": "^2.5.8",
-    "typescript-eslint": "8.45.0"
+    "typescript-eslint": "8.46.2"
  },
  "devDependencies": {
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "eslint": "^9.35.0",
+    "eslint": "^9.38.0",
    "typescript": "^5.9.3"
  },
  "prettier": "@kit/prettier-config"
--- a/tooling/prettier/package.json
+++ b/tooling/prettier/package.json
@@ -11,7 +11,7 @@
  "dependencies": {
    "@trivago/prettier-plugin-sort-imports": "5.2.2",
    "prettier": "^3.6.2",
-    "prettier-plugin-tailwindcss": "^0.6.14"
+    "prettier-plugin-tailwindcss": "^0.7.1"
  },
  "devDependencies": {
    "@kit/tsconfig": "workspace:*",
--- a/turbo/generators/templates/env/generator.ts
+++ b/turbo/generators/templates/env/generator.ts
@@ -190,13 +190,13 @@ export function createEnvironmentVariablesGenerator(
      },
      {
        type: 'input',
-        name: 'values.NEXT_PUBLIC_SUPABASE_ANON_KEY',
-        message: `What is the Supabase anon key?\nFor more info: ${getUrlToDocs('NEXT_PUBLIC_SUPABASE_ANON_KEY')}\n`,
+        name: 'values.NEXT_PUBLIC_SUPABASE_PUBLIC_KEY',
+        message: `What is the Supabase public key?\nFor more info: ${getUrlToDocs('NEXT_PUBLIC_SUPABASE_PUBLIC_KEY')}\n`,
      },
      {
        type: 'input',
-        name: 'values.SUPABASE_SERVICE_ROLE_KEY',
-        message: `What is the Supabase Service Role Key?\nFor more info: ${getUrlToDocs('SUPABASE_SERVICE_ROLE_KEY')}\n`,
+        name: 'values.SUPABASE_SECRET_KEY',
+        message: `What is the Supabase secret key?\nFor more info: ${getUrlToDocs('SUPABASE_SECRET_KEY')}\n`,
      },
      {
        type: 'list',