"use client"; import { Check, Copy, Lock, RefreshCw, TestTube, Trash2, Users, } from "lucide-react"; import { useState } from "react"; import { cn } from "@/lib/utils"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/registry/new-york/ui/alert-dialog"; import { Badge } from "@/registry/new-york/ui/badge"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/registry/new-york/ui/dialog"; import { Field, FieldContent, FieldDescription, FieldError, FieldLabel, } from "@/registry/new-york/ui/field"; import { InputGroup, InputGroupInput, } from "@/registry/new-york/ui/input-group"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/registry/new-york/ui/select"; import { Switch } from "@/registry/new-york/ui/switch"; import { Textarea } from "@/registry/new-york/ui/textarea"; export interface SSOProvider { id: string; name: string; type: "saml" | "oauth" | "oidc"; enabled: boolean; status: "active" | "error" | "pending"; metadataUrl?: string; entityId?: string; ssoUrl?: string; certificate?: string; lastTested?: Date; userCount?: number; } export interface SettingsSSOProps { providers?: SSOProvider[]; enabled?: boolean; onCreate?: (data: { name: string; type: "saml" | "oauth" | "oidc"; metadataUrl?: string; entityId?: string; ssoUrl?: string; certificate?: string; }) => Promise; onUpdate?: (id: string, data: Partial) => Promise; onDelete?: (id: string) => Promise; onTest?: (id: string) => Promise; onToggle?: (enabled: boolean) => Promise; className?: string; } function formatDate(date: Date): string { return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", hour: "numeric", minute: "2-digit", }).format(date); } export default function SettingsSSO({ providers = [], enabled = false, onCreate, onUpdate, onDelete, onTest, onToggle, className, }: SettingsSSOProps) { const [createDialogOpen, setCreateDialogOpen] = useState(false); const [errors, setErrors] = useState>({}); const [copiedText, setCopiedText] = useState(null); const [providerData, setProviderData] = useState({ name: "", type: "saml" as "saml" | "oauth" | "oidc", metadataUrl: "", entityId: "", ssoUrl: "", certificate: "", }); const handleCreate = async () => { setErrors({}); if (!providerData.name.trim()) { setErrors({ name: "Name is required" }); return; } try { await onCreate?.(providerData); setProviderData({ name: "", type: "saml", metadataUrl: "", entityId: "", ssoUrl: "", certificate: "", }); setCreateDialogOpen(false); } catch (error) { setErrors({ _general: error instanceof Error ? error.message : "Failed to create SSO provider", }); } }; const copyToClipboard = async (text: string) => { await navigator.clipboard.writeText(text); setCopiedText(text); setTimeout(() => setCopiedText(null), 2000); }; const getStatusBadge = (status: SSOProvider["status"]) => { switch (status) { case "active": return ( Active ); case "error": return ( Error ); case "pending": return ( Pending ); } }; return (

Single Sign-On Configure SSO providers for your organization

Enable SSO onToggle?.(checked)} />

Okta

Azure AD

Google Workspace

Auth0

OneLogin

Example Usage

Okta

Azure AD

Google Workspace

Auth0

OneLogin