Handling error post google provider sign in

[Zakisb]

Question 💬

I'm confused. i've been trying to wrap my head around this but still didn't find any solution. in my web app i have a sign up page. what i'd like to do is when the user sign up with his google account , check in my database if the email already exists. if it does then return 409 error. this is where i'm having trouble, i'd like if the response returned is 409 then display an error in my sign up component of "Email already exists". how do i achieve that ? here's my code. note that i'm using next 13.4 and next-auth 4

How to reproduce ☕️

My component

const handleGoogleSubmit = async (values, setSubmitting) => {
    const user = await signIn("google")
      .then((res) => {
        i want to handle it here !
      })
      .catch((err) => {
        console.log(err);
      });
  };

return (
     <Button
             intent={"socialGoogle"}
              className={"w-full"}
              onClick={(e) => {
                e.preventDefault();
                handleGoogleSubmit();
              }}
              icon={<GoogleBrandDefault />}
            >
              Continue with Google
     </Button>

)

My sign next auth api file

export const authOptions: AuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  callbacks: {
    async signIn({ user, account, profile, email, credentials }) {
      if (account.provider === "google") {
        try {
          const req = await apiUserCheckEmail({ email: profile.email });
          return req;
        } catch (error) {
          if (error.status === 409) {
            return error;
          }
          console.log(error);
        }
      }
    },
    async redirect({ url, baseUrl }) {
      if (url.startsWith("/")) return `${baseUrl}${url}`;
      // Allows callback URLs on the same origin
      else if (new URL(url).origin === baseUrl) return url;
      return baseUrl;
    },
    async session({ session, user, token }) {
      return session;
    },
    async jwt({ token, user, account, profile, isNewUser }) {
      return token;
    },
  },
};

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[PrabeenGautam]

Did you solve your problems? I am also stuck in same problems.

[sohitkumar]

Any update on this ?? is anyone going to take care of this ?? @balazsorban44
@ThangHuuVu

[AmineOussi]

Having same problem does anyone have any updates concerning this issue ?

[nikkizol]

@Zakisb @PrabeenGautam @AmineOussi any solutions?

[davidfcopozo]

Question 💬

I'm confused. i've been trying to wrap my head around this but still didn't find any solution. in my web app i have a sign up page. what i'd like to do is when the user sign up with his google account , check in my database if the email already exists. if it does then return 409 error. this is where i'm having trouble, i'd like if the response returned is 409 then display an error in my sign up component of "Email already exists". how do i achieve that ? here's my code. note that i'm using next 13.4 and next-auth 4

How to reproduce ☕️

My component

const handleGoogleSubmit = async (values, setSubmitting) => {
    const user = await signIn("google")
      .then((res) => {
        i want to handle it here !
      })
      .catch((err) => {
        console.log(err);
      });
  };

return (
     <Button
             intent={"socialGoogle"}
              className={"w-full"}
              onClick={(e) => {
                e.preventDefault();
                handleGoogleSubmit();
              }}
              icon={<GoogleBrandDefault />}
            >
              Continue with Google
     </Button>

)

My sign next auth api file

export const authOptions: AuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  callbacks: {
    async signIn({ user, account, profile, email, credentials }) {
      if (account.provider === "google") {
        try {
          const req = await apiUserCheckEmail({ email: profile.email });
          return req;
        } catch (error) {
          if (error.status === 409) {
            return error;
          }
          console.log(error);
        }
      }
    },
    async redirect({ url, baseUrl }) {
      if (url.startsWith("/")) return `${baseUrl}${url}`;
      // Allows callback URLs on the same origin
      else if (new URL(url).origin === baseUrl) return url;
      return baseUrl;
    },
    async session({ session, user, token }) {
      return session;
    },
    async jwt({ token, user, account, profile, isNewUser }) {
      return token;
    },
  },
};

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

Hello, I was having a similar issue, but I just wanted to display the error caught on the API on a toaster and I came across this solution:

Catch the error from the API in the signIn callback function and encode it in the URI, see the code snippet below:

catch (error: Error | any) {
        return `/login?error=${encodeURIComponent(
          error. response?.data?.message || "Sign-in failed"
        )}`;
      }

This is how the complete signIn function looks:

callbacks: {
async signIn({ user, account }) {
      try {
        if (account && account.provider !== "credentials") {
          const res = await Axios.post(`${baseUrl}/auth/auth, {
            provider: account.provider,
            email: user.email,
            name: user.name,
            avatar: user.image,
          });

          //more logic
        }
        return true;
      } catch (error: Error | any) {
        return `/login?error=${encodeURIComponent(
          error. response?.data?.message || "Sign-in failed"
        )}`;
      }
    },
    }

To show it in the frontend get the error message from the 'error' param we encoded in the previous snippet, in this case, I use the useEffect to show the toaster

export function LoginPage() {
const errorParam = param.get("error");
  useEffect(() => {
    if (errorParam) {
     //Handle the error as you wish here
      toast({
        variant: "destructive",
        title: "Login Failed",
        //Don't forget to decode the error to show it as a string
        description: decodeURIComponent(errorParam as string),
      });
    }
  }, [errorParam, toast]);

return {
//render some code
}
}

Remember you can play with the error message here to show more user oriented error messages:

catch (error: Error | any) {
        return `/login?error=${encodeURIComponent(
          error. response?.data?.message === "Some server oriented error message" ? "Proper error for user" : error. response?.data?.message || "Sign-in failed"
        )}`;
}

Hope it helps!