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

.prettierignore

@@ -2,3 +2,7 @@ database.types.ts
 playwright-report
 *.hbs
 *.md
+dist
+build
+.next
+next-env.d.ts

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 {

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) {

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,
-  },
+  reactCompiler: true,
   devIndicators: {
     position: 'bottom-right',
   },

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"

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"

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();
 

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({

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
-        .locator('[data-test="join-team-form"] button[type="submit"]')
-        .click(),
-      this.page.waitForResponse((response) => {
-        return (
-          response.url().includes('/join') &&
-          response.request().method() === 'POST'
-        );
-      }),
-    ]);
+    const click = this.page
+      .locator('[data-test="join-team-form"] button[type="submit"]')
+      .click();
 
-    console.log('Invitation accepted');
+    const response = this.page.waitForResponse((response) => {
+      return (
+        response.url().includes('/join') &&
+        response.request().method() === 'POST'
+      );
+    });
+
+    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() {

apps/web/app/(marketing)/_components/site-header-account-section.tsx

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

apps/web/app/(marketing)/docs/_components/docs-navigation.tsx

@@ -29,54 +29,76 @@ function Node({
   const url = `${prefix}/${node.slug}`;
   const label = node.label ? node.label : node.title;
 
-  const Container = (props: React.PropsWithChildren) => {
-    if (node.collapsible) {
-      return (
-        <DocsNavigationCollapsible node={node} prefix={prefix}>
-          {props.children}
-        </DocsNavigationCollapsible>
-      );
-    }
-
-    return props.children;
-  };
-
-  const ContentContainer = (props: React.PropsWithChildren) => {
-    if (node.collapsible) {
-      return <CollapsibleContent>{props.children}</CollapsibleContent>;
-    }
-
-    return props.children;
-  };
-
-  const Trigger = () => {
-    if (node.collapsible) {
-      return (
-        <CollapsibleTrigger asChild>
-          <SidebarMenuItem>
-            <SidebarMenuButton>
-              {label}
-              <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </CollapsibleTrigger>
-      );
-    }
-
-    return <DocsNavLink label={label} url={url} />;
-  };
-
   return (
-    <Container>
-      <Trigger />
+    <NodeContainer node={node} prefix={prefix}>
+      <NodeTrigger node={node} label={label} url={url} />
 
-      <ContentContainer>
+      <NodeContentContainer node={node}>
         <Tree pages={node.children ?? []} level={level + 1} prefix={prefix} />
-      </ContentContainer>
-    </Container>
+      </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}>
+        {children}
+      </DocsNavigationCollapsible>
+    );
+  }
+
+  return children;
+}
+
+function NodeTrigger({
+  node,
+  label,
+  url,
+}: {
+  node: Cms.ContentItem;
+  label: string;
+  url: string;
+}) {
+  if (node.collapsible) {
+    return (
+      <CollapsibleTrigger asChild>
+        <SidebarMenuItem>
+          <SidebarMenuButton>
+            {label}
+            <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </CollapsibleTrigger>
+    );
+  }
+
+  return <DocsNavLink label={label} url={url} />;
+}
+
 function Tree({
   pages,
   level,

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]);
 

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;
   }>;
 }

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 (

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 () => {

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>

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>
+  );
+}

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,
+  };
+}

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>

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

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]);
 }

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,
   });
 

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,18 +90,28 @@ function getRemotePatterns() {
     });
   }
 
-  return IS_PRODUCTION
-    ? remotePatterns
-    : [
-        {
-          protocol: 'http',
-          hostname: '127.0.0.1',
-        },
-        {
-          protocol: 'http',
-          hostname: 'localhost',
-        },
-      ];
+  if (IS_PRODUCTION) {
+    return {
+      remotePatterns,
+    };
+  }
+
+  remotePatterns.push(
+    ...[
+      {
+        protocol: 'http',
+        hostname: '127.0.0.1',
+      },
+      {
+        protocol: 'http',
+        hostname: 'localhost',
+      },
+    ],
+  );
+
+  return {
+    remotePatterns,
+  };
 }
 
 async function getRedirects() {

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"
   },

