Google OAuth2 with VueJS and Vert.x

Create a simple VueJS frontend app running on a Vert.x backend, providing login with Google OAuth2 from scratch

Thomas Reinecke
Nov 16, 2018 · 8 min read

we continue the journey we started with Vert.x + VueJS and OAuth2, this time lets dive into Google OAuth2 instead of using Keycloak. We’re going to create a little VueJS app serving together with a Vert.x backend that allows you to login with your Google credentials. We will look at two Authentication scenarios, one driven by the frontend and the other driven between frontend and backend.

For the impatient — we’re going to:

  • setup your development environment by initialising the Vert.x backend
  • Configure Google OAuth2 to have your Client ID and Client Secret
  • reuse the Frontend from Vert.x + VueJS and OAuth2 in 5 Steps
  • change the backend to utilize Google OAuth2

You can download the final project on the following GH repository:


Development Environment setup

Use the Vert.x starter page and generate your project:

Clicking Generate Project will download a ZIP file containing the freshly generated project and we go from there. To create your Vert.x project, you could also use vertx-cli-starter as an alternative.

I’m using Eclipse as IDE and I’m importing this project to my workspace. The Vert.x starter page uses my artifactId vertx-vue-oauth2 also to create the java package structure (which is a little weird), so let’s align that a bit: Rename the com.ibm.vertx-vue-oauth2 package into com.ibm.example (or whatever else you want) within the src and the test folders. I also changed the vertx.version from 3.5.4 to 3.6.0.CR1, since we will need a few brand new things in Vert.x for OAuth2 service discovery later.

Create a starter for Eclipse: touch a new file called vertx.launch and use the following code:

You should now have your starter vertx on your Run Configurations. Starting it should give you the following output:

As an alternative to Eclipse, you could also build this project from the commandline withmvn package and start/run it with the following command:

java -jar vertx-vue-oauth2-1.0.0-SNAPSHOT-fat.jar run com.ibm.example.MainVerticle

Google Sign-in Flow

The following diagram shows the Sign-in flow with Google we’re going to cover, however I’ll split this up into two scenarios:

  • Scenario-1: thats the flow you see there, frontend is Vue, Backend is Vert.x, authentication is happening at some parts on both sides
  • Scenario-2: We handle OAuth2 purely on the Frontend and just allow talking to the Vert.x backend when auth was successful

There is a third scenario one could think of, which is OAuth2 just happening on the backend. This article does not cover this.


Configure Google OAuth2

Before we get started, we have to make sure Google is properly configured for OAuth2 for your new app. Visit the Google API Console to obtain OAuth 2.0 credentials such as a Client ID and Client Secret that are known to both Google and our application. The set of values varies based on what type of application you are building. For example, a JavaScript application does not necessarily require a secret, but our Vert.x application does.

  • log into the Google Developer Console
  • click the Select a Project dropdown and select New Project
  • give it a project name that you want, I picked vertx-oauth2
  • once the project is created (takes a few seconds), use the project selector again and pick your new project
  • from the left navigator, select and open the API Library
  • search for the Google+ API and click it
  • the detail page of Google+ API opens, click on Enable button
  • The API Dashboard opens, click Credentials on the left Nav and switch to the OAuth Consent Screen tab — provide an application name of your choice and an optional logo. Save without Publishing
  • go to the Credentials tab, click on the Create Credentials popup and select OAuth client ID — Google also offers a wizard to help you make this decision if you’d like to use Google Auth in a different context
  • On the next screen select Web application as Application type and give it a name — I used vertx-vue-oauth2
  • put http://localhost:8081 into the Authorized JavaScript origins and use http://localhost:8081/callback for the Authorized redirect URIs and click the Create button
  • You’re now getting a popup containing your Client ID and Client Secret — copy those values, we’ll need them on our code in a moment

Create the Frontend and the Login Page

We’re going to use almost the same simple frontend like we did on this article. However the landing page got even simpler: instead of a login form it now just comes with the Sign in with Google button.

Building the frontend in src/main/frontend with yarn and yarn dev will provide this landing page of the WebUi on localhost:8081

On the frontend, we’re going to use vue-google-oauth to execute the first 3 steps of our flow diagram for both scenarios.

The signIn function allows to run the two different scenarios to do OAuth backend- and frontend-based.

Use the useBackendScenario property to select and run the scenario you want. Before you get started, its now time to add your Google OAuth2 client Id and Client Secret onto the right places.

On the frontend, open src/main.js and change this line:

Vue.use(GoogleAuth, { client_id: ‘<your google auth client id>’ })

On the backend, open MainVerticle.java and change these lines:

OpenIDConnectAuth.discover(
vertx,
new OAuth2ClientOptions()
.setClientID(“<your google auth client id>”)
.setClientSecret(“<your google auth client secret>”)

Once you’ve done so, restart backend and frontend and load the login page from http://localhost:8081/

When clicking this button, Google Auth is done on a separate popup that either allows to enter the Google credentials and/or to authenticate the app:

After you have provided your Google credentials, the frontend now runs the following authentication logic:

  • Scenario-1: The VueJS Login component receives the authorization code from the google login popup and calls the Vert.x backend on http://localhost:8080/auth/google. There the authorization code is used to retrieved the access_token, refresh_token, id_token and the scope, which is used to retrieve the Google user profile from https://www.googleapis.com/plus/v1/people/me. The user is returned to the frontend which uses Vuex to finally log the user into the landing page
  • Scenario-2: Using the directAccess() option in vue-google-oauth, the steps from Scenario-1 are solely executed on the frontend with no additional call to the backend.

After a successful authentication, the Frontend app looks like in our last example and the Message Wall can be use to send messages to Vert.x including PubSub for auto-updates of the frontend.


How does Vert.x handle Google OAuth2 ?

We’re going to use the brand new OAuth service discovery coming with Vert.x 3.6.0.CR1 to setup the OAuth2 provider and handler for Google. Service discovery happens when the MainVerticle starts together with the backend. Make sure you put your Google OAuth2 client ID and client secret in:

When the user has logged into Google from the Frontend, Step 5 from the Flow chart is then triggered to retrieve the profile information for the Google user. This happens in this code:

Briefly, this code uses the Google OAuth2 provider we created during service discovery earlier to authenticate based on the authorization code that was provided by the frontend. With that Vert.x receives the access_token (and more) which it uses to retrieve the user profile and replies this back to the frontend.

Since the user is properly authenticated with Google now and is now well known on the frontend and the backend, any desired logic could be implemented to store and manage the user on the backend — take care of GDPR compliancy when you do so.


Wrap up and future outlook

You have learned how to tie a number of great technologies together to provide authentication of a Google user for your app, based on a Vert.x backend and a VueJS frontend. This article described two flavours of authentication, one drive by the frontend, the other by a hybrid of frontend and backend. Both have their advantages in various business situations. Another scenario I did not cover (yet) is OAuth2 exclusively on the backend, which I’m thinking to cover shortly. Another thing I would change is the need for a PopUp for the Google login — I haven’t found a quick way to tell vue-google-oauth using my login page for this but I guess we should do that and get rid of it. If anybody out these has an idea on this or if you have feedback or questions in general, don’t hesitate to leave a comment or reach out to me on Twitter.

Hope you enjoy Google OAuth with your VueJS and Vert.x app. Don’t miss to check out my other technical Articles:

Thank you

Thomas Reinecke

Written by

Chief Architect at IBM, passionate Business Transformer & Hacker. I write about Technology, Transformation, Coding and AlgoTrading. Views are my own