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