Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { FaGoogle, FaGithub, FaApple } from "react-icons/fa";
import { useQuery } from "@tanstack/react-query";
interface AuthProviderDialogProps {
children: React.ReactNode;
title?: string;
description?: string;
}
type OAuthProvider = "google" | "github" | "apple" | "custom";
const providerConfig: Record<OAuthProvider, { icon: React.ReactNode; label: string }> = {
google: { icon: <FaGoogle className="mr-2 h-4 w-4" />, label: "Continue with Google" },
github: { icon: <FaGithub className="mr-2 h-4 w-4" />, label: "Continue with GitHub" },
apple: { icon: <FaApple className="mr-2 h-4 w-4" />, label: "Continue with Apple" },
custom: { icon: null, label: "Continue with Custom Provider" },
};
export function AuthProviderDialog({
children,
title = "Choose Sign In Method",
description = "Select a provider to continue"
}: AuthProviderDialogProps) {
const { data: providersData, isLoading } = useQuery({
queryKey: ["/api/auth/providers"],
queryFn: async () => {
const response = await fetch("/api/auth/providers");
if (!response.ok) {
return { providers: [] };
}
return response.json() as Promise<{ providers: OAuthProvider[] }>;
},
});
const availableProviders = providersData?.providers || [];
return (
<Dialog>
<DialogTrigger asChild>
{children}
</DialogTrigger>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>{title}</DialogTitle>
<DialogDescription>{description}</DialogDescription>
</DialogHeader>
<div className="flex flex-col gap-3">
{availableProviders.map((provider) => {
const config = providerConfig[provider];
if (!config) return null;
return (
<Button key={provider} variant="outline" asChild className="w-full">
<a href={`/api/login?provider=${provider}`}>
{config.icon}
{config.label}
</a>
</Button>
);
})}
{availableProviders.length === 0 && (
<p className="text-sm text-muted-foreground text-center py-4">
No authentication providers configured
</p>
)}
</div>
</DialogContent>
</Dialog>
);
}
|