Skip to content

Latest commit

 

History

History
75 lines (47 loc) · 4.58 KB

oauth-to-managed-installation.md

File metadata and controls

75 lines (47 loc) · 4.58 KB

OAuth to Managed Installation

Shopify introduced Shopify Managed Installation to get rid of screen flickering during auth, unnecessary auth redirects while fetching online sessions and other misc issues. To oversimplify, you pass the access tokens to Shopify and get Session tokens in return like a regular fetch and save it in your database. Here's a rundown of what's changed:

  1. Changes in Auth

The older way of doing auth is still supported from Shopify but for embedded apps in this repo, it's gone and so are the files. I've completely removed the older strait to run auth, which means the auth middleware and it's routes are completely gone.

  1. Updates to isShopAvailable function

isShopAvailable has been renamed to isInitialLoad. The new strait means on the first load we get id_token as a query param that is exchanged for online and offline session tokens. isInitialLoad checks if these params exist, exchanges them for online and offline tokens and saves them in the db.

A new check also happens here, isFreshInstall. Since the database structure is kept the same to ensure smooth transition to the new auth, we can now check if the install was a fresh one. If the store doesn't exist in the store model, it's a new install, but if it does have a Bool value, that means it's either already installed or is a reinstall. While I've merged these in an if condition, you can break them apart and run your own checks if required.

if (!isFreshInstall || isFreshInstall?.isActive === false) {
  // !isFreshInstall -> New Install
  // isFreshInstall?.isActive === false -> Reinstall
  await freshInstall({ shop: onlineSession.shop });
}

This is now followed up with a props return since getServerSideProps has to return it.

  1. Changes to verifyRequest and ExitFrame

The verifyRequest() middleware now works completely differently. First we check for authorization headers in each fetch() since App Bridge CDN automatically adds headers to each fetch. Then a JWT validation is run to ensure the headers are valid, followed by getting the session id and rading from the database, check for expiry and fetch new tokens if the online tokens have expired. Then pass the session to use in subsequent routes as req.user_session and the middleware is done.

A great thing about this is ExitFrame doesn't exist anymore. If the tokens are invalid, we throw a 401 and if the tokens are expired, we fetch them and move on to the next set.

  1. Quick auth URL

The quick auth URL has gotten an update. We've moved from https://appurl.com/api/auth?shop=storename.myshopify.com to https://storename.myshopify.com/admin/oauth/install?client_id=SHOPIFY_API_KEY, which now takes the merchant to the install screen.

  1. Depricating useFetch() hook

The idea of useFetch() was to redirect towards ExitFrame if the tokens had expired or not found - this is not required anymore. All vanilla fetch requests work since AppBridge CDN adds in authorization headers in the background.

  1. Updates to package.json scripts and dev mode
  • No need to swap between multiple ports for Dev and Production - it's all served from the same port
  • npm run update:url has been deprecated, and is now npm run update:config. This creates all your toml files exactly where you need them, so you're still managing all your configurations from a single file, which is your .env, instead of multiple configuration files.
  1. Thoughts

Managed installation is great. No flickering, no running through ExitFrame, it's 10/10 all around. The only problem is now you don't get a hit when someone comes over to the permissions screen and are only made aware of the store when the permissions are approved. The new tomlWriter was built so that you are still only relying on your env and that's writing your shopify.app.toml file to root (and extension/ folder). It took a second to wrap my head around but once you get the hang of it, it's great.

  1. Extensions a. To create extensions, make a new folder called app and transfer all files except for
  • .github
  • docs/
  • LICENSE

b. Create a new folder called extension and run npm init --y inside of it to ensure you have a package.json in there.

c. Go into app/ and run npm run update:config so the _developer/tomlWriter can create all your toml files.

d. At this point, your folder structure should look something like this:

.github/
docs/
package.json

app/
app/server/...
app/client...
app/(other folders )

extension/
extension/package.json

e. Get back into extension/ and run shopify app generate extension to start creating your extensions.