mirror of
https://github.com/Dokploy/dokploy.git
synced 2026-07-19 21:05:21 +02:00
Implement Single Sign-On (SSO) Feature: Add SSO settings page, integrate OIDC provider registration dialog, and update dependencies for better-auth to version 1.4.18. Enhance user interface with new SSO menu item and improve database schema for SSO providers.
This commit is contained in:
Mauricio Siu
@@ -30,6 +30,7 @@ import {
|
||||
Trash2,
|
||||
User,
|
||||
Users,
|
||||
LogIn,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
@@ -406,6 +407,15 @@ const MENU: Menu = {
|
||||
isEnabled: ({ auth, isCloud }) =>
|
||||
!!((auth?.role === "owner" || auth?.role === "admin") && !isCloud),
|
||||
},
|
||||
{
|
||||
isSingle: true,
|
||||
title: "SSO",
|
||||
url: "/dashboard/settings/sso",
|
||||
icon: LogIn,
|
||||
// Only enabled for admins in non-cloud environments (enterprise)
|
||||
isEnabled: ({ auth, isCloud }) =>
|
||||
!!((auth?.role === "owner" || auth?.role === "admin") && !isCloud),
|
||||
},
|
||||
],
|
||||
|
||||
help: [
|
||||
|
||||
206
apps/dokploy/components/proprietary/sso/register-oidc-dialog.tsx
Normal file
206
apps/dokploy/components/proprietary/sso/register-oidc-dialog.tsx
Normal file
@@ -0,0 +1,206 @@
|
||||
"use client";
|
||||
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
const DEFAULT_SCOPES = ["openid", "email", "profile"];
|
||||
|
||||
interface RegisterOidcDialogProps {
|
||||
children: React.ReactNode;
|
||||
onSuccess?: () => void;
|
||||
}
|
||||
|
||||
export function RegisterOidcDialog({ children, onSuccess }: RegisterOidcDialogProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [form, setForm] = useState({
|
||||
providerId: "",
|
||||
issuer: "",
|
||||
domain: "",
|
||||
clientId: "",
|
||||
clientSecret: "",
|
||||
scopes: DEFAULT_SCOPES.join(" "),
|
||||
});
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (
|
||||
!form.providerId.trim() ||
|
||||
!form.issuer.trim() ||
|
||||
!form.domain.trim() ||
|
||||
!form.clientId.trim() ||
|
||||
!form.clientSecret.trim()
|
||||
) {
|
||||
toast.error("Please fill in all required fields");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const scopes = form.scopes
|
||||
.trim()
|
||||
.split(/\s+/)
|
||||
.filter(Boolean);
|
||||
const { data, error } = await authClient.sso.register({
|
||||
providerId: form.providerId.trim(),
|
||||
issuer: form.issuer.trim(),
|
||||
domain: form.domain.trim(),
|
||||
oidcConfig: {
|
||||
clientId: form.clientId.trim(),
|
||||
clientSecret: form.clientSecret.trim(),
|
||||
scopes: scopes.length > 0 ? scopes : DEFAULT_SCOPES,
|
||||
pkce: true,
|
||||
},
|
||||
});
|
||||
|
||||
if (error) {
|
||||
toast.error(error.message ?? "Failed to register SSO provider");
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success("OIDC provider registered successfully");
|
||||
setForm({
|
||||
providerId: "",
|
||||
issuer: "",
|
||||
domain: "",
|
||||
clientId: "",
|
||||
clientSecret: "",
|
||||
scopes: DEFAULT_SCOPES.join(" "),
|
||||
});
|
||||
setOpen(false);
|
||||
onSuccess?.();
|
||||
} catch (err) {
|
||||
toast.error(
|
||||
err instanceof Error ? err.message : "Failed to register SSO provider",
|
||||
);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>{children}</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Register OIDC provider</DialogTitle>
|
||||
<DialogDescription>
|
||||
Add an OpenID Connect (OIDC) identity provider. Discovery will
|
||||
fill endpoints from the issuer URL when possible.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="providerId">Provider ID</Label>
|
||||
<Input
|
||||
id="providerId"
|
||||
placeholder="e.g. okta or my-idp"
|
||||
value={form.providerId}
|
||||
onChange={(e) =>
|
||||
setForm((f) => ({ ...f, providerId: e.target.value }))
|
||||
}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Unique identifier; used in callback URL path.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="issuer">Issuer URL</Label>
|
||||
<Input
|
||||
id="issuer"
|
||||
placeholder="https://idp.example.com"
|
||||
value={form.issuer}
|
||||
onChange={(e) =>
|
||||
setForm((f) => ({ ...f, issuer: e.target.value }))
|
||||
}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Discovery document is fetched from{" "}
|
||||
<code className="rounded bg-muted px-1">
|
||||
{"{issuer}"}/.well-known/openid-configuration
|
||||
</code>
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="domain">Domain</Label>
|
||||
<Input
|
||||
id="domain"
|
||||
placeholder="example.com"
|
||||
value={form.domain}
|
||||
onChange={(e) =>
|
||||
setForm((f) => ({ ...f, domain: e.target.value }))
|
||||
}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Email domain(s) that use this provider (e.g. for sign-in by email).
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="clientId">Client ID</Label>
|
||||
<Input
|
||||
id="clientId"
|
||||
placeholder="Client ID from IdP"
|
||||
value={form.clientId}
|
||||
onChange={(e) =>
|
||||
setForm((f) => ({ ...f, clientId: e.target.value }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="clientSecret">Client secret</Label>
|
||||
<Input
|
||||
id="clientSecret"
|
||||
type="password"
|
||||
placeholder="Client secret from IdP"
|
||||
value={form.clientSecret}
|
||||
onChange={(e) =>
|
||||
setForm((f) => ({ ...f, clientSecret: e.target.value }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="scopes">Scopes (optional)</Label>
|
||||
<Input
|
||||
id="scopes"
|
||||
placeholder="openid email profile"
|
||||
value={form.scopes}
|
||||
onChange={(e) =>
|
||||
setForm((f) => ({ ...f, scopes: e.target.value }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setOpen(false)}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting && (
|
||||
<Loader2 className="mr-2 size-4 animate-spin" />
|
||||
)}
|
||||
Register provider
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
263
apps/dokploy/components/proprietary/sso/sso-settings.tsx
Normal file
263
apps/dokploy/components/proprietary/sso/sso-settings.tsx
Normal file
@@ -0,0 +1,263 @@
|
||||
"use client";
|
||||
|
||||
import { Loader2, LogIn, ShieldCheck, Trash2 } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { DialogAction } from "@/components/shared/dialog-action";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
import { api } from "@/utils/api";
|
||||
import { RegisterOidcDialog } from "./register-oidc-dialog";
|
||||
|
||||
export function SSOSettings() {
|
||||
const utils = api.useUtils();
|
||||
const { data: providers, isLoading } = api.sso.listProviders.useQuery();
|
||||
const { mutateAsync: deleteProvider, isLoading: isDeleting } =
|
||||
api.sso.deleteProvider.useMutation();
|
||||
|
||||
const [verifyingId, setVerifyingId] = useState<string | null>(null);
|
||||
const [requestingVerificationId, setRequestingVerificationId] = useState<
|
||||
string | null
|
||||
>(null);
|
||||
|
||||
const handleVerifyDomain = async (providerId: string) => {
|
||||
setVerifyingId(providerId);
|
||||
try {
|
||||
const { data, error } = await authClient.sso.verifyDomain({
|
||||
providerId,
|
||||
});
|
||||
if (error) {
|
||||
toast.error(error.message ?? "Domain verification failed");
|
||||
return;
|
||||
}
|
||||
toast.success("Domain verified successfully");
|
||||
await utils.sso.listProviders.invalidate();
|
||||
} catch (err) {
|
||||
toast.error(
|
||||
err instanceof Error ? err.message : "Domain verification failed",
|
||||
);
|
||||
} finally {
|
||||
setVerifyingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRequestDomainVerification = async (providerId: string) => {
|
||||
setRequestingVerificationId(providerId);
|
||||
try {
|
||||
const { data, error } = await authClient.sso.requestDomainVerification({
|
||||
providerId,
|
||||
});
|
||||
if (error) {
|
||||
toast.error(error.message ?? "Failed to request domain verification");
|
||||
return;
|
||||
}
|
||||
toast.success(
|
||||
"Verification token created. Add the TXT DNS record and verify.",
|
||||
);
|
||||
await utils.sso.listProviders.invalidate();
|
||||
} catch (err) {
|
||||
toast.error(
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: "Failed to request domain verification",
|
||||
);
|
||||
} finally {
|
||||
setRequestingVerificationId(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 rounded-lg border p-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<LogIn className="size-6 text-muted-foreground" />
|
||||
<CardTitle className="text-xl">Single Sign-On (SSO)</CardTitle>
|
||||
</div>
|
||||
<CardDescription>
|
||||
Configure OIDC or SAML identity providers for enterprise sign-in.
|
||||
Users can sign in with their organization's IdP.
|
||||
</CardDescription>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex items-center gap-2 justify-center min-h-[25vh]">
|
||||
<Loader2 className="size-6 text-muted-foreground animate-spin" />
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Loading providers...
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{providers && providers.length > 0 && (
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<RegisterOidcDialog
|
||||
onSuccess={() => utils.sso.listProviders.invalidate()}
|
||||
>
|
||||
<Button variant="secondary" size="sm">
|
||||
<LogIn className="mr-2 size-4" />
|
||||
Add OIDC provider
|
||||
</Button>
|
||||
</RegisterOidcDialog>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
SAML support can be added via API or future UI.
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{providers && providers.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
<span className="text-sm font-medium">Registered providers</span>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
{providers.map((provider) => {
|
||||
const isOidc = !!provider.oidcConfig;
|
||||
const isSaml = !!provider.samlConfig;
|
||||
const verified = !!provider.domainVerified;
|
||||
|
||||
return (
|
||||
<Card key={provider.id} className="overflow-hidden">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex flex-col gap-1">
|
||||
<CardTitle className="text-base font-medium">
|
||||
{provider.providerId}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-xs">
|
||||
{provider.issuer}
|
||||
</CardDescription>
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{provider.domain}
|
||||
</Badge>
|
||||
{isOidc && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
OIDC
|
||||
</Badge>
|
||||
)}
|
||||
{isSaml && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
SAML
|
||||
</Badge>
|
||||
)}
|
||||
{verified && (
|
||||
<Badge
|
||||
variant="default"
|
||||
className="text-xs bg-green-600"
|
||||
>
|
||||
Verified
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-wrap gap-2 pt-0">
|
||||
{!verified && (
|
||||
<>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={verifyingId === provider.providerId}
|
||||
onClick={() =>
|
||||
handleVerifyDomain(provider.providerId)
|
||||
}
|
||||
>
|
||||
{verifyingId === provider.providerId ? (
|
||||
<Loader2 className="mr-1 size-3 animate-spin" />
|
||||
) : (
|
||||
<ShieldCheck className="mr-1 size-3" />
|
||||
)}
|
||||
Verify domain
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
disabled={
|
||||
requestingVerificationId === provider.providerId
|
||||
}
|
||||
onClick={() =>
|
||||
handleRequestDomainVerification(
|
||||
provider.providerId,
|
||||
)
|
||||
}
|
||||
>
|
||||
{requestingVerificationId ===
|
||||
provider.providerId ? (
|
||||
<Loader2 className="mr-1 size-3 animate-spin" />
|
||||
) : null}
|
||||
New verification token
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
<DialogAction
|
||||
title="Remove SSO provider"
|
||||
description={`Remove provider "${provider.providerId}"? Users will no longer be able to sign in with this IdP.`}
|
||||
type="destructive"
|
||||
onClick={async () => {
|
||||
try {
|
||||
await deleteProvider({
|
||||
providerId: provider.providerId,
|
||||
});
|
||||
toast.success("Provider removed");
|
||||
await utils.sso.listProviders.invalidate();
|
||||
} catch (err) {
|
||||
toast.error(
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: "Failed to remove provider",
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-destructive hover:text-destructive"
|
||||
disabled={isDeleting}
|
||||
>
|
||||
<Trash2 className="mr-1 size-3" />
|
||||
Remove
|
||||
</Button>
|
||||
</DialogAction>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center gap-4 justify-center min-h-[30vh] text-center">
|
||||
<div className="flex flex-col items-center gap-2 max-w-[400px]">
|
||||
<div className="rounded-full bg-muted p-4">
|
||||
<LogIn className="size-8 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<h3 className="text-lg font-semibold">No SSO providers</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Add an OIDC provider to allow users to sign in with their
|
||||
organization's identity provider (e.g. Okta, Azure AD).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<RegisterOidcDialog
|
||||
onSuccess={() => utils.sso.listProviders.invalidate()}
|
||||
>
|
||||
<Button variant="secondary">
|
||||
<LogIn className="mr-2 size-4" />
|
||||
Add OIDC provider
|
||||
</Button>
|
||||
</RegisterOidcDialog>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user