search

ozzyonfire / shopify-next-app

Shopify app template on Next.js with app directory
https://shopify-next-app-six.vercel.app
MIT License
68 stars 10 forks source link

[BUG]: Online Token revalidation fails for shopify app #3

Open AbhinavRobinson opened 1 year ago

AbhinavRobinson commented 1 year ago
Screenshot 2023-07-24 at 12 04 27 PM

Online token revalidation does not happen after 24 hours, resulting in hundreds of 

HttpResponseError: Received an error response (401 Unauthorized) from Shopify:
"[API] Invalid API key or access token (unrecognized login or wrong password)"

My current bandage fix is to clear out sessions db for the moment being.

Any suggestions?

AbhinavRobinson commented 1 year ago

The issue is narrowed to SessionProvider not added/ and when added, making the app refresh endlessly.

ozzyonfire commented 1 year ago

I assume this is because you are sitting on the same page for over 24 hours, then try to perform some requests again. The session has since expired so it throws a 401 error.

If you leave the app, and then come back to it, it should refresh the token automatically.

So what should happen is, if an expired token is detected on a /api/graphql request then we need to redirect the user to authenticate again. Just not sure if this is something that should happen automatically, or should we catch it on the front end and prompt the user to "refresh" the page.

It could be a little jarring (and the user could potentially lose unsaved work) if the app did an automatic refresh/redirect.

What do you think?

AbhinavRobinson commented 1 year ago

I was able to fix this, the issue is that SessionProvider is commented out and /verify is not implemented.

I have added those components, currently testing to make sure everything is working as usual.

The issue is that even when you come back to the app after 1 or more days, the session is not re-authenticating, isVerified is always false.

AbhinavRobinson commented 1 year ago

Added PR with fix #4

AbhinavRobinson commented 1 year ago

@ozzyonfire

ozzyonfire commented 1 year ago

The thing is I removed this because I wasn't happy with the implementation. This was how I achieved it using the old next pages directory.

However, with the new app router, we should be able to do this with server components.

Old way: The SessionProvider, just made a request everytime the user navigated around your app (or came back to the page after a while) and would check if the session is still valid with an REST request.

If the session was expired, the page would automatically refresh.

New way: I can basically do everything we need to do in the performChecks function (/lib/shopify-oauth.ts). So my plan would be to make that a server action and then make a new SessionProvider.

We can call that performChecks server action from the new SessionProvider and hopefully everything works. Then we don't have to rely on that /verify api call to work.

I am going to take a look at this today and see what I can do. Your PR will definitely work, it's just not really the way I want this new template to accomplish it.

AbhinavRobinson commented 1 year ago

Agreed, that would be great :)

ozzyonfire commented 1 year ago

I just pushed some changes up. Feel free to pull them down and check it out. I still left the old code in tact (I really need to go through and start removing the old stuff).

I made a new method "useSessionCheck" that basically just calls a server action and should have the same effect as the old way of doing things (but just much cleaner and no more /api route to manage.

check out the actions.ts file under the app directory and the new function in /hooks/auth.ts