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 LoginPage 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:57:58 +03:00
parent 015f04b76a
commit 55900bb460
1 changed files with 80 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

156
authentication/src/app/flow/login/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, LogoutLink } from '@/ory'; import { Flow, HandleError, kratos, LogoutLink } from '@/ory';
import Link from 'next/link'; import Link from 'next/link';
@ -11,8 +11,15 @@ import Image from 'next/image';
import { Skeleton } from '@/components/ui/skeleton'; import { Skeleton } from '@/components/ui/skeleton';
import { AxiosError } from 'axios'; import { AxiosError } from 'axios';
export default function Login() { export default function LoginPage() {
return (
<Suspense>
<Login />
</Suspense>
)
}
function Login() {
const [flow, setFlow] = useState<LoginFlow>(); const [flow, setFlow] = useState<LoginFlow>();
const router = useRouter(); const router = useRouter();
@ -65,19 +72,27 @@ export default function Login() {
}; };
useEffect(() => { useEffect(() => {
const fetchFlow = async () => {
if (flow) {
return;
}
if (flow) { try {
return; if (flowId) {
} await getFlow(flowId);
return;
}
if (flowId) { createFlow(aal, refresh, returnTo, loginChallenge);
getFlow(flowId).then(); } catch (err) {
return; console.error("Error in registration flow:", err);
} }
};
createFlow(aal, refresh, returnTo, loginChallenge); fetchFlow().catch((err) =>
console.error("Unhandled error in fetchFlow:", err)
}, [flowId, router, aal, refresh, returnTo, createFlow, loginChallenge, getFlow]); );
}, [flowId, router, aal, refresh, returnTo, createFlow, loginChallenge, getFlow, 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">
@ -88,23 +103,20 @@ export default function Login() {
alt="Markus Thielker Intranet"/> alt="Markus Thielker Intranet"/>
<CardHeader className="flex flex-col items-center text-center space-y-4"> <CardHeader className="flex flex-col items-center text-center space-y-4">
{ {
flow ? flow ? (
<div className="flex flex-col space-y-4"> <div className="flex flex-col space-y-4">
<CardTitle>{ <CardTitle>
(() => { {flow.refresh
if (flow?.refresh) { ? 'Confirm Action'
return 'Confirm Action'; : flow.requested_aal === 'aal2'
} else if (flow?.requested_aal === 'aal2') { ? 'Two-Factor Authentication'
return 'Two-Factor Authentication'; : 'Welcome'}
}
return 'Welcome';
})()}
</CardTitle> </CardTitle>
<CardDescription className="max-w-xs"> <CardDescription className="max-w-xs">
Log in to the Intranet to access all locally hosted applications. Log in to the Intranet to access all locally hosted applications.
</CardDescription> </CardDescription>
</div> </div>
: ) : (
<div className="flex flex-col space-y-6"> <div className="flex flex-col space-y-6">
<Skeleton className="h-6 w-full rounded-md"/> <Skeleton className="h-6 w-full rounded-md"/>
<div className="flex flex-col space-y-2"> <div className="flex flex-col space-y-2">
@ -112,64 +124,56 @@ export default function Login() {
<Skeleton className="h-3 w-[250px] rounded-md"/> <Skeleton className="h-3 w-[250px] rounded-md"/>
</div> </div>
</div> </div>
)
} }
</CardHeader> </CardHeader>
<CardContent className="w-full"> <CardContent className="w-full">
{ {flow ? (
flow <Flow flow={flow} onSubmit={updateFlow}/>
? <Flow flow={flow} onSubmit={updateFlow}/>
: (
<div className="flex flex-col space-y-4 mt-4">
<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>
<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?.requested_aal === 'aal2' || flow?.requested_aal === 'aal3' || flow?.refresh ? (
<Button onClick={onLogout} variant="link">
Log out
</Button>
) : ( ) : (
<div className="flex flex-col"> <div className="flex flex-col space-y-4 mt-4">
{ <div className="flex flex-col space-y-2">
flow ? <Skeleton className="h-3 w-[80px] rounded-md"/>
<Button variant="link" asChild><Link <Skeleton className="h-8 w-full rounded-md"/>
href={{ pathname: '/flow/recovery', query: { return_to: flow.return_to } }} </div>
className="text-orange-600" <div className="flex flex-col space-y-2">
passHref> <Skeleton className="h-3 w-[80px] rounded-md"/>
Forgot your password? <Skeleton className="h-8 w-full rounded-md"/>
</Link> </div>
</Button> <Button disabled>
: <Skeleton className="h-4 w-[80px] rounded-md"/>
<Skeleton className="h-3 w-[180px] rounded-md my-3.5"/> </Button>
}
{
flow ?
<Button variant="link" asChild disabled={!flow}>
<Link
href={{ pathname: '/flow/registration', query: { return_to: flow.return_to } }}
className="inline-flex space-x-2"
passHref>
Create an account
</Link>
</Button>
:
<Skeleton className="h-3 w-[180px] rounded-md my-3.5"/>
}
</div> </div>
) )}
} </CardContent>
{flow?.requested_aal === 'aal2' || flow?.requested_aal === 'aal3' || flow?.refresh ? (
<Button onClick={onLogout} variant="link">
Log out
</Button>
) : (
<div className="flex flex-col">
{flow ? (
<Button variant="link" asChild>
<Link href={{ pathname: '/flow/recovery', query: { return_to: flow.return_to } }}
className="text-orange-600" passHref>
Forgot your password?
</Link>
</Button>
) : (
<Skeleton className="h-3 w-[180px] rounded-md my-3.5"/>
)}
{flow ? (
<Button variant="link" asChild disabled={!flow}>
<Link href={{ pathname: '/flow/registration', query: { return_to: flow.return_to } }}
className="inline-flex space-x-2" passHref>
Create an account
</Link>
</Button>
) : (
<Skeleton className="h-3 w-[180px] rounded-md my-3.5"/>
)}
</div>
)}
</Card> </Card>
); );
} }