Add Scopes component to request optional scopes from the frontend

[alvaro-shopify]

WHY are these changes introduced?

Closes: https://github.com/Shopify/develop-app-runtime-primitives/issues/390

WHAT is this pull request doing?

• Creates a new OptionalScopesProvider react component to request optional scopes from the frontend to avoid server redirections

• For now the component only supports non embedded apps. Once the app-bridge api to request optional scopes is available it will be integrated in this component

• The method signature to request optional scopes is:

     requestScopes({
       scopes: string[];
       onGrant: () => void;
       onAlreadyGranted?: () => void;
     }
  

  • scopes - The list of scopes to request
  • onGrant - The action to run in case the scopes are not granted and the user grants them (ie. update some UI)
  • onAlreadyGranted - The action to run in case the requested scopes are already granted (ie. create a product)

• How the component works

  • Checks if the requested scopes are already granted or not. In case of the former, the onAlreadyGranted is executed and the action returns automatically
  • Otherwise, opens a modal to warn the user that some scopes are missing and a new window will be open to display the admin grant page
  • If the user goes on, a new popup window with the grant page is opened.
    • The window is automatically closed if the user grants the missing scopes
    • The window is automatically closed if the scopes are not granted after 60 seconds (inactivity or the user cancel the grant page)
  • After the window is closed, the user closes the modal and the onGrant action is executed if the user has confirmed the scopes

• Requirements

  • The app should expose an endpoint to return the ScopesInformation using the scopes.query api
  • The app should expose an endpoint to run the redirection to the grant page using the scopes.request api. The scopes are sent as a query param
  • By default the endpoints used by the component are
    • {APP_URL}/auth/scopes/query
    • {APP_URL}/auth/scopes/request?scopes=
  • The base path /auth/scopes and the subpaths query and request are configurable through the AppProvider

• Modifications in the sample Remix app created to 🎩 the library:

  • Configured the app as non embedded
  • Access to the Products maker section requires read_products using server side redirection
  • The button to create a new product requires write_products and will use the new component to request it

Tophat 🎩

1. Setup using a non embedded app

• Check out the Remix sample app used to 🎩 the modifications

dev clone burst-optional-scopes-app
git checkout add-support-for-the-scopes-react-provider

• Install the dependencies and the local copy of the shopify-app-js library

yarn setup
yarn install
yarn build:dependencies

• Install the CLI or update it to the latest version

npm install -g @shopify/cli@latest

• link your local app with a new remote app

shopify app config link

• Access the shopify internal dashboard in spin and enable the beta app_access_optional_scopes for the new remote app
• Edit your toml to include the following scopes configuration:

embedded = false
...
[access_scopes]
scopes = "write_customers"
optional_scopes = ["write_products"]

• deploy a new app version

shopify app deploy

• Run the dev command and preview the app

shopify app dev

2. Granting the scope to create products

• Access the Products maker section and grant the read_products scope when it's required
• Click on the button to create a product
• Confirm the modal to go to the grant page
• A new window will be opened with the grant page. Confirm it
• Click on the create product button again and a new product will be created.

Demo video

Type of change

• Patch: Bug (non-breaking change which fixes an issue)
• Minor: New feature (non-breaking change which adds functionality)
• Major: Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist

• I have used yarn changeset to create a draft changelog entry (do NOT update the CHANGELOG.md files manually)
• I have added/updated tests for this change
• I have documented new APIs/updated the documentation for modified APIs (for public APIs)