Shopify / shopify-app-template-node

MIT License
887 stars 400 forks source link

Why using Redirect to re-authenticate ? #609

Closed ghost closed 3 years ago

ghost commented 3 years ago

Hi Shopify team,

I have read new guide and see you implement user re-authenticate.

function userLoggedInFetch(app) {
 const fetchFunction = authenticatedFetch(app);

 return async (uri, options) => {
    const response = await fetchFunction(uri,      options);

   if (response.headers.get('X-Shopify-API-Request-Failure-Reauthorize') === '1') {
      const authUrlHeader = response.headers.get('X-Shopify-API-Request-Failure-Reauthorize-Url');

      const redirect = Redirect.create(app);
       redirect.dispatch(Redirect.Action.APP, authUrlHeader || `/auth`);
        return null;
     }

   return response;
 };
}

I added above code, update verifyRequest follow the guide, but i see when re-authenticating (request to /grapqhql return 403 code), above code using Redirect component to redirect me to a page have url [authUrlHeader].js.

I don’t have that page so result for that redirecting request will be 404 ( Not found ) => leads app working not properly.

I also don’t know how Redirect component work. But i think re-authenticate might be like:

Authenticate => get 403 code => re-fetch authenticate with authUrlHeader => server will be automatically do online authenticate

I mean it must be Re-fecth not Redirect.

Let me know if I get something wrong. Thanks and best regards,

ghost commented 3 years ago

Yeah, I found cause. I don't know why but:

Because i change redirect path: /auth => /online/auth (this is my online auth route)

so my code is: redirect.dispatch(Redirect.Action.APP, authUrlHeader || /online/auth); => make Redirect component redirect me to 1 path /online/auth.js

Now I keep the code as instructed, it worked fine :)