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) => {
-        return kratos
-            .getVerificationFlow({ id: String(flowId) })
-            .then(({ data }) => setFlow(data))
-            .catch((err: AxiosError) => {
-                switch (err.response?.status) {
-                    case 410:
-                    case 403:
-                        return router.push('/flow/verification');
-                }
-                throw err;
-            });
-    }, []);
+    const getFlow = useCallback(async (flowId: string) => {
+        try {
+            const { data } = await kratos.getVerificationFlow({ id: String(flowId) });
+            setFlow(data);
+        } catch (err) {
+            const error = err as AxiosError;
+            switch (error.response?.status) {
+                case 410:
+                case 403:
+                    return router.push('/flow/verification');
+            }
+            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,66 +71,75 @@ export default function Verification() {
     };
 
     useEffect(() => {
+        const fetchFlow = async () => {
+            if (flow) {
+                return;
+            }
 
-        if (flow) {
-            return;
-        }
+            try {
+                if (flowId) {
+                    await getFlow(flowId);
+                    return;
+                }
 
-        if (flowId) {
-            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]);
 
-        createFlow(returnTo);
 
-    }, [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"
-                   width="64"
-                   height="64"
-                   src="/mt-logo-orange.png"
-                   alt="Markus Thielker Intranet"/>
+            <Image
+                className="mt-10 mb-4"
+                width="64"
+                height="64"
+                src="/mt-logo-orange.png"
+                alt="Markus Thielker Intranet"
+            />
             <CardHeader className="flex flex-col items-center text-center space-y-4">
-                <CardTitle>
-                    Verify your account
-                </CardTitle>
+                <CardTitle>Verify your account</CardTitle>
                 <CardDescription className="max-w-xs">
-                    {flow?.ui.messages?.map(it => {
-                        return <span key={it.id}>{it.text}</span>;
-                    })}
+                    {flow?.ui.messages?.map((it) => (
+                        <span key={it.id}>{it.text}</span>
+                    ))}
                 </CardDescription>
             </CardHeader>
             <CardContent className="w-full">
-                {
-                    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"/>
-                                <Skeleton className="h-8 w-full rounded-md"/>
-                            </div>
-                            <Button disabled>
-                                <Skeleton className="h-4 w-[80px] rounded-md"/>
-                            </Button>
+                {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" />
+                            <Skeleton className="h-8 w-full rounded-md" />
                         </div>
-                }
+                        <Button disabled>
+                            <Skeleton className="h-4 w-[80px] rounded-md" />
+                        </Button>
+                    </div>
+                )}
             </CardContent>
-            {
-                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>
-                            Back to login
-                        </Link>
-                    </Button>
-                    :
-                    <Skeleton className="h-3 w-[180px] rounded-md my-3.5"/>
-            }
+            {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
+                    >
+                        Back to login
+                    </Link>
+                </Button>
+            ) : (
+                <Skeleton className="h-3 w-[180px] rounded-md my-3.5" />
+            )}
         </Card>
     );
 }