ReactJS Capacitor (3) Ionic Auth0

Help
, , , ,
1

Hi There, first time posting here.

I created a SPA using ReactJS using @auth0/auth0-react. Now i want to create a IOS and Android app using Capacitor 3. But thats not working. I faced the problem that you have to go outside the app to login in the browser (which is not nice for UX). But when people return in my app after clicking “Open in MY_APP_NAME”, the Auth0 hooks have not registered the login…?

I tried to implemented the Cordova plugin (@auth0/cordova) and got it working (This post helped me for cordova). But this seems not to be connected with the auth0-react, so i get a JWT token from cordova, but cannot use the hooks of auth0-react. Any help how I can get the callback working with the @auth0-react package?

I am stuck for a few days now and man this is really annoying, others seem to have the same problem but did not find a solution/ did not post them

This is my Listener component.

import { useEffect } from "react";
import { useHistory } from "react-router-dom";
import { App as CapApp } from "@capacitor/app";
import { useAuth0 } from "@auth0/auth0-react";

export default function AppUrlListener() {
  const history = useHistory();

  const { isLoading, getIdTokenClaims } = useAuth0();

  useEffect(() => {
    CapApp.addListener("appUrlOpen", (data: any) => {
      console.log("Run the app cordova url listener", data);

      // data = {"url":"nl.partizon.eetchat:\/\/auth?code=AUTH_CODE","iosSourceApplication":"","iosOpenInPlace":""}

      getIdTokenClaims().then(token => {console.log("Token is undefined: ", token)})

      console.log("this is the returned url: ", data.url);

      // Tried something with history.push("/auth")

    });

    // CapApp.addListener("appStateChange", ({ isActive }) => {
    //   console.log("App state changed. Is active?", isActive);
    // });

    // CapApp.addListener("appRestoredResult", (data) => {
    //   console.log("Restored state:", data);
    // });
  }, []);

  const checkAppLaunchUrl = async () => {
    const { url } = (await CapApp.getLaunchUrl()) || { url: "no url" };

    alert("App opened with URL: " + url);
  };

  console.log("Im here before returning the div. ");
  return <div />;
}
2

@ivo.spam I am also facing this issue is there a solution?