tomkj4
July 11, 2019, 11:27pm
1
Ionic 4 has been out for quite sometime and fresh ionic 4 installs with auth0/cordova are completely broken.
opened 10:58AM - 25 May 19 UTC
closed 11:49AM - 13 Dec 19 UTC
Hello,
I'm using ionic 4 along with auth0-cordova 0.3.0 and cordova 9.0.0, an… d i have a huge problem regarding reaching the universal login page after the 1st logout on ios. I haven't tested it on android so i can't say whether the same problem exists there.
What happens is as follows. The first time a user logs in, things go smoothly and after they're done authenticating using the universal login page, they get redirected to the app exactly as expected without any issues.
However, after they log out from the app, any attempts to login do not work. What happens is that, at first, they seem to be taken to the auth0 login page, only to be immediately redirected to a blank page with the title "Website Name." No redirection happens after that, and on clicking done, the user is back in the app without being authenticated. Hence the user is left without the ability to reach the universal login page and authenticate. Closing and opening the app does not help.
I have noticed a weird behavior regarding the onRedirectUri method. If you execute it from within a short timeout function, say 150ms, the user will not reach the universal login page, however, they will be authenticated once they return to the app. This means they can't log out and then log in using a different provider. That is not a big deal, the big deal however, is the fact that setting a timeout on the onRedirectUri method prevents 1st-time users from being redirected to the app after logging in. So, for example, if a first user is trying to log in via facebook, they will get stuck inside facebook's "you will be redirected shortly back to your app" page thinking that they still have to wait even though nothing will eventually happen and they are already authenticated and all they have to do is to click done in order to find themselves back in the app; fully authenticated.
I have tried using the ionic-plugin-deeplinks instead of the custom-url-scheme advised by auth0 but to no avail. The problem persists, and it seems that the onRedirectUri method is the culprit.
Here's the code i use to login and out inside auth.service.ts:
`const AUTH_CONFIG = {
clientID: 'my-client-id',
clientId: 'my-client-id',
domain: 'my-domain.auth0.com',
packageIdentifier: 'mybundleid',
};
Auth0 = new auth0.WebAuth(AUTH_CONFIG);
Client = new Auth0Cordova(AUTH_CONFIG);
constructor(
public zone: NgZone,
private storage: Storage,
private router: Router,
private platform: Platform
) {
this.storage.get('profile').then(user => this.userProfile = user);
this.storage.get('access_token').then(token => this.accessToken = token);
this.storage.get('expires_at').then(exp => {
this.loggedIn.next(Date.now() < JSON.parse(exp));
});
}
login() {
const options = {
scope: 'openid profile email offline_access'
};
// Authorize login request with Auth0: open login page and get auth results
this.Client.authorize(options, (err, authResult) => {
if (err) {
throw err;
}
// Set Access Token
this.storage.set('access_token', authResult.accessToken);
// Set Access Token expiration
const expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());
this.storage.set('expires_at', expiresAt);
// Set logged in
this.loggedIn.next(true);
// Fetch user's profile info
this.Auth0.client.userInfo(this.accessToken, (err, profile) => {
if (err) {
throw err;
}
this.storage.set('profile', profile).then(val =>
this.zone.run(() => {
this.userProfile = profile;
})
);
});
});
}
logout() {
this.storage.remove('profile');
this.storage.remove('access_token');
this.storage.remove('expires_at');
this.storage.remove('idToken');
this.accessToken = null;
this.userProfile = null;
this.idToken = null;
this.loggedIn.next(false);
}
`
and this is the auth0cordova code inside the bootstrapped app.component.ts. You might notice the setTimeout which i'm using at the moment cuz it seems to mitigate the problem as mentioned above:
`this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
this.deeplinks.route({}).subscribe((match) => {
console.log(1);
Auth0Cordova.onRedirectUri(match.$link.url);
}, (nomatch) => {
console.log(2);
setTimeout(() => {
Auth0Cordova.onRedirectUri(nomatch.$link.url);
}, 150);
})
});`
Has anyone figured out how to mitigate this issue?
Hey there @tomkj4 !
Unfortunately not an Ionic guy, not sure if we have any plans for Ionic 4 and our only content so far on this is:
I added Ionic tag to your topic so it can be more easily found by other community members!