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.