npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@blendededge/simple-koa-shopify-auth

v2.1.12

Published

A better, simplified version of the (no longer supported) @Shopify/koa-shopify-auth middleware library. It removes the use of cookies for sessions (which greatly smooths the auth process), replaces a deprecated API call, and supports v2 of the official @s

Downloads

7

Readme

simple-koa-shopify-auth

https://www.npmjs.com/package/simple-koa-shopify-auth

NOTE: This package is not maintained by or affiliated with Shopify.

Description:

A better, simplified version of the (no longer supported) @Shopify/koa-shopify-auth middleware library. It removes the use of cookies for sessions (which greatly smooths the auth process by requiring fewer redirects in some cases), replaces a deprecated API call, and supports v5 of the official @shopify/shopify-api package.

Installation:

npm i simple-koa-shopify-auth

Requirements:

This package assumes you have @shopify/shopify-api v5 already installed. If you are on a lower version you will need to upgrade to the latest version with npm i @shopify/shopify-api@latest.

WARNING:

Please check the changelog to see all the changes, and update your code accordingly.

Usage:

The usage is very similar to @Shopify/koa-shopify-auth (which you should check for more examples), but there are a few differences, so it isn't a drop-in replacement.

Import the middleware functions (ES6 syntax):

import { createShopifyAuth, verifyRequest } from "simple-koa-shopify-auth";

Importing differs slightly from the official library in that the createShopifyAuth function is not a default import here, and has been renamed.

Using verifyRequest for verifying session token on routes:

NOTE:

If the session is invalid it will return a 401 Unauthorized status code, that you can handle on the client side. This is a breaking change from the official library, which returns 403 Forbidden.

For requests, create the middleware like this:

// For requests from the frontend, we want to return headers, so we can check if we need to reauth on the client side
const verifyApiRequest = verifyRequest({ returnHeader: true });
const verifyPageRequest = verifyRequest();

The verifyRequest middleware function only accepts the following parameters (default values shown):

NOTE: These parameters differ from the ones in the official library.

{
  accessMode: "online",  // The access mode of the token to check
  authRoute: "/auth",  // Where to redirect if the session is invalid
  returnHeader: false,  // If true, set headers instead of redirecting if session is invalid
}

For more help on how to use the middleware functions, check the examples from the official library.

Registering middleware for handling auth routes:

The createShopifyAuth middleware function only accepts the following parameters (default values shown):

NOTE: These parameters differ from the ones in the official library.

{
  accessMode: "online",  // What kind of token we want to fetch
  authPath: "/auth",  // The path to handle the request on
  async afterAuth(ctx) { }  // Callback function after auth is completed (the token is available at ctx.state.shopify)
}

This is a simple example that you can use to help understand how to implement it.

const server = new Koa();

// Installation route (get offline, permanent access token)
server.use(
  createShopifyAuth({
    accessMode: "offline",
    authPath: "/install/auth",
    async afterAuth(ctx) {
      const { shop, accessToken } = ctx.state.shopify;
      const { host } = ctx.query;
      if (!accessToken) {
        // This can happen if the browser interferes with the auth flow
        ctx.response.status = 500;
        ctx.response.body = "Failed to get access token! Please try again.";
        return;
      }
      // Redirect to user auth endpoint, to get user's online token
      ctx.redirect(`/auth?shop=${shop}&host=${host}`);
    },
  })
);

// User auth route (get online session token)
server.use(
  createShopifyAuth({
    accessMode: "online",
    authPath: "/auth",
    async afterAuth(ctx) {
      const { shop } = ctx.state.shopify;
      const { host } = ctx.query;
      // Check if the app is installed
      // NOTE: You can replace with your own function to check if the shop is installed, or you can just remove it, but this is an extra check that can help prevent auth issues
      if (isShopActive(shop)) {
        // Redirect to app
        ctx.redirect(`/?shop=${shop}&host=${host}`);
      } else {
        // Redirect to installation endpoint to get permanent access token
        ctx.redirect(`/install/auth/?shop=${shop}&host=${host}`);
      }
    },
  })
);