Refresh Offline Access Token Scope - Post Install

We’re in the process of finalising our app however there’s one thing that is preventing testing, which is the fact that I have used the Shopify Remix App template, and it has the scope below:

write_products, write_themes

This is cool until you realise you need much more scope than that.

Now because I didn’t set the scope correctly before installing it on the dev store, the offline token generated has persisted, and its scope has persisted, even though the app has been re-installed and re-authed accepting additional scope.

The TOML, the app in Partners, fully reflect the new required scope, hence why when I re-install I agree to accept the new scope.

The issue is, why is this not updating the access tokens scope if I have approved the new scope? (And also, why is the access token not being deleted when the app in uninstalled?)

To ensure that the app doesn’t capitulate if for whatever reason access tokens expire and we need to ask merchants to re-auth, I added the below:

    const requiredScopes = [
      "read_products",
      "write_products",
      "read_orders",
      "write_orders",
      "read_customers",
      "write_customers",
    ];

    const currentScopes = session.scope.split(",");
    const missingScopes = requiredScopes.filter(scope => !currentScopes.includes(scope));

    if (missingScopes.length > 0) {
      console.log("Requesting additional scopes:", missingScopes);

      const redirectUrl = `https://${session.shop}/admin/oauth/authorize?client_id=${process.env.SHOPIFY_API_KEY}&scope=${missingScopes.join(",")}&redirect_uri=${process.env.SHOPIFY_APP_URL}/auth/callback`;

      return new Response(null, {
        status: 302,
        headers: { Location: redirectUrl },
      });
    }

This is meant to push the user to re-auth if the access token in the session doesn’t include the required scope, however the redirect doesn’t work, it shows the below error:

Firefox Can’t Open This Page

To protect your security, accounts.shopify.com will not allow Firefox to display the page if another site has embedded it. To see this page, you need to open it in a new window.

If I open it in a new window I see “authorisation failed”.

I can use the below method to create a new token that has the correct scope, but I have an issue with the original offline token persisting forever with the wrong scope.

curl -X POST "https:/anon.myshopify.com/admin/oauth/access_token" \
-H "Content-Type: application/json" \
-d '{
  "client_id": "03403840834bunchofnumbers030384",
  "client_secret": "30483084bunchofnumbers90348",
  "code": "0834834bunchofnumbersnadsomeletters834oi"
}'

Keen for any help on this. Also redirecting within app._index feels impossible, I’ve tried multiple methods and it doesn’t work, it’s blocked every time, if anyone has a method for that it would be great as when I detect the access token doesn’t have the correct scope, I want to redirect the user to the re-auth screen to approve the additional scope (if for whatever reason tokens refresh in the future).

Hi there :wave:

A couple of things

If you are using Shopify managed install, which is sounds like you are, then you should not need to handle initiating reauthorization when you add additional scopes. This should be happening automatically when you deploy your toml changes to Shopify, and try to access the app again. While the access token will remain the same, it will now have access to the additional scopes.

If you would like to update the record of the scopes in your database you can listen to the APP_SCOPES_UPDATE webhook event. And when you receive that event update the record in the database. You can see an example of the in the Remix template

You can find more information on the documentation on managing access scopes here.

For the access token to be deleted on uninstall you will need to subscribe to the APP_UNINSTALLED webhook event. If you are subscribed to it already, I would recommend reviewing the URL that it is being sent to currently. If you are using the Shopify CLI then every time the server starts a new cloudflare URL will be generated, so the webhook event may not have been sent to the correct URL.

For future reference, for redirecting you can use the helper function provided in the Shopify Remix package.

1 Like