Auth0 with Capacitor and React not redirecting to app after authenticating

Question

I've been following this guide for setting up an Auth0 integration for my Capacitor React app running on an android device (https://auth0.com/docs/quickstart/native/ionic-react/interactive).

I'm stuck at the part where I have to "Handle the origin callback." The code for the appUrlOpen listener I set up per the guide's instructions don't seem to be running. The alerts I've put inside the callbacks for the listners don't seem to appear. I've used the uri example they said I should use "YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback" for the redirect_uri when setting up the Auth0 wrapper in an earlier step. I also made sure that the redirect_url is part of the allowed callback urls. I also set up deep linking with the guide they provided here (https://developer.android.com/training/app-links/deep-linking). However, when it comes to the android host for the data on my AndroidManifest.xml, I'm not sure what to give. So for now, it is the domain in my auth0 application on my dashboard.

When I run my app on the emulator, I'm able to successfully authenticate (I'm able to see a successful login in the auth0 logs) but it then just stays on the universal login screen, not doing anything, not even hitting the appUrlOpen listener. I'm also wondering what should I use as a valid callback URI.

How do I properly get back to the app after all these steps? Is there some step that I missed? What is the reason of my deep link not working?

I've tried switching the app to other auth0 applications used by my organization and I've tried changing the callback uri and other variables accordingly. I've also checked capacitor's own guide for deeplinks here (https://capacitorjs.com/docs/guides/deep-links) which prompted me to make a SHA-256 key store and set up my site for deep links. I don't quite know how this applies to my application.

Answer 1

The data tag within the intent filter should contain "custom_url_scheme"

<data android:scheme="@string/custom_url_scheme" />

This is what the AndroidManifest.xml should look like:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.auth0.samples">

    <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme">

        <activity
            android:exported="true"
 android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode" android:name="com.auth0.samples.MainActivity" android:label="@string/title_activity_main" android:theme="@style/AppTheme.NoActionBarLaunch" android:launchMode="singleTask">

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>

            <intent-filter>
                <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>

        </activity>

        <provider android:name="androidx.core.content.FileProvider" android:authorities="${applicationId}.fileprovider" android:exported="false" android:grantUriPermissions="true">
            <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths"></meta-data>
        </provider>
    </application>

    <!-- Permissions -->

    <uses-permission android:name="android.permission.INTERNET" />
</manifest>

Here are some things that you should recheck:

1. Add callback and Logout URL

2. Add the following Allowed Origins (CORS)s:

   capacitor://localhost, http://localhost

3. Check the sample code at https://github.com/auth0-samples/auth0-ionic-samples/tree/main/react. Check for inconsistencies in your application.

4. If nothing works, you can always download a working sample application to analyze the files or start building on top of it: https://auth0.com/docs/quickstart/native/ionic-react/interactive