login with facebook added

This commit is contained in:
gosangam
2026-06-02 15:21:47 +05:30
parent 84d86c45b5
commit dc01d09f09
+17 -23
View File
@@ -1,28 +1,23 @@
"use client";
/**
* OAuthButtons — "Continue with Google / Facebook" row used above both
* LoginForm and SignUpForm. Clicking a button performs a top-level
* navigation to the BFF's /oauth/<provider>/start endpoint, which kicks off
* the Authorization Code flow. The BFF handles the round-trip and 302s back
* OAuthButtons — "Continue with …" row used above both LoginForm and
* SignUpForm. Clicking a button performs a top-level navigation to the
* BFF's /oauth/<provider>/start endpoint, which kicks off the
* Authorization Code flow. The BFF handles the round-trip and 302s back
* to ${frontend}${next} with the session cookie already set.
*
* Top-level navigation (not fetch) is intentional: cross-origin redirects
* to Google / Facebook can't happen from XHR, and we need the BFF to set
* the cookie before the browser lands back on the frontend.
*
* To re-enable a provider that's currently commented out, uncomment its
* <a> block in the grid below.
*/
import { useMemo } from "react";
const BFF_BASE =
process.env.NEXT_PUBLIC_BFF_URL || "http://localhost:8080";
// Build-time switch — keep the buttons hidden until the Google + Facebook
// OAuth apps clear review. Flip `NEXT_PUBLIC_OAUTH_ENABLED=true` on the
// Next.js build (Vercel/Dokploy env vars) once approval lands; no code
// change required. Defaults to disabled so prod stays safe by default.
const OAUTH_ENABLED = process.env.NEXT_PUBLIC_OAUTH_ENABLED === "true";
type Props = {
/** Frontend path to land on after the round-trip. Defaults to /u/me. */
next?: string;
@@ -31,34 +26,30 @@ type Props = {
};
export function OAuthButtons({ next, showDivider = true }: Props) {
// Suppress the whole row (no buttons → no "or" divider either) while
// the OAuth apps are under review.
if (!OAUTH_ENABLED) return null;
const startUrl = useMemo(
() => (provider: "google" | "facebook") => {
function startUrl(provider: "google" | "facebook"): string {
const u = new URL(`${BFF_BASE}/api/v1/auth/oauth/${provider}/start`);
if (next) u.searchParams.set("next", next);
return u.toString();
},
[next],
);
}
return (
<div className="space-y-3">
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
<div className="grid grid-cols-1 gap-2">
{/* Google sign-in — uncomment once the Google OAuth app clears review.
<a
href={startUrl("google")}
className="h-11 inline-flex items-center justify-center gap-2 rounded-md border border-border bg-card text-sm font-medium text-foreground hover:bg-muted transition-colors"
>
<GoogleIcon className="size-4" />
Google
Login with Google
</a>
*/}
<a
href={startUrl("facebook")}
className="h-11 inline-flex items-center justify-center gap-2 rounded-md border border-border bg-card text-sm font-medium text-foreground hover:bg-muted transition-colors"
>
<FacebookIcon className="size-4" />
Facebook
Login with Facebook
</a>
</div>
{showDivider ? (
@@ -74,6 +65,9 @@ export function OAuthButtons({ next, showDivider = true }: Props) {
);
}
// Kept exported-internally so the Google block above can be uncommented
// without re-importing or re-pasting the SVG.
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function GoogleIcon({ className }: { className?: string }) {
return (
<svg className={className} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden>