feat: support configuring login methods

package.json

@@ -1,7 +1,7 @@
 {
   "name": "seamless-auth-admin-dashboard",
   "private": true,
-  "version": "0.0.9",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -52,4 +52,4 @@
     "vite": "^8.0.1",
     "vitest": "^4.1.5"
   }
-}
+}

src/components/Section.tsx

@@ -26,7 +26,9 @@ export function Section({
             )}
           </div>
 
-          {actions && <div className="w-full sm:w-auto sm:shrink-0">{actions}</div>}
+          {actions && (
+            <div className="w-full sm:w-auto sm:shrink-0">{actions}</div>
+          )}
         </div>
       </div>
 

src/components/Sidebar.tsx

@@ -104,10 +104,7 @@ function SidebarContent({
   );
 }
 
-export default function Sidebar({
-  mobileOpen = false,
-  onClose,
-}: SidebarProps) {
+export default function Sidebar({ mobileOpen = false, onClose }: SidebarProps) {
   return (
     <>
       <aside className="hidden h-full w-64 flex-col border-r border-subtle bg-surface px-4 py-5 xl:flex">

src/components/Table.tsx

@@ -115,9 +115,7 @@ export default function Table<T extends Record<string, unknown>>({
     actions.length ? "80px" : ""
   }`;
   const tableMinWidth = `${
-    (selectable ? 40 : 0) +
-    columns.length * 160 +
-    (actions.length ? 80 : 0)
+    (selectable ? 40 : 0) + columns.length * 160 + (actions.length ? 80 : 0)
   }px`;
 
   const selectedRows: T[] = [...selected].map((i) => sortedData[i]);
@@ -171,7 +169,11 @@ export default function Table<T extends Record<string, unknown>>({
           )}
         </div>
 
-        <div className="mt-3 overflow-x-auto" role="region" aria-label="Table content">
+        <div
+          className="mt-3 overflow-x-auto"
+          role="region"
+          aria-label="Table content"
+        >
           <div
             className="grid min-w-full w-max items-center gap-3 text-xs uppercase tracking-[0.18em] text-subtle"
             style={{
@@ -235,69 +237,69 @@ export default function Table<T extends Record<string, unknown>>({
       ) : (
         <div className="overflow-x-auto">
           <div className="min-w-full w-max divide-y divide-[color:var(--border)]/70">
-          {sortedData.map((row, i) => {
-            const isSelected = selected.has(i);
+            {sortedData.map((row, i) => {
+              const isSelected = selected.has(i);
 
-            return (
-              <div
-                key={i}
-                className={clsx(
-                  "grid min-w-full w-max items-center gap-3 px-4 py-3 transition-all",
-                  "hover:bg-[color:var(--surface-alt)]/45",
-                  isSelected &&
-                    "bg-[color:var(--accent-soft)]/40 ring-1 ring-inset ring-[var(--primary)]",
-                )}
-                style={{
-                  gridTemplateColumns: gridTemplate,
-                  minWidth: tableMinWidth,
-                }}
-              >
-                {selectable && (
-                  <input
-                    type="checkbox"
-                    checked={isSelected}
-                    onChange={() => toggleSelect(i)}
-                    className="accent-[var(--primary)]"
-                  />
-                )}
+              return (
+                <div
+                  key={i}
+                  className={clsx(
+                    "grid min-w-full w-max items-center gap-3 px-4 py-3 transition-all",
+                    "hover:bg-[color:var(--surface-alt)]/45",
+                    isSelected &&
+                      "bg-[color:var(--accent-soft)]/40 ring-1 ring-inset ring-[var(--primary)]",
+                  )}
+                  style={{
+                    gridTemplateColumns: gridTemplate,
+                    minWidth: tableMinWidth,
+                  }}
+                >
+                  {selectable && (
+                    <input
+                      type="checkbox"
+                      checked={isSelected}
+                      onChange={() => toggleSelect(i)}
+                      className="accent-[var(--primary)]"
+                    />
+                  )}
 
-                {columns.map((col) => (
-                  <div
-                    key={String(col.key)}
-                    className="min-w-0 truncate text-sm text-primary"
-                  >
-                    {col.render
-                      ? col.render(row[col.key], row)
-                      : (row[col.key] as React.ReactNode)}
-                  </div>
-                ))}
-
-                {actions.length > 0 && (
-                  <div className="flex justify-end gap-2">
-                    {actions.map((action, idx) => {
-                      const Icon = action.icon;
-
-                      return (
-                        <button
-                          key={idx}
-                          onClick={() => action.onClick(row)}
-                          title={action.label}
-                          className={clsx(
-                            "rounded-md p-1.5 transition",
-                            action.variant === "danger"
-                              ? "text-[var(--highlight)] hover:bg-[color:var(--highlight)]/10"
-                              : "text-muted hover:bg-surface-alt hover:text-primary",
-                          )}
-                        >
-                          <Icon size={16} />
-                        </button>
-                      );
-                    })}
-                  </div>
-                )}
-              </div>
-            );
-          })}
+                  {columns.map((col) => (
+                    <div
+                      key={String(col.key)}
+                      className="min-w-0 truncate text-sm text-primary"
+                    >
+                      {col.render
+                        ? col.render(row[col.key], row)
+                        : (row[col.key] as React.ReactNode)}
+                    </div>
+                  ))}
+
+                  {actions.length > 0 && (
+                    <div className="flex justify-end gap-2">
+                      {actions.map((action, idx) => {
+                        const Icon = action.icon;
+
+                        return (
+                          <button
+                            key={idx}
+                            onClick={() => action.onClick(row)}
+                            title={action.label}
+                            className={clsx(
+                              "rounded-md p-1.5 transition",
+                              action.variant === "danger"
+                                ? "text-[var(--highlight)] hover:bg-[color:var(--highlight)]/10"
+                                : "text-muted hover:bg-surface-alt hover:text-primary",
+                            )}
+                          >
+                            <Icon size={16} />
+                          </button>
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
           </div>
         </div>
       )}

src/hooks/useSystemConfig.ts

@@ -8,6 +8,8 @@
 import { useQuery } from "@tanstack/react-query";
 import { apiFetch } from "../lib/api";
 
+export type LoginMethod = "passkey" | "magic_link" | "email_otp" | "phone_otp";
+
 export type SystemConfig = {
   app_name: string;
   available_roles: string[];
@@ -16,6 +18,8 @@ export type SystemConfig = {
   refresh_token_ttl: string;
   rate_limit: number;
   delay_after: number;
+  login_methods: LoginMethod[];
+  passkey_login_fallback_enabled: boolean;
   rpid: string;
   origins: string[];
 };

src/hooks/useUpdateSystemConfig.ts

@@ -6,6 +6,7 @@
 
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { apiFetch } from "../lib/api";
+import type { LoginMethod } from "./useSystemConfig";
 
 export type SystemConfig = {
   app_name: string;
@@ -15,6 +16,8 @@ export type SystemConfig = {
   refresh_token_ttl: string;
   rate_limit: number;
   delay_after: number;
+  login_methods: LoginMethod[];
+  passkey_login_fallback_enabled: boolean;
   rpid: string;
   origins: string[];
 };

src/pages/SystemConfig.test.tsx

@@ -0,0 +1,68 @@
+/*
+ * Copyright © 2026 Fells Code, LLC
+ * Licensed under the GNU Affero General Public License v3.0
+ * See LICENSE file in the project root for full license information
+ */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import SystemConfigPage from "./SystemConfig";
+
+const mocks = vi.hoisted(() => ({
+  mutate: vi.fn(),
+  useSystemConfig: vi.fn(),
+  useUpdateSystemConfig: vi.fn(),
+}));
+
+vi.mock("../hooks/useSystemConfig", () => ({
+  useSystemConfig: mocks.useSystemConfig,
+}));
+
+vi.mock("../hooks/useUpdateSystemConfig", () => ({
+  useUpdateSystemConfig: mocks.useUpdateSystemConfig,
+}));
+
+const baseConfig = {
+  app_name: "Seamless Auth",
+  available_roles: ["user", "admin"],
+  default_roles: ["user"],
+  access_token_ttl: "15m",
+  refresh_token_ttl: "30d",
+  rate_limit: 100,
+  delay_after: 10,
+  login_methods: ["passkey", "magic_link"],
+  passkey_login_fallback_enabled: true,
+  rpid: "example.com",
+  origins: ["https://example.com"],
+};
+
+describe("SystemConfigPage", () => {
+  beforeEach(() => {
+    mocks.mutate.mockReset();
+    mocks.useSystemConfig.mockReturnValue({
+      data: baseConfig,
+      isLoading: false,
+    });
+    mocks.useUpdateSystemConfig.mockReturnValue({
+      mutate: mocks.mutate,
+      isPending: false,
+    });
+  });
+
+  it("saves selected login policy fields", () => {
+    render(<SystemConfigPage />);
+
+    fireEvent.click(screen.getByRole("checkbox", { name: /email otp/i }));
+    fireEvent.click(
+      screen.getByRole("checkbox", { name: /passkey login fallback/i }),
+    );
+    fireEvent.click(screen.getByRole("button", { name: /save changes/i }));
+
+    expect(mocks.mutate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        login_methods: ["passkey", "magic_link", "email_otp"],
+        passkey_login_fallback_enabled: false,
+      }),
+    );
+  });
+});