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 :
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)
Nice and simple. Just one advice: Why are you not using the ES6 async/await? Your "Step 2 and 3" can look like:
Good luck!
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.
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.
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.
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!
Hi arpan, how you doing?
Some tips to start off your full stack career in the right way
Great to see that you are sharing your coding journey! Best of luck. :)
what is this code you use in getUserDetails
So basically, what it does is,
hey man you did well on this. You spare me time by writing this article, I was planning on integrating oauth too. Thanks
are you passing the url in code paramater if not then what it is can you please enlighten ,Stucked at that point
Awesome job. Thanks!