import type { LoaderFunctionArgs } from "react-router";
import { registerShop } from "../services/shop.server";
import { getDefaultStoreDomainSync } from "../services/platform-settings.server";
import prisma from "../db.server";
export const loader = async ({ request }: LoaderFunctionArgs) => {
const url = new URL(request.url);
const rawShop = url.searchParams.get("shop") || getDefaultStoreDomainSync();
const cleanShop = (rawShop || "").includes(".") ? rawShop : `${rawShop}.myshopify.com`;
const code = url.searchParams.get("code");
const returnTo = url.searchParams.get("returnTo") || "/app";
const appUrl = process.env.SHOPIFY_APP_URL || url.origin;
const redirectUri = `${appUrl}/auth/callback`;
const apiKey = process.env.SHOPIFY_API_KEY || "ff484160a48beda29e79144ee4e9a819";
const scopes = process.env.SCOPES || "read_products,read_content,read_orders,write_orders,read_customers,write_customers,read_discounts";
// 1. If no authorization code, initiate Shopify OAuth authorize with iframe breakout
if (!code) {
const authorizeUrl = `https://${cleanShop}/admin/oauth/authorize?client_id=${apiKey}&scope=${encodeURIComponent(scopes)}&redirect_uri=${encodeURIComponent(redirectUri)}`;
return new Response(
`
Redirecting to Shopify Authorization...
🔒
Connecting to Shopify
Redirecting to authorize permissions for ${cleanShop}. If the page does not open automatically, please click below:
Authorize App on Shopify →
`,
{
status: 200,
headers: { "Content-Type": "text/html; charset=utf-8" },
}
);
}
// 2. Exchange authorization code for official offline access token
let accessToken = "";
const apiSecret = process.env.SHOPIFY_API_SECRET || "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";
if (code && cleanShop && apiSecret) {
try {
const tokenParams = new URLSearchParams({
client_id: apiKey,
client_secret: apiSecret,
code,
expiring: "1",
});
const tokenRes = await fetch(`https://${cleanShop}/admin/oauth/access_token`, {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: tokenParams.toString(),
});
if (tokenRes.ok) {
const tokenData = await tokenRes.json();
if (tokenData.access_token) {
accessToken = tokenData.access_token;
const refreshToken = tokenData.refresh_token || null;
const expiresIn = Number(tokenData.expires_in || 3600);
const tokenExpiresAt = new Date(Date.now() + expiresIn * 1000);
console.log("[OAuth exchange SUCCESS]: Generated and stored expiring access token starting with:", accessToken.slice(0, 8), "for shop:", cleanShop);
await registerShop({
shopifyDomain: cleanShop,
accessToken,
refreshToken: refreshToken || undefined,
tokenExpiresAt,
scopes,
isReinstall: true,
});
}
} else {
const errorText = await tokenRes.text();
console.warn("[OAuth access_token HTTP error]:", tokenRes.status, errorText);
}
} catch (err: any) {
console.warn("[OAuth token exchange warning]:", err?.message);
}
// Also store session record for maximum framework compatibility
try {
await (prisma as any).session?.upsert({
where: { id: `offline_${cleanShop}` },
update: {
shop: cleanShop,
state: "active",
isOnline: false,
scope: scopes,
accessToken,
},
create: {
id: `offline_${cleanShop}`,
shop: cleanShop,
state: "active",
isOnline: false,
scope: scopes,
accessToken,
},
});
} catch {}
}
// 3. Break back into Shopify Admin embedded frame
const shopSubdomain = cleanShop.replace(/\.myshopify\.com$/i, "");
const appHandle = process.env.SHOPIFY_APP_HANDLE || "commercebot-ai";
// Clean sub-path for embedded app (e.g. /billing or root)
const subPath = returnTo.replace(/^\/app\/?/, "");
const embeddedSubPath = subPath ? (subPath.startsWith("/") ? subPath : `/${subPath}`) : "";
// Direct official Shopify Admin embedded app URL (prevents /apps/app 404)
const targetAppUrl = `https://admin.shopify.com/store/${shopSubdomain}/apps/${appHandle}${embeddedSubPath}`;
return new Response(
`
Redirecting to App...
`,
{
status: 200,
headers: { "Content-Type": "text/html; charset=utf-8" },
}
);
};