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

Add Suspense to VerificationPage 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:59:10 +03:00
parent cd2781c736
commit b8e220bb48
1 changed files with 11 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
authentication/src/app/page.tsx
View file

@ -1,6 +1,7 @@
'use client';
import React, { useCallback, useEffect, useState } from 'react';
import { Suspense } from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import AccountSettings from '@/components/accountSettings';
import { HandleError, kratos, LogoutLink } from '@/ory';
@ -14,7 +15,14 @@ import { SettingsFlow, UpdateSettingsFlowBody } from '@ory/client';
import { toast } from 'sonner';
export default function Page() {
return (
<Suspense>
<PageContext />
</Suspense>
)
}
function PageContext() {
const onLogout = LogoutLink();
const [flow, setFlow] = useState<SettingsFlow>();
@ -54,17 +62,12 @@ export default function Page() {
updateSettingsFlowBody: body,
})
.then(({ data }) => {
// update flow object
setFlow(data);
// show toast for user feedback
const message = data.ui.messages?.pop();
if (message) {
toast.success(message.text);
}
// check if verification is needed
if (data.continue_with) {
for (const item of data.continue_with) {
switch (item.action) {
@ -75,7 +78,6 @@ export default function Page() {
}
}
// check if custom return page was specified
if (data.return_to) {
window.location.href = data.return_to;
return;
@ -85,7 +87,6 @@ export default function Page() {
};
useEffect(() => {
if (flow) {
return;
}
@ -96,15 +97,15 @@ export default function Page() {
}
createFlow(returnTo);
}, [flowId, router, returnTo, createFlow, getFlow]);
const addQueryParam = useCallback((name: string, value: string) => {
const addQueryParam = useCallback(
(name: string, value: string) => {
const newParams = new URLSearchParams(params.toString());
newParams.set(name, value);
router.push('?' + newParams.toString());
},
[params],
[params, router]
);
return (