security: restrict installs to ALLOWED_SHOP and remove generic landing form

app/routes/_index/route.tsx

@@ -1,56 +1,41 @@
 import type { LoaderFunctionArgs } from "react-router";
-import { redirect, Form, useLoaderData } from "react-router";
-
-import { login } from "../../shopify.server";
+import { redirect, useLoaderData } from "react-router";
 
 import styles from "./styles.module.css";
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   const url = new URL(request.url);
+  const allowedShop = process.env.ALLOWED_SHOP?.trim();
+  const shop = url.searchParams.get("shop");
 
-  if (url.searchParams.get("shop")) {
-    throw redirect(`/app?${url.searchParams.toString()}`);
+  // If a shop param is present and it's the allow-listed merchant, send them
+  // straight into the embedded app. Any other shop is rejected so this URL
+  // can't be used to install the app on arbitrary stores.
+  if (shop) {
+    if (!allowedShop || shop.toLowerCase() === allowedShop.toLowerCase()) {
+      throw redirect(`/app?${url.searchParams.toString()}`);
+    }
+    throw new Response("This app is private and not available for installation.", { status: 403 });
   }
 
-  return { showForm: Boolean(login) };
+  return { allowedShop: allowedShop ?? null };
 };
 
 export default function App() {
-  const { showForm } = useLoaderData<typeof loader>();
+  const { allowedShop } = useLoaderData<typeof loader>();
 
   return (
     <div className={styles.index}>
       <div className={styles.content}>
-        <h1 className={styles.heading}>A short heading about [your app]</h1>
+        <h1 className={styles.heading}>LinumIQ Invoice</h1>
         <p className={styles.text}>
-          A tagline about [your app] that describes your value proposition.
+          Private Shopify app for issuing GoBD-compliant PDF invoices.
+        </p>
+        <p className={styles.text}>
+          {allowedShop
+            ? `This installation is reserved for ${allowedShop}. Open the app from the Shopify admin.`
+            : "Open the app from the Shopify admin."}
         </p>
-        {showForm && (
-          <Form className={styles.form} method="post" action="/auth/login">
-            <label className={styles.label}>
-              <span>Shop domain</span>
-              <input className={styles.input} type="text" name="shop" />
-              <span>e.g: my-shop-domain.myshopify.com</span>
-            </label>
-            <button className={styles.button} type="submit">
-              Log in
-            </button>
-          </Form>
-        )}
-        <ul className={styles.list}>
-          <li>
-            <strong>Product feature</strong>. Some detail about your feature and
-            its benefit to your customer.
-          </li>
-          <li>
-            <strong>Product feature</strong>. Some detail about your feature and
-            its benefit to your customer.
-          </li>
-          <li>
-            <strong>Product feature</strong>. Some detail about your feature and
-            its benefit to your customer.
-          </li>
-        </ul>
       </div>
     </div>
   );

app/routes/auth.login/route.tsx

@@ -6,13 +6,46 @@ 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 };
+  return { errors, allowedShop: process.env.ALLOWED_SHOP ?? null };
 };
 
 export const action = async ({ request }: ActionFunctionArgs) => {
+  await enforceAllowedShopFromBody(request);
   const errors = loginErrorMessage(await login(request));
 
   return {
@@ -23,7 +56,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 export default function Auth() {
   const loaderData = useLoaderData<typeof loader>();
   const actionData = useActionData<typeof action>();
-  const [shop, setShop] = useState("");
+  const [shop, setShop] = useState(loaderData.allowedShop ?? "");
   const { errors } = actionData || loaderData;
 
   return (