onymos-logo
< Onymos Blog

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

Social auth providers

Adding plugins to your app to support social login for Apple, Facebook, or Google is tedious, but at least it’s relatively straightforward. Sometimes. Depending. And 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 why we made Onymos Access. 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”

We think implementing social login is annoying 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 (so far).

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

     }


   }
Ask us if we've already built the solution you need

Building new apps from scratch is a waste of your developers’ time and skills. Get core features your app needs now — because we already built them for you.

Talk to an expert

We know app dev

What does the latest iOS release tell us about Apple’s strategy? Does tech have an innovation problem? Is your team ready for a passwordless future? Subscribe to our blog for:

  • Trends in app development
  • Research reports
  • Demo videos and more

Subscribe to the Onymos blog

Overlay