Onymos Makes Google Sign-In Faster and Easier

By now you’ve probably got the gist. Onymos makes building mobile apps faster and easier. But… does it really make it faster and easier? Yeah. It really does. You don’t have to take my word for it though.

I’ll just show you! 

Google Sign-In Without Onymos

Nowadays, what apps aren’t using social authentication? Probably bad ones! Your app (hopefully) will have a lot of users, and letting them “Continue with Facebook” or “Sign in with Apple” is a must—they expect it. Let’s walk through adding Google Sign-In to an Android app the old-fashioned way first. I’ll use Ionic expert Simon Grimm‘s guide. After that, we’ll take a look at how the Onymos Access Feature Application Component does it. Then, well, you can be the judge! We’ll start with a brand new Ionic app.

$ ionic start oldFashioned blank --type=angular --capacitor

$ cd oldFashioned

$ npm i @codeetrix-studio/capacitor-google-auth

$ ionic build

$ npx cap add android 

Head over to Firebase and create a new project (you can use an existing one too). Add a new Android app to it in settings under “Your apps.” This is where you register your app by adding the Android package name (which you can grab from capacitor.config.json under “appId”) and including your SHA-1 signing certificate.

In your terminal, run the following command:

$ keytool -exportcert -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore

Copy the SHA-1 key and paste it into Firebase (you can give your app a nickname too).

When you’re ready, click the “Register App” button and download the google-services.json file. In your android directory, throw that under src in app.

Next, navigate to your Google developer console and find your web client ID under Credentials. You can also find it in your google-services.json file. Now, we have to do a few “tricky things,” according to Simon.

Find the string.xml file in android > app > src > main > res > values. Add a new string called “server_client_id” whose value is the web client ID.

<string name="server_client_id"> Your ID goes here"</string>

You’re not done with that ID yet, though! Find your way over to the index.html file under root src and add a new meta tag to the Head block containing your web client ID.

<meta name="google-signin-client_id" content="Your ID goes here" />

Whew! Okay, we still need to configure a couple more things. Go to your Firebase project under Authentication > Sign-in method and enable Google. This activates the OAuth consent screen.

Want to test locally? Turn around and head back to Credentials in the Google developer console and add http://localhost:8100 as a new URI.

Don’t forget about Capacitor! Dig into the android directory under app > src > main > res > java > MainActivity.java. Here, you’ll import the Capacitor plugin. 

import com.codetrixstudio.capacitor.GoogleAuth.GoogleAuth;

After that, add it to the init block.

this.init(savedInstanceState, new ArraList<Class<? extends Plugin>>() {{
   add(GoogleAuth.class);
}})

Are we ready to use Google Sign-In? Nah! Back in the capacitor.config.json file in the plugins object, create a new GoogleAuth object.

"GoogleAuth": { 
   "scopes": [ 
        "profile", 
        "email" 
    ], 
    "serverClientID": Your ID goes here, 
    "forceCodeForRefreshToken": true
}

Okay, okay! Now we’re ready to actually use it. Find the home.page.ts file and import plugins.

import '@codetrix-studio/capacitor-google-auth'; 
import { Plugins } from '@capacitor/core';

Let’s write the function called when a user chooses Google Sign-In.

async googleSignup() { 
   const googleUser = await Plugins.GoogleAuth.signIn(null); 
   console.log('user:' , googleUser); 
   this.userInfo = googleUser 
}

Finally, we have to wire it all up in the home.page.html file.

<div (click)="googleSignup()"> 
   <p> Sign in with Google </p> 
</div>

Done! Thankfully. It’s tedious, rote… and now you have to do it for every other social auth provider you want to use too. This is the part of mobile app development I hate.

Does Onymos Have a Better Way?

Now, we’ll set up Google Sign-In with the Onymos Access Feature Application Component. This time you won’t need to build a brand new Ionic app—when you request the Onymos Starter Bundle you get one from us! Only want to use Access or don’t like our prefab architecture? No problem. Just delete what you don’t want and keep the rest. Let’s get it up and running.

$ npm install 

$ ionic cordova platform add android@latest 

$ ionic cordova plugin add onymos_components/onymos-component-initialize 

$ ionic cordova plugin add onymos_components/onymos-component-access --variable IOS_URL_SCHEME

We’ll still need that SHA-1 signing certificate. Remember how to find it? When you do, give it to us. We’ll configure the back-end.

$ keytool -exportcert -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore

Our Starter app has everything wired up for you, but you might have to rewrite some code if you change the architecture. We’ll cover the basics so you can use Access wherever you want, whenever you want. For this example, let’s use Access in the app.component.ts file. Start by declaring your variables.

declare var OnymosInitialize 
declare var OnymosAccess

Then “turn on” Onymos.

initializeApp(){
   this.platform.ready().then(() => { 
      const OnymosConnectObject = { 
                        customerId: Your customerId goes here, 
                        onymosAuthToken: Your onymosAuthToken 
                        goes here, 
                        envType: 'PRD' 
       } 
      OnymosInitialize.initialize( 
         OnymosConnectObject, 
    
         function onymosInitializeSuccess(status){ 
            console.log("Onymos initialized Successfully.", status) 
         }, 

         function onymosInitializeFaulure(error){ 
            console.log("Onymos failed to initialize.", error) }) 
   }) 
}

One more function…

socialLogin(authProvider){ 
   let accessObj = { authProvider: authProvider } 
  
   OnymosAccess.login( 
      accessObj, 
 
      function onymosAccessLoginSuccess(data){ 
         console.log('A user logged in:', Date.now()); 
      }, 

      function onymosAccessLoginFailure(error){ 
         console.log(error); }); 
}

…and all that’s left to do is to wire it all up in the app.component.html file.

<div (click)="socialLogin('google')"> 
   <p> Sign in with Google </p> 
</div> 
<div (click)="socialLogin('apple')"> 
   <p> Sign in with Apple </p> 
</div> 
<div (click)="socialLogin('facebook')"> 
   <p> Sign in with Facebook </p> 
</div>

We’re done! Oh, And you probably noticed we added HTML for Apple and Facebook login too. That’s because, besides Google, Access has those two social authenticators built-in! In less time and effort than it took to add social auth for Google Simon’s way, we added it for Apple, Facebook, and Google.

Not bad, huh?

Try it out! Still have questions? Let’s talk—send me an email at jamie.goodnight@onymos.com.