Add environment variable for cookie max age and update dependencies

.env.example

@@ -1,5 +1,7 @@
 # Randomly generated secret key for cookies signing
 REMIX_COOKIE_SECRET="sEcReT"
+REMIX_COOKIE_MAXAGE="604800" # 7 days
+VITE_GRPC_ENDPOINT="${GOMMERCE_GRPC_ENDPOINT}"
 GOMMERCE_GRPC_ENDPOINT="http://localhost:50050"
 GOMMERCE_AUTH_REALM="admin"
 # Client basic auth token, calculated as btoa(secret_key + ':' + secret_code)

app/clients/grpc.client.ts

@@ -1,16 +1,7 @@
 import invariant from "tiny-invariant";
 import type { MessageType, Message } from "@bufbuild/protobuf";
 
-invariant(window.env.GOMMERCE_GRPC_ENDPOINT, "environment variable GOMMERCE_GRPC_ENDPOINT is required.");
-
-declare global {
-    interface Window {
-        env: {
-            [key: string]: string | undefined;
-            GOMMERCE_GRPC_ENDPOINT: string;
-        };
-    }
-}
+invariant(import.meta.env.VITE_GRPC_ENDPOINT, "environment variable VITE_GRPC_ENDPOINT is required.");
 
 export async function fetchUnary<I extends Message<I>, O extends Message<O>>(
     req: Message<I>,
@@ -19,7 +10,7 @@ export async function fetchUnary<I extends Message<I>, O extends Message<O>>(
     mn: string,
     rs: AbortSignal | null = null,
 ): Promise<O> {
-    const resp = await fetch(`${window.env.GOMMERCE_GRPC_ENDPOINT}/${sn}/${mn}`, {
+    const resp = await fetch(`${import.meta.env.VITE_GRPC_ENDPOINT}/${sn}/${mn}`, {
         method: "POST",
         body: req.toJsonString(),
         headers: { "Content-Type": "application/json" },
@@ -36,7 +27,7 @@ export async function* fetchStream<I extends Message<I>, O extends Message<O>>(
     rs: AbortSignal | null = null,
 ): AsyncGenerator<O> {
     try {
-        const resp = await fetch(`${window.env.GOMMERCE_GRPC_ENDPOINT}/${sn}/${mn}`, {
+        const resp = await fetch(`${import.meta.env.VITE_GRPC_ENDPOINT}/${sn}/${mn}`, {
             method: "POST",
             body: req.toJsonString(),
             headers: { "Content-Type": "application/json" },

app/clients/state.server.ts

@@ -1,6 +1,7 @@
 import type { SessionData, SessionStorage, SessionIdStorageStrategy } from "@remix-run/node";
 import { createSessionStorage } from "@remix-run/node";
-import { stateStoreServiceClient as stateStore, snowflakeServiceClient as snowflake } from "~/clients/grpc.server";
+import { stateStoreServiceClient as stateStore } from "~/clients/grpc.server";
+import { v4 as uuidv4 } from "uuid";
 
 interface CookieSessionStorageOptions {
     bucket?: string;
@@ -17,7 +18,7 @@ export function createStateSessionStorage<Data = SessionData, FlashData = Data>(
         const key = `${bucket}:${id}`;
         const metadata: { [key: string]: string } = {};
         if (expires) {
-            metadata["ttlInSeconds"] = (expires.getTime() - Date.now()).toString(10);
+            metadata["ttlInSeconds"] = Math.floor((expires.getTime() - Date.now()) / 1000).toString(10);
         }
         await stateStore.setState(
             {
@@ -32,7 +33,7 @@ export function createStateSessionStorage<Data = SessionData, FlashData = Data>(
     return createSessionStorage<Data, FlashData>({
         cookie: options?.cookie,
         async createData(data, expires) {
-            const { value: id } = await snowflake.nextHex({});
+            const id = uuidv4();
             await upsert(id, JSON.stringify(data || null), expires);
             return id;
         },

app/root.tsx

@@ -1,14 +1,6 @@
 import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node";
 import { cssBundleHref } from "@remix-run/css-bundle";
-import {
-    Links,
-    Meta,
-    Scripts,
-    ScrollRestoration,
-    isRouteErrorResponse,
-    useLoaderData,
-    useRouteError,
-} from "@remix-run/react";
+import { Links, Meta, Scripts, ScrollRestoration, isRouteErrorResponse, useRouteError } from "@remix-run/react";
 import { authorize } from "~/secure.server";
 import Outlet from "~/partials/layout";
 import styles from "~/styles/global.css?url";
@@ -23,7 +15,6 @@ export async function loader({ request }: LoaderFunctionArgs) {
     return {
         user: identity?.user,
         scope: identity?.scope,
-        env: { GOMMERCE_GRPC_ENDPOINT: process.env.GOMMERCE_GRPC_ENDPOINT },
     };
 }
 
@@ -46,13 +37,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
 }
 
 export default function App() {
-    const { env } = useLoaderData<typeof loader>();
-    return (
-        <>
-            <Outlet />
-            <script dangerouslySetInnerHTML={{ __html: `window.env = ${JSON.stringify(env)};` }} />
-        </>
-    );
+    return <Outlet />;
 }
 
 export function ErrorBoundary() {

app/session.server.ts

@@ -7,7 +7,7 @@ export const { getSession, commitSession, destroySession } = createStateSessionS
     cookie: {
         name: "__state__",
         httpOnly: true,
-        maxAge: 60 * 60 * 24 * 7, // 7 days
+        maxAge: parseInt(process.env.REMIX_COOKIE_MAXAGE ?? "604800"), // default to 7 days
         path: "/",
         sameSite: "lax",
         secrets: [process.env.REMIX_COOKIE_SECRET],

package.json

@@ -26,6 +26,7 @@
     "react-dom": "~18.2.0",
     "remix-utils": "~7.5.0",
     "tiny-invariant": "~1.3.3",
+    "uuid": "~9.0.1",
     "zod": "~3.22.4"
   },
   "devDependencies": {
@@ -34,6 +35,7 @@
     "@tailwindcss/typography": "~0.5.12",
     "@types/react": "~18.2.73",
     "@types/react-dom": "~18.2.23",
+    "@types/uuid": "~9.0.8",
     "autoprefixer": "~10.4.19",
     "daisyui": "~4.9.0",
     "eslint": "~8.57.0",