Hi folks!
I need an help to understand what I’m doing wrong.
I following this guide https://auth0.com/docs/quickstart/native/ionic-react/01-login and working well on the browser, after login the user redirect to target page.
When I performing the app on an android or ios emulator the behaviour is different.
After login return to login page instead target page.
App.tsx
const App: React.FC = () => {
const { handleRedirectCallback } = useAuth0();
useEffect(() => {
CapApp.addListener("appUrlOpen", async ({ url }) => {
if (url.startsWith(callbackUri)) {
if (
url.includes("state") &&
(url.includes("code") || url.includes("error"))
) {
await handleRedirectCallback(url);
}
await Browser.close();
}
});
}, [handleRedirectCallback]);
return (
<IonApp>
<IonReactRouter>
<IonRouterOutlet>
<Route exact path="/" component={Login} />
<Route path="/tab" component={AppTabs} />
</IonRouterOutlet>
</IonReactRouter>
</IonApp>
);
};
export default App;
auth.config.ts
const appId = "gymnasium.ionic";
const auth0Domain = domain;
const iosOrAndroid = isPlatform("hybrid");
export const callbackUri = iosOrAndroid
? `${appId}://${auth0Domain}/capacitor/${appId}/tab`
: "http://localhost:8100/tab";
AndroidManifest.xml (partial code)
<!--Add configurations @capacitor/app-->
<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>
strings.xml
<?xml version='1.0' encoding='utf-8'?>
<resources>
<string name="app_name">gymnasium-ionic</string>
<string name="title_activity_main">gymnasium-ionic</string>
<string name="package_name">gymnasium.ionic</string>
<string name="custom_url_scheme">gymnasium.ionic</string>
</resources>
Info.plist (partial code)
<!--Add configurations @capacitor/app-->
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLName</key>
<string>gymnasium.ionic</string>
<key>CFBundleURLSchemes</key>
<array>
<string>gymnasium.ionic</string>
</array>
</dict>
</array>
And last but not least the auth0 Allowed Origins (CORS) and Allowed Callback URLs
Can someone help me? Why on the mobile emulator not working as desired?