Retrieving Shopify App Access Token Once Admin Completes OAuth

Question

I've created a Shopify App using the remix template, now when the store merchant approves the scope of the app upon install I want to take the accessToken and send it to AWS Secrets Manager with their Store URL.

Everything else for the app is built, it's really just improving the user experience by automatically modifying theme files that remains, which is where the accessToken is required to complete.

I have found this file, which from watching guides and looking through the files seems to be the most relevant.

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

export const loader = async ({ request }: LoaderFunctionArgs) => {
  await authenticate.admin(request);

// Access Token > AWS Logic

  return null;
};

The problem I have is I can't get the shop name. (and I'm not sure if I even have to...) but to convert the sessionToken to a access token I need it.

Basically I want to modify this function to get the accessToken and store name and send it to AWS when the admin authenticates.

Any help would be great!

There is a Prisma schema that mentions the accessToken

model Session {
  id            String    @id
  shop          String
  state         String
  isOnline      Boolean   @default(false)
  scope         String?
  expires       DateTime?
  accessToken   String
  userId        BigInt?
  firstName     String?
  lastName      String?
  email         String?
  accountOwner  Boolean   @default(false)
  locale        String?
  collaborator  Boolean?  @default(false)
  emailVerified Boolean?  @default(false)
}

So it looks like awaiting the auth should result in the above session attributes being populated. So I should then be able to request the accessToken right? Keen to get some insight.

Tried the below by combining some of the steps from some guides I've seen, it doesn't work, but seems close???

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

const prisma = new PrismaClient();

export const loader = async ({ request }: LoaderFunctionArgs) => {

  const sessionToken = await authenticate.admin(request);
  console.log("Session token:", sessionToken);

  const shop = sessionToken.input_data.shop.domain;


  const accessToken = await getAccessTokenForShop(shop);

  console.log("Access token:", accessToken);
  return null;
};

async function getAccessTokenForShop(shop: string): Promise<string | null> {
  const session = await prisma.session.findUnique({
    where: {
      shop: shop,
    },
  });
  return session ? session.accessToken : null;
}

The shop const I got from a guide for getting the shop name from a client side checkout session, I doubt it's the same for getting the store URL from the admin session. Again any info would be great, I can't find it anywhere.

Answer 1

If I am getting it correct, then you are trying to get the access_token from remix app.

It's pretty simple to get:

In the app._index.tsx you can create a new loader and do something like this

export const loader = async ({ request }: LoaderFunctionArgs) => {
    const { admin,  session, } = await authenticate.admin(request);
    console.log(session);
}

This session object contains the access_token.

In the Remix template by default the access_token is Offline Access Token so it stays valid till the user uninstalls the app.

I hope this helps.