Update VerificationPage to use Suspense for consistent error handling.

Read: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

authentication/src/app/flow/verification/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, {Suspense, useCallback, useEffect, useState} from 'react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Flow, HandleError, kratos } from '@/ory';
 import { UpdateVerificationFlowBody, VerificationFlow } from '@ory/client';
@@ -11,8 +11,14 @@ import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
 import Image from 'next/image';
 
-export default function Verification() {
+export default function VerificationPage() {
-
+    return (
+        <Suspense>
+            <Verification />
+        </Suspense>
+    )
+}
+function Verification() {
     const [flow, setFlow] = useState<VerificationFlow>();
 
     const router = useRouter();
@@ -21,24 +27,26 @@ export default function Verification() {
     const flowId = params.get('flow') ?? undefined;
     const returnTo = params.get('return_to') ?? undefined;
 
-    const getFlow = useCallback((flowId: string) => {
+    const getFlow = useCallback(async (flowId: string) => {
-        return kratos
+        try {
-            .getVerificationFlow({ id: String(flowId) })
+            const { data } = await kratos.getVerificationFlow({ id: String(flowId) });
-            .then(({ data }) => setFlow(data))
+            setFlow(data);
-            .catch((err: AxiosError) => {
+        } catch (err) {
-                switch (err.response?.status) {
+            const error = err as AxiosError;
+            switch (error.response?.status) {
                 case 410:
                 case 403:
                     return router.push('/flow/verification');
             }
-                throw err;
+            throw error;
-            });
+        }
-    }, []);
+    }, [router]);
+
 
     const handleError = useCallback((error: AxiosError) => {
         const handle = HandleError(getFlow, setFlow, '/flow/verification', true, router);
         return handle(error);
-    }, [getFlow]);
+    }, [getFlow, router]);
 
     const createFlow = useCallback((returnTo: string | undefined) => {
         kratos
@@ -48,7 +56,7 @@ export default function Verification() {
                 router.push(`?flow=${data.id}`);
             })
             .catch(handleError);
-    }, [handleError]);
+    }, [handleError, router]);
 
     const updateFlow = async (body: UpdateVerificationFlowBody) => {
         kratos
@@ -63,42 +71,51 @@ export default function Verification() {
     };
 
     useEffect(() => {
-
+        const fetchFlow = async () => {
             if (flow) {
                 return;
             }
 
+            try {
                 if (flowId) {
-            getFlow(flowId);
+                    await getFlow(flowId);
                     return;
                 }
 
                 createFlow(returnTo);
+            } catch (err) {
+                console.error("Failed to fetch or create flow:", err);
+            }
+        };
+
+        fetchFlow().catch((err) =>
+            console.error("Error in fetchFlow effect:", err)
+        );
+    }, [flowId, router, returnTo, flow, createFlow, getFlow]);
+
 
-    }, [flowId, router, returnTo, flow]);
 
     return (
         <Card className="flex flex-col items-center w-full max-w-sm p-4">
-            <Image className="mt-10 mb-4"
+            <Image
+                className="mt-10 mb-4"
                 width="64"
                 height="64"
                 src="/mt-logo-orange.png"
-                   alt="Markus Thielker Intranet"/>
+                alt="Markus Thielker Intranet"
+            />
             <CardHeader className="flex flex-col items-center text-center space-y-4">
-                <CardTitle>
+                <CardTitle>Verify your account</CardTitle>
-                    Verify your account
-                </CardTitle>
                 <CardDescription className="max-w-xs">
-                    {flow?.ui.messages?.map(it => {
+                    {flow?.ui.messages?.map((it) => (
-                        return <span key={it.id}>{it.text}</span>;
+                        <span key={it.id}>{it.text}</span>
-                    })}
+                    ))}
                 </CardDescription>
             </CardHeader>
             <CardContent className="w-full">
-                {
+                {flow ? (
-                    flow ?
                     <Flow flow={flow} onSubmit={updateFlow} hideGlobalMessages />
-                        :
+                ) : (
                     <div className="flex flex-col space-y-4 mt-3">
                         <div className="flex flex-col space-y-2">
                             <Skeleton className="h-3 w-[80px] rounded-md" />
@@ -108,21 +125,21 @@ export default function Verification() {
                             <Skeleton className="h-4 w-[80px] rounded-md" />
                         </Button>
                     </div>
-                }
+                )}
             </CardContent>
-            {
+            {flow ? (
-                flow ?
                 <Button variant="link" asChild disabled={!flow}>
                     <Link
                         href={{ pathname: '/flow/login', query: { return_to: flow.return_to } }}
                         className="inline-flex space-x-2"
-                            passHref>
+                        passHref
+                    >
                         Back to login
                     </Link>
                 </Button>
-                    :
+            ) : (
                 <Skeleton className="h-3 w-[180px] rounded-md my-3.5" />
-            }
+            )}
         </Card>
     );
 }