apps/web/proxy.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) {

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"
 }

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.",

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",

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...",

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",

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": {
     "*": {

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": {

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
-        onClose={props.onClose}
-        checkoutToken={props.checkoutToken}
-      />
+      <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);
-    }
-
-    return (
-      <Suspense fallback={fallback}>
-        {/* @ts-expect-error: weird TS */}
-        <LoadedComponent
+  switch (props.provider) {
+    case 'stripe':
+      return (
+        <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'
       }
     />

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 (

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,

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": {

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,

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": {

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": {
     "*": {

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": {

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": {

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": {

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:*",

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>
 

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>

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",

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" />
+  );
+}

packages/features/accounts/src/components/personal-account-settings/account-settings-container.tsx

@@ -156,23 +156,26 @@ export function PersonalAccountSettingsContainer(
         </CardContent>
       </Card>
 
-      <If condition={props.features.enableAccountLinking}>
-        <Card>
-          <CardHeader>
-            <CardTitle>
-              <Trans i18nKey={'account:linkedAccounts'} />
-            </CardTitle>
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            <Trans i18nKey={'account:linkedAccounts'} />
+          </CardTitle>
 
-            <CardDescription>
-              <Trans i18nKey={'account:linkedAccountsDescription'} />
-            </CardDescription>
-          </CardHeader>
+          <CardDescription>
+            <Trans i18nKey={'account:linkedAccountsDescription'} />
+          </CardDescription>
+        </CardHeader>
 
-          <CardContent>
-            <LinkAccountsList providers={props.providers} />
-          </CardContent>
-        </Card>
-      </If>
+        <CardContent>
+          <LinkAccountsList
+            providers={props.providers}
+            enabled={props.features.enableAccountLinking}
+            showEmailOption
+            showPasswordOption
+          />
+        </CardContent>
+      </Card>
 
       <If condition={props.features.enableAccountDeletion}>
         <Card className={'border-destructive'}>

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) {
-  return zodResolver(
-    UpdateEmailSchema.withTranslation(errorMessage).refine((schema) => {
-      return schema.email !== currentEmail;
-    }),
-  );
+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(
+      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>

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>
-                  <OauthProviderLogoImage providerId={identity.provider} />
+                  <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>
+  );
+}

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, {
-      success: t(`updatePasswordSuccess`),
-      error: t(`updatePasswordError`),
-      loading: t(`updatePasswordLoading`),
-    });
+    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'}>

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": {

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',

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}

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"
   },

packages/features/auth/src/captcha/client/captcha-field.tsx

@@ -72,10 +72,10 @@ export function CaptchaField<
   const controller =
     'control' in props && props.control
       ? // eslint-disable-next-line react-hooks/rules-of-hooks
