I built an Android app using ionic/capacitor and the MS Azure Library to get user’s approval.

The app part is pretty straight forward, I have the part that configures the auth credentials:

this.msalInstance = new PublicClientApplication({
    auth: {
      clientId: 'abc-123',
      authority: 'https://login.microsoftonline.com/abc-123',
      redirectUri: 'msal123-abc://auth' 
    },
    cache: {
      cacheLocation: 'localStorage'
    }
  });


} // constructor

And a login method that calls the auth endpoint:

async login(): Promise<void> {
    try {
      await this.init();
  
      await this.msalInstance.loginRedirect({
        scopes: ['Files.Read'],
      });
    } catch (error) {
      console.error('Error during login:', error);
    }
  }

When I click the button, the default browser opens, it’s Chrome in this case. I login to my account and click the continue button that should take me back to the app, providing the auth token. But this is the error the console returns:

Navigation is unreachable: msal123-abc://auth/#code=0.ABC123

I tried to manually register a route back to my app in the route module:

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'msal123-abc', // Dein MSAL-Schema
    component: MsalCallbackComponent
  }
];

But still, the system does not recognize the app/callback url.

What am I’m doing wrong?