mirror of
https://codeberg.org/MarkusThielker/next-ory.git
synced 2025-07-04 13:59:17 +00:00
Initial commit
This commit is contained in:
Markus Thielker
commit
a74e7f3ebd
84 changed files with 11089 additions and 0 deletions
88
authentication/src/app/flow/consent/page.tsx
Normal file
88
authentication/src/app/flow/consent/page.tsx
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
'use server';
|
||||
|
||||
import React from 'react';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import getHydra from '@/ory/sdk/hydra';
|
||||
import { OAuth2ConsentRequest, OAuth2RedirectTo } from '@ory/client';
|
||||
import ConsentForm from '@/components/consentForm';
|
||||
import { redirect } from 'next/navigation';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
export default async function Consent({ searchParams }: { searchParams: { consent_challenge: string } }) {
|
||||
|
||||
const consentChallenge = searchParams.consent_challenge ?? undefined;
|
||||
let consentRequest: OAuth2ConsentRequest | undefined = undefined;
|
||||
|
||||
const onAccept = async (challenge: string, scopes: string[], remember: boolean) => {
|
||||
'use server';
|
||||
|
||||
const hydra = await getHydra();
|
||||
const response = await hydra
|
||||
.acceptOAuth2ConsentRequest({
|
||||
consentChallenge: challenge,
|
||||
acceptOAuth2ConsentRequest: {
|
||||
grant_scope: scopes,
|
||||
remember: remember,
|
||||
remember_for: 3600,
|
||||
},
|
||||
})
|
||||
.then(({ data }) => data)
|
||||
.catch((_) => {
|
||||
toast.error('Something unexpected went wrong.');
|
||||
});
|
||||
|
||||
if (!response) {
|
||||
return redirect('/');
|
||||
}
|
||||
|
||||
return redirect(response.redirect_to);
|
||||
};
|
||||
|
||||
const onReject = async (challenge: string) => {
|
||||
'use server';
|
||||
|
||||
const hydra = await getHydra();
|
||||
const response: OAuth2RedirectTo | void = await hydra
|
||||
.rejectOAuth2ConsentRequest({
|
||||
consentChallenge: challenge,
|
||||
})
|
||||
.then(({ data }) => data)
|
||||
.catch((_) => {
|
||||
toast.error('Something unexpected went wrong.');
|
||||
});
|
||||
|
||||
if (!response) {
|
||||
return redirect('/');
|
||||
}
|
||||
|
||||
return redirect(response.redirect_to);
|
||||
};
|
||||
|
||||
if (!consentChallenge) {
|
||||
return;
|
||||
}
|
||||
|
||||
const hydra = await getHydra();
|
||||
await hydra
|
||||
.getOAuth2ConsentRequest({ consentChallenge })
|
||||
.then(({ data }) => {
|
||||
if (data.skip) {
|
||||
onAccept(consentChallenge, data.requested_scope!, false);
|
||||
return;
|
||||
}
|
||||
consentRequest = data;
|
||||
});
|
||||
|
||||
if (!consentRequest) {
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="flex flex-col items-center w-full max-w-sm p-4">
|
||||
<ConsentForm
|
||||
request={consentRequest}
|
||||
onAccept={onAccept}
|
||||
onReject={onReject}/>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
71
authentication/src/app/flow/error/page.tsx
Normal file
71
authentication/src/app/flow/error/page.tsx
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
'use client';
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { FlowError } from '@ory/client';
|
||||
import { AxiosError } from 'axios';
|
||||
import { kratos } from '@/ory/sdk/kratos';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
export default function Error() {
|
||||
|
||||
const [error, setError] = useState<FlowError>();
|
||||
|
||||
const router = useRouter();
|
||||
const params = useSearchParams();
|
||||
|
||||
const id = params.get('id');
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (error) {
|
||||
return;
|
||||
}
|
||||
|
||||
kratos
|
||||
.getFlowError({ id: String(id) })
|
||||
.then(({ data }) => {
|
||||
setError(data);
|
||||
})
|
||||
.catch((err: AxiosError) => {
|
||||
switch (err.response?.status) {
|
||||
case 404:
|
||||
// The error id could not be found. Let's just redirect home!
|
||||
case 403:
|
||||
// The error id could not be fetched due to e.g. a CSRF issue. Let's just redirect home!
|
||||
case 410:
|
||||
// The error id expired. Let's just redirect home!
|
||||
return router.push('/');
|
||||
}
|
||||
|
||||
return Promise.reject(err);
|
||||
});
|
||||
|
||||
}, [id, router, error]);
|
||||
|
||||
if (!error) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>An error occurred</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p>
|
||||
{JSON.stringify(error, null, 2)}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Button variant="ghost" asChild>
|
||||
<Link href="/" className="inline-flex space-x-2" passHref>
|
||||
Go back
|
||||
</Link>
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
13
authentication/src/app/flow/layout.tsx
Normal file
13
authentication/src/app/flow/layout.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import { ThemeToggle } from '@/components/themeToggle';
|
||||
import React from 'react';
|
||||
|
||||
export default function FlowLayout({ children }: Readonly<{ children: React.ReactNode }>) {
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen items-center justify-center relative space-y-4">
|
||||
<div className="absolute flex items-center space-x-4 top-4 right-4">
|
||||
<ThemeToggle/>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
171
authentication/src/app/flow/login/page.tsx
Normal file
171
authentication/src/app/flow/login/page.tsx
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
'use client';
|
||||
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Flow, HandleError, LogoutLink } from '@/ory';
|
||||
import Link from 'next/link';
|
||||
import { LoginFlow, UpdateLoginFlowBody } from '@ory/client';
|
||||
import { kratos } from '@/ory/sdk/kratos';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import Image from 'next/image';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { AxiosError } from 'axios';
|
||||
|
||||
export default function Login() {
|
||||
|
||||
const [flow, setFlow] = useState<LoginFlow>();
|
||||
|
||||
const router = useRouter();
|
||||
const params = useSearchParams();
|
||||
|
||||
const flowId = params.get('flow') ?? undefined;
|
||||
const aal = params.get('aal') ?? undefined;
|
||||
const refresh = Boolean(params.get('refresh')) ? true : undefined;
|
||||
const returnTo = params.get('return_to') ?? undefined;
|
||||
const loginChallenge = params.get('login_challenge') ?? undefined;
|
||||
|
||||
const onLogout = LogoutLink([aal, refresh]);
|
||||
|
||||
const getFlow = useCallback((flowId: string) => {
|
||||
return kratos
|
||||
.getLoginFlow({ id: String(flowId) })
|
||||
.then(({ data }) => setFlow(data))
|
||||
.catch(handleError);
|
||||
}, []);
|
||||
|
||||
const handleError = useCallback((error: AxiosError) => {
|
||||
const handle = HandleError(getFlow, setFlow, '/flow/login', true, router);
|
||||
return handle(error);
|
||||
}, [getFlow]);
|
||||
|
||||
const createFlow = useCallback((aal: string | undefined, refresh: boolean | undefined, returnTo: string | undefined, loginChallenge: string | undefined) => {
|
||||
kratos
|
||||
.createBrowserLoginFlow({ aal, refresh, returnTo, loginChallenge })
|
||||
.then(({ data }) => {
|
||||
setFlow(data);
|
||||
router.push(`?flow=${data.id}`);
|
||||
})
|
||||
.catch(handleError);
|
||||
}, [handleError]);
|
||||
|
||||
const updateFlow = async (body: UpdateLoginFlowBody) => {
|
||||
kratos
|
||||
.updateLoginFlow({
|
||||
flow: String(flow?.id),
|
||||
updateLoginFlowBody: body,
|
||||
})
|
||||
.then(() => {
|
||||
if (flow?.return_to) {
|
||||
window.location.href = flow?.return_to;
|
||||
return;
|
||||
}
|
||||
router.push('/');
|
||||
})
|
||||
.catch(handleError);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (flow) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (flowId) {
|
||||
getFlow(flowId).then();
|
||||
return;
|
||||
}
|
||||
|
||||
createFlow(aal, refresh, returnTo, loginChallenge);
|
||||
|
||||
}, [flowId, router, aal, refresh, returnTo, createFlow, loginChallenge, getFlow]);
|
||||
|
||||
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"/>
|
||||
<CardHeader className="flex flex-col items-center text-center space-y-4">
|
||||
{
|
||||
flow ?
|
||||
<div className="flex flex-col space-y-4">
|
||||
<CardTitle>{
|
||||
(() => {
|
||||
if (flow?.refresh) {
|
||||
return 'Confirm Action';
|
||||
} else if (flow?.requested_aal === 'aal2') {
|
||||
return 'Two-Factor Authentication';
|
||||
}
|
||||
return 'Welcome';
|
||||
})()}
|
||||
</CardTitle>
|
||||
<CardDescription className="max-w-xs">
|
||||
Log in to the Intranet to access all locally hosted applications.
|
||||
</CardDescription>
|
||||
</div>
|
||||
:
|
||||
<div className="flex flex-col space-y-6">
|
||||
<Skeleton className="h-6 w-full rounded-md"/>
|
||||
<div className="flex flex-col space-y-2">
|
||||
<Skeleton className="h-3 w-full rounded-md"/>
|
||||
<Skeleton className="h-3 w-[250px] rounded-md"/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</CardHeader>
|
||||
<CardContent className="w-full">
|
||||
{
|
||||
flow
|
||||
? <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">
|
||||
{
|
||||
flow ?
|
||||
<Button variant="link" asChild>
|
||||
<Link href="/flow/recovery" className="text-orange-600" passHref>
|
||||
<span>Forgot your password?</span>
|
||||
</Link>
|
||||
</Button>
|
||||
:
|
||||
<Skeleton className="h-3 w-[180px] rounded-md my-3.5"/>
|
||||
}
|
||||
{
|
||||
flow ?
|
||||
<Button variant="link" asChild disabled={!flow}>
|
||||
<Link href="/flow/registration" className="inline-flex space-x-2" passHref>
|
||||
<span>Create an account</span>
|
||||
</Link>
|
||||
</Button>
|
||||
:
|
||||
<Skeleton className="h-3 w-[180px] rounded-md my-3.5"/>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
127
authentication/src/app/flow/recovery/page.tsx
Normal file
127
authentication/src/app/flow/recovery/page.tsx
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
'use client';
|
||||
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Flow, HandleError } from '@/ory';
|
||||
import { RecoveryFlow, UpdateRecoveryFlowBody } from '@ory/client';
|
||||
import { AxiosError } from 'axios';
|
||||
import { kratos } from '@/ory/sdk/kratos';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import Image from 'next/image';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
|
||||
export default function Recovery() {
|
||||
|
||||
const [flow, setFlow] = useState<RecoveryFlow>();
|
||||
|
||||
const router = useRouter();
|
||||
const params = useSearchParams();
|
||||
|
||||
const flowId = params.get('flow') ?? undefined;
|
||||
const returnTo = params.get('return_to') ?? undefined;
|
||||
|
||||
const getFlow = useCallback((flowId: string) => {
|
||||
return kratos
|
||||
.getRecoveryFlow({ id: String(flowId) })
|
||||
.then(({ data }) => setFlow(data))
|
||||
.catch(handleError);
|
||||
}, []);
|
||||
|
||||
const handleError = useCallback((error: AxiosError) => {
|
||||
const handle = HandleError(getFlow, setFlow, '/flow/recovery', true, router);
|
||||
return handle(error);
|
||||
}, [getFlow]);
|
||||
|
||||
const createFlow = useCallback((returnTo: string | undefined) => {
|
||||
kratos
|
||||
.createBrowserRecoveryFlow({ returnTo })
|
||||
.then(({ data }) => setFlow(data))
|
||||
.catch(handleError)
|
||||
.catch((err: AxiosError) => {
|
||||
if (err.response?.status === 400) {
|
||||
setFlow(err.response?.data as RecoveryFlow);
|
||||
return;
|
||||
}
|
||||
return Promise.reject(err);
|
||||
});
|
||||
}, [handleError]);
|
||||
|
||||
const updateFlow = async (body: UpdateRecoveryFlowBody) => {
|
||||
kratos
|
||||
.updateRecoveryFlow({
|
||||
flow: String(flow?.id),
|
||||
updateRecoveryFlowBody: body,
|
||||
})
|
||||
.then(({ data }) => setFlow(data))
|
||||
.catch(handleError)
|
||||
.catch((err: AxiosError) => {
|
||||
switch (err.response?.status) {
|
||||
case 400:
|
||||
setFlow(err.response?.data as RecoveryFlow);
|
||||
return;
|
||||
}
|
||||
Promise.reject(err);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (flow) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (flowId) {
|
||||
getFlow(flowId);
|
||||
return;
|
||||
}
|
||||
|
||||
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"/>
|
||||
<CardHeader className="flex flex-col items-center text-center space-y-4">
|
||||
<CardTitle>
|
||||
Recover your account
|
||||
</CardTitle>
|
||||
<CardDescription className="max-w-xs">
|
||||
If you forgot your password, you can request an email for resetting it.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="w-full">
|
||||
{
|
||||
flow ?
|
||||
<Flow flow={flow} onSubmit={updateFlow}/>
|
||||
:
|
||||
<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="/flow/login" className="inline-flex space-x-2" passHref>
|
||||
Back to login
|
||||
</Link>
|
||||
</Button>
|
||||
:
|
||||
<Skeleton className="h-3 w-[180px] rounded-md my-3.5"/>
|
||||
}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
134
authentication/src/app/flow/registration/page.tsx
Normal file
134
authentication/src/app/flow/registration/page.tsx
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
'use client';
|
||||
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Flow, HandleError } from '@/ory';
|
||||
import Link from 'next/link';
|
||||
import { RegistrationFlow, UpdateRegistrationFlowBody } from '@ory/client';
|
||||
import { AxiosError } from 'axios';
|
||||
import { kratos } from '@/ory/sdk/kratos';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import Image from 'next/image';
|
||||
|
||||
export default function Registration() {
|
||||
|
||||
const [flow, setFlow] = useState<RegistrationFlow>();
|
||||
|
||||
const router = useRouter();
|
||||
const params = useSearchParams();
|
||||
|
||||
const flowId = params.get('flow') ?? undefined;
|
||||
const returnTo = params.get('return_to') ?? undefined;
|
||||
|
||||
const getFlow = useCallback((flowId: string) => {
|
||||
return kratos
|
||||
.getRegistrationFlow({ id: String(flowId) })
|
||||
.then(({ data }) => setFlow(data))
|
||||
.catch(handleError);
|
||||
}, []);
|
||||
|
||||
const handleError = useCallback((error: AxiosError) => {
|
||||
const handle = HandleError(getFlow, setFlow, '/flow/registration', true, router);
|
||||
return handle(error);
|
||||
}, [getFlow]);
|
||||
|
||||
const createFlow = useCallback((returnTo: string | undefined) => {
|
||||
kratos
|
||||
.createBrowserRegistrationFlow({ returnTo })
|
||||
.then(({ data }) => {
|
||||
setFlow(data);
|
||||
router.push(`?flow=${data.id}`);
|
||||
})
|
||||
.catch(handleError);
|
||||
}, [handleError]);
|
||||
|
||||
const updateFlow = async (body: UpdateRegistrationFlowBody) => {
|
||||
kratos
|
||||
.updateRegistrationFlow({
|
||||
flow: String(flow?.id),
|
||||
updateRegistrationFlowBody: body,
|
||||
})
|
||||
.then(async ({ data }) => {
|
||||
if (data.continue_with) {
|
||||
for (const item of data.continue_with) {
|
||||
switch (item.action) {
|
||||
case 'show_verification_ui':
|
||||
router.push('/flow/verification?flow=' + item.flow.id);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
router.push(flow?.return_to || '/');
|
||||
})
|
||||
.catch(handleError);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (flow) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (flowId) {
|
||||
getFlow(flowId);
|
||||
return;
|
||||
}
|
||||
|
||||
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"/>
|
||||
<CardHeader className="flex flex-col items-center text-center space-y-4">
|
||||
<CardTitle>
|
||||
Create account
|
||||
</CardTitle>
|
||||
<CardDescription className="max-w-xs">
|
||||
Create an account to access the intranet applications.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="w-full">
|
||||
{
|
||||
flow ?
|
||||
<Flow flow={flow} onSubmit={updateFlow}/>
|
||||
:
|
||||
<div className="flex flex-col space-y-4 mt-5">
|
||||
<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>
|
||||
<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="/flow/login" className="inline-flex space-x-2" passHref>
|
||||
Log into your account
|
||||
</Link>
|
||||
</Button>
|
||||
:
|
||||
<Skeleton className="h-3 w-[180px] rounded-md my-3.5"/>
|
||||
}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
126
authentication/src/app/flow/verification/page.tsx
Normal file
126
authentication/src/app/flow/verification/page.tsx
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
'use client';
|
||||
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Flow, HandleError } from '@/ory';
|
||||
import { UpdateVerificationFlowBody, VerificationFlow } from '@ory/client';
|
||||
import { AxiosError } from 'axios';
|
||||
import { kratos } from '@/ory/sdk/kratos';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import Image from 'next/image';
|
||||
|
||||
export default function Verification() {
|
||||
|
||||
const [flow, setFlow] = useState<VerificationFlow>();
|
||||
|
||||
const router = useRouter();
|
||||
const params = useSearchParams();
|
||||
|
||||
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 handleError = useCallback((error: AxiosError) => {
|
||||
const handle = HandleError(getFlow, setFlow, '/flow/verification', true, router);
|
||||
return handle(error);
|
||||
}, [getFlow]);
|
||||
|
||||
const createFlow = useCallback((returnTo: string | undefined) => {
|
||||
kratos
|
||||
.createBrowserVerificationFlow({ returnTo })
|
||||
.then(({ data }) => {
|
||||
setFlow(data);
|
||||
router.push(`?flow=${data.id}`);
|
||||
})
|
||||
.catch(handleError);
|
||||
}, [handleError]);
|
||||
|
||||
const updateFlow = async (body: UpdateVerificationFlowBody) => {
|
||||
kratos
|
||||
.updateVerificationFlow({
|
||||
flow: String(flow?.id),
|
||||
updateVerificationFlowBody: body,
|
||||
})
|
||||
.then(({ data }) => {
|
||||
setFlow(data);
|
||||
})
|
||||
.catch(handleError);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (flow) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (flowId) {
|
||||
getFlow(flowId);
|
||||
return;
|
||||
}
|
||||
|
||||
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"/>
|
||||
<CardHeader className="flex flex-col items-center text-center space-y-4">
|
||||
<CardTitle>
|
||||
Verify your account
|
||||
</CardTitle>
|
||||
<CardDescription className="max-w-xs">
|
||||
{flow?.ui.messages?.map(it => {
|
||||
return <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>
|
||||
</div>
|
||||
}
|
||||
</CardContent>
|
||||
{
|
||||
flow ?
|
||||
<Button variant="link" asChild disabled={!flow}>
|
||||
<Link href="/flow/login" className="inline-flex space-x-2" passHref>
|
||||
Back to login
|
||||
</Link>
|
||||
</Button>
|
||||
:
|
||||
<Skeleton className="h-3 w-[180px] rounded-md my-3.5"/>
|
||||
}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue