diff --git a/ui/src/pages/Admin/OidcConfigPage.tsx b/ui/src/pages/Admin/OidcConfigPage.tsx
index cbf205bf..24c22570 100644
--- a/ui/src/pages/Admin/OidcConfigPage.tsx
+++ b/ui/src/pages/Admin/OidcConfigPage.tsx
@@ -50,15 +50,15 @@ export default function OidcConfigPage() {
   function addRole() {
     if (!form) return;
     const role = newRole.trim().toUpperCase();
-    if (role && !form.defaultRoles.includes(role)) {
-      update('defaultRoles', [...form.defaultRoles, role]);
+    if (role && !(form.defaultRoles || []).includes(role)) {
+      update('defaultRoles', [...(form.defaultRoles || []), role]);
       setNewRole('');
     }
   }
 
   function removeRole(role: string) {
     if (!form) return;
-    update('defaultRoles', form.defaultRoles.filter((r) => r !== role));
+    update('defaultRoles', (form.defaultRoles || []).filter((r) => r !== role));
   }
 
   async function handleSave() {
@@ -187,10 +187,10 @@ export default function OidcConfigPage() {
       <section className={styles.section}>
         <SectionHeader>Default Roles</SectionHeader>
         <div className={styles.tagList}>
-          {form.defaultRoles.map((role) => (
+          {(form.defaultRoles || []).map((role) => (
             <Tag key={role} label={role} color="primary" onRemove={() => removeRole(role)} />
           ))}
-          {form.defaultRoles.length === 0 && (
+          {(form.defaultRoles || []).length === 0 && (
             <span className={styles.noRoles}>No default roles configured</span>
           )}
         </div>