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

17
app/login/page.tsx
View File

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