How to pass a property to auth options authorization url?

[arnasp13]

I am new to next-auth and trying to integrate Shopify auth.

How does authorization.url, token.url and other props get shopId prop? It comes from a sign in page.

Here is my src/app/api/auth/[...nextauth]/route.ts

import NextAuth from "next-auth";
import { SupabaseAdapter } from "@auth/supabase-adapter";
import type { NextAuthOptions } from "next-auth";
import { NextApiRequest } from "next";
import { NextApiResponse } from "next";

interface SessionUser {
  id: string;
  name?: string | null;
  email?: string | null;
  image?: string | null;
}

export const authOptions = ({
  shopId,
}: {
  shopId?: string;
}): NextAuthOptions => ({
  adapter: SupabaseAdapter({
    url: process.env.NEXT_PUBLIC_SUPABASE_URL!,
    secret: process.env.SUPABASE_SERVICE_ROLE_KEY!,
  }),
  providers: [
    {
      id: "shopify",
      name: "Shopify",
      type: "oauth",
      version: "2.0",
      authorization: {
        url: `https://${shopId}.myshopify.com/admin/oauth/authorize`,
        params: {
          scope: process.env.SHOPIFY_SCOPES,
          response_type: "code",
          client_id: process.env.SHOPIFY_API_KEY,
        },
      },
      token: {
        url: `https://${shopId}.myshopify.com/admin/oauth/access_token`,
        async request({ client, params, checks, provider }) {
          const response = await client.oauthCallback(
            provider.callbackUrl,
            params,
            checks,
            {
              exchangeBody: {
                client_id: process.env.SHOPIFY_API_KEY,
                client_secret: process.env.SHOPIFY_API_SECRET,
                grant_type: "authorization_code",
              },
            }
          );
          return { tokens: response };
        },
      },
      userinfo: {
        url: `https://${shopId}.myshopify.com/admin/api/2024-01/shop.json`,
        async request({ tokens }) {
          console.log("Access Token:", tokens.access_token);

          const response = await fetch(
            `https://${shopId}.myshopify.com/admin/api/2024-01/shop.json`,
            {
              method: "GET",
              headers: {
                "X-Shopify-Access-Token": tokens.access_token ?? "",
                "Content-Type": "application/json",
              },
            }
          );

          if (!response.ok) {
            throw new Error(
              `Shopify API error: ${response.status} ${response.statusText}`
            );
          }

          const data = await response.json();
          console.log("Shopify Response:", data);
          return data;
        },
      },

      clientId: process.env.SHOPIFY_API_KEY,
      clientSecret: process.env.SHOPIFY_API_SECRET,
      profile(profile) {
        return {
          id: profile.shop.id.toString(),
          name: profile.shop.name,
          email: profile.shop.email,
          image: profile.shop.domain,
        };
      },
    },
  ],
  callbacks: {
    async session({ session, user }) {
      console.log("session", session);
      console.log("user", user);
      if (session?.user) {
        (session.user as SessionUser).id = user.id;
      }
      return session;
    },
  },
  pages: {
    signIn: "/auth/signin",
    signOut: "/auth/signout",
    error: "/auth/error",
  },
  debug: true,
});

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const response = await NextAuth(authOptions({ shopId: "test-id" }))(req, res);
  if (!response) {
    return res.status(500).json({ error: "No response from NextAuth handler" });
  }
  return response;
};

export { handler as GET, handler as POST };

here is my sign in:

"use client";

import { signIn } from "next-auth/react";
import { useState } from "react";
import { useSearchParams } from "next/navigation";

export default function SignIn() {
  const [isLoading, setIsLoading] = useState(false);
  const [shopUrl, setShopUrl] = useState("");
  const searchParams = useSearchParams();
  const error = searchParams.get("error");

  const handleSignIn = async () => {
    if (!shopUrl) {
      alert("Please enter your Shopify store URL.");
      return;
    }

    try {
      setIsLoading(true);
      await signIn("shopify", {
        callbackUrl: "/dashboard",
        shop: shopUrl,
      });
    } catch (error) {
      console.error("Sign in error:", error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="space-y-6">
      {error && (
        <div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded">
          {error === "OAuthSignin" ? "Error connecting to Shopify" : error}
        </div>
      )}

      <input
        type="text"
        value={shopUrl}
        onChange={(e) => setShopUrl(e.target.value)}
        placeholder="Enter your Shopify store URL"
        className="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
      />

      <button
        onClick={handleSignIn}
        disabled={isLoading}
        className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
      >
        {isLoading ? "Connecting..." : "Connect with Shopify"}
      </button>
    </div>
  );
}