Possibility to access signinCallback function?

[ns-ovc]

I have a website that is also converted into an app via Capacitor. The login on the website works without any problems. But not for the native app.
There is a hook for Capacitor when the redirect URL is called from the auth provider.

    CapApp.addListener("appUrlOpen", async ({ url }) => {
        // TODO: handle URL
    });

A URL is returned that contains the code & session_state. I would need to call a function there to handle the URL (not window.location.href). Is there a way to do this?

In auth0-react there is a function called "handleRedirectCallback(url)" that does just that.

[pamapa]

Have you tried onSigninCallback? See https://github.com/authts/react-oidc-context/blob/main/src/AuthProvider.tsx#L42

[ns-ovc]

Have you tried onSigninCallback? See https://github.com/authts/react-oidc-context/blob/main/src/AuthProvider.tsx#L42

Thank you for the fast response! How should I use this event? The user is not yet authorized at this time.

The process is:

• User opens app
• App opens in-app browser with authority login URL
• Authority redirects back to app via schema URL (com.example.app://capacitor.../callback?code=xyz...)
• Now I have the schema URL in the hook I sent above. Here I need a way to process the response, since the AuthProvider is not triggered via the in-app browser

[ns-ovc]

If I think correctly, I need access to this method via useAuth hook:

react-oidc-context/src/AuthProvider.tsx

Line 237 in 39bad74

user = await userManager.signinCallback();

https://github.com/authts/oidc-client-ts/blob/8a386f559cbb4d605660f8a3040a4ec2b1cf11c4/src/UserManager.ts#L368

Here I can specify my custom URL to log in the user.

[pamapa]

If I think correctly, I need access to this method via useAuth hook:

You can register your own function of onSigninCallback via setttings into the auth context <AuthProvider onSigninCallback={(user) => console.log(user)} ...>....

[Canuckaholic]

I'm having the same issue, but I'm not quite following the recommendation by @pamapa. Could more explicit steps be provided? I'm already registering my own onSigninCallback on AuthProvider, but I'm not sure how that helps this particular problem.

[ns-ovc]

I solved it by redirecting the user to a "callback" page, where the AuthProvider is initialized. This allows the standard implementation using "window.location.href" to work.

Example implementation:

Capacitor event:

CapApp.addListener("appUrlOpen", ({ url }) => {
  // TODO: redirect user to callback page with query params from "url"
});

Callback page:

function Component() {
  const auth = useAuth();
  const router = useRouter();

  useEffect(() => {
    if (auth.isLoading) return;

    // TODO: check auth state and redirect user

  }, [router, auth.isLoading, auth.isAuthenticated]);

  return (<LoadingSpinner />);
}

export default function CallbackPage() {
  return (
    <AuthProvider {...oidcConfig}>
      <Component />
    </AuthProvider>
  );
}

I hope this helps!

[Canuckaholic]

I'm going to try @ns-ovc solution, but @pamapa part of the problem is that onSigninCallback isn't being called within the Capacitor app for some reason, so we need to handle the signin callback in Capacitor's appUrlOpen event listener.

[Canuckaholic]

@ns-ovc I tried your solution but I must be missing something. My app just stays on the loading component because auth.isAuthenticaed is always false and never changes. I'm redirecting to this component with code=<CODE> in the search params.

[ns-ovc]

@Canuckaholic Maybe you need to do something like this first, after redirecting the user. (You have to set the query parameter "reload=true" while redirecting the user to the callback page):

// Check if the page should be reloaded first (Workaround for native login/register)
if (router.getQuery().reload !== undefined) {
  const url = new URL(window.location.href);
  url.searchParams.delete("reload");

  window.history.pushState({}, "", url.toString());

  location.reload();
  return;
}

I had this issue in the past, but in my current project, this workaround was no longer needed.

[joshuamolden]

I'm going to try @ns-ovc solution, but @pamapa part of the problem is that onSigninCallback isn't being called within the Capacitor app for some reason, so we need to handle the signin callback in Capacitor's appUrlOpen event listener.

I am having the exact same issue and I am needing the exact same thing.

[yogeshdofficial]

is this fixed or is there any other options?