mirror of
https://github.com/andwati/dokploy.git
synced 2026-11-06 20:22:14 +00:00
Mauricio Siu
11082f25d7
- Updated the mapping logic in `register-oidc-dialog` to differentiate between Azure and other identity providers. - Simplified the mapping structure for user attributes based on the issuer, improving flexibility in handling various OIDC providers.
369 lines
11 KiB
TypeScript
369 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { Eye, Loader2, LogIn, Trash2 } from "lucide-react";
|
|
import { useEffect, 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 {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { api } from "@/utils/api";
|
|
import { RegisterOidcDialog } from "./register-oidc-dialog";
|
|
import { RegisterSamlDialog } from "./register-saml-dialog";
|
|
|
|
type ProviderForDetails = {
|
|
id: string | null;
|
|
providerId: string;
|
|
issuer: string;
|
|
domain: string;
|
|
oidcConfig: string | null;
|
|
samlConfig: string | null;
|
|
organizationId: string | null;
|
|
};
|
|
|
|
function parseOidcConfig(config: string | null): {
|
|
clientId?: string;
|
|
scopes?: string[];
|
|
} | null {
|
|
if (!config) return null;
|
|
try {
|
|
const parsed = JSON.parse(config) as {
|
|
clientId?: string;
|
|
scopes?: string[];
|
|
};
|
|
return { clientId: parsed.clientId, scopes: parsed.scopes };
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function parseSamlConfig(
|
|
config: string | null,
|
|
): { entryPoint?: string } | null {
|
|
if (!config) return null;
|
|
try {
|
|
const parsed = JSON.parse(config) as { entryPoint?: string };
|
|
return { entryPoint: parsed.entryPoint };
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
export const SSOSettings = () => {
|
|
const utils = api.useUtils();
|
|
const [detailsProvider, setDetailsProvider] =
|
|
useState<ProviderForDetails | null>(null);
|
|
const [baseURL, setBaseURL] = useState("");
|
|
|
|
useEffect(() => {
|
|
if (typeof window !== "undefined") {
|
|
setBaseURL(window.location.origin);
|
|
}
|
|
}, []);
|
|
|
|
const { data: providers, isLoading } = api.sso.listProviders.useQuery();
|
|
const { mutateAsync: deleteProvider, isLoading: isDeleting } =
|
|
api.sso.deleteProvider.useMutation();
|
|
|
|
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>
|
|
<Button variant="secondary" size="sm">
|
|
<LogIn className="mr-2 size-4" />
|
|
Add OIDC provider
|
|
</Button>
|
|
</RegisterOidcDialog>
|
|
{/* <RegisterSamlDialog>
|
|
<Button variant="secondary" size="sm">
|
|
<LogIn className="mr-2 size-4" />
|
|
Add SAML provider
|
|
</Button>
|
|
</RegisterSamlDialog> */}
|
|
</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;
|
|
|
|
return (
|
|
<Card
|
|
key={provider.id}
|
|
className="overflow-hidden bg-background"
|
|
>
|
|
<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>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-wrap gap-2 pt-0">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() =>
|
|
setDetailsProvider({
|
|
id: provider.id,
|
|
providerId: provider.providerId,
|
|
issuer: provider.issuer,
|
|
domain: provider.domain,
|
|
oidcConfig: provider.oidcConfig,
|
|
samlConfig: provider.samlConfig,
|
|
organizationId: provider.organizationId,
|
|
})
|
|
}
|
|
>
|
|
<Eye className="mr-1 size-3" />
|
|
View details
|
|
</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 or SAML provider so users can sign in with their
|
|
organization's IdP (e.g. Okta, Azure AD).
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2 justify-center">
|
|
<RegisterOidcDialog>
|
|
<Button variant="secondary">
|
|
<LogIn className="mr-2 size-4" />
|
|
Add OIDC provider
|
|
</Button>
|
|
</RegisterOidcDialog>
|
|
{/* <RegisterSamlDialog>
|
|
<Button variant="outline">
|
|
<LogIn className="mr-2 size-4" />
|
|
Add SAML provider
|
|
</Button>
|
|
</RegisterSamlDialog> */}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
<Dialog
|
|
open={!!detailsProvider}
|
|
onOpenChange={(open) => !open && setDetailsProvider(null)}
|
|
>
|
|
<DialogContent className="sm:max-w-[480px]">
|
|
{detailsProvider && (
|
|
<>
|
|
<DialogHeader>
|
|
<DialogTitle>SSO provider details</DialogTitle>
|
|
<DialogDescription>
|
|
View-only. To change settings, remove this provider and add it
|
|
again with the new values.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="grid gap-3 py-2">
|
|
<div className="grid gap-1">
|
|
<span className="text-xs font-medium text-muted-foreground">
|
|
Provider ID
|
|
</span>
|
|
<p className="rounded-md bg-muted px-2 py-1.5 font-mono text-sm">
|
|
{detailsProvider.providerId}
|
|
</p>
|
|
</div>
|
|
<div className="grid gap-1">
|
|
<span className="text-xs font-medium text-muted-foreground">
|
|
Issuer URL
|
|
</span>
|
|
<p className="break-all rounded-md bg-muted px-2 py-1.5 text-sm">
|
|
{detailsProvider.issuer}
|
|
</p>
|
|
</div>
|
|
<div className="grid gap-1">
|
|
<span className="text-xs font-medium text-muted-foreground">
|
|
Domain
|
|
</span>
|
|
<p className="rounded-md bg-muted px-2 py-1.5 text-sm">
|
|
{detailsProvider.domain}
|
|
</p>
|
|
</div>
|
|
{detailsProvider.oidcConfig && (
|
|
<>
|
|
{(() => {
|
|
const oidc = parseOidcConfig(detailsProvider.oidcConfig);
|
|
if (!oidc) return null;
|
|
return (
|
|
<>
|
|
{oidc.clientId && (
|
|
<div className="grid gap-1">
|
|
<span className="text-xs font-medium text-muted-foreground">
|
|
Client ID
|
|
</span>
|
|
<p className="rounded-md bg-muted px-2 py-1.5 font-mono text-sm">
|
|
{oidc.clientId}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{oidc.scopes && oidc.scopes.length > 0 && (
|
|
<div className="grid gap-1">
|
|
<span className="text-xs font-medium text-muted-foreground">
|
|
Scopes
|
|
</span>
|
|
<p className="rounded-md bg-muted px-2 py-1.5 text-sm">
|
|
{oidc.scopes.join(" ")}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
})()}
|
|
</>
|
|
)}
|
|
{detailsProvider.samlConfig && (
|
|
<>
|
|
{(() => {
|
|
const saml = parseSamlConfig(detailsProvider.samlConfig);
|
|
if (!saml?.entryPoint) return null;
|
|
return (
|
|
<div className="grid gap-1">
|
|
<span className="text-xs font-medium text-muted-foreground">
|
|
Entry point
|
|
</span>
|
|
<p className="break-all rounded-md bg-muted px-2 py-1.5 text-sm">
|
|
{saml.entryPoint}
|
|
</p>
|
|
</div>
|
|
);
|
|
})()}
|
|
</>
|
|
)}
|
|
<div className="grid gap-1">
|
|
<span className="text-xs font-medium text-muted-foreground">
|
|
Callback URL (configure in your IdP)
|
|
</span>
|
|
<p className="break-all rounded-md bg-muted px-2 py-1.5 font-mono text-xs">
|
|
{baseURL || "{baseURL}"}/api/auth/sso/callback/
|
|
{detailsProvider.providerId}
|
|
</p>
|
|
{!baseURL && (
|
|
<p className="text-xs text-muted-foreground">
|
|
Replace {"{baseURL}"} with your Dokploy URL (e.g. https://
|
|
your-domain.com).
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setDetailsProvider(null)}
|
|
>
|
|
Close
|
|
</Button>
|
|
</DialogFooter>
|
|
</>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
};
|