Social login works on Chrome but not on Android Emulatr

Help
1

Hi guys,

I´m trying to setting up and managing authentication in my Ionic apps using Auth0. I had followed the tutorial from official site (Auth0 Ionic & Capacitor (Angular) SDK Quickstarts: Login), but seems that something is going wrong.

When I log in with my email/password everything works fine, either on Chrome or via “ionic run android” command (Android Emulator). But when I try to do it through social networks (Facebook, Twitter, etc), it only works on Chrome, and not on Android Emulator.

The worst thing about is that remote inspect is not throwing any error, but It just redirects back to my “loading forever” login screen…

Can anyone help me please with that sh*?

I am just about to going crazy!!

More details about my application below…

Here is my .run block in app.js:

.run(function($ionicPlatform, $rootScope, $timeout, $ionicHistory, AuthService) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }

    // Register the authentication listener that is
    // set up in auth.service.js
    AuthService.registerAuthenticationListener();

    //This event gets triggered on URL change
    $rootScope.$on('$locationChangeStart', AuthService.checkAuthOnRefresh);
  });

  // Check is the user authenticated before Ionic platform is ready
  AuthService.checkAuthOnRefresh();
})
Now, my config block still in app.js:

.config(function($urlRouterProvider, $stateProvider, $httpProvider, $ionicConfigProvider, lockProvider, jwtOptionsProvider) {

  lockProvider.init({
    clientID: AUTH0_CLIENT_ID,
    domain: AUTH0_DOMAIN,
    options: {
      auth: {
        redirect: true,
        params: {
          scope: 'openid',
          device: 'Mobile device'
        }
      },
      language: 'pt-BR',
      languageDictionary: {
        title: ''
      },
      theme: {
        primaryColor: '#DF6F39',
        logo: 'http://bitmedias.com/sp64/wp-content/uploads/2017/03/sp64-logo-2.png'

      },
      socialButtonStyle: 'small'
    }
  });

  // Configuration for angular-jwt
  jwtOptionsProvider.config({
    tokenGetter: function() {
      return localStorage.getItem('id_token');
    },
    whiteListedDomains: 'localhost'],
    unauthenticatedRedirectPath: '/login'
  });

  $stateProvider
    .state('tab', {
    url: '/tab',
    abstract: true,
    views: {
      '': {
        templateUrl: 'templates/tabs.html',
        controller: 'TabCtrl'
      }
    }
  })
...
...
  .state('login', {
     url: '/login',
     templateUrl: 'templates/login.html',
     controller: 'LoginCtrl'
  })
  
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/login');
});

Now, Here is my AuthService:

.service('AuthService', function($rootScope, lock, authManager, jwtHelper, $location, $ionicPopup, $q, StorageService) {

  var userProfile = JSON.parse(localStorage.getItem('profile')) || {};

  var deferredProfile = $q.defer();
  
  if (userProfile) {
    deferredProfile.resolve(userProfile);
  }

  function login() {
    lock.show();
  }

  // Logging out just requires removing the user's
  // id_token and profile
  function logout() {
    localStorage.removeItem('id_token');
    localStorage.removeItem('profile');
    authManager.unauthenticate();
    userProfile = {};
  }

  // Set up the logic for when a user authenticates
  // This method is called from app.run.js
  function registerAuthenticationListener() {
    lock.on('authenticated', function(authResult) {
      console.log('authenticated');
      localStorage.setItem('id_token', authResult.idToken);
      authManager.authenticate();
      lock.hide();

      // Redirect to default page
      location.hash = '#/tab/map';

      lock.getProfile(authResult.idToken, function(error, profile) {
        if (error) {
          console.log(error);
        }
        localStorage.setItem('profile', JSON.stringify(profile));
        deferredProfile.resolve(profile);
      });
    });
  }

  function getProfileDeferred() {
    return deferredProfile.promise;
  }

  function checkAuthOnRefresh() {
    var token = localStorage.getItem('id_token');
    if (token) {
      if (!jwtHelper.isTokenExpired(token)) {
        if (!$rootScope.isAuthenticated) {
          authManager.authenticate();
        }
      }
    }
  }

  return {
    userProfile: userProfile,
    userSettings: userSettings,
    login: login,
    logout: logout,
    registerAuthenticationListener: registerAuthenticationListener,
    checkAuthOnRefresh: checkAuthOnRefresh,
    getProfileDeferred: getProfileDeferred
  }
});

Libraries references added to my application’s index.html:

<!-- lock 10 -->
<script src="lib/auth0-lock/build/lock.min.js"></script>
<!-- angular-lock 1.0.5 -->
<script src="lib/angular-lock/dist/angular-lock.min.js"></script>
<!-- angular jwt 0.1.9 -->
<script src="lib/angular-jwt/dist/angular-jwt.min.js"></script>

My system info:

Cordova CLI: 6.4.0

Ionic CLI Version: 2.1.12

Ionic App Lib Version: 2.1.7

ios-deploy version: Not instal

ios-sim version: Not installed

OS: Windows 10

Node Version: v6.9.1

Xcode version: Not installed

2

Hi Abhishek,
Just recreating the topic…
Please, tell me when we can go for a call.
I am available every morning until 9:30 am and at night from 20:00 on…
If it´s 10 am the only time you can go for a call, tell me so I can adapt myself.
Thanks!