Easy Google Auth with Node.js
5 Steps to install Google user login with Node.js
So you want to add Google login to your app or website, hey? Maybe you’ve had problems with Passport.js and want a more straight forward solution. Or maybe you’re just here for fun…
Well this is the article for you!
This article contains a step-by-step tutorial on how to code a Google login on your app using OAuth 2. I’ve broken the process as best I could to help you understand exactly what’s going on. This is an updated version of the original article which you can see here — currently at 4K+ claps.
Before We Start ☝️
In this article, we are assuming you:
- Already know how to write code — preferably JavaScript.
Yep, that’s it. If you don’t know how to code or want a quicker way to add OAuth logins to your app or website, check out Authpack.
Step 1 of 5 🔒
To start, you’ll need to create a new Google project.
- Go to the Google developer console: https://console.developers.google.com/apis/credentials
- Select or create a Google project.
- Navigate to the credentials page — in the left sidebar — and create an OAuth client ID.
- Copy the client id and client secret to be used later.
Step 2 of 5 🔌
When a user is logged in with Google, they will then be redirected back to your app. To do this, we need to give Google the url that points to your app. You may need to create this app route if you haven’t already.
You can also test Google login on localhost, just provide the localhost address instead of the domain address.
- Create a route in your app such as
https://www.example.com/authenticate/google - Google will redirect users to this route after they login.
- Navigate to the OAuth consent screen panel of the credentials area.
- Add your domain to the Authorized domains section.
Step 3 of 5 👉
Now it’s time for the good bit, we are going to start logging in your users with Google. All we need to do here is append a few parameters to the Google login url. When our users click a button or link, we will send them to this url. To make things easier, we are going to use the simple query-string library to append parameters to this url.
- Install the popular
query-stringlibrary on your app: https://www.npmjs.com/package/query-string - Create the Google login url.
- Make sure your scopes match up to the data that you wish to access later on in your code. For example, you will need to add the “https://www.googleapis.com/auth/userinfo.email” scope to access the user’s email address.
- See url parameter options here: https://developers.google.com/identity/protocols/OAuth2WebServer#obtainingaccesstokens
Now that you’ve created the login url, add it to your app or website. Here is a simple React example.
Step 4 of 5 🔐
As mentioned before, once your users login, they will be redirected back to your app. The url they are redirect to will contain a special code. For example:
https://www.example.com/authenticate/google?code=CODE_IS_HEREWe will use to create an access token. An access token is required to authenticate any future requests we send to Google such as getting the user’s name or email address. To get the code and create the access token, we will use the same query-string library that we used before. Let’s go!
- Get the code from the url.
- Send the code to your server to be processed — not applicable when already on the server i.e. when using express.
- Create an access token from your code.
- See url parameter options here: https://developers.google.com/identity/protocols/OAuth2WebServer#exchange-authorization-code
- Remember to store secret variables in
process.envwhich is easy to do with thedotenvlibrary: https://www.npmjs.com/package/dotenv
Step 5 of 5 👩💻
Now that you got the access token, we can use it to get data from the Google API. We’ve gone ahead and created an example request which you can use to get some basic user details.
- Create a HTTP request with the access token to get the user’s data.
- See the Google API Explorer here: https://developers.google.com/apis-explorer/#p/
Yahooo! 🎉
If you enjoyed this article, please give it a few claps — you can leave up to 50 — or you can comment if you have any questions, I’ll do my best to answer them!
Liked this tutorial? ❤️ Here are some more:
