Implementing Google OAuth with AWS in Ionic

July 26, 2017 0 Comments

Implementing Google OAuth with AWS in Ionic

 

 


Handling password/email authentication can be bothersome for both the users and the developers.

Open Authorization (OAuth) comes to the rescue by allowing us to directly login using popular social media accounts, delegating the authentication process to them and receiving more information from their side.

However, this can be a tough task because every providers have their own rules. In this tutorial we mix together AWS, Google and Ionic.

At first it doesn’t look really hard because everything is explained there. However, the documentation is quite generic. As you can guess, the following content is an Ionic laser-focused walkthrough.

This project uses the Ionic/AWS stack, it’s crucial to have a look at the first tutorial to understand how to set up the project and how everything is working.

The authentication process is separated in two phases:

  1. The authentication is done on Google’s side
  2. If there is no error, an ID token is returned and we can use this token to trigger AWS Cognito authentication

Setting up Google’s side

A new project is required in the Google Developer Console there:

ionic AWS Google oauth create Google project

Creating credentials for the google project there:

ionic AWS Google oauth get credentialsWe now have the configuration file named GoogleService-Info.plist, with the important IDs:
 ionic AWS Google oauth client id and reverse iIThe REVERSED_CLIENT_ID will first be used when installing the Ionic Native Google Plus plugin:

Before diving into the code, we have to add Google’s client ID to AWS.
Head back to the AWS Mobile Hub.

Setting up AWS’s side

The Cognito Identity Pools is reachable in the Resources section:
ionic AWS Google oauth go to identity poolsThen click on Edit identity pool:
ionic AWS Google oauth edit identity poolScrolling down and collapsing the Authentication providers section:

ionic AWS Google oauth identity pool add google client id

Google’s client ID must be placed here so Cognito can accept tokens from this provider.

Remember, it’s the one from the GoogleService-Info.plist file:

ionic AWS Google oauth client id and reverse id

Let’s code

This Ionic Native Google Plus plugin must be declared as a Provider in the app.module.ts file:

The login.html file can be cleaned up as follow:

One button that will trigger a custom loginWithGoogle method.
Before diving deeper in the Login Page, we will follow Ionic’s team architecture and write our code in the Cognito Provider located in the aws.cognito.ts file, starting by adding the makeGoogleCredentials method:

AWSCognito will recreate the credentials taking into account the idToken parameter.
The Logins property here specify that the user comes from a Google domain.

Once the credentials are created, the get method will check if everything is correct.
If there is no error, we can use the makeUser method that the Ionic’s team has created for us and have a verified Cognito User.

Congratulations, you have done the hardest part!

All we need to do is acquiring the token from Google and pass it there.

Moving on to the User Provider located in the user.ts file:

Just like the login method, the Cognito Provider is used to login.

Our Providers are set, we can go the login.ts file now:

First action: importing the GooglePlus Native plugin and stocking it in a googlePlus property.

Finally we can create the loginWithGoogle method that will be triggered when tapping on the button in the homepage:

Just five lines of code!
Using the googlePlus property’s login method, if everything is good, the response contains idToken and displayName that we pass to our providers.

And we are done.

Once the button is tapped, the Cognito User is created:

And a new Google Sign-In measure should now appear in the identity homepage:

ionic AWS Google oauth identity result

Conclusion


If AWS Cognito had a loginWithGoogle method that would be way easier.

Setting up Google OAuth with AWS is quite a mental gymnastic. First creating the Google Credentials then linking them with AWS Cognito in the web interface and finally using the Ionic Native Google Plus plugin in the code to pass Google’s ID token to AWS Cognito.

Half of the work was done by the Ionic team so remember to go there to see how the installation is done.


Tag cloud