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

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