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

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

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

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

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

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

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

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

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

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

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

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

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

      await page.waitForTimeout(250);

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

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

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

      await auth.updatePassword(newPassword);

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

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

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

-    await Promise.all([
-      this.page
-        .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() {
--- a/apps/web/app/(marketing)/_components/site-header-account-section.tsx
+++ b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
@@ -21,10 +21,12 @@ const ModeToggle = dynamic(
  { ssr: false },
 );

-const MobileModeToggle = dynamic(() =>
-  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 = {
--- a/apps/web/app/(marketing)/docs/_components/docs-navigation.tsx
+++ b/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,
--- a/apps/web/app/(marketing)/docs/_components/floating-docs-navigation.tsx
+++ b/apps/web/app/(marketing)/docs/_components/floating-docs-navigation.tsx
@@ -1,6 +1,6 @@
 'use client';

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

 import { usePathname } from 'next/navigation';

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        // If user is not logged in, redirect to sign in page.
        if (!data?.claims) {
--- a/apps/web/public/locales/en/account.json
+++ b/apps/web/public/locales/en/account.json
@@ -126,15 +126,24 @@
  "accountLinked": "Account linked",
  "unlinkAccount": "Unlink Account",
  "failedToLinkAccount": "Failed to link account",
-  "availableAccounts": "Available Accounts",
-  "availableAccountsDescription": "Connect other authentication providers to your account",
-  "alreadyLinkedAccountsDescription": "You have already linked these accounts",
+  "availableMethods": "Available Methods",
+  "availableMethodsDescription": "Connect your account to one or more of the following methods to sign in",
+  "linkedMethods": "Sign-in methods linked to your account",
+  "alreadyLinkedMethodsDescription": "You have already linked these accounts",
  "confirmUnlinkAccount": "You are unlinking this provider.",
  "unlinkAccountConfirmation": "Are you sure you want to unlink this provider from your account? This action cannot be undone.",
  "unlinkingAccount": "Unlinking account...",
  "accountUnlinked": "Account successfully unlinked",
  "linkEmailPassword": "Email & Password",
-  "linkEmailPasswordDescription": "Add an email and password to your account for additional sign-in options",
-  "noAccountsAvailable": "No additional accounts available to link",
-  "linkAccountDescription": "Link account to sign in with {{provider}}"
+  "linkEmailPasswordDescription": "Add password authentication to your account",
+  "noAccountsAvailable": "No other method is available at this time",
+  "linkAccountDescription": "Link account to sign in with {{provider}}",
+  "updatePasswordDescription": "Add password authentication to your account",
+  "setEmailAddress": "Set Email Address",
+  "setEmailDescription": "Add an email address to your account",
+  "setEmailSuccess": "Email set successfully",
+  "setEmailSuccessMessage": "We sent you an email to confirm your email address. Please check your inbox and click on the link to confirm your email address.",
+  "setEmailLoading": "Setting your email...",
+  "setEmailError": "Email not set. Please try again",
+  "emailNotChanged": "Your email address has not changed"
 }
--- a/apps/web/public/locales/en/auth.json
+++ b/apps/web/public/locales/en/auth.json
@@ -78,6 +78,8 @@
  "methodOauthWithProvider": "<provider>{{provider}}</provider>",
  "methodDefault": "another method",
  "existingAccountHint": "You previously signed in with <method>{{method}}</method>. <signInLink>Already have an account?</signInLink>",
+  "linkAccountToSignIn": "Link account to sign in",
+  "linkAccountToSignInDescription": "Add one or more sign-in methods to your account",
  "errors": {
    "Invalid login credentials": "The credentials entered are invalid",
    "User already registered": "This credential is already in use. Please try with another one.",
--- a/apps/web/public/locales/en/common.json
+++ b/apps/web/public/locales/en/common.json
@@ -41,8 +41,9 @@
  "contactUs": "Contact Us",
  "loading": "Loading. Please wait...",
  "yourAccounts": "Your Accounts",
-  "continue": "Continue",
+  "continueKey": "Continue",
  "skip": "Skip",
+  "info": "Info",
  "signedInAs": "Signed in as",
  "pageOfPages": "Page {{page}} of {{total}}",
  "showingRecordCount": "Showing {{pageSize}} of {{totalCount}} rows",
--- a/apps/web/public/locales/en/teams.json
+++ b/apps/web/public/locales/en/teams.json
@@ -151,8 +151,8 @@
  "renewInvitationErrorDescription": "We encountered an error renewing the invitation. Please try again.",
  "signInWithDifferentAccount": "Sign in with a different account",
  "signInWithDifferentAccountDescription": "If you wish to accept the invitation with a different account, please sign out and back in with the account you wish to use.",
-  "acceptInvitationHeading": "Accept Invitation to join {{accountName}}",
-  "acceptInvitationDescription": "You have been invited to join the team {{accountName}}. If you wish to accept the invitation, please click the button below.",
+  "acceptInvitationHeading": "Join {{accountName}}",
+  "acceptInvitationDescription": "Click the button below to accept the invitation to join {{accountName}}",
  "continueAs": "Continue as {{email}}",
  "joinTeamAccount": "Join Team",
  "joiningTeam": "Joining team...",