Log In With the Google OAuth Demo App
Step-by-step implementation of Google OAuth 2.0
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.
There are usually three roles involved in OAuth implementations:
- Resource owner: The user that grants access to their data (or some of it).
- Third-party application: The website or application that wants to access the resource owner’s data.
- Resource server: The server that holds the resource owner’s data, which is exposed through APIs.
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.
- You: “Hey Google, I want to give my app’s visitors the option to allow it to access their Google data.”
You login to Google (you will need a Google account) and set up OAuth, where you provide the name of the app, specify what the exact information is that you want to access from its users, and a few other things.
- Google: “Ok, but I need their consent.”
Google will then provide you a URL where you need to redirect your users for consent. It also provides a client ID that you need to append to this URL, so that it knows which app the users are granting access to and the exact information that can be accessed. It also provides a client secret key, which you will need later on.
- User visiting your app: “I want to login with Google.”
When your app’s users select this option, you redirect them to the URL that Google provided at step 2.
- Google (to the user): “Do you want to allow this app to access this data from your Google account?”
If not already logged in, Google will show the login form first. If the user already agreed to this, it will jump to step 6.
- User: “Yes.”
Google acknowledges the user’s consent and marks the client ID as “good to go” so that it doesn’t ask for permission again next time.
- Google: “Got it! Go back to the app now.”
Google redirects the user back to your app, to a URL that you provided at step 1, and appends an authorization code.
Note: This URL can render an HTML page but this means that any third-party scripts you might have in that page (analytics, ads, etc.) have access to the authorization code, as it’s a
queryparam. So, it’s recommended that this is handled by your server first and then redirect the user to an HTML page that does not include any response parameters.
- Your app: “Ok Google, the user gave their consent and I have an authorization code to prove it. Now can I please have my access token?”
Your app then calls another Google URL and provides the authorization code from step 6, and the client ID and client secret from step 2.
- Google: “Ok, here it is.”
Google provides the access token to your app in the response.
- Your app: “Finally! Google, give me the profile information for this access token.”
With the access token, the app calls Google’s API endpoint that provides the user’s name, e-mail address, and profile picture. Depending on what you selected at step 1, you can call other endpoints and get the user’s emails, delete them, send emails, etc.
- Your app: “Hi user! Google gave me your profile information.”
The app now has the user’s name, e-mail address, and profile picture. It can create a record in its database to persist whatever information it needs about that user and to recognize them on future visits.
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).
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
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.