auth0-angular may be not working on latest ionic framework with angular 16

[ashraf7hossain]

Checklist

• The issue can be reproduced in the auth0-angular sample app (or N/A).
• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

First I tried https://github.com/auth0-samples/auth0-ionic-samples/tree/main/angular and made a change inside AndroidManifest.xml for redirecting from auth0 browser window to the app. It worked fine, then I created a new project with angular 16 and capacitor 5 (other capacitor libs are in 5 major version) copied app folder from the sample project then I ran the app in my device and tried to login , after authentication user info is not fetched and authenticated is not true.
Then I tried the same technique in my existing ionic app with angular 15 and capacitor 4 then the app ran as expected.
Note: I tried with capacitor 4 with angular 16 but that didn't work as well.

Reproduction

1. create new ionic project with latest config
2. copy app folder from the url https://github.com/auth0-samples/auth0-ionic-samples/tree/main/angular
3. replace your ionic project app folder with that.
4. make some necessary changes in capacitor.config.ts, auth.config.ts (inside app folder)
5. change AndroidManifest.xml file for redirecting to the app issue.

Additional context

No response

auth0-angular version

2.2.0

Angular version

16

Which browsers have you tested in?

Other

[frederikprijck]

Thanks for reaching out. I will have a look to try and see what's going on.

[frederikprijck]

There are a couple of scenario's at play here. First step, I upgraded the sample application to use Angular 16, see this PR.

It seems to work fine when using Angular 16 in our sample repository, which is using Capacitor 4.

Next up, I will look into upgrading capacitor to 5 and open a PR.

[frederikprijck]

I updated capacitor to v5 using npx cap migrate and it seems to work fine as well. I opened a PR to update the sample: auth0-samples/auth0-ionic-samples#624

Could you have a look and see what would differ from your project?

Could you verify what you have for server.androidScheme in your capacitor config? If this is set to https, be sure to update Auth0 to use https instead of http as well for the URLs you configure there. Your logs on Auth0 should also show logs related to your URL in that case.

[ashraf7hossain]

@frederikprijck thanks a lot friend for approaching, the latest app you provided with angular 16 and capacitor 5 its working fine. But one thing I noticed your capacitor.config.ts file and capacitor.conifig.ts of mine are different.

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'yourconfig',
  appName: 'Auth0 Samples',
  webDir: 'www',
  plugins: {},
};

export default config;

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'my config',
  appName: 'sbfl-try',
  webDir: 'www',
  server: {
    androidScheme: 'https'
  }
};

export default config;

I don't understand the thing about https you mentioned , where I should change the auth0 config.
Note: How would I understand that the error lies in my capacitor config.

[frederikprijck]

In Auth0's dashboard, the logs should tell you more. Can you see if you find any logs ?

Additionally, if you look at https://auth0.com/docs/quickstart/native/ionic-angular/interactive, everywhere where it asks you to configure Auth0 with http://localhost, you should use https://localhost, which should come down to this section:

[frederikprijck]

Closing as I think this has been answered. Ping me if you need further assistance