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

Answer 1

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.