Initial commit

authentication/src/app/flow/consent/page.tsx

@@ -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>
+    );
+}

authentication/src/app/flow/error/page.tsx

@@ -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>
+        </>
+    );
+}

authentication/src/app/flow/layout.tsx

@@ -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>
+    );
+}

authentication/src/app/flow/login/page.tsx

@@ -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>
+    );
+}

authentication/src/app/flow/recovery/page.tsx

@@ -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>
+    );
+}

authentication/src/app/flow/registration/page.tsx

@@ -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>
+    );
+}

authentication/src/app/flow/verification/page.tsx

@@ -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>
+    );
+}

authentication/src/app/globals.css

@@ -0,0 +1,62 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 20 14.3% 4.1%;
+        --card: 0 0% 100%;
+        --card-foreground: 20 14.3% 4.1%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 20 14.3% 4.1%;
+        --primary: 24.6 95% 53.1%;
+        --primary-foreground: 60 9.1% 97.8%;
+        --secondary: 60 4.8% 95.9%;
+        --secondary-foreground: 24 9.8% 10%;
+        --muted: 60 4.8% 95.9%;
+        --muted-foreground: 25 5.3% 44.7%;
+        --accent: 60 4.8% 95.9%;
+        --accent-foreground: 24 9.8% 10%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 60 9.1% 97.8%;
+        --border: 20 5.9% 90%;
+        --input: 20 5.9% 90%;
+        --ring: 24.6 95% 53.1%;
+        --radius: 0.5rem;
+    }
+
+    .dark {
+        --background: 20 14.3% 4.1%;
+        --foreground: 60 9.1% 97.8%;
+        --card: 20 14.3% 4.1%;
+        --card-foreground: 60 9.1% 97.8%;
+        --popover: 20 14.3% 4.1%;
+        --popover-foreground: 60 9.1% 97.8%;
+        --primary: 20.5 90.2% 48.2%;
+        --primary-foreground: 60 9.1% 97.8%;
+        --secondary: 12 6.5% 15.1%;
+        --secondary-foreground: 60 9.1% 97.8%;
+        --muted: 12 6.5% 15.1%;
+        --muted-foreground: 24 5.4% 63.9%;
+        --accent: 12 6.5% 15.1%;
+        --accent-foreground: 60 9.1% 97.8%;
+        --destructive: 0 72.2% 50.6%;
+        --destructive-foreground: 60 9.1% 97.8%;
+        --border: 12 6.5% 15.1%;
+        --input: 12 6.5% 15.1%;
+        --ring: 20.5 90.2% 48.2%;
+    }
+}
+
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}

authentication/src/app/layout.tsx

@@ -0,0 +1,63 @@
+import type { Viewport } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import { cn } from '@/lib/utils';
+import { Toaster } from '@/components/ui/sonner';
+import React from 'react';
+import { ThemeProvider } from '@/components/themeProvider';
+
+const inter = Inter({ subsets: ['latin'] });
+
+const APP_NAME = 'Next Ory';
+const APP_DEFAULT_TITLE = 'Next Ory';
+const APP_TITLE_TEMPLATE = `%s | ${APP_DEFAULT_TITLE}`;
+const APP_DESCRIPTION = 'Get started with ORY authentication quickly and easily.';
+
+export const metadata = {
+    applicationName: APP_NAME,
+    title: {
+        default: APP_DEFAULT_TITLE,
+        template: APP_TITLE_TEMPLATE,
+    },
+    description: APP_DESCRIPTION,
+    appleWebApp: {
+        capable: true,
+        statusBarStyle: 'default',
+        title: APP_DEFAULT_TITLE,
+    },
+    formatDetection: {
+        telephone: false,
+    },
+};
+
+export const viewport: Viewport = {
+    themeColor: '#0B0908',
+    width: 'device-width',
+};
+
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+    return (
+        <html lang="en">
+        <head>
+            <link crossOrigin="use-credentials" rel="manifest" href="/manifest.json"/>
+            <link
+                rel="icon"
+                href="/favicon.png"
+            />
+        </head>
+        <body className={cn(inter.className)}>
+        <main>
+            <ThemeProvider
+                attribute="class"
+                defaultTheme="system"
+                enableSystem
+                disableTransitionOnChange
+            >
+                {children}
+                <Toaster/>
+            </ThemeProvider>
+        </main>
+        </body>
+        </html>
+    );
+}

authentication/src/app/page.tsx

