How to properly handle external oauth

Help
,
1

I have a react app, and in the app we do some external oauth login with like shopify and other external store.

now, they usually return something like

Pretty:

http://localhost:3001/integrations/shopify/oauth-redirect

code      = 92f4fc82b0aad1123e7a2391e1c28526
hmac      = 5dqwe868a4811f89aceb51f7706d2e3fd1aa391382883a4dfg84af109648
host      = YWRtsdfuc2hvcGlmeS5jb20vc3RvcmUvghjghj2EtYW5kcmVh
shop      = fff.myshopify.com
state     = dummy
timestamp = 1717496310

Now, when I redirect back to my app, I have the following setup :

export const routes: RouteObject[] = [
  {
    path: 'integrations',
    element: (
      <Auth0Guard isOauthRouting={true}>
        <IntegrationTemplate />
      </Auth0Guard>
    ),
    children: [
      {
        path: 'shopify/oauth-redirect',
        element: <OauthRedirectShopifyPage />,
      },

with simplified

export const Auth0Guard = ({ children }: React.PropsWithChildren<unknown>) => {
  const { logout, error } = useAuth0();

  useEffect(() => {
    if (error) {
      logout();
    }
  }, [error, logout]);

now this will always return INVALID_STATE when coming from an external oauth process directly, without me calling any auth0 method like login or silent login etc… as oauth require state and code but it will cause the user to always logout from the app.

I made some condition checking the url and ignore the error on those pages, but it feel very weak solution.

Is there a guide on proper flow for integrating to external oauth process ?