NextAuth with Shopify's new Customer Account API

[bradleyDouglas]

I'm currently building out a custom storefront with Next JS (app router) and Shopify. I can sign customers in via the Shopify Classic Account login, but there are limitations to that. Mainly, you can't pass the user info to the checkout. I think it would be a nice touch to pass that info along if they are currently signed in.

The Customer Account API is fairly new and the only example they have currently is for Remix (found here). The full docs can be found here.

I'm new to NextAuth so I'm wondering if I can use it to log in the customers via the Customer Account API. Has anybody gone down this path yet or does anybody have any ideas on how to make this work in Next?

Thanks in advance!

[AP-monkey]

Would love to know if you managed to find a solution for it. I am currently in the same boat. Trying to figure out to how to implement the Customer Account API with my next.js store using shopify as my backend. I got stuck on the Set-Cookie parameters, and the Remix example does not explicitly state how to do it..

[bradleyDouglas]

I haven't yet, but I just need to re-visit. I'm hoping to do that this week. I'll report back once I play with it more.

[neeler]

Currently working on this as well. This custom provider seems to do the trick so far with the auth handshakes.

Note

You must already meet Shopify's requirements described here. Specifically, you'll want to make sure that you've installed the official Headless sales channel on your store. Only once you have installed the Headless channel can you actually access the Customer Account API. Within Sales Channels > Headless > Customer Account API you will find the correct shopId, clientId, and clientSecret. The shopId is not your text handle normally found in your domain, but instead is a number.

import type { OAuthConfig } from 'next-auth/providers';

export function ShopifyCustomerAccountProvider({
    shopId,
    clientId,
    clientSecret,
}: {
    shopId: string;
    clientId: string;
    clientSecret: string;
}): OAuthConfig<{
    iss: string;
    sub: string;
    aud: string;
    exp: number;
    iat: number;
    auth_time: number;
    device_uuid: string;
    sid: string;
    dest: string;
    email: string;
    email_verified: boolean;
}> {
    const shopifyBasePath = `https://shopify.com/${shopId}/auth/oauth`;
    const authorizationHeader = btoa(`${clientId}:${clientSecret}`);
    const redirectUri = `${process.env.NEXTAUTH_URL}/api/auth/callback/shopify`;

    return {
        id: 'shopify',
        name: 'Shopify',
        type: 'oauth',
        clientId,
        clientSecret,
        authorization: {
            url: `${shopifyBasePath}/authorize`,
            params: {
                scope: 'openid email https://api.customers.com/auth/customer.graphql',
                client_id: clientId,
                response_type: 'code',
                redirect_uri: redirectUri,
            },
        },
        token: {
            async request(context) {
                try {
                    const response = await fetch(`${shopifyBasePath}/token`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            Authorization: `Basic ${authorizationHeader}`,
                        },
                        body: new URLSearchParams({
                            grant_type: 'authorization_code',
                            client_id: clientId,
                            redirect_uri: redirectUri,
                            code: context.params.code || '',
                        }),
                    });
                    const body = await response.json();
                    return { tokens: body };
                } catch (err: any) {
                    throw new Error(err);
                }
            },
        },
        idToken: true,
        checks: ['pkce', 'state'],
        profile(profile): {
            id: string;
            email: string;
        } {
            return {
                id: profile.sub,
                email: profile.email,
            };
        },
    };
}

[mattddean]

Thanks for putting this together! Which version of next-auth are you using? It seems like idToken was removed in more recent versions.

[mgavin-origen]

Hi!

I get the following errors with that code

[auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror
[auth][cause]: OperationProcessingError: "response" is not a conform Authorization Server Metadata response

[jamesMAwalker]

Hi!

I get the following errors with that code

[auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror [auth][cause]: OperationProcessingError: "response" is not a conform Authorization Server Metadata response

I'm getting this same error.

Currently in the process of trying to figure this out. But strangely, along with the error message I'm also getting the code back from Shopify with a 302.

Also, it seems like none of the code inside the token.request function is running, as I've tried logging the context to see what's wrong and I see none of them in my terminal.

I'm new to all of this, so any help is appreciated.

[Vadimkin]

It looks that Shopify added an extra check for /token request.

If you're seeing {"error":"","error_description":"code_verifier is invalid."} error, you have to include code_verifier field into the request. It could be something like this:

body: new URLSearchParams({
    grant_type: 'authorization_code',
    client_id: clientId,
    redirect_uri: redirectUri,
    code: context.params.code || '',
    code_verifier: context.checks.code_verifier || '',
}),

[liho00]

@jamesMAwalker i got the same issue, did you able to solve it?

[peyronoscar]

I finally got this working using ngrok.

When accessing the site through localhost, you get redirected to https://localhost:3000 in the authentication flow. Probably just some bug in next-auth since everything is working fine using the ngrok url instead.

"next-auth": "^5.0.0-beta.20"

.env.local

AUTH_URL="<NGROK_URL>"

import NextAuth from "next-auth"

const shopifyBasePath = `https://shopify.com/<SHOP_ID>/auth/oauth`;
const redirectUri = `<NGROK_URL>/api/auth/callback/shopify`;

export const { handlers, signIn, signOut, auth } = NextAuth({
   providers: [
      {
         id: "shopify",
         name: "Shopify",
         type: "oidc",
         clientId: process.env.AUTH_CLIENT_ID,
         clientSecret: process.env.AUTH_CLIENT_SECRET,
         issuer: "https://customer.login.shopify.com",
         authorization: {
            url: `${shopifyBasePath}/authorize`,
            params: {
               scope: 'openid email https://api.customers.com/auth/customer.graphql',
               client_id: process.env.AUTH_CLIENT_ID,
               response_type: 'code',
               redirect_uri: redirectUri,
            },
         },
      }
   ],
})

[liho00]

[auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror
[auth][cause]: OperationProcessingError: JWT "aud" (audience) claim missing
at validatePresence (/Users/liho/Desktop/commerce/.next/server/chunks/node_modules_4f6d0b._.js:2108:19)

[ochicf]

I got a working version by adapting the version on this thread and after encountering several issues down the way, which forced me to spend many hours digging into next-auth, @auth/core and oauth4webapi code to make it work.

Requirements

• NEXTAUTH_URL="https://my-local-tunnel.com" (ex: ngrok, I recommend the included free static domain)
• configure the above in Shopify's Customer API callbacks settings page, pointing to the full callback URL. Ex: https://my-local-tunnel.com/api/auth/callback/shopify
• access through your local tunnel in the browser instead of localhost to initiate the oauth process from the local tunner domain or IP, otherwise some checks will fail when returning to the callback URI

Notes

• the key part is in the token.conform function. I've added inline comments and types so hopefully it makes more sense
• I also had to add token.url and token.params, otherwise I would get different errors
• in the profile function:
  • I've added a simple fetch to the Customer API to retrieve the user full name and the image
  • on the image... I had to change the image field type from varchar(255) to text, otherwise it wouldn't fit
  • I'm not sure if it's too opinionated or if it should also allow customisation from the provider options

DISCLAIMER

I'm not really sure the below approach is correct or safe, or if it will hold future changes of the above mentioned packages, as it heavily relies in implementation details which could change and break it.

Implementation

I've tried to encapsulate the provider, so place it in a different file such as /auth/providers/shopify.ts.

Provider implementation

import type { TokenSet } from "@auth/core/types";
import type { OIDCConfig, OIDCUserConfig } from "next-auth/providers";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
type UntypedValue = any;

export interface ShopifyProfile extends Record<string, UntypedValue> {
  iss: string;
  sub: string;
  aud: string;
  exp: number;
  iat: number;
  auth_time: number;
  device_uuid: string;
  sid: string;
  dest: string;
  email: string;
  email_verified: boolean;
}

export interface ShopifyOwnConfig {
  shopId: string | number;
  clientId: string;
  clientSecret: string;
  issuer?: string;
  shopifyOAuthPath?: string;
  shopifyCustomerGraphqlPath?: string;
  nextAuthUrl?: string;
  nextAuthCallbackUrl?: string;
}

export interface ShopifyConfig<P extends ShopifyProfile>
  extends ShopifyOwnConfig,
    Omit<OIDCConfig<P>, "clientId" | "clientSecret" | "issuer"> {}

export type ShopifyUserConfig<P extends ShopifyProfile> = ShopifyOwnConfig &
  Partial<Omit<OIDCUserConfig<P>, "options" | "type">>;

/**
 * This is the JWT returned by Shopify's customer API.
 */
export interface ShopifyJWTAuthorizationResponsePayload {
  shopId: string | number;
  cid: string;
  iat: number;
  exp: number;
  iss: string;
  sub: number;
  scope: "openid email customer-account-api:full";
}

/**
 * This is the conformed JWT which will be actually validated.
 * Note that:
 *  - `aud` is originally missing, and it's expected to be the provider's `clientId`
 *  - `iss` is originally provided, but it's expected to be the provider's `issuer`
 */
export interface ShopifyJWTAuthorizationConformedPayload
  extends ShopifyJWTAuthorizationResponsePayload {
  aud: string;
}

export default function Shopify<P extends ShopifyProfile = ShopifyProfile>(
  options: ShopifyUserConfig<P>,
): ShopifyConfig<P> {
  const {
    id = "shopify",
    shopId,
    clientId,
    clientSecret,
    issuer = "https://customer.login.shopify.com",
    shopifyOAuthPath = `https://shopify.com/${shopId}/auth/oauth`,
    shopifyCustomerGraphqlPath = `https://shopify.com/${shopId}/account/customer/api/2024-07/graphql`,
    // eslint-disable-next-line no-restricted-properties
    nextAuthUrl = process.env.NEXTAUTH_URL,
    nextAuthCallbackUrl,
  } = options;

  const redirectUri = (() => {
    if (nextAuthCallbackUrl) {
      return `${nextAuthCallbackUrl}/${id}`;
    }
    if (!nextAuthUrl) {
      throw new Error(
        [
          `Shopify customer API requires a static callback URI to work.`,
          `You can set "NEXTAUTH_URL" in your environment variables, or pass`,
          `"nextAuthUrl" to the Shopify provider.`,
        ].join(" "),
      );
    }
    return `${nextAuthUrl}/api/auth/callback/${id}`;
  })();
  return {
    id,
    type: "oidc",
    name: "Shopify",
    shopifyOAuthPath,
    clientId,
    clientSecret,
    issuer,
    authorization: {
      url: `${shopifyOAuthPath}/authorize`,
      params: {
        scope: "openid email https://api.customers.com/auth/customer.graphql",
        client_id: clientId,
        response_type: "code",
        redirect_uri: redirectUri,
      },
    },
    token: {
      url: `${shopifyOAuthPath}/token`,
      params: {
        grant_type: "authorization_code",
        client_id: clientId,
        redirect_uri: redirectUri,
      },
      /**
       * This function gets the `id_token` from the response and conforms it so
       * that it passes validation by adding/modifying the necessary claims.
       *
       * This solution feels a bit hacky and I'm not really sure it's fully correct,
       * safe, or if it will work in all cases (or if it'll hold up in the future).
       *
       * Note that the transformation is done in the `conform` function itself,
       * but since the caller expects a new `Response` object to be returned,
       * we need to patch the received `Response` with a `json` method that returns
       * the transformed data.
       */
      async conform(response: Response) {
        if (!response.ok) {
          return;
        }
        //? Assuming a lot about the response here, as it should
        //? return a JSON object with an `id_token` property with
        //? a valid JWT token.
        const data = (await response.clone().json()) as TokenSet;
        const [header = "", payload = "", sig = ""] =
          data.id_token?.split(".") ?? [];
        const responsePayload = JSON.parse(
          atob(payload),
        ) as ShopifyJWTAuthorizationResponsePayload;
        const conformedPayload: ShopifyJWTAuthorizationConformedPayload = {
          ...responsePayload,
          aud: clientId,
          iss: issuer,
        };
        const idToken = `${header}.${btoa(JSON.stringify(conformedPayload))}.${sig}`;
        //? Cloning the response again to patch it, though the caller already clones
        //? it before calling this function. This is done anyway in case this fact
        //? changes in the future and to avoid mutating the original response.
        return Object.assign(response.clone(), {
          json() {
            return Promise.resolve({ ...data, id_token: idToken });
          },
        });
      },
    },
    async profile(profile, tokens) {
      const customer = tokens.access_token
        ? await fetch(shopifyCustomerGraphqlPath, {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              Authorization: tokens.access_token,
            },
            body: JSON.stringify({
              operationName: "SomeQuery",
              query: "query { customer { displayName, imageUrl } }",
              variables: {},
            }),
          })
            .then(
              (res) =>
                res.json() as Promise<{
                  data: {
                    customer: {
                      displayName: string;
                      imageUrl: string | null;
                    };
                  };
                }>,
            )
            .then((res) => res?.data?.customer)
        : null;

      return {
        id: profile.sub,
        email: profile.email,
        emailVerified: profile.email_verified ? new Date() : null,
        image: customer?.imageUrl,
        name: customer?.displayName,
      };
    },
    // @ts-expect-error: options not picked up, but they are defined in `OIDCConfig`
    options,
  } satisfies ShopifyConfig<P>;
}

Usage

In your config or nextauth routes:

import Shopify from '/auth/providers/shopify`;

export const { handlers, signIn, signOut, auth }  = NextAuth({
  providers: [
    Shopify({
      shopId: env.AUTH_SHOPIFY_SHOP_ID,
      clientId: env.AUTH_SHOPIFY_CLIENT_ID,
      clientSecret: env.AUTH_SHOPIFY_CLIENT_SECRET,
      ...authConfigClient.providers.Shopify,
    }),
  ]
});

---

Please let me know if this works for you, if you encounter any issues, or if you see something wrong about the approach or if it can be simplified (TBH my take on this has been batting each problem as it came as I could).

I've prepared it to be placed on it's own file so it's more similar to a version that would be submitted as a PR.

[liho00]

@ochicf Hi ser, its did working well. You saved my say, deeply appreciated, I wanna buy you coffee, and could you provide easy way of example code on getting customer orders at client side?

[AlexTroitsky]

hey, im trying it and getting
[auth][error] InvalidCheck: pkceCodeVerifier value could not be parsed. Read more at https://errors.authjs.dev#invalidcheck

im assuming i need to add checks?