Google oauth2 with node js

Question

I have a Vuejs application and I am trying to add google authentication. I use this plugin https://www.npmjs.com/package/vue-google-oauth2 to generate the authorization code on the front end and then send it to my back-end so it can get the user credentials.

Here is the code from the front end:

<script>
import axios from "axios";
export default {
  methods: {
    googleAuth() {
      this.$gAuth
        .getAuthCode()
        .then(authCode => {
          //on success
          axios.post('my-back-end', {code:authCode, redirect_uri: 'postmessage'}).then(res=>{
              console.log(res);
          });
        })
        .catch(error => {
          //on fail do something
        });
    }
  }
};
</script>

I get the authorization code successfully until here and i send it to my back end which is written with node.js based on the official google docs. https://github.com/googleapis/google-api-nodejs-client#oauth2-client

I have this route :

router.post('/google', googleController.getGoogleAccountFromCode);

And this controller:

const {google} = require('googleapis');

const oauth2Client = new google.auth.OAuth2(
    process.env.GOOGLE_CLIENT_ID,
    process.env.GOOGLE_CLIENT_SECRET,
    process.env.GOOGLE_REDIRECT_URL
);

exports.getGoogleAccountFromCode = (req, res, next) => {
   const code = req.body.code;
   const data = oauth2Client.getToken(code)
    .then(res => {
        console.log(res);
    })
    .catch(err=>{
        console.log(err);
    });
};

And I get this error:

{ Error: invalid_request at Gaxios.request (/home/monkeydkon/Desktop/tabata-rest/node_modules/gaxios/build/src/gaxios.js:70:23) at process._tickCallback (internal/process/next_tick.js:68:7) response: { config: { method: 'POST', url: 'https://oauth2.googleapis.com/token', data: 'code=4%2FlgGDaumBZrCEo1GraV2csRBqKMOQFM7IKhBUP3tJVf2NSPS2nBqbdc9mDqIuaM847ZIPy6mZ4MGHLD9fR2a3A_Q&client_id=918021882776-fu8hr3q5ld81t1dlv1pd8en7ht8hu3t6.apps.googleusercontent.com&client_secret=LBCef5d7K48XGB7TEEDF7SBK&redirect_uri=%2Fauth%2Fgoogle%2Fredirect&grant_type=authorization_code&code_verifier=', headers: [Object], params: [Object: null prototype] {}, paramsSerializer: [Function: paramsSerializer], body: 'code=4%2FlgGDaumBZrCEo1GraV2csRBqKMOQFM7IKhBUP3tJVf2NSPS2nBqbdc9mDqIuaM847ZIPy6mZ4MGHLD9fR2a3A_Q&client_id=918021882776-fu8hr3q5ld81t1dlv1pd8en7ht8hu3t6.apps.googleusercontent.com&client_secret=LBCef5d7K48XGB7TEEDF7SBK&redirect_uri=%2Fauth%2Fgoogle%2Fredirect&grant_type=authorization_code&code_verifier=', validateStatus: [Function: validateStatus], responseType: 'json' }, data: { error: 'invalid_request', error_description: 'Invalid parameter value for redirect_uri: Missing scheme: /auth/google/redirect' }, headers: { 'alt-svc': 'quic=":443"; ma=2592000; v="46,43,39"', 'cache-control': 'private', connection: 'close', 'content-encoding': 'gzip', 'content-type': 'application/json; charset=utf-8', date: 'Wed, 31 Jul 2019 20:47:01 GMT', server: 'scaffolding on HTTPServer2', 'transfer-encoding': 'chunked', vary: 'Origin, X-Origin, Referer', 'x-content-type-options': 'nosniff', 'x-frame-options': 'SAMEORIGIN', 'x-xss-protection': '0' }, status: 400, statusText: 'Bad Request' }, config: { method: 'POST', url: 'https://oauth2.googleapis.com/token', data: 'code=4%2FlgGDaumBZrCEo1GraV2csRBqKMOQFM7IKhBUP3tJVf2NSPS2nBqbdc9mDqIuaM847ZIPy6mZ4MGHLD9fR2a3A_Q&client_id=918021882776-fu8hr3q5ld81t1dlv1pd8en7ht8hu3t6.apps.googleusercontent.com&client_secret=LBCef5d7K48XGB7TEEDF7SBK&redirect_uri=%2Fauth%2Fgoogle%2Fredirect&grant_type=authorization_code&code_verifier=', headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'User-Agent': 'google-api-nodejs-client/4.2.6', Accept: 'application/json' }, params: [Object: null prototype] {}, paramsSerializer: [Function: paramsSerializer], body: 'code=4%2FlgGDaumBZrCEo1GraV2csRBqKMOQFM7IKhBUP3tJVf2NSPS2nBqbdc9mDqIuaM847ZIPy6mZ4MGHLD9fR2a3A_Q&client_id=918021882776-fu8hr3q5ld81t1dlv1pd8en7ht8hu3t6.apps.googleusercontent.com&client_secret=LBCef5d7K48XGB7TEEDF7SBK&redirect_uri=%2Fauth%2Fgoogle%2Fredirect&grant_type=authorization_code&code_verifier=', validateStatus: [Function: validateStatus], responseType: 'json' }, code: '400' }

I really cannot understand google docs. There is not proper support for oauth2. I really need some help here. Thanks

MonkeyDkon · Accepted Answer · 2019-08-01 17:58:59Z

4

I have also been stuck at this problem before. Your front-end code looks alright. You are just missing some things on your back-end.

Try to change your controller to this

const {google} = require('googleapis');

exports.getGoogleAccountFromCode = (req, res, next) => {
    const code = req.body.code;
    const oauth2Client = new google.auth.OAuth2(process.env.GOOGLE_CLIENT_ID, process.env.GOOGLE_CLIENT_SECRET, 'postmessage');
    google.options({ auth: oauth2Client });


    oauth2Client.getToken(code).then(res => {
        const tokens = res.tokens;
        oauth2Client.setCredentials(tokens);
        const oauth2 = google.oauth2({ version: 'v2' });
        return oauth2.userinfo.get();
    })
        .then(userData => {
            console.log(userData);
        })
        .catch(err => {
            console.log(err);
        });
};

All you missed actually was the google.options. Then, you extract the tokens and the user info. And you should be able to do what you want with them.

Also don't forget when testing (with e.g. POSTMAN) to always send a new code for each try.

edited Aug 1, 2019 at 17:58

answered Aug 1, 2019 at 17:51

MonkeyDkon

6411 bronze badges

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

1 Comment

Giannis Savvidis Over a year ago

Thanks! finally it works like a charm. I don't know why google hasnt got clear docs. And not a lot of support for node. I really wasted a lot of time for this.

Collectives™ on Stack Overflow

Google oauth2 with node js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related