I'm trying to implement Google Sign In on a NextJS setup
The email and password auth works, however the google one does not
Here is my code
function LoginPage() {
const handleGoogleLogin = async () => {
const { getAuth, signInWithPopup, GoogleAuthProvider } = await import ("firebase/auth");
const auth = getAuth();
const provider = new GoogleAuthProvider();
console.log({auth, provider})
try {
const result = await signInWithPopup(auth, provider)
console.log({result})
const credential = GoogleAuthProvider.credentialFromResult(result);
const token = credential.accessToken;
// The signed-in user info.
const user = result.user;
console.log({user, token})
} catch(error){
const credential = GoogleAuthProvider.credentialFromError(error);
console.log({error, credential})
}
};
return (
<div className="flex min-h-screen items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<button onClick={handleGoogleLogin}>Sign In with Google</button>
</div>
);
}
export default LoginPage;I get this error
{
"error": {
"code": "auth/argument-error",
"customData": {},
"name": "FirebaseError"
},
"credential": null
}
The Firebase app is instantiated, the auth and provider objects look alright
{
"auth": {
"apiKey": "XXXXXXX",
"authDomain": "XXXXXX.firebaseapp.com",
"appName": "[DEFAULT]"
},
"provider": {
"providerId": "google.com",
"defaultLanguageCode": null,
"customParameters": {},
"scopes": [
"profile"
]
}
}