Implement redirect control in multi-factor auth container

The update adds a rerouting functionality upon successful multi-factor authentication, replacing a console log action previously triggered upon success. The change enhances the authentication flow by redirecting users to a specified path upon validation. Additionally, minor refactorings are done such as replacing direct routing paths with path configs and adjusting import statements.

apps/web/app/auth/callback/error/page.tsx

@@ -1,9 +1,12 @@
+import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
 import { Button } from '@kit/ui/button';
 import { Trans } from '@kit/ui/trans';
 
+import pathsConfig from '~/config/paths.config';
+
 interface Params {
   searchParams: {
     error: string;
@@ -15,7 +18,7 @@ function AuthCallbackErrorPage({ searchParams }: Params) {
 
   // if there is no error, redirect the user to the sign-in page
   if (!error) {
-    redirect('/auth/sign-in');
+    redirect(pathsConfig.auth.signIn);
   }
 
   return (
@@ -32,15 +35,11 @@ function AuthCallbackErrorPage({ searchParams }: Params) {
         </Alert>
       </div>
 
-      <ResendLinkForm />
-
-      <div className={'flex flex-col space-y-2'}>
-        <Button variant={'ghost'}>
-          <a href={'/auth/sign-in'}>
-            <Trans i18nKey={'auth:signIn'} />
-          </a>
-        </Button>
-      </div>
+      <Button>
+        <Link href={pathsConfig.auth.signIn}>
+          <Trans i18nKey={'auth:signIn'} />
+        </Link>
+      </Button>
     </div>
   );
 }

apps/web/app/auth/sign-up/page.tsx

@@ -37,6 +37,7 @@ function SignUpPage({ searchParams }: Props) {
         providers={authConfig.providers}
         paths={{
           callback: pathsConfig.auth.callback,
+          appHome: pathsConfig.app.home,
         }}
         inviteToken={inviteToken}
       />

apps/web/app/auth/verify/page.tsx

@@ -8,6 +8,12 @@ import pathsConfig from '~/config/paths.config';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
+interface Props {
+  searchParams: {
+    next?: string;
+  };
+}
+
 export const generateMetadata = async () => {
   const i18n = await createI18nServerInstance();
 
@@ -16,7 +22,7 @@ export const generateMetadata = async () => {
   };
 };
 
-async function VerifyPage() {
+async function VerifyPage(props: Props) {
   const client = getSupabaseServerComponentClient();
   const needsMfa = await checkRequiresMultiFactorAuthentication(client);
 
@@ -24,10 +30,12 @@ async function VerifyPage() {
     redirect(pathsConfig.auth.signIn);
   }
 
+  const redirectPath = props.searchParams.next ?? pathsConfig.app.home;
+
   return (
     <MultiFactorChallengeContainer
-      onSuccess={() => {
-        console.log('2');
+      paths={{
+        redirectPath,
       }}
     />
   );

packages/features/auth/src/components/multi-factor-challenge-container.tsx

@@ -3,6 +3,8 @@
 import type { FormEventHandler } from 'react';
 import { useCallback, useEffect, useState } from 'react';
 
+import { useRouter } from 'next/navigation';
+
 import { useMutation } from '@tanstack/react-query';
 
 import useFetchAuthFactors from '@kit/supabase/hooks/use-fetch-mfa-factors';
@@ -17,14 +19,22 @@ import Spinner from '@kit/ui/spinner';
 import { Trans } from '@kit/ui/trans';
 
 export function MultiFactorChallengeContainer({
-  onSuccess,
+  paths,
 }: React.PropsWithChildren<{
-  onSuccess: () => void;
+  paths: {
+    redirectPath: string;
+  };
 }>) {
+  const router = useRouter();
+
   const [factorId, setFactorId] = useState('');
   const [verifyCode, setVerifyCode] = useState('');
   const verifyMFAChallenge = useVerifyMFAChallenge();
 
+  const onSuccess = useCallback(() => {
+    router.replace(paths.redirectPath);
+  }, [router, paths.redirectPath]);
+
   const onSubmitClicked: FormEventHandler<HTMLFormElement> = useCallback(
     (event) => {
       void (async () => {

packages/features/auth/src/components/sign-up-methods-container.tsx

@@ -2,8 +2,7 @@
 
 import type { Provider } from '@supabase/supabase-js';
 
-import { isBrowser } from '@supabase/ssr';
-
+import { isBrowser } from '@kit/shared/utils';
 import { Divider } from '@kit/ui/divider';
 import { If } from '@kit/ui/if';