wkadmin/the-tip-top-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make Google and Facebook OAuth optional to prevent errors

Browse Source 
- Make GoogleOAuthProvider conditional in layout.tsx (only render if clientId exists)
- Add hasGoogleAuth and hasFacebookAuth flags in login page
- Conditionally render OAuth buttons and section only when configured
- Add fallback message when OAuth is not configured
- Prevents "Missing required parameter client_id" error when NEXT_PUBLIC_GOOGLE_CLIENT_ID is not set

This allows the app to run without OAuth credentials configured, making deployment easier when OAuth is not yet set up.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
soufiane 2025-11-18 02:52:33 +01:00
parent 7347d77ec6
commit f82985f84e
2 changed files with 80 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/layout.tsx
View File

@ -38,12 +38,22 @@ export const metadata: Metadata = {
const googleClientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID || '';
export default function RootLayout({ children }: { children: React.ReactNode }) {
const content = (
<AuthProvider>
<LayoutClient>{children}</LayoutClient>
</AuthProvider>
);
return (
<html lang="fr">
<body className="min-h-screen flex flex-col bg-gray-50">
{googleClientId ? (
<GoogleOAuthProvider clientId={googleClientId}>
<AuthProvider>
<LayoutClient>{children}</LayoutClient>
{content}
</GoogleOAuthProvider>
) : (
content
)}
<Toaster
position="top-right"
toastOptions={{
@ -66,8 +76,6 @@ export default function RootLayout({ children }: { children: React.ReactNode })
},
}}
/>
</AuthProvider>
</GoogleOAuthProvider>
</body>
</html>
);

17
app/login/page.tsx
View File

@ -20,6 +20,9 @@ export default function LoginPage() {
const [isFacebookLoading, setIsFacebookLoading] = useState(false);
const [isFacebookSDKLoaded, setIsFacebookSDKLoaded] = useState(false);
const hasGoogleAuth = !!process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID;
const hasFacebookAuth = !!process.env.NEXT_PUBLIC_FACEBOOK_APP_ID;
useEffect(() => {
// Initialiser le SDK Facebook au chargement de la page
initFacebookSDK()
@ -51,7 +54,7 @@ export default function LoginPage() {
}
};
const handleGoogleLogin = useGoogleLogin({
const handleGoogleLogin = hasGoogleAuth ? useGoogleLogin({
onSuccess: async (tokenResponse) => {
setIsGoogleLoading(true);
console.log('🔑 Token Google reçu:', tokenResponse);
@ -69,7 +72,9 @@ export default function LoginPage() {
},
flow: 'implicit',
scope: 'openid email profile',
});
}) : () => {
toast.error("La connexion Google n'est pas configurée");
};
const handleFacebookLogin = async () => {
if (!isFacebookSDKLoaded) {
@ -142,6 +147,7 @@ export default function LoginPage() {
</Button>
</form>
{(hasGoogleAuth || hasFacebookAuth) && (
<div className="mt-6">
<div className="relative">
<div className="absolute inset-0 flex items-center">
@ -154,7 +160,8 @@ export default function LoginPage() {
</div>
</div>
<div className="mt-6 grid grid-cols-2 gap-3">
<div className={`mt-6 grid ${hasGoogleAuth && hasFacebookAuth ? 'grid-cols-2' : 'grid-cols-1'} gap-3`}>
{hasGoogleAuth && (
<Button
type="button"
variant="outline"
@ -183,7 +190,9 @@ export default function LoginPage() {
</svg>
Google
</Button>
)}
{hasFacebookAuth && (
<Button
type="button"
variant="outline"
@ -197,8 +206,10 @@ export default function LoginPage() {
</svg>
Facebook
</Button>
)}
</div>
</div>
)}
<p className="mt-8 text-center text-sm text-gray-600">
Vous n'avez pas de compte ?{" "}