I’m attempting to add an auth0 log-in to an ionic/angular cordova based application that is using the auth0-spa-js library with the universal login flow. I’ve read that this process (Authorization Code + PKCE) is clunky on mobile. It doesn’t help that I’m very new to mobile development.
For context, I was able to create a successful browser based SPA implementation. For local testing in the browser, I use a http://localhost:8100 redirect_uri when instantiating createAuth0Client . The lock widget loads, I can authenticate successfully and then be redirected to my homepage http://localhost:8100/home .
When I attempt to complete a similar workflow in a mobile implementation, the workflow breaks down. I am using redirect_uri of: <bundle_id>://<app_name>.us.auth0.com/cordova/<bundle_id>/callback (bundle ID from config.xml). For iOS, I open the app and my landing page shows up with a button to log-in. Pressing that button opens a browser to log-in. I enter my credentials and then get redirected back to the app, but I am stuck on the landing page. Trying to log-in again results in safari opening again with a pop-up stating “Open in {App Name}?” Checking the auth0 logs, it shows a successful log-in event from mobile. I believe I am generating a valid session, I just don’t know how to get my app to navigate through to actual pages. These are my main auth functions:
// Create an observable of Auth0 instance of client
auth0Client$ = (from(
createAuth0Client({
domain: AUTH.AUTH0_DOMAIN,
client_id: AUTH.AUTH0_CLIENT_ID,
redirect_uri: AUTH.AUTH0_REDIRECT_URI,
audience: AUTH.AUTH0_AUDIENCE_ID,
responseType: 'token id_token',
scope: 'openid profile email',
cacheLocation: 'localstorage',
useRefreshTokens: true
})
) as Observable<Auth0Client>).pipe(
shareReplay(1), // Every subscription receives the same shared value
catchError(err => throwError(err))
);
login(redirectPath: string = '/home') {
// A desired redirect path can be passed to login method
// Ensure Auth0 client instance exists
this.auth0Client$.subscribe((client: Auth0Client) => {
// Call method to log in
client.loginWithRedirect({
redirect_uri: AUTH.AUTH0_REDIRECT_URI,
appState: { target: redirectPath }
});
});
}
Upon further searching, I found this post which sounds similar to my issues: Timeouts when trying to create auth client after initial authentication? · Issue #583 · auth0/auth0-spa-js · GitHub
Questions:
- What should I be using as the proper redirect_uri? Do I need to do I need to add that redirect_uri to the origin in the Auth0 settings?
- How do I get the app to navigate to the home page? Do I need to provide some sort of deep link as the
redirectPath? - BONUS : Is there an easy way to configure a native flow vs browser flow? I know the browser flow is considered safer, I am just curious.
Thanks in advance.
I originally posted this on stackoverflow: angular - Ionic5/Angular9 Mobile iOS auth0-spa-js Login Flow - Stack Overflow