Auth0 with Capacitor and Ionic 5

Hi All,

My first post here and a particularly tricky one from what I can figure out.

Basically I have a new Ionic 5 app, using the auth0/auth0-angular library in order to perform authorisation,
Now this works absolutely fine on web.
The issue comes on mobile build of the ionic app.
We are using Capacitor to do this.
The app loads, opens safari displaying the login page. It is important to point out here that this is the safari app itself, not an in-app browser.
I successfully login and I am presented with the popup (Open in AppName )
I click Open and am directed back to the application.
At this point however my app just freezes on a black screen.
The callback and redirect don’t seem to happen at all.
My iOS logs just say APP ACTIVE.

Been at a loss for about a week now.
Any help or bright ideas would be wonderful.

Thanks

I am facing the same issue, did you manage to solve it?

I did yes.
You have to manually implement the redirection.

I’m using Auth0s Angular SDK.

Then in the auth service add a function:

auth0HandleCallback(url?: string): void {
    console.log(url);
    if ((url.includes('code=') || url.includes('error=')) && url.includes('state=')) {

      const callbackObs = from(this.auth0Client.handleRedirectCallback(url)).pipe(
        map(result => {
          console.log(result);
          let target = '/';
          if (result) {
            if (result.appState) {
              if (result.appState.target) {
                target = result.appState.target;
              }
            }
          }
          this.navigator.navigateByUrl(target);
        }),
        concatMap(() => this.auth0Client.isAuthenticated()),
        tap((authenticated) => {
          this.refreshState$.next(authenticated);
          this.isLoadingSubject$.next(false);
        }),
        takeUntil(this.ngUnsubscribe$)
      ).subscribe();
    }
  }

Then finally in your app component add:

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private zone: NgZone,
    private auth: AuthService
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      App.addListener('appUrlOpen', (data: any) => {
        this.zone.run(() => {
          console.log(data);
          // Example url: capaictor://auth/login/
          if (data.url.includes('/login')) {
            this.auth.auth0HandleCallback(data.url);
          } else if (data.url.includes('/logout')) {
            this.auth.auth0HandleCallback(data.url);
          }
        });
      });
    });
  }
}

That worked for me.
Logout is a bit of an issue, but this got everything else working. :slight_smile:

Thank you, i will try and let you know :slight_smile:

If you get stuck, I’ll happily join you on a discord or something to try and talk through it :slight_smile:

Did you manage to get it working?

@CHAZTATS - Can you explain how you got the Auth0 client out of the Auth0 angular SDK? I don’t see that exposed in the SDK at all, yet I see you have it in your code snippet.

this.auth0Client.handleRedirectCallback(url)

I see the Auth0 Client is exposed more in the Auth0 SPA SDK, but it seems to be encapsulated in the Angular SDK from what I can tell.

1 Like

I am facing the same issue as @brassier since two days and cannot manage to find a good solution to that problem.
Could you also share your references? So I could at least see where you got it from. It seems you are using two different npm packages (GitHub - auth0/auth0-angular: Auth0 SDK for Angular Single Page Applications and Auth0 Ionic 4 SDK Quickstarts: Login )

Every detail would help.

@brassier

Hey guys, apologies, I no longer work at the place where I implemented this so don’t have access to the whole codebase anymore, but I’ll try help as mush as I can.

So when I did it I actually pulled the angular sdk as a project and imported it locally into my app.
That way I could make changes directly to their auth.service.ts.

So when I added the above code snippet, it was added directly into that file.

Hope that clears a couple things up.

Apologies for not being clearer before.

I’ve made a discord here: https://discord.gg/pM2nvFpK

So we can IM if you get stuck I know this damn hard to solve.
:slight_smile:

This is really helpful @CHAZTATS - thank you!

I was able to get a flavor of this to work on Android. I’ll have to wait a bit to do the iOS test (no Mac with me).

@CHAZTATS - do you recall if your solution was able to open the Auth0 window in-app, or if it was an external browser to the app? I’ve been able to open the login window in-app, but I get a variety of Auth0 issues when attempting that. It seems like it should be possible though.

@CHAZTATS - I found a solution to keep the login in the same window. The Capacitor Browser import approach has a very strange syntx that I’m not used to. Once I got that right, using the Capacitor browser plugin seemed to work well. Some snippets below for reference.

import { Plugins } from '@capacitor/core';

const {Browser} = Plugins;
...
  async onLogin(){
    var authUrl = await this.auth.buildAuthorizationUrl();
    Browser.open({url: authUrl});
  }

@brassier - Did you create the buildAuthorizationUrl() method? I don’t find it in the auth.service from the auth0-angular package.