Google OAuth2 with Vue3 and NestJS - redirect_uri_mismatch

Question

I'm developing a web application in Vue3 and NestJS, and am trying to implement Google Authentication. However, I'm always getting a redirect_uri_mismatch error, even if the callbackURI I provide is identical to the one I configured in the Google Cloud Console.

Here's my code in frontend:

const loginWithGoogleClick = async () => {
  googleAuthCodeLogin().then((response) => {
    loginWithGoogle(response);
  })
}
const loginWithGoogle = async (googleResponse: any): Promise<boolean> => {
    try {
      const response = await axiosClient.post(`auth/google/callback`, {
        code: googleResponse.code,
      });
...

Backend:

@Injectable()
export class GoogleStrategy extends PassportStrategy(Strategy, 'google') {
  constructor() {
    super({
      clientID: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
      callbackURL: 'http://localhost:8080/api/auth/google/callback',
      scope: ['profile', 'email'],
    });
  }
...

And here's a screenshot of what I have configured in Google:

Google Cloud Console configuration

I tried changing adding the trailing / like I saw on some posts, I tried changing it to 127.0.0.1... Nothing works :(

Important to note that my frontend runs on localhost:3000 and my backend on localhost:8080. Maybe it's the problem?

Answer 1

So the answer is to put "postmessage" as the CallbackURL. Which is impossible with passport-google-oauth2 since it automatically adds the origin URL before the "postmessage" ... So I had to do a manual verification instead of using passport.