release: 0.23.0

.version

@@ -1 +1 @@
-0.22.0
+0.23.0

CHANGELOG.md

@@ -1,3 +1,11 @@
+## [](https://github.com/stonith404/pocket-id/compare/v0.22.0...v) (2025-01-03)
+
+
+### Features
+
+* add PKCE for non public clients ([adcf3dd](https://github.com/stonith404/pocket-id/commit/adcf3ddc6682794e136a454ef9e69ddd130626a8))
+* use same table component for OIDC client list as all other lists ([2d31fc2](https://github.com/stonith404/pocket-id/commit/2d31fc2cc9201bb93d296faae622f52c6dcdfebc))
+
 ## [](https://github.com/stonith404/pocket-id/compare/v0.21.0...v) (2025-01-01)
 
 

Dockerfile

@@ -33,9 +33,6 @@ COPY --from=frontend-builder /app/frontend/node_modules ./frontend/node_modules
 COPY --from=frontend-builder /app/frontend/package.json ./frontend/package.json
 
 COPY --from=backend-builder /app/backend/pocket-id-backend ./backend/pocket-id-backend
-COPY --from=backend-builder /app/backend/migrations ./backend/migrations
-COPY --from=backend-builder /app/backend/email-templates ./backend/email-templates
-COPY --from=backend-builder /app/backend/images ./backend/images
 
 COPY ./scripts ./scripts
 RUN chmod +x ./scripts/*.sh

backend/internal/bootstrap/application_images_bootstrap.go

@@ -3,8 +3,10 @@ package bootstrap
 import (
 	"github.com/stonith404/pocket-id/backend/internal/common"
 	"github.com/stonith404/pocket-id/backend/internal/utils"
+	"github.com/stonith404/pocket-id/backend/resources"
 	"log"
 	"os"
+	"path"
 	"strings"
 )
 
@@ -12,7 +14,7 @@ import (
 func initApplicationImages() {
 	dirPath := common.EnvConfig.UploadPath + "/application-images"
 
-	sourceFiles, err := os.ReadDir("./images")
+	sourceFiles, err := resources.FS.ReadDir("images")
 	if err != nil && !os.IsNotExist(err) {
 		log.Fatalf("Error reading directory: %v", err)
 	}
@@ -27,10 +29,10 @@ func initApplicationImages() {
 		if sourceFile.IsDir() || imageAlreadyExists(sourceFile.Name(), destinationFiles) {
 			continue
 		}
-		srcFilePath := "./images/" + sourceFile.Name()
-		destFilePath := dirPath + "/" + sourceFile.Name()
+		srcFilePath := path.Join("images", sourceFile.Name())
+		destFilePath := path.Join(dirPath, sourceFile.Name())
 
-		err := utils.CopyFile(srcFilePath, destFilePath)
+		err := utils.CopyEmbeddedFileToDisk(srcFilePath, destFilePath)
 		if err != nil {
 			log.Fatalf("Error copying file: %v", err)
 		}

backend/internal/bootstrap/db_bootstrap.go

@@ -7,7 +7,9 @@ import (
 	"github.com/golang-migrate/migrate/v4/database"
 	postgresMigrate "github.com/golang-migrate/migrate/v4/database/postgres"
 	sqliteMigrate "github.com/golang-migrate/migrate/v4/database/sqlite3"
+	"github.com/golang-migrate/migrate/v4/source/iofs"
 	"github.com/stonith404/pocket-id/backend/internal/common"
+	"github.com/stonith404/pocket-id/backend/resources"
 	"gorm.io/driver/postgres"
 	"gorm.io/driver/sqlite"
 	"gorm.io/gorm"
@@ -42,20 +44,31 @@ func newDatabase() (db *gorm.DB) {
 	}
 
 	// Run migrations
-	m, err := migrate.NewWithDatabaseInstance(
-		"file://migrations/"+string(common.EnvConfig.DbProvider),
-		"pocket-id", driver,
-	)
+	if err := migrateDatabase(driver); err != nil {
+		log.Fatalf("failed to run migrations: %v", err)
+	}
+
+	return db
+}
+
+func migrateDatabase(driver database.Driver) error {
+	// Use the embedded migrations
+	source, err := iofs.New(resources.FS, "migrations/"+string(common.EnvConfig.DbProvider))
 	if err != nil {
-		log.Fatalf("failed to create migration instance: %v", err)
+		return fmt.Errorf("failed to create embedded migration source: %v", err)
+	}
+
+	m, err := migrate.NewWithInstance("iofs", source, "pocket-id", driver)
+	if err != nil {
+		return fmt.Errorf("failed to create migration instance: %v", err)
 	}
 
 	err = m.Up()
 	if err != nil && !errors.Is(err, migrate.ErrNoChange) {
-		log.Fatalf("failed to apply migrations: %v", err)
+		return fmt.Errorf("failed to apply migrations: %v", err)
 	}
 
-	return db
+	return nil
 }
 
 func connectDatabase() (db *gorm.DB, err error) {

backend/internal/bootstrap/router_bootstrap.go

@@ -2,7 +2,6 @@ package bootstrap
 
 import (
 	"log"
-	"os"
 	"time"
 
 	"github.com/gin-gonic/gin"
@@ -29,8 +28,7 @@ func initRouter(db *gorm.DB, appConfigService *service.AppConfigService) {
 	r.Use(gin.Logger())
 
 	// Initialize services
-	templateDir := os.DirFS(common.EnvConfig.EmailTemplatesPath)
-	emailService, err := service.NewEmailService(appConfigService, db, templateDir)
+	emailService, err := service.NewEmailService(appConfigService, db)
 	if err != nil {
 		log.Fatalf("Unable to create email service: %s", err)
 	}

backend/internal/common/env_config.go

@@ -22,7 +22,6 @@ type EnvConfigSchema struct {
 	UploadPath               string     `env:"UPLOAD_PATH"`
 	Port                     string     `env:"BACKEND_PORT"`
 	Host                     string     `env:"HOST"`
-	EmailTemplatesPath       string     `env:"EMAIL_TEMPLATES_PATH"`
 	MaxMindLicenseKey        string     `env:"MAXMIND_LICENSE_KEY"`
 	GeoLiteDBPath            string     `env:"GEOLITE_DB_PATH"`
 }
@@ -36,7 +35,6 @@ var EnvConfig = &EnvConfigSchema{
 	AppURL:                   "http://localhost",
 	Port:                     "8080",
 	Host:                     "localhost",
-	EmailTemplatesPath:       "./email-templates",
 	MaxMindLicenseKey:        "",
 	GeoLiteDBPath:            "data/GeoLite2-City.mmdb",
 }

backend/internal/dto/oidc_dto.go

@@ -10,6 +10,7 @@ type OidcClientDto struct {
 	PublicOidcClientDto
 	CallbackURLs []string `json:"callbackURLs"`
 	IsPublic     bool     `json:"isPublic"`
+	PkceEnabled  bool     `json:"pkceEnabled"`
 	CreatedBy    UserDto  `json:"createdBy"`
 }
 
@@ -17,6 +18,7 @@ type OidcClientCreateDto struct {
 	Name         string   `json:"name" binding:"required,max=50"`
 	CallbackURLs []string `json:"callbackURLs" binding:"required,urlList"`
 	IsPublic     bool     `json:"isPublic"`
+	PkceEnabled  bool     `json:"pkceEnabled"`
 }
 
 type AuthorizeOidcClientRequestDto struct {

backend/internal/model/oidc.go

@@ -42,6 +42,7 @@ type OidcClient struct {
 	ImageType    *string
 	HasLogo      bool `gorm:"-"`
 	IsPublic     bool
+	PkceEnabled  bool
 
 	CreatedByID string
 	CreatedBy   User

backend/internal/service/email_service.go

@@ -10,7 +10,6 @@ import (
 	"github.com/stonith404/pocket-id/backend/internal/utils/email"
 	"gorm.io/gorm"
 	htemplate "html/template"
-	"io/fs"
 	"mime/multipart"
 	"mime/quotedprintable"
 	"net"
@@ -26,13 +25,13 @@ type EmailService struct {
 	textTemplates    map[string]*ttemplate.Template
 }
 
-func NewEmailService(appConfigService *AppConfigService, db *gorm.DB, templateDir fs.FS) (*EmailService, error) {
-	htmlTemplates, err := email.PrepareHTMLTemplates(templateDir, emailTemplatesPaths)
+func NewEmailService(appConfigService *AppConfigService, db *gorm.DB) (*EmailService, error) {
+	htmlTemplates, err := email.PrepareHTMLTemplates(emailTemplatesPaths)
 	if err != nil {
 		return nil, fmt.Errorf("prepare html templates: %w", err)
 	}
 
-	textTemplates, err := email.PrepareTextTemplates(templateDir, emailTemplatesPaths)
+	textTemplates, err := email.PrepareTextTemplates(emailTemplatesPaths)
 	if err != nil {
 		return nil, fmt.Errorf("prepare html templates: %w", err)
 	}

backend/internal/service/oidc_service.go

@@ -131,8 +131,8 @@ func (s *OidcService) CreateTokens(code, grantType, clientID, clientSecret, code
 		return "", "", &common.OidcInvalidAuthorizationCodeError{}
 	}
 
-	// If the client is public, the code verifier must match the code challenge
-	if client.IsPublic {
+	// If the client is public or PKCE is enabled, the code verifier must match the code challenge
+	if client.IsPublic || client.PkceEnabled {
 		if !s.validateCodeVerifier(codeVerifier, *authorizationCodeMetaData.CodeChallenge, *authorizationCodeMetaData.CodeChallengeMethodSha256) {
 			return "", "", &common.OidcInvalidCodeVerifierError{}
 		}
@@ -189,6 +189,8 @@ func (s *OidcService) CreateClient(input dto.OidcClientCreateDto, userID string)
 		Name:         input.Name,
 		CallbackURLs: input.CallbackURLs,
 		CreatedByID:  userID,
+		IsPublic:     input.IsPublic,
+		PkceEnabled:  input.IsPublic || input.PkceEnabled,
 	}
 
 	if err := s.db.Create(&client).Error; err != nil {
@@ -207,6 +209,7 @@ func (s *OidcService) UpdateClient(clientID string, input dto.OidcClientCreateDt
 	client.Name = input.Name
 	client.CallbackURLs = input.CallbackURLs
 	client.IsPublic = input.IsPublic
+	client.PkceEnabled = input.IsPublic || input.PkceEnabled
 
 	if err := s.db.Save(&client).Error; err != nil {
 		return model.OidcClient{}, err
@@ -406,6 +409,10 @@ func (s *OidcService) createAuthorizationCode(clientID string, userID string, sc
 }
 
 func (s *OidcService) validateCodeVerifier(codeVerifier, codeChallenge string, codeChallengeMethodSha256 bool) bool {
+	if codeVerifier == "" || codeChallenge == "" {
+		return false
+	}
+
 	if !codeChallengeMethodSha256 {
 		return codeVerifier == codeChallenge
 	}

backend/internal/service/test_service.go

@@ -7,8 +7,10 @@ import (
 	"fmt"
 	"github.com/fxamacker/cbor/v2"
 	"github.com/stonith404/pocket-id/backend/internal/model/types"
+	"github.com/stonith404/pocket-id/backend/resources"
 	"log"
 	"os"
+	"path/filepath"
 	"time"
 
 	"github.com/go-webauthn/webauthn/protocol"
@@ -245,11 +247,21 @@ func (s *TestService) ResetApplicationImages() error {
 		return err
 	}
 
-	if err := utils.CopyDirectory("./images", common.EnvConfig.UploadPath+"/application-images"); err != nil {
-		log.Printf("Error copying directory: %v", err)
+	files, err := resources.FS.ReadDir("images")
+	if err != nil {
 		return err
 	}
 
+	for _, file := range files {
+		srcFilePath := filepath.Join("images", file.Name())
+		destFilePath := filepath.Join(common.EnvConfig.UploadPath, "application-images", file.Name())
+
+		err := utils.CopyEmbeddedFileToDisk(srcFilePath, destFilePath)
+		if err != nil {
+			return err
+		}
+	}
+
 	return nil
 }
 

backend/internal/utils/email/email_service_templates.go

@@ -2,6 +2,7 @@ package email
 
 import (
 	"fmt"
+	"github.com/stonith404/pocket-id/backend/resources"
 	htemplate "html/template"
 	"io/fs"
 	"path"
@@ -35,36 +36,37 @@ type pareseable[V any] interface {
 	ParseFS(fs.FS, ...string) (V, error)
 }
 
-func prepareTemplate[V pareseable[V]](template string, rootTemplate clonable[V], templateDir fs.FS, suffix string) (V, error) {
+func prepareTemplate[V pareseable[V]](templateFS fs.FS, template string, rootTemplate clonable[V], suffix string) (V, error) {
 	tmpl, err := rootTemplate.Clone()
 	if err != nil {
-		return *new(V), fmt.Errorf("clone root html template: %w", err)
+		return *new(V), fmt.Errorf("clone root template: %w", err)
 	}
 
 	filename := fmt.Sprintf("%s%s", template, suffix)
-	_, err = tmpl.ParseFS(templateDir, filename)
+	templatePath := path.Join("email-templates", filename)
+	_, err = tmpl.ParseFS(templateFS, templatePath)
 	if err != nil {
-		return *new(V), fmt.Errorf("parsing html template '%s': %w", template, err)
+		return *new(V), fmt.Errorf("parsing template '%s': %w", template, err)
 	}
 
 	return tmpl, nil
 }
 
-func PrepareTextTemplates(templateDir fs.FS, templates []string) (map[string]*ttemplate.Template, error) {
-	components := path.Join(templateComponentsDir, "*_text.tmpl")
-	rootTmpl, err := ttemplate.ParseFS(templateDir, components)
+func PrepareTextTemplates(templates []string) (map[string]*ttemplate.Template, error) {
+	components := path.Join("email-templates", "components", "*_text.tmpl")
+	rootTmpl, err := ttemplate.ParseFS(resources.FS, components)
 	if err != nil {
 		return nil, fmt.Errorf("unable to parse templates '%s': %w", components, err)
 	}
 
-	var textTemplates = make(map[string]*ttemplate.Template, len(templates))
+	textTemplates := make(map[string]*ttemplate.Template, len(templates))
 	for _, tmpl := range templates {
 		rootTmplClone, err := rootTmpl.Clone()
 		if err != nil {
 			return nil, fmt.Errorf("clone root template: %w", err)
 		}
 
-		textTemplates[tmpl], err = prepareTemplate[*ttemplate.Template](tmpl, rootTmplClone, templateDir, "_text.tmpl")
+		textTemplates[tmpl], err = prepareTemplate[*ttemplate.Template](resources.FS, tmpl, rootTmplClone, "_text.tmpl")
 		if err != nil {
 			return nil, fmt.Errorf("parse '%s': %w", tmpl, err)
 		}
@@ -73,21 +75,21 @@ func PrepareTextTemplates(templateDir fs.FS, templates []string) (map[string]*tt
 	return textTemplates, nil
 }
 
-func PrepareHTMLTemplates(templateDir fs.FS, templates []string) (map[string]*htemplate.Template, error) {
-	components := path.Join(templateComponentsDir, "*_html.tmpl")
-	rootTmpl, err := htemplate.ParseFS(templateDir, components)
+func PrepareHTMLTemplates(templates []string) (map[string]*htemplate.Template, error) {
+	components := path.Join("email-templates", "components", "*_html.tmpl")
+	rootTmpl, err := htemplate.ParseFS(resources.FS, components)
 	if err != nil {
 		return nil, fmt.Errorf("unable to parse templates '%s': %w", components, err)
 	}
 
-	var htmlTemplates = make(map[string]*htemplate.Template, len(templates))
+	htmlTemplates := make(map[string]*htemplate.Template, len(templates))
 	for _, tmpl := range templates {
 		rootTmplClone, err := rootTmpl.Clone()
 		if err != nil {
 			return nil, fmt.Errorf("clone root template: %w", err)
 		}
 
-		htmlTemplates[tmpl], err = prepareTemplate[*htemplate.Template](tmpl, rootTmplClone, templateDir, "_html.tmpl")
+		htmlTemplates[tmpl], err = prepareTemplate[*htemplate.Template](resources.FS, tmpl, rootTmplClone, "_html.tmpl")
 		if err != nil {
 			return nil, fmt.Errorf("parse '%s': %w", tmpl, err)
 		}

backend/internal/utils/file_util.go

@@ -1,6 +1,7 @@
 package utils
 
 import (
+	"github.com/stonith404/pocket-id/backend/resources"
 	"io"
 	"mime/multipart"
 	"os"
@@ -28,27 +29,8 @@ func GetImageMimeType(ext string) string {
 	}
 }
 
-func CopyDirectory(srcDir, destDir string) error {
-	files, err := os.ReadDir(srcDir)
-	if err != nil {
-		return err
-	}
-
-	for _, file := range files {
-		srcFilePath := filepath.Join(srcDir, file.Name())
-		destFilePath := filepath.Join(destDir, file.Name())
-
-		err := CopyFile(srcFilePath, destFilePath)
-		if err != nil {
-			return err
-		}
-	}
-
-	return nil
-}
-
-func CopyFile(srcFilePath, destFilePath string) error {
-	srcFile, err := os.Open(srcFilePath)
+func CopyEmbeddedFileToDisk(srcFilePath, destFilePath string) error {
+	srcFile, err := resources.FS.Open(srcFilePath)
 	if err != nil {
 		return err
 	}

backend/resources/files.go

@@ -0,0 +1,8 @@
+package resources
+
+import "embed"
+
+// Embedded file systems for the project
+
+//go:embed email-templates images migrations
+var FS embed.FS

backend/resources/migrations/postgres/20250103145821_pkce_column.down.sql

@@ -0,0 +1 @@
+ALTER TABLE oidc_clients DROP COLUMN pkce_enabled;

backend/resources/migrations/postgres/20250103145821_pkce_column.up.sql

@@ -0,0 +1 @@
+ALTER TABLE oidc_clients ADD COLUMN pkce_enabled BOOLEAN DEFAULT FALSE;

backend/resources/migrations/sqlite/20250103145821_pkce_column.down.sql

@@ -0,0 +1 @@
+ALTER TABLE oidc_clients DROP COLUMN pkce_enabled;

backend/resources/migrations/sqlite/20250103145821_pkce_column.up.sql

@@ -0,0 +1 @@
+ALTER TABLE oidc_clients ADD COLUMN pkce_enabled BOOLEAN DEFAULT FALSE;

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pocket-id-frontend",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "private": true,
   "scripts": {
     "dev": "vite dev --port 3000",

frontend/src/lib/components/checkbox-with-label.svelte

@@ -6,12 +6,26 @@
 		id,
 		checked = $bindable(),
 		label,
-		description
-	}: { id: string; checked: boolean; label: string; description?: string } = $props();
+		description,
+		disabled = false,
+		onCheckedChange
+	}: {
+		id: string;
+		checked: boolean;
+		label: string;
+		description?: string;
+		disabled?: boolean;
+		onCheckedChange?: (checked: boolean) => void;
+	} = $props();
 </script>
 
 <div class="items-top mt-5 flex space-x-2">
-	<Checkbox {id} bind:checked />
+	<Checkbox
+		{id}
+		{disabled}
+		onCheckedChange={(v) => onCheckedChange && onCheckedChange(v == true)}
+		bind:checked
+	/>
 	<div class="grid gap-1.5 leading-none">
 		<Label for={id} class="mb-0 text-sm font-medium leading-none">
 			{label}

frontend/src/lib/components/header/header.svelte

@@ -19,7 +19,7 @@
 	>
 		<div class="flex h-16 items-center">
 			{#if !isAuthPage}
-				<Logo class="mr-3 h-10 w-10" />
+				<Logo class="mr-3 h-8 w-8" />
 				<h1 class="text-lg font-medium" data-testid="application-name">
 					{$appConfigStore.appName}
 				</h1>

frontend/src/lib/types/oidc.type.ts

@@ -5,6 +5,7 @@ export type OidcClient = {
 	callbackURLs: [string, ...string[]];
 	hasLogo: boolean;
 	isPublic: boolean;
+	pkceEnabled: boolean;
 };
 
 export type OidcClientCreate = Omit<OidcClient, 'id' | 'logoURL' | 'hasLogo'>;

frontend/src/lib/utils/form-util.ts

@@ -80,11 +80,19 @@ export function createForm<T extends z.ZodType<any, any>>(schema: T, initialValu
 		});
 	}
 
+	function setValue(key: keyof z.infer<T>, value: z.infer<T>[keyof z.infer<T>]) {
+		inputsStore.update((inputs) => {
+			inputs[key].value = value;
+			return inputs;
+		});
+	}
+
 	return {
 		schema,
 		inputs: inputsStore,
 		data,
 		validate,
+		setValue,
 		reset
 	};
 }

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

@@ -10,7 +10,7 @@
 		OidcClientCreateWithLogo
 	} from '$lib/types/oidc.type';
 	import { createForm } from '$lib/utils/form-util';
-	import { z } from 'zod';
+	import { set, z } from 'zod';
 	import OidcCallbackUrlInput from './oidc-callback-url-input.svelte';
 
 	let {
@@ -30,13 +30,15 @@
 	const client: OidcClientCreate = {
 		name: existingClient?.name || '',
 		callbackURLs: existingClient?.callbackURLs || [''],
-		isPublic: existingClient?.isPublic || false
+		isPublic: existingClient?.isPublic || false,
+		pkceEnabled: existingClient?.isPublic == true || existingClient?.pkceEnabled || false
 	};
 
 	const formSchema = z.object({
 		name: z.string().min(2).max(50),
 		callbackURLs: z.array(z.string().url()).nonempty(),
-		isPublic: z.boolean()
+		isPublic: z.boolean(),
+		pkceEnabled: z.boolean()
 	});
 
 	type FormSchema = typeof formSchema;
@@ -85,8 +87,19 @@
 			id="public-client"
 			label="Public Client"
 			description="Public clients do not have a client secret and use PKCE instead. Enable this if your client is a SPA or mobile app."
+			onCheckedChange={(v) => {
+				console.log(v)
+				if (v == true) form.setValue('pkceEnabled', true);
+			}}
 			bind:checked={$inputs.isPublic.value}
 		/>
+		<CheckboxWithLabel
+			id="pkce"
+			label="PKCE"
+			description="Public Key Code Exchange is a security feature to prevent CSRF and authorization code interception attacks."
+			disabled={$inputs.isPublic.value}		
+			bind:checked={$inputs.pkceEnabled.value}
+		/>
 	</div>
 	<div class="mt-8">
 		<Label for="logo">Logo</Label>

frontend/src/routes/settings/admin/oidc-clients/oidc-client-list.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
+	import AdvancedTable from '$lib/components/advanced-table.svelte';
 	import { openConfirmDialog } from '$lib/components/confirm-dialog/';
 	import { Button } from '$lib/components/ui/button';
-	import { Input } from '$lib/components/ui/input';
-	import * as Pagination from '$lib/components/ui/pagination';
 	import * as Table from '$lib/components/ui/table';
 	import OIDCService from '$lib/services/oidc-service';
 	import type { OidcClient } from '$lib/types/oidc.type';
 	import type { Paginated, PaginationRequest } from '$lib/types/pagination.type';
-	import { debounced } from '$lib/utils/debounce-util';
 	import { axiosErrorToast } from '$lib/utils/error-util';
 	import { LucidePencil, LucideTrash } from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
@@ -29,10 +27,6 @@
 	});
 	let search = $state('');
 
-	const debouncedSearch = debounced(async (searchValue: string) => {
-		clients = await oidcService.listClients(searchValue, pagination);
-	}, 400);
-
 	async function deleteClient(client: OidcClient) {
 		openConfirmDialog({
 			title: `Delete ${client.name}`,
@@ -52,98 +46,42 @@
 			}
 		});
 	}
+
+	async function fetchItems(search: string, page: number, limit: number) {
+		return oidcService.listClients(search, { page, limit });
+	}
 </script>
 
-<Input
-	type="search"
-	placeholder="Search clients"
-	bind:value={search}
-	on:input={(e) => debouncedSearch((e.target as HTMLInputElement).value)}
-/>
-<Table.Root>
-	<Table.Header class="sr-only">
-		<Table.Row>
-			<Table.Head>Logo</Table.Head>
-			<Table.Head>Name</Table.Head>
-			<Table.Head>Actions</Table.Head>
-		</Table.Row>
-	</Table.Header>
-	<Table.Body>
-		{#if clients.data.length === 0}
-			<Table.Row>
-				<Table.Cell colspan={6} class="text-center">No OIDC clients found</Table.Cell>
-			</Table.Row>
-		{:else}
-			{#each clients.data as client}
-				<Table.Row>
-					<Table.Cell class="w-8 font-medium">
-						{#if client.hasLogo}
-							<div class="h-8 w-8">
-								<img
-									class="m-auto max-h-full max-w-full object-contain"
-									src="/api/oidc/clients/{client.id}/logo"
-									alt="{client.name} logo"
-								/>
-							</div>
-						{/if}
-					</Table.Cell>
-					<Table.Cell class="font-medium">{client.name}</Table.Cell>
-					<Table.Cell class="flex justify-end gap-1">
-						<Button
-							href="/settings/admin/oidc-clients/{client.id}"
-							size="sm"
-							variant="outline"
-							aria-label="Edit"><LucidePencil class="h-3 w-3 " /></Button
-						>
-						<Button
-							on:click={() => deleteClient(client)}
-							size="sm"
-							variant="outline"
-							aria-label="Delete"><LucideTrash class="h-3 w-3 text-red-500" /></Button
-						>
-					</Table.Cell>
-				</Table.Row>
-			{/each}
-		{/if}
-	</Table.Body>
-</Table.Root>
-
-{#if clients?.data?.length ?? 0 > 0}
-	<Pagination.Root
-		class="mt-5"
-		count={clients.pagination.totalItems}
-		perPage={pagination.limit}
-		onPageChange={async (p) =>
-			(clients = await oidcService.listClients(search, {
-				page: p,
-				limit: pagination.limit
-			}))}
-		bind:page={clients.pagination.currentPage}
-		let:pages
-		let:currentPage
-	>
-		<Pagination.Content class="flex justify-end">
-			<Pagination.Item>
-				<Pagination.PrevButton />
-			</Pagination.Item>
-			{#each pages as page (page.key)}
-				{#if page.type === 'ellipsis'}
-					<Pagination.Item>
-						<Pagination.Ellipsis />
-					</Pagination.Item>
-				{:else}
-					<Pagination.Item>
-						<Pagination.Link {page} isActive={clients.pagination.currentPage === page.value}>
-							{page.value}
-						</Pagination.Link>
-					</Pagination.Item>
-				{/if}
-			{/each}
-			<Pagination.Item>
-				<Pagination.NextButton />
-			</Pagination.Item>
-		</Pagination.Content>
-	</Pagination.Root>
-{/if}
+<AdvancedTable
+	items={clients}
+	{fetchItems}
+	columns={['Logo', 'Name', { label: 'Actions', hidden: true }]}
+>
+	{#snippet rows({ item })}
+		<Table.Cell class="w-8 font-medium">
+			{#if item.hasLogo}
+				<div class="h-8 w-8">
+					<img
+						class="m-auto max-h-full max-w-full object-contain"
+						src="/api/oidc/clients/{item.id}/logo"
+						alt="{item.name} logo"
+					/>
+				</div>
+			{/if}
+		</Table.Cell>
+		<Table.Cell class="font-medium">{item.name}</Table.Cell>
+		<Table.Cell class="flex justify-end gap-1">
+			<Button
+				href="/settings/admin/oidc-clients/{item.id}"
+				size="sm"
+				variant="outline"
+				aria-label="Edit"><LucidePencil class="h-3 w-3 " /></Button
+			>
+			<Button on:click={() => deleteClient(item)} size="sm" variant="outline" aria-label="Delete"
+				><LucideTrash class="h-3 w-3 text-red-500" /></Button
+			>
+		</Table.Cell>
+	{/snippet}
+</AdvancedTable>
 
 <OneTimeLinkModal {oneTimeLink} />