-      useController({
-        control: props.control,
-        name: props.name,
-      })
+        useController({
+          control: props.control,
+          name: props.name,
+        })
       : null;
 
   if (!siteKey) {

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>

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

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'} />
-        </Heading>
+        {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: {

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:"
   }
 }

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) {

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",

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

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);
     },
     {

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"
   },

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": {

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:*",

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": {

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"
   },

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,
           },
         ],
       };

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": {

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": {
     "*": {

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": {
     "*": {

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": {

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": {

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": {
     "*": {

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": {

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

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();
+    };
+  }, []);
 }
 
 /**

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,
     },
   };
 }

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[];
 };

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"

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([]);
     }
 

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'}
+    />
+  );
+}

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,25 +44,21 @@ export function ImageUploader(
     [props],
   );
 
-  const Input = () => (
-    <ImageUploadInput
-      {...control}
-      accept={'image/*'}
-      className={'absolute h-full w-full'}
-      visible={false}
-      multiple={false}
-      onValueChange={onValueChange}
-    />
-  );
-
-  useEffect(() => {
+  if (props.value !== image) {
     setImage(props.value);
-  }, [props.value]);
+  }
 
   if (!image) {
     return (
       <FallbackImage descriptionSection={props.children}>
-        <Input />
+        <ImageUploadInput
+          {...control}
+          accept={'image/*'}
+          className={'absolute h-full w-full'}
+          visible={false}
+          multiple={false}
+          onValueChange={onValueChange}
+        />
       </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>

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);

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',

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,6 +121,66 @@ export function SidebarContent({
   return <div className={className}>{children}</div>;
 }
 
+function SidebarGroupWrapper({
+  id,
+  sidebarCollapsed,
+  collapsible,
+  isGroupCollapsed,
+  setIsGroupCollapsed,
+  label,
+}: {
+  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',
+    {
+      'py-2.5': !sidebarCollapsed,
+    },
+  );
+
+  if (collapsible) {
+    return (
+      <button
+        aria-expanded={!isGroupCollapsed}
+        aria-controls={id}
+        onClick={() => setIsGroupCollapsed(!isGroupCollapsed)}
+        className={className}
+      >
+        <span
+          className={'text-muted-foreground text-xs font-semibold uppercase'}
+        >
+          {label}
+        </span>
+
+        <If condition={collapsible}>
+          <ChevronDown
+            className={cn(`h-3 transition duration-300`, {
+              'rotate-180': !isGroupCollapsed,
+            })}
+          />
+        </If>
+      </button>
+    );
+  }
+
+  if (sidebarCollapsed) {
+    return null;
+  }
+
+  return (
+    <div className={className}>
+      <span className={'text-muted-foreground text-xs font-semibold uppercase'}>
+        {label}
+      </span>
+    </div>
+  );
+}
+
 export function SidebarGroup({
   label,
   collapsed = false,
@@ -138,61 +195,20 @@ export function SidebarGroup({
   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 = () => {
-    const className = cn(
-      'px-container group flex items-center justify-between space-x-2.5',
-      {
-        'py-2.5': !sidebarCollapsed,
-      },
-    );
-
-    if (collapsible) {
-      return (
-        <button
-          aria-expanded={!isGroupCollapsed}
-          aria-controls={id}
-          onClick={() => setIsGroupCollapsed(!isGroupCollapsed)}
-          className={className}
-        >
-          <Title>{label}</Title>
-
-          <If condition={collapsible}>
-            <ChevronDown
-              className={cn(`h-3 transition duration-300`, {
-                'rotate-180': !isGroupCollapsed,
-              })}
-            />
-          </If>
-        </button>
-      );
-    }
-
-    return (
-      <div className={className}>
-        <Title>{label}</Title>
-      </div>
-    );
-  };
-
   return (
     <div
       className={cn('flex flex-col', {
         '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'}>

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,6 +12,54 @@ type Variant = 'numbers' | 'default' | 'dots';
 
 const classNameBuilder = getClassNameBuilder();
 
+function Steps({
+  steps,
+  currentStep,
+  variant,
+}: {
+  steps: string[];
+  currentStep: number;
+  variant?: Variant;
+}) {
+  return steps.map((labelOrKey, index) => {
+    const selected = currentStep === index;
+    const complete = currentStep > index;
+
+    const className = classNameBuilder({
+      selected,
+      variant,
+      complete,
+    });
+
+    const isNumberVariant = variant === 'numbers';
+    const isDotsVariant = variant === 'dots';
+
+    const labelClassName = cn({
+      ['px-1.5 py-2 text-xs']: !isNumberVariant,
+      ['hidden']: isDotsVariant,
+    });
+
+    const { label, number } = getStepLabel(labelOrKey, index);
+
+    return (
+      <Fragment key={index}>
+        <div aria-selected={selected} className={className}>
+          <span className={labelClassName}>
+            {number}
+            <If condition={!isNumberVariant}>. {label}</If>
+          </span>
+        </div>
+
+        <If condition={isNumberVariant}>
+          <StepDivider selected={selected} complete={complete}>
+            {label}
+          </StepDivider>
+        </If>
+      </Fragment>
+    );
+  });
+}
+
 /**
  * Renders a stepper component with multiple steps.
  *
@@ -27,46 +75,6 @@ export function Stepper(props: {
 }) {
   const variant = props.variant ?? 'default';
 
-  const Steps = useCallback(() => {
-    return props.steps.map((labelOrKey, index) => {
-      const selected = props.currentStep === index;
-      const complete = props.currentStep > index;
-
-      const className = classNameBuilder({
-        selected,
-        variant,
-        complete,
-      });
-
-      const isNumberVariant = variant === 'numbers';
-      const isDotsVariant = variant === 'dots';
-
-      const labelClassName = cn({
-        ['px-1.5 py-2 text-xs']: !isNumberVariant,
-        ['hidden']: isDotsVariant,
-      });
-
-      const { label, number } = getStepLabel(labelOrKey, index);
-
-      return (
-        <Fragment key={index}>
-          <div aria-selected={selected} className={className}>
-            <span className={labelClassName}>
-              {number}
-              <If condition={!isNumberVariant}>. {label}</If>
-            </span>
-          </div>
-
-          <If condition={isNumberVariant}>
-            <StepDivider selected={selected} complete={complete}>
-              {label}
-            </StepDivider>
-          </If>
-        </Fragment>
-      );
-    });
-  }, [props.steps, props.currentStep, variant]);
-
   // If there are no steps, don't render anything.
   if (props.steps.length < 2) {
     return null;
@@ -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>
   );
 }

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 (

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}%`;
   }, []);
 

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'

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: {

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"

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:*",

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',