feat: 3-click SSO registration - unified /auth page, Google/Apple/GitHub OAuth, email fallback, provider model
This commit is contained in:
root
@@ -0,0 +1,157 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { cookies } from "next/headers";
|
||||
import {
|
||||
type Provider,
|
||||
exchangeCode,
|
||||
findOrCreateOAuthUser,
|
||||
verifyState,
|
||||
} from "@/lib/oauth";
|
||||
import { signJWT } from "@/lib/auth";
|
||||
|
||||
const VALID_PROVIDERS = ["google", "apple", "github"];
|
||||
|
||||
async function handleCallback(
|
||||
req: NextRequest,
|
||||
provider: string
|
||||
): Promise<NextResponse> {
|
||||
try {
|
||||
// Grab code and state from query params or POST body (Apple uses form_post)
|
||||
const url = new URL(req.url);
|
||||
let code = url.searchParams.get("code");
|
||||
let stateParam = url.searchParams.get("state");
|
||||
|
||||
// Apple may POST form data — try reading POST body
|
||||
if (!code) {
|
||||
try {
|
||||
const contentType = req.headers.get("content-type") || "";
|
||||
if (contentType.includes("form")) {
|
||||
const formData = await req.formData();
|
||||
code = formData.get("code") as string | null;
|
||||
stateParam = formData.get("state") as string | null;
|
||||
}
|
||||
} catch {
|
||||
// not a form POST, that's fine
|
||||
}
|
||||
}
|
||||
|
||||
if (!code) {
|
||||
return NextResponse.json(
|
||||
{ error: "Missing authorization code" },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
if (!stateParam) {
|
||||
return NextResponse.json(
|
||||
{ error: "Missing state parameter" },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Verify state from cookie (CSRF protection)
|
||||
const cookieStore = await cookies();
|
||||
const storedState = cookieStore.get("oauth_state")?.value;
|
||||
|
||||
if (!storedState) {
|
||||
return NextResponse.json(
|
||||
{
|
||||
error: "Missing state cookie. Please start the OAuth flow again.",
|
||||
},
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
const statePayload = await verifyState(stateParam);
|
||||
if (!statePayload) {
|
||||
return NextResponse.json(
|
||||
{
|
||||
error:
|
||||
"Invalid or expired state. Please start the OAuth flow again.",
|
||||
},
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Verify the state and provider match
|
||||
if (statePayload.provider !== provider) {
|
||||
return NextResponse.json(
|
||||
{ error: "State/provider mismatch" },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Clear the state cookie
|
||||
cookieStore.set("oauth_state", "", {
|
||||
httpOnly: true,
|
||||
path: "/",
|
||||
maxAge: 0,
|
||||
});
|
||||
|
||||
// Build the redirect URI (must match the one used in the authorization request)
|
||||
const baseUrl = `${url.protocol}//${url.host}`;
|
||||
const redirectUri = `${baseUrl}/mobile/api/auth/${provider}/callback`;
|
||||
|
||||
// Exchange code for user info
|
||||
const providerUser = await exchangeCode(
|
||||
provider as Provider,
|
||||
code,
|
||||
redirectUri
|
||||
);
|
||||
|
||||
// Find or create user in database
|
||||
const user = await findOrCreateOAuthUser(
|
||||
provider as Provider,
|
||||
providerUser
|
||||
);
|
||||
|
||||
// Generate JWT
|
||||
const token = await signJWT({
|
||||
userId: user.id,
|
||||
email: user.email,
|
||||
isPremium: user.isPremium,
|
||||
isPro: user.isPro,
|
||||
});
|
||||
|
||||
// Redirect to frontend callback page with token
|
||||
const frontendUrl = `${baseUrl}/mobile/auth/callback?token=${encodeURIComponent(token)}`;
|
||||
return NextResponse.redirect(frontendUrl);
|
||||
} catch (error) {
|
||||
console.error(`${provider} OAuth callback error:`, error);
|
||||
const message =
|
||||
error instanceof Error ? error.message : "OAuth callback failed";
|
||||
return NextResponse.json({ error: message }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function GET(
|
||||
req: NextRequest,
|
||||
{ params }: { params: Promise<{ provider: string }> }
|
||||
) {
|
||||
const { provider } = await params;
|
||||
if (!VALID_PROVIDERS.includes(provider)) {
|
||||
return NextResponse.json(
|
||||
{
|
||||
error: `Unsupported provider. Must be one of: ${VALID_PROVIDERS.join(", ")}`,
|
||||
},
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
return handleCallback(req, provider);
|
||||
}
|
||||
|
||||
/** Apple OAuth may use form_post response_mode, which sends a POST. */
|
||||
export async function POST(
|
||||
req: NextRequest,
|
||||
{ params }: { params: Promise<{ provider: string }> }
|
||||
) {
|
||||
const { provider } = await params;
|
||||
if (!VALID_PROVIDERS.includes(provider)) {
|
||||
return NextResponse.json(
|
||||
{
|
||||
error: `Unsupported provider. Must be one of: ${VALID_PROVIDERS.join(", ")}`,
|
||||
},
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
return handleCallback(req, provider);
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { cookies } from "next/headers";
|
||||
import {
|
||||
type Provider,
|
||||
PROVIDER_CONFIGS,
|
||||
generateState,
|
||||
buildAuthorizationUrl,
|
||||
} from "@/lib/oauth";
|
||||
|
||||
const VALID_PROVIDERS = ["google", "apple", "github"];
|
||||
|
||||
export async function GET(
|
||||
_req: NextRequest,
|
||||
{ params }: { params: Promise<{ provider: string }> }
|
||||
) {
|
||||
const { provider } = await params;
|
||||
|
||||
if (!VALID_PROVIDERS.includes(provider)) {
|
||||
return NextResponse.json(
|
||||
{ error: `Unsupported provider. Must be one of: ${VALID_PROVIDERS.join(", ")}` },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
const config = PROVIDER_CONFIGS[provider as Provider];
|
||||
const clientId = process.env[config.clientIdEnv];
|
||||
|
||||
if (!clientId) {
|
||||
return NextResponse.json(
|
||||
{
|
||||
error: `${provider} OAuth is not configured. Missing ${config.clientIdEnv} environment variable.`,
|
||||
},
|
||||
{ status: 503 }
|
||||
);
|
||||
}
|
||||
|
||||
// Build the redirect URI — the callback URL for this provider
|
||||
const url = new URL(_req.url);
|
||||
const baseUrl = `${url.protocol}//${url.host}`;
|
||||
const redirectUri = `${baseUrl}/mobile/api/auth/${provider}/callback`;
|
||||
|
||||
// Generate state for CSRF protection
|
||||
const state = await generateState(provider as Provider);
|
||||
|
||||
// Store state in a cookie
|
||||
const cookieStore = await cookies();
|
||||
cookieStore.set("oauth_state", state, {
|
||||
httpOnly: true,
|
||||
secure: process.env.NODE_ENV === "production",
|
||||
sameSite: "lax",
|
||||
path: "/",
|
||||
maxAge: 60 * 10, // 10 minutes
|
||||
});
|
||||
|
||||
// Build the authorization URL and redirect
|
||||
const authUrl = buildAuthorizationUrl(
|
||||
provider as Provider,
|
||||
state,
|
||||
redirectUri
|
||||
);
|
||||
|
||||
return NextResponse.redirect(authUrl);
|
||||
}
|
||||
@@ -29,6 +29,7 @@ export async function POST(req: NextRequest) {
|
||||
email,
|
||||
name,
|
||||
passwordHash,
|
||||
provider: "email",
|
||||
flhBalance: 5000,
|
||||
trialEndsAt: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
|
||||
},
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
"use client";
|
||||
|
||||
import { Suspense, useEffect, useState } from "react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
|
||||
function AuthCallbackContent() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const [status, setStatus] = useState<"processing" | "success" | "error">(
|
||||
"processing"
|
||||
);
|
||||
const [errorMsg, setErrorMsg] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const token = searchParams.get("token");
|
||||
const error = searchParams.get("error");
|
||||
|
||||
if (error) {
|
||||
setStatus("error");
|
||||
setErrorMsg(decodeURIComponent(error));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!token) {
|
||||
setStatus("error");
|
||||
setErrorMsg("No authentication token received.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Store token in localStorage
|
||||
localStorage.setItem("flh_token", token);
|
||||
|
||||
// Dispatch a custom event so the AuthContext can pick it up
|
||||
// (used by popup-based OAuth where the opener listens)
|
||||
window.dispatchEvent(
|
||||
new StorageEvent("storage", {
|
||||
key: "flh_token",
|
||||
newValue: token,
|
||||
oldValue: null,
|
||||
storageArea: localStorage,
|
||||
})
|
||||
);
|
||||
|
||||
setStatus("success");
|
||||
|
||||
// If this is a popup window, close it after a brief delay
|
||||
if (window.opener) {
|
||||
setTimeout(() => window.close(), 500);
|
||||
} else {
|
||||
// Redirect to home
|
||||
setTimeout(() => router.push("/"), 500);
|
||||
}
|
||||
}, [searchParams, router]);
|
||||
|
||||
return (
|
||||
<div className="min-h-dvh bg-[#0a0a0f] flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
{status === "processing" && (
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-full border-2 border-[#D4AF37]/30 border-t-[#D4AF37] animate-spin" />
|
||||
<p className="text-sm text-gray-400">Signing you in...</p>
|
||||
</div>
|
||||
)}
|
||||
{status === "success" && (
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<div className="w-12 h-12 rounded-full bg-green-900/30 border border-green-700/40 flex items-center justify-center">
|
||||
<span className="text-green-400 text-xl">✓</span>
|
||||
</div>
|
||||
<p className="text-sm text-green-400">Signed in successfully!</p>
|
||||
</div>
|
||||
)}
|
||||
{status === "error" && (
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<div className="w-12 h-12 rounded-full bg-red-900/30 border border-red-700/40 flex items-center justify-center">
|
||||
<span className="text-red-400 text-xl">✕</span>
|
||||
</div>
|
||||
<p className="text-sm text-red-400">{errorMsg}</p>
|
||||
<button
|
||||
onClick={() => router.push("/auth")}
|
||||
className="mt-4 px-6 py-2 rounded-xl bg-[#D4AF37] text-[#0a0a0f] text-sm font-medium"
|
||||
>
|
||||
Back to Login
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AuthCallbackPage() {
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="min-h-dvh bg-[#0a0a0f] flex items-center justify-center">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-full border-2 border-[#D4AF37]/30 border-t-[#D4AF37] animate-spin" />
|
||||
<p className="text-sm text-gray-400">Signing you in...</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<AuthCallbackContent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,379 @@
|
||||
"use client";
|
||||
|
||||
import { useState, FormEvent } from "react";
|
||||
import { useAuth } from "@/lib/AuthContext";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Mail, ArrowLeft } from "lucide-react";
|
||||
|
||||
type AuthMode = "login" | "register";
|
||||
type PageState = "select" | "email-form";
|
||||
|
||||
/** Inline Google SVG logo */
|
||||
function GoogleLogo({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg className={className} viewBox="0 0 24 24" fill="none">
|
||||
<path
|
||||
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
|
||||
fill="#4285F4"
|
||||
/>
|
||||
<path
|
||||
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
||||
fill="#34A853"
|
||||
/>
|
||||
<path
|
||||
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
||||
fill="#FBBC05"
|
||||
/>
|
||||
<path
|
||||
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
||||
fill="#EA4335"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
/** Inline Apple SVG logo */
|
||||
function AppleLogo({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg className={className} viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
/** Inline GitHub SVG logo */
|
||||
function GitHubLogo({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg className={className} viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AuthPage() {
|
||||
const { login, register, oauthLogin, loading: authLoading } = useAuth();
|
||||
const router = useRouter();
|
||||
|
||||
const [pageState, setPageState] = useState<PageState>("select");
|
||||
const [mode, setMode] = useState<AuthMode>("register");
|
||||
const [name, setName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const handleProviderClick = (provider: string) => {
|
||||
setError("");
|
||||
oauthLogin(provider);
|
||||
};
|
||||
|
||||
const handleEmailClick = () => {
|
||||
setError("");
|
||||
setPageState("email-form");
|
||||
};
|
||||
|
||||
const toggleMode = () => {
|
||||
setMode((m) => (m === "login" ? "register" : "login"));
|
||||
setError("");
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
|
||||
if (!email.trim() || !password.trim()) {
|
||||
setError("Please fill in all fields");
|
||||
return;
|
||||
}
|
||||
if (mode === "register" && !name.trim()) {
|
||||
setError("Please enter your name");
|
||||
return;
|
||||
}
|
||||
if (mode === "register" && password.length < 6) {
|
||||
setError("Password must be at least 6 characters");
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
if (mode === "login") {
|
||||
await login(email.trim(), password);
|
||||
} else {
|
||||
await register(email.trim(), name.trim(), password);
|
||||
}
|
||||
router.push("/");
|
||||
} catch (err: unknown) {
|
||||
const message =
|
||||
err instanceof Error ? err.message : "Something went wrong. Please try again.";
|
||||
setError(message);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ── Select State ──────────────────────────────────────────────────────────
|
||||
if (pageState === "select") {
|
||||
return (
|
||||
<div className="min-h-dvh bg-[#0a0a0f] flex flex-col items-center justify-center px-5">
|
||||
<div className="w-full max-w-sm">
|
||||
{/* Logo / Brand */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-[#D4AF37]/20 to-[#D4AF37]/5 border border-[#D4AF37]/30 flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-3xl">☪️</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white">Welcome to Falah</h1>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Your Islamic lifestyle companion
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* SSO Buttons */}
|
||||
<div className="space-y-3">
|
||||
{/* Google */}
|
||||
<button
|
||||
onClick={() => handleProviderClick("google")}
|
||||
disabled={authLoading}
|
||||
className="w-full flex items-center gap-4 px-5 py-4 rounded-2xl bg-[#111118] border border-gray-800/60 active:bg-[#1a1a24] disabled:opacity-50 transition-all touch-manipulation"
|
||||
>
|
||||
<GoogleLogo className="w-6 h-6 shrink-0" />
|
||||
<span className="text-sm font-medium text-white">
|
||||
Continue with Google
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* Apple */}
|
||||
<button
|
||||
onClick={() => handleProviderClick("apple")}
|
||||
disabled={authLoading}
|
||||
className="w-full flex items-center gap-4 px-5 py-4 rounded-2xl bg-[#111118] border border-gray-800/60 active:bg-[#1a1a24] disabled:opacity-50 transition-all touch-manipulation"
|
||||
>
|
||||
<AppleLogo className="w-6 h-6 shrink-0 text-white" />
|
||||
<span className="text-sm font-medium text-white">
|
||||
Continue with Apple
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* GitHub */}
|
||||
<button
|
||||
onClick={() => handleProviderClick("github")}
|
||||
disabled={authLoading}
|
||||
className="w-full flex items-center gap-4 px-5 py-4 rounded-2xl bg-[#111118] border border-gray-800/60 active:bg-[#1a1a24] disabled:opacity-50 transition-all touch-manipulation"
|
||||
>
|
||||
<GitHubLogo className="w-6 h-6 shrink-0 text-white" />
|
||||
<span className="text-sm font-medium text-white">
|
||||
Continue with GitHub
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="flex items-center gap-3 py-2">
|
||||
<div className="flex-1 h-px bg-gray-800/60" />
|
||||
<span className="text-xs text-gray-600">or</span>
|
||||
<div className="flex-1 h-px bg-gray-800/60" />
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<button
|
||||
onClick={handleEmailClick}
|
||||
disabled={authLoading}
|
||||
className="w-full flex items-center gap-4 px-5 py-4 rounded-2xl bg-[#D4AF37]/10 border border-[#D4AF37]/25 active:bg-[#D4AF37]/20 disabled:opacity-50 transition-all touch-manipulation"
|
||||
>
|
||||
<div className="w-6 h-6 shrink-0 flex items-center justify-center">
|
||||
<Mail size={22} className="text-[#D4AF37]" />
|
||||
</div>
|
||||
<span className="text-sm font-medium text-[#D4AF37]">
|
||||
Continue with Email
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Demo Credentials */}
|
||||
<div className="mt-8 rounded-2xl bg-[#111118] border border-gray-800/60 p-4 text-center">
|
||||
<p className="text-xs text-gray-600 uppercase tracking-wider mb-1.5">
|
||||
Demo Account
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
Email:{" "}
|
||||
<span className="text-gray-300 font-mono">demo@falahos.my</span>
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
Password:{" "}
|
||||
<span className="text-gray-300 font-mono">password123</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Email Form State ──────────────────────────────────────────────────────
|
||||
return (
|
||||
<div className="min-h-dvh bg-[#0a0a0f] flex flex-col items-center justify-center px-5">
|
||||
<div className="w-full max-w-sm">
|
||||
{/* Back button */}
|
||||
<button
|
||||
onClick={() => setPageState("select")}
|
||||
className="flex items-center gap-1.5 text-xs text-gray-500 mb-6 active:text-gray-300 transition-colors touch-manipulation"
|
||||
>
|
||||
<ArrowLeft size={16} />
|
||||
All sign-in methods
|
||||
</button>
|
||||
|
||||
{/* Header */}
|
||||
<div className="text-center mb-7">
|
||||
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#D4AF37]/20 to-[#D4AF37]/5 border border-[#D4AF37]/30 flex items-center justify-center mx-auto mb-3">
|
||||
<Mail size={22} className="text-[#D4AF37]" />
|
||||
</div>
|
||||
<h1 className="text-xl font-bold text-white">
|
||||
{mode === "login" ? "Sign In" : "Create Account"}
|
||||
</h1>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
{mode === "login"
|
||||
? "Welcome back! Sign in to continue"
|
||||
: "Start your Islamic lifestyle journey"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="mb-4 p-3 rounded-xl bg-red-900/20 border border-red-800/40 text-red-400 text-sm text-center">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* Name field (register only) */}
|
||||
{mode === "register" && (
|
||||
<div>
|
||||
<label
|
||||
htmlFor="auth-name"
|
||||
className="block text-xs font-medium text-gray-500 mb-1.5 uppercase tracking-wider"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
id="auth-name"
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Your name"
|
||||
autoComplete="name"
|
||||
className="w-full bg-[#111118] border border-gray-800/60 rounded-xl px-4 py-3.5 text-white placeholder-gray-600 focus:outline-none focus:border-[#D4AF37]/50 focus:ring-1 focus:ring-[#D4AF37]/30 transition text-sm"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Email */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="auth-email"
|
||||
className="block text-xs font-medium text-gray-500 mb-1.5 uppercase tracking-wider"
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="auth-email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="you@example.com"
|
||||
autoComplete="email"
|
||||
autoFocus
|
||||
className="w-full bg-[#111118] border border-gray-800/60 rounded-xl px-4 py-3.5 text-white placeholder-gray-600 focus:outline-none focus:border-[#D4AF37]/50 focus:ring-1 focus:ring-[#D4AF37]/30 transition text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Password */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="auth-password"
|
||||
className="block text-xs font-medium text-gray-500 mb-1.5 uppercase tracking-wider"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="auth-password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder={mode === "register" ? "At least 6 characters" : "••••••••"}
|
||||
autoComplete={mode === "login" ? "current-password" : "new-password"}
|
||||
className="w-full bg-[#111118] border border-gray-800/60 rounded-xl px-4 py-3.5 text-white placeholder-gray-600 focus:outline-none focus:border-[#D4AF37]/50 focus:ring-1 focus:ring-[#D4AF37]/30 transition text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Submit */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
className="w-full py-3.5 rounded-xl bg-[#D4AF37] text-[#0a0a0f] font-semibold text-sm active:opacity-80 disabled:opacity-50 transition touch-manipulation"
|
||||
>
|
||||
{submitting ? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<span className="w-4 h-4 rounded-full border-2 border-[#0a0a0f]/30 border-t-[#0a0a0f] animate-spin" />
|
||||
{mode === "login" ? "Signing in..." : "Creating account..."}
|
||||
</span>
|
||||
) : mode === "login" ? (
|
||||
"Sign In"
|
||||
) : (
|
||||
"Create Account"
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Toggle mode */}
|
||||
<div className="text-center mt-6">
|
||||
<p className="text-xs text-gray-600">
|
||||
{mode === "login" ? (
|
||||
<>
|
||||
Don't have an account?{" "}
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleMode}
|
||||
className="text-[#D4AF37] font-medium hover:underline touch-manipulation"
|
||||
>
|
||||
Create one
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Already have an account?{" "}
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleMode}
|
||||
className="text-[#D4AF37] font-medium hover:underline touch-manipulation"
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* New Member Bonus (register only) */}
|
||||
{mode === "register" && (
|
||||
<div className="mt-6 rounded-xl bg-[#111118] border border-gray-800/60 p-3 text-center">
|
||||
<p className="text-xs text-gray-600 uppercase tracking-wider mb-1">
|
||||
New Member Bonus
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
Get <span className="text-[#D4AF37] font-semibold">5,000 FLH</span>{" "}
|
||||
free on sign up + 7-day premium trial
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Demo credentials (subtle) */}
|
||||
<div className="mt-6 rounded-xl bg-[#111118]/60 border border-gray-800/40 p-3 text-center">
|
||||
<p className="text-xs text-gray-600">
|
||||
Demo:{" "}
|
||||
<span className="text-gray-500 font-mono">demo@falahos.my</span>{" "}
|
||||
<span className="text-gray-600">/</span>{" "}
|
||||
<span className="text-gray-500 font-mono">password123</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+6
-139
@@ -1,151 +1,18 @@
|
||||
"use client";
|
||||
|
||||
import { useState, FormEvent } from "react";
|
||||
import { useAuth } from "@/lib/AuthContext";
|
||||
import { useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function LoginPage() {
|
||||
const { login } = useAuth();
|
||||
const router = useRouter();
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
|
||||
if (!email.trim() || !password.trim()) {
|
||||
setError("Please fill in all fields");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
await login(email.trim(), password);
|
||||
router.push("/");
|
||||
} catch (err: unknown) {
|
||||
const message =
|
||||
err instanceof Error ? err.message : "Login failed. Please try again.";
|
||||
setError(message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
router.replace("/auth");
|
||||
}, [router]);
|
||||
|
||||
return (
|
||||
<div className="min-h-dvh bg-[#0a0a0f] flex flex-col items-center justify-center px-6">
|
||||
<div className="w-full max-w-sm">
|
||||
{/* Logo / Brand */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-[#D4AF37]/20 to-[#D4AF37]/5 border border-[#D4AF37]/30 flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-3xl">☪️</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white">Welcome Back</h1>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Sign in to continue your journey
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="mb-4 p-3 rounded-xl bg-red-900/20 border border-red-800/40 text-red-400 text-sm text-center">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-xs font-medium text-gray-500 mb-1.5 uppercase tracking-wider"
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="you@example.com"
|
||||
autoComplete="email"
|
||||
autoFocus
|
||||
className="w-full bg-[#111118] border border-gray-800/60 rounded-xl px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-[#D4AF37]/50 focus:ring-1 focus:ring-[#D4AF37]/30 transition"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="password"
|
||||
className="block text-xs font-medium text-gray-500 mb-1.5 uppercase tracking-wider"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
autoComplete="current-password"
|
||||
className="w-full bg-[#111118] border border-gray-800/60 rounded-xl px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-[#D4AF37]/50 focus:ring-1 focus:ring-[#D4AF37]/30 transition"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full py-3 rounded-xl bg-[#D4AF37] text-[#0a0a0f] font-semibold text-sm active:opacity-80 disabled:opacity-50 transition"
|
||||
>
|
||||
{loading ? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<span className="w-4 h-4 rounded-full border-2 border-[#0a0a0f]/30 border-t-[#0a0a0f] animate-spin" />
|
||||
Signing in...
|
||||
</span>
|
||||
) : (
|
||||
"Sign In"
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="flex items-center gap-3 my-6">
|
||||
<div className="flex-1 h-px bg-gray-800/60" />
|
||||
<span className="text-xs text-gray-600">or</span>
|
||||
<div className="flex-1 h-px bg-gray-800/60" />
|
||||
</div>
|
||||
|
||||
{/* Demo hint */}
|
||||
<div className="text-center mb-6">
|
||||
<p className="text-xs text-gray-600">
|
||||
Don't have an account?{" "}
|
||||
<Link
|
||||
href="/register"
|
||||
className="text-[#D4AF37] font-medium hover:underline"
|
||||
>
|
||||
Create one
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Demo credentials */}
|
||||
<div className="rounded-xl bg-[#111118] border border-gray-800/60 p-3 text-center">
|
||||
<p className="text-xs text-gray-600 uppercase tracking-wider mb-1">
|
||||
Demo Account
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
Email:{" "}
|
||||
<span className="text-gray-300 font-mono">demo@falahos.my</span>
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
Password:{" "}
|
||||
<span className="text-gray-300 font-mono">password123</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-h-dvh bg-[#0a0a0f] flex items-center justify-center">
|
||||
<div className="w-6 h-6 rounded-full border-2 border-[#D4AF37]/30 border-t-[#D4AF37] animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+6
-154
@@ -1,166 +1,18 @@
|
||||
"use client";
|
||||
|
||||
import { useState, FormEvent } from "react";
|
||||
import { useAuth } from "@/lib/AuthContext";
|
||||
import { useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function RegisterPage() {
|
||||
const { register } = useAuth();
|
||||
const router = useRouter();
|
||||
const [name, setName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
|
||||
if (!name.trim() || !email.trim() || !password.trim()) {
|
||||
setError("Please fill in all fields");
|
||||
return;
|
||||
}
|
||||
|
||||
if (password.length < 6) {
|
||||
setError("Password must be at least 6 characters");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
await register(email.trim(), name.trim(), password);
|
||||
router.push("/");
|
||||
} catch (err: unknown) {
|
||||
const message =
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: "Registration failed. Please try again.";
|
||||
setError(message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
router.replace("/auth");
|
||||
}, [router]);
|
||||
|
||||
return (
|
||||
<div className="min-h-dvh bg-[#0a0a0f] flex flex-col items-center justify-center px-6">
|
||||
<div className="w-full max-w-sm">
|
||||
{/* Logo / Brand */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-[#D4AF37]/20 to-[#D4AF37]/5 border border-[#D4AF37]/30 flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-3xl">☪️</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white">Join Falah</h1>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Start your Islamic lifestyle journey
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="mb-4 p-3 rounded-xl bg-red-900/20 border border-red-800/40 text-red-400 text-sm text-center">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="name"
|
||||
className="block text-xs font-medium text-gray-500 mb-1.5 uppercase tracking-wider"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
id="name"
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Your name"
|
||||
autoComplete="name"
|
||||
autoFocus
|
||||
className="w-full bg-[#111118] border border-gray-800/60 rounded-xl px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-[#D4AF37]/50 focus:ring-1 focus:ring-[#D4AF37]/30 transition"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-xs font-medium text-gray-500 mb-1.5 uppercase tracking-wider"
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="you@example.com"
|
||||
autoComplete="email"
|
||||
className="w-full bg-[#111118] border border-gray-800/60 rounded-xl px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-[#D4AF37]/50 focus:ring-1 focus:ring-[#D4AF37]/30 transition"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="password"
|
||||
className="block text-xs font-medium text-gray-500 mb-1.5 uppercase tracking-wider"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="At least 6 characters"
|
||||
autoComplete="new-password"
|
||||
className="w-full bg-[#111118] border border-gray-800/60 rounded-xl px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-[#D4AF37]/50 focus:ring-1 focus:ring-[#D4AF37]/30 transition"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full py-3 rounded-xl bg-[#D4AF37] text-[#0a0a0f] font-semibold text-sm active:opacity-80 disabled:opacity-50 transition"
|
||||
>
|
||||
{loading ? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<span className="w-4 h-4 rounded-full border-2 border-[#0a0a0f]/30 border-t-[#0a0a0f] animate-spin" />
|
||||
Creating account...
|
||||
</span>
|
||||
) : (
|
||||
"Create Account"
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Sign in link */}
|
||||
<div className="text-center mt-6">
|
||||
<p className="text-xs text-gray-600">
|
||||
Already have an account?{" "}
|
||||
<Link
|
||||
href="/login"
|
||||
className="text-[#D4AF37] font-medium hover:underline"
|
||||
>
|
||||
Sign in
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Bonus info */}
|
||||
<div className="mt-6 rounded-xl bg-[#111118] border border-gray-800/60 p-3 text-center">
|
||||
<p className="text-xs text-gray-600 uppercase tracking-wider mb-1">
|
||||
New Member Bonus
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
Get <span className="text-[#D4AF37] font-semibold">5,000 FLH</span>{" "}
|
||||
free on sign up + 7-day premium trial
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-h-dvh bg-[#0a0a0f] flex items-center justify-center">
|
||||
<div className="w-6 h-6 rounded-full border-2 border-[#D4AF37]/30 border-t-[#D4AF37] animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -23,6 +23,11 @@ const navItems = [
|
||||
export default function BottomNav() {
|
||||
const pathname = usePathname();
|
||||
|
||||
// Hide bottom nav on auth pages
|
||||
if (pathname.startsWith("/auth")) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<nav
|
||||
className="fixed bottom-0 left-0 right-0 z-50 bg-[#0a0a0f]/95 backdrop-blur-md border-t border-gray-800/60 safe-area-bottom"
|
||||
|
||||
+32
-1
@@ -40,6 +40,7 @@ interface AuthContextType {
|
||||
loading: boolean;
|
||||
login: (email: string, password: string) => Promise<void>;
|
||||
register: (email: string, name: string, password: string) => Promise<void>;
|
||||
oauthLogin: (provider: string) => Promise<void>;
|
||||
logout: () => void;
|
||||
refreshUser: () => Promise<void>;
|
||||
streak: StreakData | null;
|
||||
@@ -65,6 +66,16 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
} else {
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
// Listen for token changes (e.g., from OAuth popup)
|
||||
const handleStorage = (e: StorageEvent) => {
|
||||
if (e.key === "flh_token" && e.newValue) {
|
||||
setToken(e.newValue);
|
||||
fetchUser(e.newValue);
|
||||
}
|
||||
};
|
||||
window.addEventListener("storage", handleStorage);
|
||||
return () => window.removeEventListener("storage", handleStorage);
|
||||
}, []);
|
||||
|
||||
const fetchUser = async (t: string) => {
|
||||
@@ -118,6 +129,26 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
setUser(data.user);
|
||||
}, []);
|
||||
|
||||
const oauthLogin = useCallback(async (provider: string) => {
|
||||
// Open a popup window for OAuth
|
||||
const width = 600;
|
||||
const height = 700;
|
||||
const left = window.screenX + (window.innerWidth - width) / 2;
|
||||
const top = window.screenY + (window.innerHeight - height) / 2;
|
||||
|
||||
const popup = window.open(
|
||||
`/mobile/api/auth/${provider}`,
|
||||
`oauth-${provider}`,
|
||||
`width=${width},height=${height},left=${left},top=${top},popup=1`
|
||||
);
|
||||
|
||||
if (!popup) {
|
||||
// Popup blocked — fall back to direct navigation
|
||||
window.location.href = `/mobile/api/auth/${provider}`;
|
||||
}
|
||||
// The popup will close itself after successful auth via the callback page
|
||||
}, []);
|
||||
|
||||
const logout = useCallback(() => {
|
||||
localStorage.removeItem("flh_token");
|
||||
setToken(null);
|
||||
@@ -170,7 +201,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
}, [token, user, refreshStreak, refreshXp]);
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ user, token, loading, login, register, logout, refreshUser, streak, xp, refreshStreak, refreshXp }}>
|
||||
<AuthContext.Provider value={{ user, token, loading, login, register, oauthLogin, logout, refreshUser, streak, xp, refreshStreak, refreshXp }}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,390 @@
|
||||
import { SignJWT, jwtVerify } from "jose";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
// ─── Provider Config ────────────────────────────────────────────────────────
|
||||
|
||||
export type Provider = "google" | "apple" | "github";
|
||||
|
||||
interface ProviderConfig {
|
||||
authorizeUrl: string;
|
||||
tokenUrl: string;
|
||||
scopes: string[];
|
||||
clientIdEnv: string;
|
||||
clientSecretEnv: string;
|
||||
}
|
||||
|
||||
export const PROVIDER_CONFIGS: Record<Provider, ProviderConfig> = {
|
||||
google: {
|
||||
authorizeUrl: "https://accounts.google.com/o/oauth2/v2/auth",
|
||||
tokenUrl: "https://oauth2.googleapis.com/token",
|
||||
scopes: ["openid", "email", "profile"],
|
||||
clientIdEnv: "GOOGLE_CLIENT_ID",
|
||||
clientSecretEnv: "GOOGLE_CLIENT_SECRET",
|
||||
},
|
||||
apple: {
|
||||
authorizeUrl: "https://appleid.apple.com/auth/authorize",
|
||||
tokenUrl: "https://appleid.apple.com/auth/token",
|
||||
scopes: ["name", "email"],
|
||||
clientIdEnv: "APPLE_CLIENT_ID",
|
||||
clientSecretEnv: "APPLE_CLIENT_SECRET",
|
||||
},
|
||||
github: {
|
||||
authorizeUrl: "https://github.com/login/oauth/authorize",
|
||||
tokenUrl: "https://github.com/login/oauth/access_token",
|
||||
scopes: ["read:user", "user:email"],
|
||||
clientIdEnv: "GITHUB_CLIENT_ID",
|
||||
clientSecretEnv: "GITHUB_CLIENT_SECRET",
|
||||
},
|
||||
};
|
||||
|
||||
// ─── State Management ────────────────────────────────────────────────────────
|
||||
|
||||
const STATE_SECRET = new TextEncoder().encode(
|
||||
process.env.JWT_SECRET || "dev-jwt-secret-change-in-production"
|
||||
);
|
||||
|
||||
export interface StatePayload {
|
||||
provider: Provider;
|
||||
redirectTo?: string;
|
||||
}
|
||||
|
||||
/** Generate a signed state string for CSRF protection. */
|
||||
export async function generateState(
|
||||
provider: Provider,
|
||||
redirectTo?: string
|
||||
): Promise<string> {
|
||||
return new SignJWT({ provider, redirectTo } as unknown as import("jose").JWTPayload)
|
||||
.setProtectedHeader({ alg: "HS256" })
|
||||
.setIssuedAt()
|
||||
.setExpirationTime("10m")
|
||||
.sign(STATE_SECRET);
|
||||
}
|
||||
|
||||
/** Verify a state string and return the payload, or null if invalid/expired. */
|
||||
export async function verifyState(token: string): Promise<StatePayload | null> {
|
||||
try {
|
||||
const { payload } = await jwtVerify(token, STATE_SECRET);
|
||||
return payload as unknown as StatePayload;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Token Exchange & User Info ──────────────────────────────────────────────
|
||||
|
||||
interface ProviderUser {
|
||||
providerId: string;
|
||||
email: string;
|
||||
name: string;
|
||||
avatar: string | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Exchange an authorization code for a Google access token,
|
||||
* then fetch user info.
|
||||
*/
|
||||
export async function exchangeGoogleCode(
|
||||
code: string,
|
||||
redirectUri: string
|
||||
): Promise<ProviderUser> {
|
||||
const clientId = process.env.GOOGLE_CLIENT_ID;
|
||||
const clientSecret = process.env.GOOGLE_CLIENT_SECRET;
|
||||
|
||||
if (!clientId || !clientSecret) {
|
||||
throw new Error("Google OAuth is not configured");
|
||||
}
|
||||
|
||||
// Exchange code for token
|
||||
const tokenRes = await fetch("https://oauth2.googleapis.com/token", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||||
body: new URLSearchParams({
|
||||
code,
|
||||
client_id: clientId,
|
||||
client_secret: clientSecret,
|
||||
redirect_uri: redirectUri,
|
||||
grant_type: "authorization_code",
|
||||
}),
|
||||
});
|
||||
|
||||
if (!tokenRes.ok) {
|
||||
const errBody = await tokenRes.text();
|
||||
throw new Error(`Google token exchange failed: ${errBody}`);
|
||||
}
|
||||
|
||||
const tokenData = await tokenRes.json();
|
||||
const accessToken = tokenData.access_token;
|
||||
|
||||
// Fetch user info
|
||||
const userRes = await fetch(
|
||||
"https://www.googleapis.com/oauth2/v2/userinfo",
|
||||
{
|
||||
headers: { Authorization: `Bearer ${accessToken}` },
|
||||
}
|
||||
);
|
||||
|
||||
if (!userRes.ok) {
|
||||
throw new Error("Failed to fetch Google user info");
|
||||
}
|
||||
|
||||
const userData = await userRes.json();
|
||||
|
||||
return {
|
||||
providerId: userData.id,
|
||||
email: userData.email,
|
||||
name: userData.name || userData.given_name || "User",
|
||||
avatar: userData.picture || null,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Exchange an authorization code for an Apple access token,
|
||||
* then decode the ID token to get user info.
|
||||
*/
|
||||
export async function exchangeAppleCode(
|
||||
code: string,
|
||||
redirectUri: string
|
||||
): Promise<ProviderUser> {
|
||||
const clientId = process.env.APPLE_CLIENT_ID;
|
||||
const clientSecret = process.env.APPLE_CLIENT_SECRET;
|
||||
|
||||
if (!clientId || !clientSecret) {
|
||||
throw new Error("Apple OAuth is not configured");
|
||||
}
|
||||
|
||||
// Exchange code for token
|
||||
const tokenRes = await fetch("https://appleid.apple.com/auth/token", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||||
body: new URLSearchParams({
|
||||
code,
|
||||
client_id: clientId,
|
||||
client_secret: clientSecret,
|
||||
redirect_uri: redirectUri,
|
||||
grant_type: "authorization_code",
|
||||
}),
|
||||
});
|
||||
|
||||
if (!tokenRes.ok) {
|
||||
const errBody = await tokenRes.text();
|
||||
throw new Error(`Apple token exchange failed: ${errBody}`);
|
||||
}
|
||||
|
||||
const tokenData = await tokenRes.json();
|
||||
const idToken = tokenData.id_token;
|
||||
|
||||
if (!idToken) {
|
||||
throw new Error("No ID token returned from Apple");
|
||||
}
|
||||
|
||||
// Decode the JWT payload (second segment) — no verification needed here
|
||||
// since Apple's token endpoint already verified the auth code.
|
||||
const payloadBase64 = idToken.split(".")[1];
|
||||
const payloadJson = Buffer.from(payloadBase64, "base64").toString("utf-8");
|
||||
const payload = JSON.parse(payloadJson);
|
||||
|
||||
return {
|
||||
providerId: payload.sub,
|
||||
email: payload.email || "",
|
||||
name:
|
||||
payload.name ||
|
||||
`${payload.given_name || ""} ${payload.family_name || ""}`.trim() ||
|
||||
"User",
|
||||
avatar: null, // Apple does not provide a profile photo
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Exchange an authorization code for a GitHub access token,
|
||||
* then fetch user info (and primary email).
|
||||
*/
|
||||
export async function exchangeGitHubCode(
|
||||
code: string,
|
||||
redirectUri: string
|
||||
): Promise<ProviderUser> {
|
||||
const clientId = process.env.GITHUB_CLIENT_ID;
|
||||
const clientSecret = process.env.GITHUB_CLIENT_SECRET;
|
||||
|
||||
if (!clientId || !clientSecret) {
|
||||
throw new Error("GitHub OAuth is not configured");
|
||||
}
|
||||
|
||||
// Exchange code for token
|
||||
const tokenRes = await fetch("https://github.com/login/oauth/access_token", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
code,
|
||||
client_id: clientId,
|
||||
client_secret: clientSecret,
|
||||
redirect_uri: redirectUri,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!tokenRes.ok) {
|
||||
const errBody = await tokenRes.text();
|
||||
throw new Error(`GitHub token exchange failed: ${errBody}`);
|
||||
}
|
||||
|
||||
const tokenData = await tokenRes.json();
|
||||
|
||||
if (tokenData.error) {
|
||||
throw new Error(`GitHub OAuth error: ${tokenData.error_description || tokenData.error}`);
|
||||
}
|
||||
|
||||
const accessToken = tokenData.access_token;
|
||||
|
||||
// Fetch user info
|
||||
const userRes = await fetch("https://api.github.com/user", {
|
||||
headers: {
|
||||
Authorization: `Bearer ${accessToken}`,
|
||||
Accept: "application/json",
|
||||
"User-Agent": "Falah-App",
|
||||
},
|
||||
});
|
||||
|
||||
if (!userRes.ok) {
|
||||
throw new Error("Failed to fetch GitHub user info");
|
||||
}
|
||||
|
||||
const userData = await userRes.json();
|
||||
|
||||
// GitHub doesn't always return a public email; fetch emails if needed
|
||||
let email = userData.email;
|
||||
if (!email) {
|
||||
try {
|
||||
const emailsRes = await fetch("https://api.github.com/user/emails", {
|
||||
headers: {
|
||||
Authorization: `Bearer ${accessToken}`,
|
||||
Accept: "application/json",
|
||||
"User-Agent": "Falah-App",
|
||||
},
|
||||
});
|
||||
if (emailsRes.ok) {
|
||||
const emails = await emailsRes.json();
|
||||
const primary = emails.find((e: { primary: boolean }) => e.primary);
|
||||
if (primary) email = primary.email;
|
||||
}
|
||||
} catch {
|
||||
// fall back to empty email
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
providerId: String(userData.id),
|
||||
email: email || "",
|
||||
name: userData.name || userData.login || "User",
|
||||
avatar: userData.avatar_url || null,
|
||||
};
|
||||
}
|
||||
|
||||
// ─── Dispatch ────────────────────────────────────────────────────────────────
|
||||
|
||||
/** Exchange a code for user info based on provider. */
|
||||
export async function exchangeCode(
|
||||
provider: Provider,
|
||||
code: string,
|
||||
redirectUri: string
|
||||
): Promise<ProviderUser> {
|
||||
switch (provider) {
|
||||
case "google":
|
||||
return exchangeGoogleCode(code, redirectUri);
|
||||
case "apple":
|
||||
return exchangeAppleCode(code, redirectUri);
|
||||
case "github":
|
||||
return exchangeGitHubCode(code, redirectUri);
|
||||
default:
|
||||
throw new Error(`Unsupported provider: ${provider}`);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Find or Create User ─────────────────────────────────────────────────────
|
||||
|
||||
export async function findOrCreateOAuthUser(
|
||||
provider: Provider,
|
||||
providerUser: ProviderUser
|
||||
) {
|
||||
const { providerId, email, name, avatar } = providerUser;
|
||||
|
||||
// Try to find by provider + providerId first
|
||||
let user = await prisma.user.findFirst({
|
||||
where: { provider, providerId },
|
||||
});
|
||||
|
||||
if (user) {
|
||||
// Update avatar if provider has a new one
|
||||
if (avatar && avatar !== user.avatar) {
|
||||
user = await prisma.user.update({
|
||||
where: { id: user.id },
|
||||
data: { avatar },
|
||||
});
|
||||
}
|
||||
return user;
|
||||
}
|
||||
|
||||
// Try to find by email (so OAuth can link to an existing email account)
|
||||
if (email) {
|
||||
user = await prisma.user.findUnique({ where: { email } });
|
||||
if (user) {
|
||||
// Link the OAuth provider to this existing user
|
||||
user = await prisma.user.update({
|
||||
where: { id: user.id },
|
||||
data: { provider, providerId, avatar: avatar || user.avatar },
|
||||
});
|
||||
return user;
|
||||
}
|
||||
}
|
||||
|
||||
// Create a new user
|
||||
user = await prisma.user.create({
|
||||
data: {
|
||||
email: email || `${providerId}@${provider}.oauth`,
|
||||
name,
|
||||
provider,
|
||||
providerId,
|
||||
avatar,
|
||||
flhBalance: 5000,
|
||||
trialEndsAt: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
|
||||
},
|
||||
});
|
||||
|
||||
return user;
|
||||
}
|
||||
|
||||
// ─── Build OAuth URL ─────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Construct the provider's OAuth authorization URL.
|
||||
*/
|
||||
export function buildAuthorizationUrl(
|
||||
provider: Provider,
|
||||
state: string,
|
||||
redirectUri: string
|
||||
): string {
|
||||
const config = PROVIDER_CONFIGS[provider];
|
||||
const clientId = process.env[config.clientIdEnv];
|
||||
|
||||
if (!clientId) {
|
||||
throw new Error(
|
||||
`${provider} OAuth is not configured. Missing ${config.clientIdEnv} env var.`
|
||||
);
|
||||
}
|
||||
|
||||
const params = new URLSearchParams({
|
||||
client_id: clientId,
|
||||
redirect_uri: redirectUri,
|
||||
response_type: "code",
|
||||
scope: config.scopes.join(" "),
|
||||
state,
|
||||
});
|
||||
|
||||
// Apple requires response_mode=form_post
|
||||
if (provider === "apple") {
|
||||
params.set("response_mode", "form_post");
|
||||
}
|
||||
|
||||
return `${config.authorizeUrl}?${params.toString()}`;
|
||||
}
|
||||
Reference in New Issue
Block a user