Arpan Kc

Posted on Jan 31, 2020 • Edited on Jun 2, 2020

OAuth 2.0 with Google API in Node.js

#node #beginners #oauth20 #googleapis

With all the asyncs and the chainings and all the other JS shamaladingdongs , doing even simple tasks in Javascript can feel overwhelming, at least for a beginner like me.

To preface, I'm currently working on my own application which is a simple Match betting tracker to keep track of my bets, and decided to add in OAuth authentication in the app. Because why not.

The first thing I did was set up an account in Google console, and got me some shiny new credentials (client ID and client Secret) for OAuth 2.0.

I had trouble getting my head around the authentication flow with all the tokens and secrets and all that. But digging deep, it was quite simple actually and started to appreciate how google makes the process so simple and dare I say, elegant.

The first thing I did was get the google api:

  npm install googleapis

In the actual program:
initialized the api library and setup googleConfigs.


const { google } = require('googleapis');
const oauth2 = google.oauth2('v2');

const Oauth2Client = new google.auth.OAuth2(
    process.env.GOOGLE_CLIENT_ID,
    process.env.GOOGLE_CLIENT_SECRET,
    process.env.GOOGLE_REDIRECT, // this must match your google api settings
);

So basically all I had to do was these 3 things:

get a Redirect url for the clients
The url also contains a code which then I use to get a token ( if the user signs in to their google account that is)
And finally I use the token to get the user details

Step 1:

function getConnectionUrl() {
    return Oauth2Client.generateAuthUrl({
        access_type: 'offline',
        prompt: 'consent',
        scope: defaultScope
    });
}

//Call this function somewhere in the program to get URL:
//const url = getConnectionUrl();

Step 2 and 3:

function getUserDetails(code) {
    return Oauth2Client.getToken(code)   //use code to get the token
        .then(({ tokens }) => {
            Oauth2Client.setCredentials(tokens);     //add token to the Oauth credentials
        })
        .then(() => {
            return oauth2.userinfo.get({ auth: Oauth2Client });  // get userinfo with the newly updated credentials
        })
}

And so in the main program , I got a connection url using getConnectionUrl() which then gave me the code in the url which I passed on to getUserDetails() to get the user details.

So this is how I got OAuth authentication working in my application.

Thanks for reading. Would appreciate feedbacks.

If you want to check out my repo, here's the link :

Matched-betting-tracker

Please star it, if you like it.

P.S. Please follow me on twitter, I'd really appreciate it. @Nipeshkc

*UPDATE*

Using async-await steps 2 and 3 can be reduced to ::

 function async getUserDetails(code) {
   const {tokens} = await Oauth2Client.getToken(code);
   Oauth2Client.setCredentials(tokens);
   const usr_info = await oauth2.userinfo.get({auth: Oauth2Client});
   return usr_info;
 }

This looks cleaner and async await seems to be more intuitive to use.

Top comments (9)

Edvinas Pranka • Jan 31 '20

Nice and simple. Just one advice: Why are you not using the ES6 async/await? Your "Step 2 and 3" can look like:

 function async getUserDetails(code) {
   const {tokens} = await Oauth2Client.getToken(code);
   await Oauth2Client.setCredentials(tokens);
   return oauth2.userinfo.get({auth: Oauth2Client});
 }

Good luck!

Arpan Kc • Feb 2 '20

Thanks for your feedback. Honestly did not know how async-await worked, but did a bit of research and I edited the code to incorporate them.

 function async getUserDetails(code) {
   const {tokens} = await Oauth2Client.getToken(code);
   Oauth2Client.setCredentials(tokens);
   const usr_info = await oauth2.userinfo.get({auth: Oauth2Client});
   return usr_info;
 }

A minor change from your suggestion, as .setCredentials() isn't async to my knowledge and I think userinfo.get() is. Feel free to correct me if I'm wrong.

Again thanks for your suggestion and will update the post accordingly.

Edvinas Pranka • Feb 2 '20

I think it's ok. Async/Await is an amazing ES6 feature, keep going with that. You might forget about the callback hell.

And one more thing. Await can be used with the sync functions. It just does nothing if you make a mistake. E.g.


const asyncMethod = () => {
   return new Promise(resolve => {
      setTimeout(() => resolve('Hello'), 1000);
   });
}

const syncMethod = () => {
   return 'World';
}

function async greeting = () => {
   const hello = await asyncMethod();
   // below await is not needed, but it works too
   const world = await syncMethod(); 
   console.log(hello, world); // logs Hello World
}

Of course, you don't have to put await anywhere, but if you don't know if the function is async or sync just put it and you will be right.

Good luck!

Manish Chaulagain • Feb 2 '20

Hi arpan, how you doing?
Some tips to start off your full stack career in the right way

Try learning typescript this will help you a lot for big js projects.
Use arrow functions and other es6 syntax.
Add linter and prettier to format your code. This is one suggestion I would like to emphasis on to learn from the beginning. You will thank me later. See airBnB style guide.
Also try to see how to structure js projects. Learn to modularize relevant suff into one place.

Great to see that you are sharing your coding journey! Best of luck. :)

rinahs • Mar 18 '20

what is this code you use in getUserDetails

Arpan Kc • Mar 18 '20

So basically, what it does is,

it takes out the 'token' from the code received
adds the token to the Oauth2Client credentials (which is used to fetch the user data)
Fetches the user's data from Google.