@@ -0,0 +1,240 @@
+'use client';
+
+import React, { useCallback, useEffect, useState } from 'react';
+import { SettingsFlow, UpdateSettingsFlowBody } from '@ory/client';
+import { kratos } from '@/ory/sdk/kratos';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { toast } from 'sonner';
+import { AxiosError } from 'axios';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Flow, HandleError, LogoutLink } from '@/ory';
+import { ThemeToggle } from '@/components/themeToggle';
+import { Button } from '@/components/ui/button';
+import { LogOut } from 'lucide-react';
+
+export default function Home() {
+
+    const [flow, setFlow] = useState<SettingsFlow>();
+
+    const router = useRouter();
+    const params = useSearchParams();
+
+    const returnTo = params.get('return_to') ?? undefined;
+    const flowId = params.get('flow') ?? undefined;
+
+    const onLogout = LogoutLink();
+
+    const getFlow = useCallback((flowId: string) => {
+        return kratos
+            .getSettingsFlow({ id: String(flowId) })
+            .then(({ data }) => setFlow(data))
+            .catch(handleError);
+    }, []);
+
+    const handleError = useCallback((error: AxiosError) => {
+        const handle = HandleError(getFlow, setFlow, '/flow/settings', true, router);
+        return handle(error);
+    }, [getFlow]);
+
+    const createFlow = useCallback((returnTo: string | undefined) => {
+        kratos
+            .createBrowserSettingsFlow({ returnTo })
+            .then(({ data }) => {
+                setFlow(data);
+                router.push(`?flow=${data.id}`);
+            })
+            .catch(handleError);
+    }, [handleError]);
+
+    const updateFlow = async (body: UpdateSettingsFlowBody) => {
+        kratos
+            .updateSettingsFlow({
+                flow: String(flow?.id),
+                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) {
+                            case 'show_verification_ui':
+                                router.push('/verification?flow=' + item.flow.id);
+                                return;
+                        }
+                    }
+                }
+
+                // check if custom return page was specified
+                if (data.return_to) {
+                    window.location.href = data.return_to;
+                    return;
+                }
+            })
+            .catch(handleError);
+    };
+
+    useEffect(() => {
+
+        if (flow) {
+            return;
+        }
+
+        if (flowId) {
+            getFlow(flowId).then();
+            return;
+        }
+
+        createFlow(returnTo);
+
+    }, [flowId, router, returnTo, createFlow, getFlow]);
+
+    return (
+        <div className="flex flex-col min-h-screen items-center text-3xl relative space-y-4">
+            <div className="absolute flex flex-row w-fit items-center space-x-4 top-4 right-4">
+                <ThemeToggle/>
+                <Button variant="outline" size="icon" onClick={onLogout}>
+                    <LogOut className="h-[1.2rem] w-[1.2rem]"/>
+                </Button>
+            </div>
+            <div className="flex flex-col items-center space-y-4 w-full max-w-md">
+                <p className="mt-4 py-4 text-4xl">Settings</p>
+                {
+                    flow?.ui.nodes.some(({ group }) => group === 'profile') && (
+                        <Card className="w-full max-w-md animate-fadeIn">
+                            <CardHeader>
+                                <CardTitle>
+                                    Password
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                <Flow
+                                    onSubmit={updateFlow}
+                                    flow={flow}
+                                    only="profile"
+                                    hideGlobalMessages/>
+                            </CardContent>
+                        </Card>
+                    )
+                }
+                {
+                    flow?.ui.nodes.some(({ group }) => group === 'password') && (
+                        <Card className="w-full max-w-md animate-fadeIn">
+                            <CardHeader>
+                                <CardTitle>
+                                    Password
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                <Flow
+                                    onSubmit={updateFlow}
+                                    flow={flow}
+                                    only="password"
+                                    hideGlobalMessages/>
+                            </CardContent>
+                        </Card>
+                    )
+                }
+                {
+                    flow?.ui.nodes.some(({ group }) => group === 'totp') && (
+                        <Card className="w-full max-w-md animate-fadeIn">
+                            <CardHeader>
+                                <CardTitle>
+                                    MFA
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                <Flow
+                                    onSubmit={updateFlow}
+                                    flow={flow}
+                                    only="totp"
+                                    hideGlobalMessages/>
+                            </CardContent>
+                        </Card>
+                    )
+                }
+                {
+                    flow?.ui.nodes.some(({ group }) => group === 'oidc') && (
+                        <Card className="w-full max-w-md animate-fadeIn">
+                            <CardHeader>
+                                <CardTitle>
+                                    Connect Socials
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                <Flow
+                                    onSubmit={updateFlow}
+                                    flow={flow}
+                                    only="oidc"
+                                    hideGlobalMessages/>
+                            </CardContent>
+                        </Card>
+                    )
+                }
+                {
+                    flow?.ui.nodes.some(({ group }) => group === 'link') && (
+                        <Card className="w-full max-w-md animate-fadeIn">
+                            <CardHeader>
+                                <CardTitle>
+                                    Connect Socials
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                <Flow
+                                    onSubmit={updateFlow}
+                                    flow={flow}
+                                    only="link"
+                                    hideGlobalMessages/>
+                            </CardContent>
+                        </Card>
+                    )
+                }
+                {
+                    flow?.ui.nodes.some(({ group }) => group === 'webauthn') && (
+                        <Card className="w-full max-w-md animate-fadeIn">
+                            <CardHeader>
+                                <CardTitle>
+                                    Connect Socials
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                <Flow
+                                    onSubmit={updateFlow}
+                                    flow={flow}
+                                    only="webauthn"
+                                    hideGlobalMessages/>
+                            </CardContent>
+                        </Card>
+                    )
+                }
+                {
+                    flow?.ui.nodes.some(({ group }) => group === 'lookup_secret') && (
+                        <Card className="w-full max-w-md animate-fadeIn">
+                            <CardHeader>
+                                <CardTitle>
+                                    Recovery Codes
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                <Flow
+                                    onSubmit={updateFlow}
+                                    flow={flow}
+                                    only="lookup_secret"
+                                    hideGlobalMessages/>
+                            </CardContent>
+                        </Card>
+                    )
+                }
+            </div>
+        </div>
+    );
+}

authentication/src/app/service-worker.ts

@@ -0,0 +1,18 @@
+import type { PrecacheEntry } from '@serwist/precaching';
+import { installSerwist } from '@serwist/sw';
+import { defaultCache } from '@serwist/next/worker';
+
+declare const self: ServiceWorkerGlobalScope & {
+    // Change this attribute's name to your `injectionPoint`.
+    // `injectionPoint` is an InjectManifest option.
+    // See https://serwist.pages.dev/docs/build/inject-manifest/configuring
+    __SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
+};
+
+installSerwist({
+    precacheEntries: self.__SW_MANIFEST,
+    skipWaiting: true,
+    clientsClaim: true,
+    navigationPreload: true,
+    runtimeCaching: defaultCache,
+});