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

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