nikdoof/pocket-id
1
0
Fork 0
mirror of https://github.com/nikdoof/pocket-id.git synced 2025-12-24 14:59:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add PKCE support

Browse Source
This commit is contained in:
Elias Schneider
2024-11-15 15:00:25 +01:00
parent 760c8e83bb
commit 3613ac261c
15 changed files with 188 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/src/routes/settings/admin/oidc-clients/[id]/+page.svelte
View File

@@ -26,7 +26,8 @@
'OIDC Discovery URL': `https://${$page.url.hostname}/.well-known/openid-configuration`,
'Token URL': `https://${$page.url.hostname}/api/oidc/token`,
'Userinfo URL': `https://${$page.url.hostname}/api/oidc/userinfo`,
'Certificate URL': `https://${$page.url.hostname}/.well-known/jwks.json`
'Certificate URL': `https://${$page.url.hostname}/.well-known/jwks.json`,
PKCE: client.isPublic ? 'Enabled' : 'Disabled'
};
async function updateClient(updatedClient: OidcClientCreateWithLogo) {
@@ -34,6 +35,8 @@
const dataPromise = oidcService.updateClient(client.id, updatedClient);
const imagePromise = oidcService.updateClientLogo(client, updatedClient.logo);
client.isPublic = updatedClient.isPublic;
await Promise.all([dataPromise, imagePromise])
.then(() => {
toast.success('OIDC client updated successfully');
@@ -93,27 +96,29 @@
<span class="text-muted-foreground text-sm" data-testid="client-id"> {client.id}</span>
</CopyToClipboard>
</div>
<div class="mb-2 mt-1 flex items-center">
<Label class="w-44">Client secret</Label>
{#if $clientSecretStore}
<CopyToClipboard value={$clientSecretStore}>
<span class="text-muted-foreground text-sm" data-testid="client-secret">
{$clientSecretStore}
</span>
</CopyToClipboard>
{:else}
<span class="text-muted-foreground text-sm" data-testid="client-secret"
>••••••••••••••••••••••••••••••••</span
>
<Button
class="ml-2"
onclick={createClientSecret}
size="sm"
variant="ghost"
aria-label="Create new client secret"><LucideRefreshCcw class="h-3 w-3" /></Button
>
{/if}
</div>
{#if !client.isPublic}
<div class="mb-2 mt-1 flex items-center">
<Label class="w-44">Client secret</Label>
{#if $clientSecretStore}
<CopyToClipboard value={$clientSecretStore}>
<span class="text-muted-foreground text-sm" data-testid="client-secret">
{$clientSecretStore}
</span>
</CopyToClipboard>
{:else}
<span class="text-muted-foreground text-sm" data-testid="client-secret"
>••••••••••••••••••••••••••••••••</span
>
<Button
class="ml-2"
onclick={createClientSecret}
size="sm"
variant="ghost"
aria-label="Create new client secret"><LucideRefreshCcw class="h-3 w-3" /></Button
>
{/if}
</div>
{/if}
{#if showAllDetails}
<div transition:slide>
{#each Object.entries(setupDetails) as [key, value]}

23
frontend/src/routes/settings/admin/oidc-clients/oidc-client-form.svelte
View File

@@ -2,6 +2,7 @@
import FileInput from '$lib/components/file-input.svelte';
import FormInput from '$lib/components/form-input.svelte';
import { Button } from '$lib/components/ui/button';
import { Checkbox } from '$lib/components/ui/checkbox';
import Label from '$lib/components/ui/label/label.svelte';
import type {
OidcClient,
@@ -28,12 +29,14 @@
const client: OidcClientCreate = {
name: existingClient?.name || '',
callbackURLs: existingClient?.callbackURLs || [""]
callbackURLs: existingClient?.callbackURLs || [''],
isPublic: existingClient?.isPublic || false
};
const formSchema = z.object({
name: z.string().min(2).max(50),
callbackURLs: z.array(z.string().url()).nonempty()
callbackURLs: z.array(z.string().url()).nonempty(),
isPublic: z.boolean()
});
type FormSchema = typeof formSchema;
@@ -71,15 +74,27 @@
</script>
<form onsubmit={onSubmit}>
<div class="flex flex-col gap-3 sm:flex-row">
<div class="grid grid-cols-2 gap-3 sm:flex-row">
<FormInput label="Name" class="w-full" bind:input={$inputs.name} />
<OidcCallbackUrlInput
class="w-full"
bind:callbackURLs={$inputs.callbackURLs.value}
bind:error={$inputs.callbackURLs.error}
/>
<div class="items-top flex space-x-2">
<Checkbox id="admin-privileges" bind:checked={$inputs.isPublic.value} />
<div class="grid gap-1.5 leading-none">
<Label for="admin-privileges" class="mb-0 text-sm font-medium leading-none">
Public Client
</Label>
<p class="text-muted-foreground text-[0.8rem]">
Public clients do not have a client secret and use PKCE instead. Enable this if your
client is a SPA or mobile app.
</p>
</div>
</div>
</div>
<div class="mt-3">
<div class="mt-8">
<Label for="logo">Logo</Label>
<div class="mt-2 flex items-end gap-3">
{#if logoDataURL}