Log In With the Google OAuth Demo App

Step-by-step implementation of Google OAuth 2.0

Ionel Hindorean
Aug 19, 2019 · 7 min read
Micah Williams on Unsplash

OAuth is an authorization open standard that specifies a process for internet users to grant third-parties access to their resources stored on other websites.

It is commonly used by companies such as Google, Facebook, Twitter, etc. A company like Google can grant a third-party application or website access to its user’s data: name, email address, profile picture, emails, etc.

The users will have to give their consent, but they will only provide their credentials to Google, not the third-parties.

The key term here is authorization, as I often see it mistaken for authentication.

This is because OAuth is usually used as a way to “log in” to websites “with Google” (or Facebook, or Twitter, etc.). But while doing this, users are not actually authenticating to that website.

They are authorizing it to access their Google information and only pass their credentials to Google, never to the website or application.

Note: Users might have to authenticate to Google during the process (if they haven’t done so previously) but the authentication itself has nothing to do with OAuth, it’s just Google’s normal authentication process.


Roles

There are usually three roles involved in OAuth implementations:


Step-by-Step Example

The exact implementation of OAuth may depend on the type of the application that wants to access the data.

In this particular example, it will be a web application that has both a server-side and a front-end side, requesting its users to grant access to their data on Google servers.

The steps, however, would be fairly similar for a mobile app, purely server app, or purely front-end app.

Let’s say you are building a web app and you want to provide a login functionality to your users but you don’t want to make them fill in a registration form and manage all their passwords, so, you use Google’s OAuth service to access their profile information.

To call Google’s API and get information about its users, you need an access token which you would then include in every request, so that Google knows you have been granted access.

The following steps describe how such an access token is obtained, in the form of a casual conversation so we don’t get lost in technical terminology.

While I used Google for this particular example, it will be similar with other service providers like Amazon, Facebook, or Twitter.

They usually also provide libraries for various programming languages that help you with the implementation.

The steps might be a bit different from one service provider to the other and they have different flows for different kinds of apps. This may be a bit confusing but the overall process should be similar.


Building a Demo Web Application

Obtain the OAuth client ID and client secret

The first things we need is a client ID and client secret.

You can get them by going to the Google API console and then following the steps below.

1. Create a new project.

2. Choose a name for the project.

3. Select the project you just created.

4. Give your app a name. You can also upload your app’s logo, it will appear on Google’s consent screen.

5. Create the OAuth client ID and secret.

6. Fill in the details as highlighted.

7. You now have a client ID and a client secret. You will need them later on (they are always available in your API console).


The Application

This is a simple demo app. It consists of two files: an HTML page and a Node.js server file.

The HTML file is a simple web page. It has some JS logic to either display a “Login with Google” button or the details of the user based on some query params.

getClientId() fetches the client ID from the server, as this is not usually stored on the client-side.

The server file grabs the client ID and client secret command-line arguments (you have to provide them when you start the server) and serves statics from the public folder (the HTML file above).

It has a handler for the /clientId endpoint which the HTML page uses to get the client ID.

The handler for the /oauth2callback endpoint is the one we set up previously when obtaining the client ID and secret.

This is where Google will redirect the users after they give consent, and passes an authorization code in the code query param. With that, the client secret, and the client ID, this handler then calls https://www.googleapis.com/oauth2/v4/token to get the access token.

It then passes the token to getUserInfo(), which fetches the user details and redirects the user to localhost with the user details as query params, which the HTML page will render.

Bear in mind that this is a demo app. Carefully think about the architecture when you build one for the real world.

You can clone the app from GitHub.


Better Programming

Advice for programmers.

Thanks to Zack Shapiro

Ionel Hindorean

Written by

Web Engineer. Twitter: @ionelh Linkedin: Ionel Hindorean

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

The Zero-Dollar Infrastructure Stack

1.2K

More from Better Programming

More from Better Programming

Fun Side Projects That You Can Build Today

3.1K

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade