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

  • 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

Development Environment setup

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

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-2: We handle OAuth2 purely on the Frontend and just allow talking to the Vert.x backend when auth was successful

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.

  • 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
  • search for the Google+ API and click it
  • 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.

Vue.use(GoogleAuth, { client_id: ‘<your google auth client id>’ })
OpenIDConnectAuth.discover(
vertx,
new OAuth2ClientOptions()
.setClientID(“<your google auth client id>”)
.setClientSecret(“<your google auth client secret>”)
  • 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.

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:

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.

Thank you

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store