markus/next-ory
1
0
Fork 0
mirror of https://codeberg.org/MarkusThielker/next-ory.git synced 2025-04-18 00:21:18 +00:00
Code Releases Packages Activity

Update RegistrationPage to use Suspense for consistent error handling.

Browse source 
Read: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
This commit is contained in:
dotX12 2025-01-26 16:58:13 +03:00
parent f25def20e9
commit 9b8b83c721
1 changed files with 30 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
authentication/src/app/flow/registration/page.tsx
View file

@ -1,6 +1,6 @@
'use client'; '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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Flow, HandleError, kratos } from '@/ory'; import { Flow, HandleError, kratos } from '@/ory';
import Link from 'next/link'; import Link from 'next/link';
@ -11,7 +11,15 @@ import { Button } from '@/components/ui/button';
import { Skeleton } from '@/components/ui/skeleton'; import { Skeleton } from '@/components/ui/skeleton';
import Image from 'next/image'; import Image from 'next/image';
export default function Registration() { export default function RegistrationPage() {
return (
<Suspense>
<Registration />
</Suspense>
)
}
function Registration() {
const [flow, setFlow] = useState<RegistrationFlow>(); const [flow, setFlow] = useState<RegistrationFlow>();
@ -31,7 +39,7 @@ export default function Registration() {
const handleError = useCallback((error: AxiosError) => { const handleError = useCallback((error: AxiosError) => {
const handle = HandleError(getFlow, setFlow, '/flow/registration', true, router); const handle = HandleError(getFlow, setFlow, '/flow/registration', true, router);
return handle(error); return handle(error);
}, [getFlow]); }, [getFlow, router]);
const createFlow = useCallback((returnTo: string | undefined) => { const createFlow = useCallback((returnTo: string | undefined) => {
kratos kratos
@ -65,19 +73,29 @@ export default function Registration() {
}; };
useEffect(() => { useEffect(() => {
const fetchFlow = async () => {
if (flow) {
return;
}
if (flow) { try {
return; if (flowId) {
} await getFlow(flowId);
return;
}
if (flowId) { createFlow(returnTo);
getFlow(flowId); } catch (err) {
return; console.error("Error in registration flow:", err);
} }
};
fetchFlow().catch((err) =>
console.error("Unhandled error in fetchFlow:", err)
);
}, [flowId, returnTo, flow, getFlow, createFlow]);
createFlow(returnTo);
}, [flowId, router, returnTo, flow]);
return ( return (
<Card className="flex flex-col items-center w-full max-w-sm p-4"> <Card className="flex flex-col items-center w-full max-w-sm p-4">