Ionic5/Angular9 Mobile iOS auth0-spa-js Login Flow

Viewed 141

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

Questions:

  1. 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?
  2. 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?
  3. 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.

0 Answers
Related