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/packages/features/accounts/package.json
+++ b/packages/features/accounts/package.json
@@ -34,17 +34,17 @@
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
    "@radix-ui/react-icons": "^1.3.2",
-    "@supabase/supabase-js": "2.58.0",
-    "@tanstack/react-query": "5.90.2",
-    "@types/react": "19.1.16",
-    "@types/react-dom": "19.1.9",
-    "lucide-react": "^0.544.0",
-    "next": "15.5.5",
+    "@supabase/supabase-js": "2.76.1",
+    "@tanstack/react-query": "5.90.5",
+    "@types/react": "catalog:",
+    "@types/react-dom": "19.2.2",
+    "lucide-react": "^0.546.0",
+    "next": "16.0.0",
    "next-themes": "0.4.6",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
-    "react-hook-form": "^7.63.0",
-    "react-i18next": "^16.0.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-hook-form": "^7.65.0",
+    "react-i18next": "^16.1.4",
    "zod": "^3.25.74"
  },
  "prettier": "@kit/prettier-config",
--- a/packages/features/accounts/src/components/account-selector.tsx
+++ b/packages/features/accounts/src/components/account-selector.tsx
@@ -68,27 +68,9 @@ export function AccountSelector({
    return selectedAccount ?? PERSONAL_ACCOUNT_SLUG;
  }, [selectedAccount]);

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

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

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

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

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

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

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

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

 function UserAvatar(props: { pictureUrl?: string }) {
  return (
-    <Avatar className={'rounded-xs h-6 w-6'}>
+    <Avatar className={'h-6 w-6 rounded-xs'}>
      <AvatarImage src={props.pictureUrl} />
    </Avatar>
  );
 }
+
+function Icon({ selected }: { selected: boolean }) {
+  return (
+    <CheckCircle
+      className={cn('ml-auto h-4 w-4', selected ? 'opacity-100' : 'opacity-0')}
+    />
+  );
+}
+
+function PersonalAccountAvatar({ pictureUrl }: { pictureUrl?: string | null }) {
+  return pictureUrl ? (
+    <UserAvatar pictureUrl={pictureUrl} />
+  ) : (
+    <PersonIcon className="h-5 w-5" />
+  );
+}
--- a/packages/features/accounts/src/components/personal-account-settings/account-settings-container.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/account-settings-container.tsx
@@ -156,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'}>
--- a/packages/features/accounts/src/components/personal-account-settings/email/update-email-form.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/email/update-email-form.tsx
@@ -27,26 +27,46 @@ import { Trans } from '@kit/ui/trans';

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

-function createEmailResolver(currentEmail: string, errorMessage: string) {
-  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>
--- a/packages/features/accounts/src/components/personal-account-settings/link-accounts/link-accounts-list.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/link-accounts/link-accounts-list.tsx
@@ -1,11 +1,14 @@
 'use client';

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

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

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

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

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

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

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

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

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

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

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

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

          <div className="flex flex-col space-y-2">
            {connectedIdentities.map((identity) => (
-              <Item key={identity.id} variant="outline">
+              <Item key={identity.id} variant="muted">
                <ItemMedia>
-                  <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>
+  );
+}
--- a/packages/features/accounts/src/components/personal-account-settings/password/update-password-form.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/password/update-password-form.tsx
@@ -2,9 +2,11 @@

 import { useState } from 'react';

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

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

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

-    toast.promise(() => promise, {
-      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'}>
--- a/packages/features/admin/package.json
+++ b/packages/features/admin/package.json
@@ -20,15 +20,15 @@
    "@kit/ui": "workspace:*",
    "@makerkit/data-loader-supabase-core": "^0.0.10",
    "@makerkit/data-loader-supabase-nextjs": "^1.2.5",
-    "@supabase/supabase-js": "2.58.0",
-    "@tanstack/react-query": "5.90.2",
+    "@supabase/supabase-js": "2.76.1",
+    "@tanstack/react-query": "5.90.5",
    "@tanstack/react-table": "^8.21.3",
-    "@types/react": "19.1.16",
-    "lucide-react": "^0.544.0",
-    "next": "15.5.5",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
-    "react-hook-form": "^7.63.0",
+    "@types/react": "catalog:",
+    "lucide-react": "^0.546.0",
+    "next": "16.0.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-hook-form": "^7.65.0",
    "zod": "^3.25.74"
  },
  "exports": {
--- a/packages/features/admin/src/components/admin-accounts-table.tsx
+++ b/packages/features/admin/src/components/admin-accounts-table.tsx
@@ -6,7 +6,7 @@ import { usePathname, useRouter } from 'next/navigation';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { ColumnDef } from '@tanstack/react-table';
 import { EllipsisVertical } from 'lucide-react';
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';

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

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

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

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

 import { useRouter } from 'next/navigation';

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

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

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

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

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

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

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

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

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

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

-  if (updateUser.data && !updateUser.isPending) {
-    return <SuccessState redirectTo={params.redirectTo} />;
-  }
-
  return (
    <div className={'flex w-full flex-col space-y-6'}>
      <div className={'flex justify-center'}>
-        <Heading level={5} className={'tracking-tight'}>
-          <Trans i18nKey={'auth:passwordResetLabel'} />
-        </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: {
--- a/packages/features/notifications/package.json
+++ b/packages/features/notifications/package.json
@@ -19,13 +19,13 @@
    "@kit/supabase": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
-    "@supabase/supabase-js": "2.58.0",
-    "@tanstack/react-query": "5.90.2",
-    "@types/react": "19.1.16",
-    "lucide-react": "^0.544.0",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
-    "react-i18next": "^16.0.0"
+    "@supabase/supabase-js": "2.76.1",
+    "@tanstack/react-query": "5.90.5",
+    "@types/react": "catalog:",
+    "lucide-react": "^0.546.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-i18next": "^16.1.4"
  },
  "prettier": "@kit/prettier-config",
  "typesVersions": {
@@ -34,5 +34,8 @@
        "src/*"
      ]
    }
+  },
+  "dependencies": {
+    "@types/node": "catalog:"
  }
 }
--- a/packages/features/notifications/src/components/notifications-popover.tsx
+++ b/packages/features/notifications/src/components/notifications-popover.tsx
@@ -116,7 +116,7 @@ export function NotificationsPopover(params: {

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

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

          <InvitationSubmitButton
--- a/packages/features/team-accounts/src/schema/create-team.schema.ts
+++ b/packages/features/team-accounts/src/schema/create-team.schema.ts
@@ -25,7 +25,6 @@ export const TeamNameSchema = z
  .max(50)
  .refine(
    (name) => {
-      console.log(name);
      return !SPECIAL_CHARACTERS_REGEX.test(name);
    },
    {