Shopify Provider

If you need a detailed guide on how to setup a provider pleaser refer to the Getting Started and Making your first integration guides.

Resources

Setup

Callback URL

https://your-app.com/api/auth/integration/shopify

Environment variables

.env.local

AUTH_SHOPIFY_ID=your-client-id
AUTH_SHOPIFY_SECRET=your-client-secret

Add the provider to the `auth.ts` file.

auth.ts

import { NextIntegrate } from 'next-integrate';
 
export const { auth } = NextIntegrate({
  // The URL of the app, e.g. https://example.com, set in the .env file.
  // If you want to modify the redirect URL, to be prefixed with something else,
  // you can do it here like this:
  // base_url: process.env.BASE_URL! + "/some-prefix",
  // This will change the redirect URL to eg. https://example.com/some-prefix/api/auth/integration/google
  base_url: process.env.BASE_URL!,
  providers: [
    {
      provider: 'shopify',
      client_id: process.env.AUTH_SHOPIFY_ID!,
      client_secret: process.env.AUTH_SHOPIFY_SECRET!,
      integrations: [],
    },
  ],
});

Add an integration

auth.ts

import { NextIntegrate } from 'next-integrate';
 
export const { auth } = NextIntegrate({
  // The URL of the app, e.g. https://example.com, set in the .env file.
  // If you want to modify the redirect URL, to be prefixed with something else,
  // you can do it here like this:
  // base_url: process.env.BASE_URL! + "/some-prefix",
  // This will change the redirect URL to eg. https://example.com/some-prefix/api/auth/integration/google
  base_url: process.env.BASE_URL!,
  providers: [
    {
      provider: 'shopify',
      client_id: process.env.AUTH_SHOPIFY_ID!,
      client_secret: process.env.AUTH_SHOPIFY_SECRET!,
      integrations: [
        {
          name: 'some_custom_name',
          options: {
            scope: 'read_products,read_orders',
          },
          callback: async (data) => {
            // This is where you can save the data to a database, or do something else with it.
          },
        },
      ],
    },
  ],
});

The `shop` parameter

Unlike other providers, Shopify's OAuth endpoints live on the merchant's shop domain, so the integrate() function requires a shop parameter when the provider is shopify. The value is typically collected from the user at runtime, e.g. through an input field.

The following formats are accepted, and are all normalized to your-store.myshopify.com:

your-store
your-store.myshopify.com
https://your-store.myshopify.com

The normalized shop domain is included in the tokens passed to your callback, so you know which store the access token belongs to.

Usage

To use the your new integration, you can use the <Integrate /> component found in the Getting Started Guide. The shop prop is required when the provider is shopify, which is enforced by the IntegrateProps type.

import Integrate from '@/components/integrate';
 
export default function Home() {
  return (
    <main>
      <Integrate
        provider="shopify"
        name="some_custom_name"
        shop="your-store.myshopify.com"
      >
        Connect Shopify Store
      </Integrate>
    </main>
  );
}

Options

You can pass various parameters on the options object to customize the integration. The parameters are specific to the Shopify provider, please refer to the documentation (opens in a new tab), to verify the information if needed.

parameter	type	required	description
`scope`	`string`	`true`	A list of scopes that determines what the app will be able to access on the store. You can parse multiple scopes by seperating with a comma. You can find the full list of scopes here (opens in a new tab).

Reddit Slack