"use client";
import { Button } from "@/components/ui/button";
import { authClient } from "@/lib/auth/client";
type Provider = {
id: string;
label: string;
icon: React.ReactNode;
};
const GithubIcon = () => (
);
const DiscordIcon = () => (
);
const authentikIcon = (
);
type Props = {
showGithub?: boolean;
showDiscord?: boolean;
showAuthentik?: boolean;
};
export function SocialLoginButtons({ showGithub, showDiscord, showAuthentik }: Props) {
const providers: Provider[] = [
...(showGithub ? [{ id: "github", label: "Continue with GitHub", icon: }] : []),
...(showDiscord ? [{ id: "discord", label: "Continue with Discord", icon: }] : []),
...(showAuthentik ? [{ id: "authentik", label: "Continue with Authentik", icon: authentikIcon }] : []),
];
if (providers.length === 0) return null;
async function handleSocial(providerId: string) {
if (providerId === "authentik") {
await (authClient as unknown as { signIn: { genericOAuth: (opts: { providerId: string; callbackURL: string }) => Promise } }).signIn.genericOAuth({
providerId: "authentik",
callbackURL: "/recipes",
});
} else {
await authClient.signIn.social({ provider: providerId as "github" | "discord" | "google", callbackURL: "/recipes" });
}
}
return (
<>
{providers.map((p) => (
))}
);
}