feat(auth): hide Google sign-in until OAuth is configured
Google social login has no credentials in production, so the "Continue with Google" button (and its divider) errored on click. Gate the button + divider on a new isGoogleConfigured() helper (requires GOOGLE_CLIENT_ID + GOOGLE_CLIENT_SECRET) on both the login and signup pages, and guard the signInWithGoogle action as defense in depth. The button reappears automatically once both env vars are set. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.8
parent
e5e987eb4c
commit
595a5e3e04
@@ -3,6 +3,7 @@ import Link from "next/link"
|
|||||||
import { Logo } from "@/components/shared/logo"
|
import { Logo } from "@/components/shared/logo"
|
||||||
import { TurnstileWidget } from "@/components/shared/turnstile-widget"
|
import { TurnstileWidget } from "@/components/shared/turnstile-widget"
|
||||||
import { signIn, signInWithGoogle } from "@/app/actions/auth"
|
import { signIn, signInWithGoogle } from "@/app/actions/auth"
|
||||||
|
import { isGoogleConfigured } from "@/lib/auth"
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Sign in",
|
title: "Sign in",
|
||||||
@@ -28,6 +29,8 @@ export default async function LoginPage({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="rounded-xl border border-white/10 bg-[#111118] p-8">
|
<div className="rounded-xl border border-white/10 bg-[#111118] p-8">
|
||||||
|
{isGoogleConfigured() && (
|
||||||
|
<>
|
||||||
{/* Google OAuth */}
|
{/* Google OAuth */}
|
||||||
<form action={signInWithGoogle}>
|
<form action={signInWithGoogle}>
|
||||||
<button
|
<button
|
||||||
@@ -47,6 +50,8 @@ export default async function LoginPage({
|
|||||||
<span className="bg-[#111118] px-3 text-white/40">or continue with email</span>
|
<span className="bg-[#111118] px-3 text-white/40">or continue with email</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Error / Success messages */}
|
{/* Error / Success messages */}
|
||||||
{error && (
|
{error && (
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ import Link from "next/link"
|
|||||||
import { Logo } from "@/components/shared/logo"
|
import { Logo } from "@/components/shared/logo"
|
||||||
import { TurnstileWidget } from "@/components/shared/turnstile-widget"
|
import { TurnstileWidget } from "@/components/shared/turnstile-widget"
|
||||||
import { signUp, signInWithGoogle } from "@/app/actions/auth"
|
import { signUp, signInWithGoogle } from "@/app/actions/auth"
|
||||||
|
import { isGoogleConfigured } from "@/lib/auth"
|
||||||
|
|
||||||
export default async function SignupPage({
|
export default async function SignupPage({
|
||||||
searchParams,
|
searchParams,
|
||||||
@@ -47,6 +48,8 @@ export default async function SignupPage({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="rounded-xl border border-white/10 bg-[#111118] p-8">
|
<div className="rounded-xl border border-white/10 bg-[#111118] p-8">
|
||||||
|
{isGoogleConfigured() && (
|
||||||
|
<>
|
||||||
{/* Google OAuth */}
|
{/* Google OAuth */}
|
||||||
<form action={signInWithGoogle}>
|
<form action={signInWithGoogle}>
|
||||||
<button
|
<button
|
||||||
@@ -66,6 +69,8 @@ export default async function SignupPage({
|
|||||||
<span className="bg-[#111118] px-3 text-white/40">or sign up with email</span>
|
<span className="bg-[#111118] px-3 text-white/40">or sign up with email</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
{error && (
|
{error && (
|
||||||
<div className="mb-4 rounded-lg border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-400">
|
<div className="mb-4 rounded-lg border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-400">
|
||||||
|
|||||||
+6
-1
@@ -3,7 +3,7 @@
|
|||||||
import { redirect } from "next/navigation"
|
import { redirect } from "next/navigation"
|
||||||
import { headers } from "next/headers"
|
import { headers } from "next/headers"
|
||||||
import { APIError } from "better-auth/api"
|
import { APIError } from "better-auth/api"
|
||||||
import { auth } from "@/lib/auth"
|
import { auth, isGoogleConfigured } from "@/lib/auth"
|
||||||
import { verifyTurnstile } from "@/lib/turnstile"
|
import { verifyTurnstile } from "@/lib/turnstile"
|
||||||
|
|
||||||
const APP_URL = process.env.NEXT_PUBLIC_APP_URL ?? "http://localhost:3000"
|
const APP_URL = process.env.NEXT_PUBLIC_APP_URL ?? "http://localhost:3000"
|
||||||
@@ -77,6 +77,11 @@ export async function signIn(formData: FormData) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export async function signInWithGoogle() {
|
export async function signInWithGoogle() {
|
||||||
|
// Defense in depth: the auth pages hide the Google button when it isn't
|
||||||
|
// configured, but guard the action too in case it's POSTed directly.
|
||||||
|
if (!isGoogleConfigured()) {
|
||||||
|
redirect(`/login?error=${encodeURIComponent("Google sign-in isn't available right now.")}`)
|
||||||
|
}
|
||||||
let url: string | undefined
|
let url: string | undefined
|
||||||
try {
|
try {
|
||||||
const res = await auth.api.signInSocial({
|
const res = await auth.api.signInSocial({
|
||||||
|
|||||||
@@ -116,3 +116,12 @@ export const auth = betterAuth({
|
|||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether Google OAuth is configured. The auth pages hide the "Continue with
|
||||||
|
* Google" button unless BOTH credentials are present, so users never see a
|
||||||
|
* social option that can't complete. Mirrors socialProviders.google above.
|
||||||
|
*/
|
||||||
|
export function isGoogleConfigured(): boolean {
|
||||||
|
return Boolean(process.env.GOOGLE_CLIENT_ID && process.env.GOOGLE_CLIENT_SECRET)
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user