Gerhard Scheikl
83 lines
2.8 KiB
TypeScript
83 lines
2.8 KiB
TypeScript
import { AppProvider } from "@shopify/shopify-app-react-router/react";
|
|
import { useState } from "react";
|
|
import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router";
|
|
import { Form, useActionData, useLoaderData } from "react-router";
|
|
|
|
import { login } from "../../shopify.server";
|
|
import { loginErrorMessage } from "./error.server";
|
|
|
|
function enforceAllowedShop(request: Request) {
|
|
const allowedShop = process.env.ALLOWED_SHOP?.trim();
|
|
if (!allowedShop) return;
|
|
const url = new URL(request.url);
|
|
const fromQuery = url.searchParams.get("shop");
|
|
let fromBody: string | null = null;
|
|
// Action requests submit the shop in the form body; we re-read it here.
|
|
// (request.formData() can only be consumed once, so we clone.)
|
|
if (request.method === "POST") {
|
|
// We can't await the clone here without making this async; instead the
|
|
// caller awaits the actual action and we re-validate the redirect target
|
|
// via the query string check above. The action wrapper below also runs
|
|
// a body check before delegating to `login()`.
|
|
}
|
|
if (fromQuery && fromQuery.toLowerCase() !== allowedShop.toLowerCase() && !fromBody) {
|
|
throw new Response("This app is private.", { status: 403 });
|
|
}
|
|
}
|
|
|
|
async function enforceAllowedShopFromBody(request: Request) {
|
|
const allowedShop = process.env.ALLOWED_SHOP?.trim();
|
|
if (!allowedShop) return request;
|
|
const cloned = request.clone();
|
|
const form = await cloned.formData();
|
|
const shop = (form.get("shop") ?? "").toString().trim().toLowerCase();
|
|
if (shop && shop !== allowedShop.toLowerCase()) {
|
|
throw new Response("This app is private.", { status: 403 });
|
|
}
|
|
return request;
|
|
}
|
|
|
|
export const loader = async ({ request }: LoaderFunctionArgs) => {
|
|
enforceAllowedShop(request);
|
|
const errors = loginErrorMessage(await login(request));
|
|
|
|
return { errors, allowedShop: process.env.ALLOWED_SHOP ?? null };
|
|
};
|
|
|
|
export const action = async ({ request }: ActionFunctionArgs) => {
|
|
await enforceAllowedShopFromBody(request);
|
|
const errors = loginErrorMessage(await login(request));
|
|
|
|
return {
|
|
errors,
|
|
};
|
|
};
|
|
|
|
export default function Auth() {
|
|
const loaderData = useLoaderData<typeof loader>();
|
|
const actionData = useActionData<typeof action>();
|
|
const [shop, setShop] = useState(loaderData.allowedShop ?? "");
|
|
const { errors } = actionData || loaderData;
|
|
|
|
return (
|
|
<AppProvider embedded={false}>
|
|
<s-page>
|
|
<Form method="post">
|
|
<s-section heading="Log in">
|
|
<s-text-field
|
|
name="shop"
|
|
label="Shop domain"
|
|
details="example.myshopify.com"
|
|
value={shop}
|
|
onChange={(e) => setShop(e.currentTarget.value)}
|
|
autocomplete="on"
|
|
error={errors.shop}
|
|
></s-text-field>
|
|
<s-button type="submit">Log in</s-button>
|
|
</s-section>
|
|
</Form>
|
|
</s-page>
|
|
</AppProvider>
|
|
);
|
|
}
|