The google provider works perfectly fine on Chrome and other browsers but fails to work on Safari. I can't seem to find anything relevant in the documentation here.
This is how my provider is declared in [...nextauth].js
import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import GoogleProvider from "next-auth/providers/google";
import FacebookProvider from "next-auth/providers/facebook";
export default NextAuth({
debug: true,
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
state: false,
authorizationUrl:
'https://accounts.google.com/o/oauth2/v2/auth?prompt=consent&access_type=offline&response_type=code',
}), ...
The function calling sign in with Google
async function signInWithGoogle() {
const res: any = await signIn("google");
if (res && res.error) {
setErrorMsg(res.error);
setShowError(true);
} else if(!res) {
router.push("/account-error")
}
else {
router.push("/somepage");
}
}
On safari the res object is always undefined. I can see in the console logs that next auth is able to generate a valid authorization URL in [next-auth][debug][GET_AUTHORIZATION_URL] but the app wouldn't redirect on Safari only.
Turns out on Safari next auth was not resolving the promise. I removed the code where I checked for res and it worked fine. It was being redirected without the request getting completed to sign in with google. Letting it stay here in case any one gets this issue.
So your function call should just be
async function signInWithGoogle() {
const res: any = await signIn("google");
}