onymos-logo

“How Do I Add Social Login to an Ionic App?”

Social auth providers

Coding the button for a social login provider like Apple, Facebook, or Google is relatively straightforward. Maybe not counting the part where you have to figure out if that Youtube tutorial from 9 months ago is still relevant. That’s not everything there is to social login though.

That’s where Onymos Access comes in. Access isn’t just a plugin or a wrapper over an API. It manages the auth data in your app and user data on the server-side.

More solutions “out of the box”

Have you read “Top 10 Considerations for Social Login”? We think implementing social login is tedious and time-consuming. So we decided to make it… not. No more managing developer dashboards or bug-fixing breaking changes when the providers make updates. Access takes care of all of that, then goes even further.

Offline sessions for ease of use

Offline Sessions

What happens when your users lose Internet connectivity? Access uses offline mode to persist those sessions by default.

Refreshing auth tokens is automatic

Refresh Tokens

Access refreshes user auth tokens stored in your app’s local sandbox 30 minutes before they expire, six months from the time they’re generated.

The Access API has multiple functions

Access API

We didn’t just stop at login(). We’ve got functions like getAuth() and getOtherUsersInfo() too. Nine (and counting), actually.

Curated user data for social login

Curated Data

Whether it’s connected to Onymos Hosting or your own database, Access manages your user data with a simple JSON tree optimized for “write-several-times-for-easy-reads.”

Oh, and we’re really copypastable…

Seriously. Once you install Access you can use this code to instantly have social login for Apple, Facebook, and Google—plus everything else you just read about.

 import { Component } from '@angular/core';
 import { Platform } from '@ionic/angular';
    
 declare var OnymosInitialize: any;
 declare var OnymosAccess: any;
    
 @Component({
   selector: 'app-root',
     templateUrl: 'app.component.html',
     styleUrls: ['app.component.scss'],
  })
  
  export class AppComponent {
    constructor( private platform: Platform ){ 
       this.initializeApp();
    }
    
     initializeApp(){
        this.platform.ready().then(() => {
    
          const OnymosConnectObject={
            appId : 'Your appId 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);
           })
         })
     }


     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);
           });

     }


   }

Think differently about app development

Download our free white paper today to learn how Onymos Features can maximize the value of your developer resources — and shave days or weeks off your schedule.

Get your free white paper