2

I have a route on my backend application which should return an access token for a code sent from the frontend:

router.get('/token', (req, res) => {
  const auth = googleService.getAuth();

  auth.getToken(req.query.code, (error, res2) => {
    const data = { code: 200 }

    if (error) {
      data.code = error.code;
      data.error = error.response.data;
    } else {
      console.log(res2);
    }

    res
      .status(data.code)
      .send(data);
  })
});

I retrive auth from googleService.getAuth():

const { google } = require('googleapis');
const keys = require('../config/keys');

var module = module.exports = {
  getAuth: (token = false) => {
    let auth = new google.auth.OAuth2(
      keys.google.clientID,
      keys.google.clientSecret,
      keys.google.callbackURL
    );

    if (token) {
      auth.credentials = {
        access_token: token,
        refresh_token: null
      };
    }

    return auth;
  },
  youtube: google.youtube('v3')
};

In my config file, I have callbackURL:

module.exports = {
  google: {
    apiKey: 'XXXXXXXXXXXXXXXX',
    clientID: 'XXXXXXXXXXXXXX',
    clientSecret: 'XXXXXXXXXXXXXXX',
    callbackURL: 'http://localhost:3000/google/redirect'
  }
}

I also set it in my console:

enter image description here

However, I always have the following error when calling this route:

"error": {
  "error": "redirect_uri_mismatch",
  "error_description": "Bad Request"
}

2 Answers 2

1

The uri needs to match from the auth to the token. So it looks like you auth via your token endpoint and try to send the token to the google/redirect path. You can work around this.

To do so, verify that the redirect uri is whitelisted in your google project console. You can view this via the API Access (where you would see client ID, client secret, as well as a list of redirect uris)

Sign up to request clarification or add additional context in comments.

9 Comments

I'm not sure to really understand. I added http://localhost:3000 in 'Authorized Javascript Origins' and it doesn't change anything Screenshot
You are asking google for a token via http:localhost:3000/token and you are trying to send that token to http:localhost:3000/google/redirect this is causing the uri mismatch error. You should be able to add the uri you want to send the token to a list in your project console.
I still don't understand. I don't login from the backend, but from the frontend where I got a code which a send to the backend. There's no need to redirect to any route, however, the API is asking me to. I also inspired myself from this What should I do ?
right so you login to the FE and ask your BE to handle asking google for a token. You give google your creds (clientId + secret) in exchange for a token. The issue is where you asked for the token is not the same as where the token is supposed to go. The difference in the uri then throws the error you get. In order to overcome this, you need to tell google, 'hey that google/redirect guy is with me, he's cool'. Google just compares http://localhost:3000/token to http://localhost:3000/google/redirect. Obviously these are the same, thus the error.
I finally got it! But I didn't use anything that you mentioned lol. In my code, I changed callbackURL to https://localhost:4200 which is the address where my frontend is hosted, and on the console, I added https://localhost:4200 to the Authorized redirect URIs in the "Client ID for Web application" page. Even though this is a very strange configuration, everything is fine now!
|
0

It's possible that you can't have a redirect URI that is local.

If so, you can have an http valid address for you localhost in 2 mins with https://ngrok.com

Hope it'll help

1 Comment

This is actually OK, I did some tests multiple times ago. Thanks for your contribution

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.