feat: add manual validation for SSO (#94)

* feat: add manual validation for SSO

* fix: test snapshot

* fix: add GetMe in user service instead of using a DB_URL conditions...

Author: axelmarciano

apps/dashboard/src/components/app-sidebar.tsx

@@ -15,6 +15,8 @@ import {
   Users,
 } from 'lucide-react';
 import clsx from 'clsx';
+import { useQuery } from '@tanstack/react-query';
+import { api } from '@/lib/api';
 import { Combobox } from '@/components/Combobox';
 import { useSelectedApp } from '@/lib/SelectedAppContext';
 import { CreateAppModal } from '@/components/app-creation-modal';
@@ -62,6 +64,16 @@ const EnterpriseNavBadge = () => (
   </span>
 );
 
+// Counts the accounts waiting for an admin to approve them. Without it nobody
+// notices there is anything to approve, and new members sit blocked in silence.
+const PendingUsersBadge = ({ count }: { count: number }) => (
+  <span
+    className="ml-auto rounded-full border border-amber-200/80 bg-amber-50/80 px-1.5 py-px text-[10px] font-medium text-amber-700"
+    title={`${count} account${count > 1 ? 's' : ''} waiting for approval`}>
+    {count}
+  </span>
+);
+
 const SectionLabel = ({ children }: { children: React.ReactNode }) => (
   <p className="px-3 pb-1.5 pt-5 text-[11px] font-medium uppercase tracking-widest text-muted-foreground/70">
     {children}
@@ -74,6 +86,15 @@ export function AppSidebar() {
   const { apps, selectedAppId, setSelectedAppId, refreshApps, isLoading } = useSelectedApp();
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
+  // Same query key as the Users page, so react-query serves both from one
+  // request and approving an account refreshes the badge on its own.
+  const usersQuery = useQuery({
+    queryKey: ['users'],
+    queryFn: () => api.getUsers(),
+    enabled: CONTROL_PLANE_ENABLED && isAdmin,
+  });
+  const pendingUsersCount = (usersQuery.data ?? []).filter(user => !user.enabled).length;
+
   const handleAppCreated = async (newAppId: string) => {
     await refreshApps();
     setSelectedAppId(newAppId);
@@ -166,7 +187,14 @@ export function AppSidebar() {
             <>
               <SectionLabel>Access & Security</SectionLabel>
               <div className="space-y-0.5">
-                <NavLink to="/users" icon={Users}>
+                <NavLink
+                  to="/users"
+                  icon={Users}
+                  badge={
+                    pendingUsersCount > 0 ? (
+                      <PendingUsersBadge count={pendingUsersCount} />
+                    ) : undefined
+                  }>
                   Users
                 </NavLink>
                 <NavLink to="/sso" icon={Fingerprint} badge={<EnterpriseNavBadge />}>

apps/dashboard/src/ee/components/SsoConfigCard.tsx

@@ -32,6 +32,7 @@ type SsoFormState = {
   allowedEmailDomains: string[];
   allowedGroups: string[];
   trustUnverifiedEmail: boolean;
+  manualUserValidation: boolean;
 };
 
 const DEFAULT_SCOPES = 'openid profile email';
@@ -47,6 +48,7 @@ const emptyForm: SsoFormState = {
   allowedEmailDomains: [],
   allowedGroups: [],
   trustUnverifiedEmail: false,
+  manualUserValidation: false,
 };
 
 const formFromSettings = (settings: SsoSettings): SsoFormState => ({
@@ -61,6 +63,7 @@ const formFromSettings = (settings: SsoSettings): SsoFormState => ({
   allowedEmailDomains: settings.allowedEmailDomains,
   allowedGroups: settings.allowedGroups,
   trustUnverifiedEmail: settings.trustUnverifiedEmail,
+  manualUserValidation: settings.manualUserValidation,
 });
 
 // Signature of the stored values the form is populated from. The live enabled
@@ -78,6 +81,7 @@ const settingsFormSignature = (settings: SsoSettings | null): string | null =>
         settings.allowedEmailDomains,
         settings.allowedGroups,
         settings.trustUnverifiedEmail,
+        settings.manualUserValidation,
       ])
     : null;
 
@@ -241,6 +245,7 @@ export const SsoConfigCard = () => {
         allowedGroups: form.allowedGroups,
         groupsClaim: form.groupsClaim.trim(),
         trustUnverifiedEmail: form.trustUnverifiedEmail,
+        manualUserValidation: form.manualUserValidation,
       });
       queryClient.setQueryData(['ssoSettings'], saved);
       queryClient.invalidateQueries({ queryKey: ['ssoPublicConfig'] });
@@ -278,6 +283,7 @@ export const SsoConfigCard = () => {
         allowedGroups: settings.allowedGroups,
         groupsClaim: settings.groupsClaim,
         trustUnverifiedEmail: settings.trustUnverifiedEmail,
+        manualUserValidation: settings.manualUserValidation,
       });
       queryClient.setQueryData(['ssoSettings'], saved);
       queryClient.invalidateQueries({ queryKey: ['ssoPublicConfig'] });
@@ -364,7 +370,10 @@ export const SsoConfigCard = () => {
             <AlertTitle>Could not load the SSO configuration</AlertTitle>
             <AlertDescription className="flex flex-col items-start gap-3">
               <span className="break-words">
-                {describeApiError(settingsQuery.error, 'The server could not be reached.').description}
+                {
+                  describeApiError(settingsQuery.error, 'The server could not be reached.')
+                    .description
+                }
               </span>
               <Button
                 variant="outline"
@@ -428,12 +437,16 @@ export const SsoConfigCard = () => {
                   size="icon"
                   onClick={handleCopyRedirectUri}
                   title="Copy the redirect URI">
-                  {copied ? <Check className="h-4 w-4 text-emerald-600" /> : <Copy className="h-4 w-4" />}
+                  {copied ? (
+                    <Check className="h-4 w-4 text-emerald-600" />
+                  ) : (
+                    <Copy className="h-4 w-4" />
+                  )}
                 </Button>
               </div>
               <FieldHint>
-                Derived from BASE_URL. Register it as a web redirect URI in your identity
-                provider's app registration before saving.
+                Derived from BASE_URL. Register it as a web redirect URI in your identity provider's
+                app registration before saving.
               </FieldHint>
             </div>
 
@@ -448,8 +461,10 @@ export const SsoConfigCard = () => {
                   spellCheck={false}
                 />
                 <FieldHint>
-                  The OpenID Connect issuer of your provider. Saving fetches
-                  {' '}<code className="rounded bg-muted px-1 py-0.5 text-[11px]">/.well-known/openid-configuration</code>{' '}
+                  The OpenID Connect issuer of your provider. Saving fetches{' '}
+                  <code className="rounded bg-muted px-1 py-0.5 text-[11px]">
+                    /.well-known/openid-configuration
+                  </code>{' '}
                   from it and reports any error right here.
                 </FieldHint>
               </div>
@@ -547,6 +562,24 @@ export const SsoConfigCard = () => {
                   onCheckedChange={checked => setField('trustUnverifiedEmail', checked)}
                 />
               </div>
+
+              <div className="flex items-start justify-between gap-4 border-t pt-4">
+                <div className="space-y-0.5">
+                  <Label htmlFor="sso-manual-validation">Require admin approval</Label>
+                  <FieldHint>
+                    New accounts are created on their first sign-in but cannot enter until an admin
+                    approves them on the Users page, where they show up as pending. Use this when
+                    your provider authenticates more people than should reach this dashboard and
+                    does not send group claims to filter on, which is the case for Google Workspace.
+                    Accounts that already exist keep their access.
+                  </FieldHint>
+                </div>
+                <Switch
+                  aria-label="Require admin approval"
+                  checked={form.manualUserValidation}
+                  onCheckedChange={checked => setField('manualUserValidation', checked)}
+                />
+              </div>
             </div>
 
             <div className="space-y-4">

apps/dashboard/src/lib/api.ts

@@ -111,6 +111,9 @@ export type UserRecord = {
   id: string;
   email: string;
   isAdmin: boolean;
+  // False for an account an admin revoked, or one awaiting approval under SSO
+  // manual validation. Disabled accounts cannot sign in.
+  enabled: boolean;
   createdAt?: string;
   lastConnectedAt?: string;
 };
@@ -154,6 +157,9 @@ export type SsoSettings = {
   // Whether the server accepts an email the provider did not verify
   // (email_verified false or absent) for account lookup and authorization.
   trustUnverifiedEmail: boolean;
+  // Whether accounts discovered on their first SSO sign-in are provisioned
+  // disabled, waiting for an admin to approve them on the Users page.
+  manualUserValidation: boolean;
   redirectUri: string;
 };
 
@@ -169,6 +175,7 @@ export type SaveSsoSettingsPayload = {
   allowedGroups: string[];
   groupsClaim: string;
   trustUnverifiedEmail: boolean;
+  manualUserValidation: boolean;
 };
 
 // Mirror of the server's SettingsEnv payload (/api/settings). Field names are
@@ -350,6 +357,14 @@ export class ApiClient {
     });
   }
 
+  public async updateUserEnabled(userId: string, enabled: boolean) {
+    return this.request<void>(`/api/users/${encodeURIComponent(userId)}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ enabled }),
+    });
+  }
+
   public async deleteUser(userId: string) {
     return this.request<void>(`/api/users/${encodeURIComponent(userId)}`, {
       method: 'DELETE',

apps/dashboard/src/pages/Login/index.tsx

@@ -26,13 +26,18 @@ const FormSchema = z.object({
 // underlying cause stays in the server logs; the code alone reaches the URL.
 const SSO_ERROR_MESSAGES: Record<string, string> = {
   sso_denied: 'Sign-in was cancelled at the identity provider.',
-  sso_license: 'Single sign-on requires an active enterprise license. Sign in with your password instead.',
+  sso_license:
+    'Single sign-on requires an active enterprise license. Sign in with your password instead.',
   sso_email_missing:
     'Your identity provider did not return an email address for your account. Contact your administrator.',
   sso_email_unverified:
     'Your identity provider did not verify your email address. Contact your administrator.',
-  sso_forbidden: 'Your account is not allowed to access this dashboard. Contact your administrator.',
-  sso_failed: 'SSO sign-in failed. Try again, and contact your administrator if it keeps happening.',
+  sso_forbidden:
+    'Your account is not allowed to access this dashboard. Contact your administrator.',
+  sso_pending:
+    'Your account has been created and is waiting for an administrator to approve it. You will be able to sign in once it is approved.',
+  sso_failed:
+    'SSO sign-in failed. Try again, and contact your administrator if it keeps happening.',
 };
 
 export const Login = () => {
@@ -44,7 +49,10 @@ export const Login = () => {
     },
   });
   const navigate = useNavigate();
-  const [ssoError, setSsoError] = useState<string | null>(null);
+  // Shared by both sign-in paths: the SSO callback's error codes and the
+  // password path's 403s (SSO enforced, account awaiting approval). Both are
+  // account-state messages rather than credential mistakes.
+  const [signInNotice, setSignInNotice] = useState<string | null>(null);
 
   // The SSO callback lands here with the session pair (or an error code) in
   // the URL fragment: fragments never reach a server, so tokens cannot end up
@@ -70,7 +78,7 @@ export const Login = () => {
       navigate('/');
       return;
     }
-    setSsoError(SSO_ERROR_MESSAGES[errorCode ?? ''] ?? SSO_ERROR_MESSAGES.sso_failed);
+    setSignInNotice(SSO_ERROR_MESSAGES[errorCode ?? ''] ?? SSO_ERROR_MESSAGES.sso_failed);
   }, [navigate]);
 
   const onSubmit = useCallback(
@@ -80,6 +88,14 @@ export const Login = () => {
         setTokens(response.token, response.refreshToken);
         navigate('/');
       } catch (error) {
+        // A 403 means the credentials were right but the account may not use
+        // this door: SSO is enforced for it, or it is waiting for approval.
+        // That is not a password mistake, so it belongs in the notice above
+        // the form rather than under the password field.
+        if (error instanceof ApiProblemError && error.status === 403) {
+          setSignInNotice(error.detail);
+          return;
+        }
         // Only an actual 401 means wrong credentials. A misconfigured server
         // (e.g. ADMIN_EMAIL not set in stateless mode) answers with an
         // actionable detail, and a fetch that never reached the server must
@@ -121,10 +137,10 @@ export const Login = () => {
             </div>
           </div>
 
-          {ssoError && (
+          {signInNotice && (
             <Alert variant="destructive" className="mb-5">
               <TriangleAlert className="h-4 w-4" />
-              <AlertDescription>{ssoError}</AlertDescription>
+              <AlertDescription>{signInNotice}</AlertDescription>
             </Alert>
           )}
 

apps/dashboard/src/pages/Users/index.tsx

@@ -7,6 +7,7 @@ import { useCurrentUser } from '@/lib/CurrentUserContext';
 import { useToast } from '@/hooks/use-toast';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
+import { Switch } from '@/components/ui/switch';
 import { PageHeader } from '@/components/PageHeader';
 import { DataTable } from '@/components/DataTable';
 import { TimestampCell } from '@/components/ui/timestamp-cell';
@@ -23,6 +24,7 @@ export const Users = () => {
   const [userToDelete, setUserToDelete] = useState<UserRecord | null>(null);
   const [isDeleting, setIsDeleting] = useState(false);
   const [togglingUserId, setTogglingUserId] = useState<string | null>(null);
+  const [togglingEnabledId, setTogglingEnabledId] = useState<string | null>(null);
 
   const usersQuery = useQuery({
     queryKey: ['users'],
@@ -49,13 +51,34 @@ export const Users = () => {
     }
   };
 
+  const handleToggleEnabled = async (user: UserRecord) => {
+    setTogglingEnabledId(user.id);
+    try {
+      await api.updateUserEnabled(user.id, !user.enabled);
+      queryClient.invalidateQueries({ queryKey: ['users'] });
+      toast({
+        title: user.enabled ? 'Access revoked' : 'Account approved',
+        description: user.enabled
+          ? `"${user.email}" can no longer sign in.`
+          : `"${user.email}" can now sign in.`,
+      });
+    } catch (error) {
+      notifyError(error, 'Error updating user');
+    } finally {
+      setTogglingEnabledId(null);
+    }
+  };
+
   const handleExecuteDeletion = async () => {
     if (!userToDelete) return;
     setIsDeleting(true);
     try {
       await api.deleteUser(userToDelete.id);
       queryClient.invalidateQueries({ queryKey: ['users'] });
-      toast({ title: 'User deleted', description: `"${userToDelete.email}" can no longer sign in.` });
+      toast({
+        title: 'User deleted',
+        description: `"${userToDelete.email}" can no longer sign in.`,
+      });
       setUserToDelete(null);
     } catch (error) {
       notifyError(error, 'Deletion failed');
@@ -67,10 +90,7 @@ export const Users = () => {
   if (!CONTROL_PLANE_ENABLED) {
     return (
       <div className="w-full">
-        <PageHeader
-          title="Users"
-          description="User accounts for this dashboard."
-        />
+        <PageHeader title="Users" description="User accounts for this dashboard." />
         <div className="rounded-xl border border-dashed bg-muted/30 p-8 text-center text-sm text-muted-foreground">
           On a stateless deployment there is a single account, configured through the ADMIN_EMAIL
           and ADMIN_PASSWORD environment variables.
@@ -140,6 +160,36 @@ export const Users = () => {
                   <Badge variant="secondary">Member</Badge>
                 ),
             },
+            {
+              header: 'Access',
+              accessorKey: 'enabled',
+              cell: ({ row }) => {
+                const { enabled, lastConnectedAt } = row.original;
+                // A disabled account that never connected is one nobody has
+                // approved yet; one that did connect had its access revoked.
+                // Same flag, but the two read very differently to an admin.
+                const label = enabled ? 'Active' : lastConnectedAt ? 'Disabled' : 'Pending';
+                const badge = enabled ? (
+                  <Badge variant="secondary">Active</Badge>
+                ) : (
+                  <Badge variant="destructive">{label}</Badge>
+                );
+                // The server refuses disabling your own account, so do not
+                // offer the switch on your own row.
+                if (row.original.id === currentUser?.id) return badge;
+                return (
+                  <div className="flex items-center gap-2">
+                    <Switch
+                      checked={enabled}
+                      onCheckedChange={() => handleToggleEnabled(row.original)}
+                      disabled={togglingEnabledId === row.original.id}
+                      aria-label={enabled ? 'Revoke access' : 'Approve account'}
+                    />
+                    {badge}
+                  </div>
+                );
+              },
+            },
             {
               header: 'Created',
               accessorKey: 'createdAt',