Auth0 Home Blog Docs

Auth0 ionic 2+ SDK does not work in ionic 3 iOS

ionic
ios
auth0-sdk

#1

According to auth0 ionic 2+ documentation, I have integrated the auth0 in my application.

I have set it up as a native SDK ionic2+ project. I have set up my domain and callback url in Auth0 setting page.

I also added Allowed Origins (CORS) as

file://*

Next I included the following in my application:

npm install auth0-js @auth0/cordova --save
ionic cordova plugin add cordova-plugin-safariviewcontroller io.ionic.starter.auth0://tahmina.auth0.com/cordova/io.ionic.starter.auth0/callback

I also added

in config.xml. Next I created the auth service:

import { Injectable, NgZone } from '@angular/core';
import { Observable, Subscription } from 'rxjs';

import Auth0Cordova from '@auth0/cordova';
import Auth0 from 'auth0-js';

const auth0Config = {
  // needed for auth0
  clientID: 'MY CLIENT ID',

  // needed for auth0cordova
  clientId: 'MY CLIENT ID',
  domain: 'tahmina.auth0.com',
  callbackURL: location.href,
  packageIdentifier: 'io.ionic.starter.auth0'
};

@Injectable()
export class AuthService {
  auth0 = new Auth0.WebAuth(auth0Config);
  accessToken: string;
  idToken: string;
  user: any;

  constructor(public zone: NgZone) {
    this.user = this.getStorageVariable('profile');
    this.idToken = this.getStorageVariable('id_token');
  }

  private getStorageVariable(name) {
    return JSON.parse(window.localStorage.getItem(name));
  }

  private setStorageVariable(name, data) {
    window.localStorage.setItem(name, JSON.stringify(data));
  }

  private setIdToken(token) {
    this.idToken = token;
    this.setStorageVariable('id_token', token);
  }

  private setAccessToken(token) {
    this.accessToken = token;
    this.setStorageVariable('access_token', token);
  }

  public isAuthenticated() {
    const expiresAt = JSON.parse(localStorage.getItem('expires_at'));
    return Date.now() < expiresAt;
  }

  public login() {
    const client = new Auth0Cordova(auth0Config);

    const options = {
      scope: 'openid profile offline_access'
    };

    client.authorize(options, (err, authResult) => {
      if(err) {
        throw err;
      }

      this.setIdToken(authResult.idToken);
      this.setAccessToken(authResult.accessToken);

      const expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());
      this.setStorageVariable('expires_at', expiresAt);

      this.auth0.client.userInfo(this.accessToken, (err, profile) => {
        if(err) {
          throw err;
        }

        profile.user_metadata = profile.user_metadata || {};
        this.setStorageVariable('profile', profile);
        this.zone.run(() => {
          this.user = profile;
        });
      });
    });
  }

  public logout() {
    window.localStorage.removeItem('profile');
    window.localStorage.removeItem('access_token');
    window.localStorage.removeItem('id_token');
    window.localStorage.removeItem('expires_at');

    this.idToken = null;
    this.accessToken = null;
    this.user = null;
  }

}

It works fine when I run in android with following command:

ionic cordova run android --device

This is the preview for android.
![alt text][1]

but in iPhone it always display the login button.
![alt text][2]

That is, after successful authentication, in iPhone it does not receive the token.

Here is my sample code in GitHub:

https://github.com/tahminabs23/auth0-sample.git

Any idea what’s wrong I did here?


#2

I have discovered the issue. In iPhone it is redirecting to http://localhost:8080 which is not accessible from iPhone. I have discovered it from Auth0 Log. Now I have added Http://localhost:8080 in CORS allowed URL. And after that, it is working in iPhone simulator. But still not working in iPhone.

alt text


#3

I have discovered the issue. In iPhone it is redirecting to http://localhost:8080 which is not accessible from iPhone. I have discovered it from Auth0 Log. Now I have added Http://localhost:8080 in CORS allowed URL. And after that, it is working in iPhone simulator. But still not working in iPhone.

alt text


#4

I added same localhost to CORS, but it still not working in simulator(


#5