shopify app remix: how to hook into "install" event

[redochka]

app created using shopify cli 3.74

I have shopify.server.ts where we define the authPathPrefix:

const shopify = shopifyApp({
  apiKey      : process.env.SHOPIFY_API_KEY,
  apiSecretKey: process.env.SHOPIFY_API_SECRET || "",
  apiVersion  : apiVersion,
  scopes      : process.env.SCOPES?.split(","),
  appUrl      : process.env.SHOPIFY_APP_URL || "",
  //It does not seem to be used...
  authPathPrefix: "/auth",
  sessionStorage: new RedisSessionStorage(process.env.UPSTASH_REDIS_URL),
  distribution  : AppDistribution.AppStore,
  future        : {
    unstable_newEmbeddedAuthStrategy: true,
    removeRest                      : true,
  },
  ...(process.env.SHOP_CUSTOM_DOMAIN
    ? {customShopDomains: [process.env.SHOP_CUSTOM_DOMAIN]}
    :{}),
});

And i have this app/routes/auth.$.tsx

import type {LoaderFunctionArgs} from "@remix-run/node";
import {authenticate} from "../shopify.server";

//it does not seem to be called at all
export const loader = async ({request}: LoaderFunctionArgs) => {
  console.log("inside auth.$.tsx");
  await authenticate.admin(request);
  return null;
};

I expected console.log("inside auth.$.tsx"); to be displayed at install time, but nothing.

Where is shopify auth being done? Sorry .. too much hidden magic.

[lizkenyon]

Hi there 👋

I expected console.log("inside auth.$.tsx"); to be displayed at install time, but nothing.

In the shopifyApp config object unstable_newEmbeddedAuthStrategy this enables the Token Exchange OAuth strategy. So in your app the /auth path won't be used, it will instead load the app in the /app.tsx route, see that it is missing the access token and make a request to receive a new one and store it.

how to hook into "install" event

After the package has stored the new access token it can trigger the afterAuth hook.

...
sessionStorage: new PrismaSessionStorage(prisma),
distribution: AppDistribution.AppStore,
  restResources,
  hooks: {
    afterAuth: async ({ session }) => {
      console.log("this runs after auth"
    },
  },
...

Something to note though that depending on your app setup this hook may be trigged at times other than initial install. It will be trigged whenever token exchange happens, e.g. you are using online access tokens, and one has expired.

Allowing developer to hook into only the initial install event is something that we want to improve in the future.

[redochka]

Thanks @lizkenyon for your inputs, however, even the afterAuth hook is not executed.

  hooks         : {
    afterAuth: async ({session}) => {
      console.log("this runs after auth");
    }
  },

Added, restarted the remix app, uninsall the app, installed again, navigating between app pages, no log is displayed.

BTW, since we are using future flag: unstable_newEmbeddedAuthStrategy, it should be no problem removing completely the app/routes/auth.$.tsx file and the authPathPrefix: "/auth", from the config. Do you confirm?

[lizkenyon]

If your app did not receive an uninstalled webook, (because your app was stopped, or your app url was changed since you last updated your webhook subscriptions), then your token may have still been in the database, and token exchange was not triggered.

[redochka]

Indeed, thank you so much. I deleted the session token from the storage, and tried loading the app and i can see the log now.

BTW, since we are using future flag: unstable_newEmbeddedAuthStrategy, it should be no problem removing completely the app/routes/auth.$.tsx file and the authPathPrefix: "/auth", from the config.

Do you confirm?