"Not Found" error in auth0 react on Android

Help
,
1

Hello,

we have followed the Ionic & Capacitor Auth0 (React) example and ran into the following Issue:

On IOS it works fine but on Android there is a “Not Found” Error on the top left corner of the screen.

I have found this Topic here: 'Not found' error on callback URL in Android app

But we do not have the “withScheme” option in auth0 react sdk

We have a callback url that is passed as the redirect_uri to the login like this:

  static urlScheme = Capacitor.getPlatform() == "android" ? "http" : "onevcard";

  // Use domain in string interpolation below so that it doesn't
  // get replaced by the quickstart auto-packager
  static authDomain = this.DOMAIN;
  static iosOrAndroid =
    Capacitor.getPlatform() == "ios" || Capacitor.getPlatform() == "android";

  public static CALLBACK_URI = this.iosOrAndroid
    ? `${this.urlScheme}://${this.authDomain}/capacitor/${this.APP_ID}/callback`
    : `${process.env.WEBSITE_URL}`;

When finishing the login we get redirected onto this but it seems to not be working.

We have wrapped our index in the Auth0Provider in which we pass the redirect_uri in the authorizationParams

We have registered the callback url in the allowed callbacks in auth0 but this did not change anything

3

Hey there @luca.berhard welcome to the community!

Just to be clear, do you receive this error when following the sample instructions directly and simply using the pre-configured appId (com.auth0.samples) in auth.config.ts?

I’m currently unable to reproduce the issue you’re seeing in the sample referenced above. I’ve run into this issue (which is resolved with the android scheme) using the Auth0 Android SDK directly, but I can’t say I’ve seen this in an Ionic/Capactior/React app:

4

Hello,

we have been able to resolve the Issue like this:

  static APP_ID = "com.onevcard.app";
  // set url scheme to http if platform is android, otherwise use "onevcard"
  static urlScheme = Capacitor.getPlatform() == "android" ? "http" : "onevcard";

  // Use domain in string interpolation below so that it doesn't
  // get replaced by the quickstart auto-packager
  static authDomain = this.DOMAIN;

  static isAndroid = Capacitor.getPlatform() == "android";
  static isIOS = Capacitor.getPlatform() == "ios";

  public static CALLBACK_URI = this.isAndroid ? `${this.APP_ID}://callback` : this.isIOS ? `${this.urlScheme}://${this.authDomain}/capacitor/${this.APP_ID}/callback` : `${process.env.WEBSITE_URL}`;

also registering the custom url scheme in the string.xml:

<?xml version='1.0' encoding='utf-8'?>
<resources>
    <string name="custom_url_scheme">com.onevcard.app</string>
</resources>

and in the AndroidManifest.xml:

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="@string/custom_url_scheme" />
            </intent-filter>

with this the Browser Plugin could be used and no “Not Found” error was there anymore.

1 Like
5

That’s great! Thanks for sharing with the community :slight_smile:

6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.