JSFeeds: info.meteor.com - Google OAuth using Meteor JS — Implementation Guide with Working Code [ 2022 ]

Friday, 14 October, 2022 UTC

Google OAuth using Meteor JS — Implementation Guide with Working Code [ 2022 ]

Summary

Google OAuth using Meteor JS — Implementation Guide with Working Code [2022]

We have been using Meteor’s Accounts-Password package for registering new user’s in our system using an email address, username, and password, but this onboarding experience is a bit time-consuming as the user needs to enter the details, then needs to verify the email, etc.

Therefore when we started working on a new project, we thought of implementing the Sign In Via Google mechanism, which will make things very easy for the user as it just requires 2 button clicks to get started with the system, and we can fetch the user details from google profile, so the users don't have to enter their details.

Key differences between traditional username-password authentication and google authentication

In this story, I will share how we implemented Google OAuth in Meteor.

What is Google OAuth

Firstly let's understand what Google Authentication System or Oauth is.

Google APIs use the OAuth 2.0 protocol for authentication and authorization. Google supports common OAuth 2.0 scenarios such as those for web server, client-side, installed, and limited-input device applications. — Google Identity Platform

Basically, this provides us with an authentication system based on google accounts. So if we implement Google’s OAuth API for authentication, it lets us get some of the basic details about the logged-in user and a token that we can use to authenticate the user in our platform.

By using this authentication mechanism, we don't have to handle the user identity and authorization at our app level; instead, that part will be governed by Google itself.

Issues while doing the implementation

After making the decision, I started looking for the official OAuth documentation of Meteor Authentication.

Users and Accounts | Meteor Guide

But it doesn't work as expected as it’s a bit old documentation, and so many things have changed since then. So I did some digging here and there and stumbled upon many issues raised by fellow engineers using Meteor, but nowhere could I find a correct way.

Here are some of the issues:

Can't get google login to work in an Android build
Google SignIn Fails with code 10 (on Android) · Issue #360 · googlesamples/google-services

Anyway, then we tried to fix the issues as those were coming with our implementation and could complete the end-to-end thing after a lot of head-scratching.

Also, do check out my guide to Meteor +Vue + Storybook published in the official Meteor Publication.

Meteor + Vue JS + Storybook = A Complete Guide To Scalable UI System 🔥

Step by Step Guide for Implementing Sign In Via Google in Meteor Js Framework

To get started, you certainly require a Meteor Project, and I am using one with the version:

meteor v2.7.3

First and foremost, we need to install the service-configuration package, which is a must for third-party logins:

meteor add service-configuration

Then we have to add the accounts-google package for Google OAuth:

meteor add accounts-google

These are the versions of the packages that I’m using right now:

[email protected]

[email protected]

[email protected]

We have our packages ready, now we have to build the UI. For that, below is a very simple template code for the login screen in Vue js:

https://medium.com/media/8ee054b01715978e40f605d3f9d7ff23/href

If you are using Blaze or any other UI framework other than Vue, then just use the below method call for logging in —

Meteor.loginWithGoogle(err => {

  if (!err) alert('Successfully Logged In');

  else alert(err.reason || 'Unknown Error');

});

Another very important thing here is we need to wait for a tiny bit of time till the OAuth ServiceConfiguration loads in the client hence the line:

configurationExists() {        
  return ServiceConfiguration.configurations.findOne({
    service: 'google'
  });      
}

In the above line, we have created a computed property in the Vue component which checks for whether ServiceConfiguration has loaded or not, and then in UI, the button is disabled, and the text is ‘Please Wait’:

<button          
  :disabled="loading || !configurationExists"         
  @click="login"        
>          
{{ 
  ( loading || !configurationExists ) ? 
  'Please wait' : 'Continue with Google' 
}}        
</button>

The same thing can be done in blaze wrapped inside a template handler like:

Template.personalDetailsScreen.helpers({

  configurationExists() {        
    return ServiceConfiguration.configurations.findOne({
      service: 'google'
    });      
  }

});

And in the template file,

{{#if configurationExists}}

  <button

    disabled="{{#if configurationExists}} disabled {{/if}}"

    {{#if configurationExists}}

      Please wait

    {{else}}

      Continue with Google

    {{/if}}

  </button>

{{/if}}

But just the UI code won’t do the magic, we have to specify the Google OAuth credentials for the project.

For that, we have to log in to Google Cloud Console, create a project, and then move to the Credentials page and create an OAuth 2.0 Client ID. E.g., For the below image, we have created it with the name project-eson-dev:

Also, click on the name of the newly created client id and add authorized javascript origins, and redirect URIs like below ( for local testing ):

After that, we will receive two things, Client ID and Secret Key. Both these are very special, and we need to keep those inside our app’s settings.json like below:

https://medium.com/media/da6ada4ba1e6c5047ef819260f06b2fa/href

Now we have to use these two things in our app to be able to log in using Google. To do that, we will refer to those for service configuration from main.js in the startup of the app server:

https://medium.com/media/239f807d8c258e5f130b32f65262e9c4/href

Now, as we try to run it locally and it works properly, and if we deploy it to a server, then we will have to add the domain in authorized javascript origins and authorized redirect URIs.

But one very important aspect of Meteor JS is it also provides us with apps for smartphones as well, and our implementation won’t work on smartphones right now. To make it work, we will have to make some tweaks.

Making Meteor Google OAuth Work in Android

Our web version of Google authentication is working properly, now, to make it work in the android app, we have to create another client specific for android in the google cloud console.

add the package name to the android client

We will be adding the package name that we have for our app in mobile-config.js, and we have to add an SHA-1 certificate fingerprint of the keystone file that we have used to generate the apk of the application.

SHA-1 certificate fingerprint

Now even though there’s a command given by google cloud by which you can create the certificate, don’t use that one because that won’t work.

We have to generate the certificate from the Android Studio like below:

Generating and adding SHA-1 certificate fingerprint for app build

We have to go to the Gradle option of your project in android studio, and then ( considering we have already opened our project in android studio and in the build section, our Keystore is selected ), we have to run the below command —

gradle signingreport

It will process for some time then generate the required SHA-1 certificate, and we can use it in our newly created android client id in the google cloud console.

That’s all; we have successfully implemented google OAuth signup/login in our app.

Some very useful Meteor JS Articles from our engineers —

Generate .aab(Android application bundle) from Meteor project
Deploy your Meteor Web and Android App using MUP
Deep Linking in Meteor JS— A Step by Step Guide with Examples

Happy Coding.

Google OAuth using Meteor JS — Implementation Guide with Working Code [ 2022 ] was originally published in Meteor Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

... more @ info.meteor.com

info.meteor.com