From 2bdf7c5c4e5ea88f1da85bc71a4a6f2d9ff08f6f Mon Sep 17 00:00:00 2001
From: Markus Thielker <mail.markus.thielker@gmail.com>
Date: Tue, 25 Feb 2025 17:23:14 +0100
Subject: [PATCH] NORY-46: add 'OpenID Connect logout' section

---
 .../src/components/forms/client-form.tsx      | 191 ++++++++++++++++++
 dashboard/src/lib/forms/client-form.ts        |   7 +-
 2 files changed, 197 insertions(+), 1 deletion(-)

diff --git a/dashboard/src/components/forms/client-form.tsx b/dashboard/src/components/forms/client-form.tsx
index 4ef7693..fc5d6be 100644
--- a/dashboard/src/components/forms/client-form.tsx
+++ b/dashboard/src/components/forms/client-form.tsx
@@ -25,7 +25,9 @@ interface CreateClientFormProps {
 export function CreateClientForm({ action }: CreateClientFormProps) {
 
     const router = useRouter();
+
     const [redirectUris, setRedirectUris] = useState<string[]>(['']);
+    const [postLogoutRedirectUris, setPostLogoutRedirectUris] = useState<string[]>(['']);
 
     const form = useForm<z.infer<typeof clientFormSchema>>({
         resolver: zodResolver(clientFormSchema),
@@ -62,12 +64,22 @@ export function CreateClientForm({ action }: CreateClientFormProps) {
         setRedirectUris([...redirectUris, '']);
     };
 
+    const addPostLogoutRedirectUri = () => {
+        setPostLogoutRedirectUris([...postLogoutRedirectUris, '']);
+    };
+
     const removeRedirectUri = (index: number) => {
         const updatedRedirectUris = redirectUris.filter((_, i) => i !== index);
         setRedirectUris(updatedRedirectUris);
         form.setValue('redirect_uris', updatedRedirectUris);
     };
 
+    const removePostLogoutRedirectUri = (index: number) => {
+        const updatedPostLogoutRedirectUris = postLogoutRedirectUris.filter((_, i) => i !== index);
+        setPostLogoutRedirectUris(postLogoutRedirectUris);
+        form.setValue('post_logout_redirect_uris', updatedPostLogoutRedirectUris);
+    };
+
     const handleInputChange = (index: number, event: any) => {
         const updatedRedirectUris = [...redirectUris];
         updatedRedirectUris[index] = event.target.value;
@@ -75,6 +87,13 @@ export function CreateClientForm({ action }: CreateClientFormProps) {
         form.setValue('redirect_uris', updatedRedirectUris);
     };
 
+    const handlePostLogoutInputChange = (index: number, event: any) => {
+        const updatedPostLogoutRedirectUris = [...postLogoutRedirectUris];
+        updatedPostLogoutRedirectUris[index] = event.target.value;
+        setPostLogoutRedirectUris(updatedPostLogoutRedirectUris);
+        form.setValue('post_logout_redirect_uris', updatedPostLogoutRedirectUris);
+    };
+
     return (
         <>
             {
@@ -384,6 +403,178 @@ export function CreateClientForm({ action }: CreateClientFormProps) {
                         </CardContent>
                     </Card>
 
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>
+                                OpenID Connect logout
+                            </CardTitle>
+                            <CardDescription>
+                                Get more information about using front and backchannels here&nbsp;
+                                <Button variant="link" className="p-0" asChild>
+                                    <Link target="_blank"
+                                          href="https://www.ory.sh/docs/oauth2-oidc/oidc-logout#openid-connect-front-channel-logout-10">
+                                        documentation
+                                    </Link>
+                                </Button>.
+                            </CardDescription>
+                        </CardHeader>
+                        <CardContent className="space-y-4">
+                            <FormField
+                                control={form.control}
+                                name="frontchannel_logout_session_required"
+                                render={({ field }) => (
+                                    <FormItem className="flex flex-row items-center justify-between rounded-lg">
+                                        <div className="space-y-0.5">
+                                            <FormLabel className="text-base">
+                                                Frontchannel Logout Session Required
+                                            </FormLabel>
+                                            <FormDescription>
+                                                Boolean value specifying whether the Relay Party (RP) requires that
+                                                issuer and session ID query parameters be included to identify the RP
+                                                session with the OpenID provider (OP) when the Frontchannel Logout URI
+                                                is used. The default value is false.
+                                            </FormDescription>
+                                        </div>
+                                        <FormControl>
+                                            <Switch
+                                                checked={field.value}
+                                                onCheckedChange={field.onChange}
+                                            />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="frontchannel_logout_uri"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Frontchannel Logout URI</FormLabel>
+                                        <FormDescription>
+                                            URL that will cause the Relying Party (RP) to log itself out when rendered
+                                            in an iframe by the OpenID provider (OP). An issuer query parameter and a
+                                            session ID query parameter MAY be included by the OpenID provider (OP) to
+                                            enable the Relying Party (RP) to validate the request and to determine which
+                                            of the potentially multiple sessions is to be logged out; if either is
+                                            included, both MUST be.
+                                        </FormDescription>
+                                        <FormControl>
+                                            <Input placeholder="https://" {...field} />
+                                        </FormControl>
+                                        <FormMessage/>
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="backchannel_logout_session_required"
+                                render={({ field }) => (
+                                    <FormItem className="flex flex-row items-center justify-between rounded-lg">
+                                        <div className="space-y-0.5">
+                                            <FormLabel className="text-base">
+                                                Backchannel Logout Session Required
+                                            </FormLabel>
+                                            <FormDescription>
+                                                Boolean value specifying whether the Relying Party (RP) requires that a
+                                                session ID Claim be included in the Logout Token to identify the Relying
+                                                Party session with the OpenID provider (OP) when the Backchannel Logout
+                                                URI is used. If omitted, the default value is false.
+                                            </FormDescription>
+                                        </div>
+                                        <FormControl>
+                                            <Switch
+                                                checked={field.value}
+                                                onCheckedChange={field.onChange}
+                                            />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="backchannel_logout_uri"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Backchannel Logout URI</FormLabel>
+                                        <FormDescription>
+                                            URL that will cause the Relying Party (RP) to log itself out when rendered
+                                            in an iframe by the OpenID provider (OP). An issuer query parameter and a
+                                            session ID query parameter MAY be included by the OpenID provider (OP) to
+                                            enable the Relying Party (RP) to validate the request and to determine which
+                                            of the potentially multiple sessions is to be logged out; if either is
+                                            included, both MUST be.
+                                        </FormDescription>
+                                        <FormControl>
+                                            <Input placeholder="https://" {...field} />
+                                        </FormControl>
+                                        <FormMessage/>
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="skip_logout_consent"
+                                render={({ field }) => (
+                                    <FormItem className="flex flex-row items-center justify-between rounded-lg">
+                                        <div className="space-y-0.5">
+                                            <FormLabel className="text-base">
+                                                Skip logout consent
+                                            </FormLabel>
+                                            <FormDescription>
+                                                Boolean value specifying whether the additional logout consent screen
+                                                should be skipped.
+                                            </FormDescription>
+                                        </div>
+                                        <FormControl>
+                                            <Switch
+                                                checked={field.value}
+                                                onCheckedChange={field.onChange}
+                                            />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                            {postLogoutRedirectUris.map((uri, index) => (
+                                <div key={index} className="mb-4">
+                                    <FormItem>
+                                        <FormLabel htmlFor={`post_logout_redirect_uri-${index}`}>
+                                            Post Logout Redirect URI {index + 1}</FormLabel>
+                                        <FormControl>
+                                            <div className="relative">
+                                                <Input
+                                                    type="text"
+                                                    id={`post_logout_redirect_uri-${index}`}
+                                                    value={uri}
+                                                    placeholder="https://"
+                                                    className="pr-10"
+                                                    {...form.register(`post_logout_redirect_uris.${index}`)}
+                                                    onChange={(event) => handlePostLogoutInputChange(index, event)}
+                                                />
+                                                {postLogoutRedirectUris.length > 1 && (
+                                                    <Button
+                                                        type="button"
+                                                        size="icon"
+                                                        variant="destructive"
+                                                        className="absolute inset-y-0 right-0 rounded-l-none"
+                                                        onClick={() => removePostLogoutRedirectUri(index)}>
+                                                        <Minus/>
+                                                    </Button>
+                                                )}
+                                            </div>
+                                        </FormControl>
+                                        {form.formState.errors?.post_logout_redirect_uris && form.formState.errors.post_logout_redirect_uris[index] && (
+                                            <FormMessage>{form.formState.errors.post_logout_redirect_uris[index].message}</FormMessage>
+                                        )}
+                                    </FormItem>
+                                </div>
+                            ))}
+
+                            <Button type="button" onClick={addPostLogoutRedirectUri}>
+                                Add Post Logout Redirect URI
+                            </Button>
+                        </CardContent>
+                    </Card>
+
                     <div className="space-x-2">
                         <Button type="button" variant="outline" onClick={() => {
                             router.back();
diff --git a/dashboard/src/lib/forms/client-form.ts b/dashboard/src/lib/forms/client-form.ts
index a924c69..ea3814e 100644
--- a/dashboard/src/lib/forms/client-form.ts
+++ b/dashboard/src/lib/forms/client-form.ts
@@ -13,5 +13,10 @@ export const clientFormSchema = z.object({
     grant_types: z.array(z.string()),
     response_types: z.array(z.string()),
     token_endpoint_auth_method: z.string(),
-
+    backchannel_logout_session_required: z.boolean().default(false),
+    backchannel_logout_uri: z.string().url(),
+    frontchannel_logout_session_required: z.boolean().default(false),
+    frontchannel_logout_uri: z.string().url(),
+    skip_logout_consent: z.boolean().default(false),
+    post_logout_redirect_uris: z.array(z.string().url({ message: 'Invalid URL' })).min(1, { message: 'At least one redirect URI is required' }),
 });