Merge pull request #214 from Shopify/jl-refactor-session

Introduce injected `session` util in user-code

packages/hydrogen-remix/src/server.ts

@@ -26,6 +26,7 @@ export function createRequestHandler(
       ...options
     }: Omit<Parameters<typeof handleRequest>[1], 'loadContext'> &
       HydrogenHandlerParams,
+    customContext?: Record<string, any>,
   ) => {
     try {
       if (!cache && !!globalThis.caches) {
@@ -42,6 +43,7 @@ export function createRequestHandler(
           }),
           ...context,
           cache,
+          ...customContext,
         },
       });
 

templates/demo-store/app/data/index.ts

@@ -27,7 +27,7 @@ import {
 } from '~/lib/utils';
 import invariant from 'tiny-invariant';
 import {logout} from '~/routes/account/__private/logout';
-import type {HydrogenContext} from '@shopify/hydrogen-remix';
+import type {AppLoadContext, HydrogenContext} from '@shopify/hydrogen-remix';
 import {type Params} from '@remix-run/react';
 
 export interface CountriesData {
@@ -932,9 +932,8 @@ export async function getCustomerOrder(
 }
 
 export async function getCustomer(
-  context: HydrogenContext,
+  context: AppLoadContext & HydrogenContext,
   {
-    request,
     customerAccessToken,
     params,
   }: {
@@ -960,7 +959,7 @@ export async function getCustomer(
    * If the customer failed to load, we assume their access token is invalid.
    */
   if (!data || !data.customer) {
-    throw await logout(request, context, params);
+    throw await logout(context, params);
   }
 
   return data.customer;

templates/demo-store/app/lib/session.server.ts

@@ -1,52 +1,57 @@
 import {
-  type AppLoadContext,
   createCookieSessionStorage,
   type SessionStorage,
+  type Session,
 } from '@shopify/hydrogen-remix';
 
-let sessionStorage: SessionStorage;
+/**
+ * This is a custom session implementation for your Hydrogen shop.
+ * Feel free to customize it to your needs, add helper methods, or
+ * swap out the cookie-based implementation with something else!
+ */
+export class HydrogenSession {
+  constructor(
+    private sessionStorage: SessionStorage,
+    private session: Session,
+  ) {}
+
+  static async init(request: Request, secrets: string[]) {
+    const storage = createCookieSessionStorage({
+      cookie: {
+        name: 'session',
+        httpOnly: true,
+        path: '/',
+        sameSite: 'lax',
+        secrets,
+      },
+    });
+
+    const session = await storage.getSession(request.headers.get('Cookie'));
+
+    return new this(storage, session);
+  }
+
+  get(key: string) {
+    return this.session.get(key);
+  }
+
+  destroy() {
+    return this.sessionStorage.destroySession(this.session);
+  }
 
-export async function getSession(
-  request: Request,
-  context: AppLoadContext & {env?: Record<string, string>},
-) {
-  if (!context.env?.ENCRYPTION_KEY) {
-    throw new Error('ENCRYPTION_KEY environment variable is not set');
+  flash(key: string, value: any) {
+    this.session.flash(key, value);
   }
 
-  sessionStorage ??= createCookieSessionStorage({
-    cookie: {
-      name: 'session',
-      httpOnly: true,
-      path: '/',
-      sameSite: 'lax',
-      secrets: [context.env.ENCRYPTION_KEY],
-    },
-  });
-
-  const session = await sessionStorage.getSession(
-    request.headers.get('Cookie'),
-  );
-
-  return {
-    async get(key: string): Promise<any> {
-      return await session.get(key);
-    },
-
-    set(key: string, value: any): void {
-      session.set(key, value);
-    },
-
-    flash(key: string, value: any): void {
-      session.flash(key, value);
-    },
-
-    unset(key: string): void {
-      session.unset(key);
-    },
-
-    async commit(): Promise<string> {
-      return await sessionStorage.commitSession(session);
-    },
-  };
+  unset(key: string) {
+    this.session.unset(key);
+  }
+
+  set(key: string, value: any) {
+    this.session.set(key, value);
+  }
+
+  commit() {
+    return this.sessionStorage.commitSession(this.session);
+  }
 }

templates/demo-store/app/root.tsx

@@ -20,7 +20,6 @@ import {Layout} from '~/components';
 import {getLayoutData, getCountries} from '~/data';
 import {GenericError} from './components/GenericError';
 import {NotFound} from './components/NotFound';
-import {getSession} from './lib/session.server';
 import {Seo, Debugger} from './lib/seo';
 
 import styles from './styles/app.css';
@@ -59,9 +58,8 @@ export const meta: MetaFunction = () => ({
   viewport: 'width=device-width,initial-scale=1',
 });
 
-export async function loader({request, context, params}: LoaderArgs) {
-  const session = await getSession(request, context);
-  const cartId = await session.get('cartId');
+export async function loader({context, params}: LoaderArgs) {
+  const cartId = await context.session.get('cartId');
 
   return defer({
     layout: await getLayoutData(context, params),

templates/demo-store/app/routes/__resources/cart/LinesAdd.tsx

@@ -9,7 +9,6 @@ import {
 } from '@remix-run/react';
 import {useIsHydrated} from '~/hooks/useIsHydrated';
 import invariant from 'tiny-invariant';
-import {getSession} from '~/lib/session.server';
 import type {SerializeFrom} from '@remix-run/server-runtime';
 import {
   type ActionArgs,
@@ -97,12 +96,10 @@ const ACTION_PATH = '/cart/LinesAdd';
  * action that handles cart create (with lines) and lines add
  */
 async function action({request, context, params}: ActionArgs) {
+  const {session} = context;
   const headers = new Headers();
 
-  const [session, formData] = await Promise.all([
-    getSession(request, context),
-    request.formData(),
-  ]);
+  const formData = await request.formData();
 
   const rawLines = formData.get('lines')
     ? (JSON.parse(String(formData.get('lines'))) as LinesAddLine[])

templates/demo-store/app/routes/account.tsx

@@ -27,14 +27,12 @@ import {FeaturedCollections} from '~/components/FeaturedCollections';
 import {type LoaderArgs, redirect, json, defer} from '@shopify/hydrogen-remix';
 import {flattenConnection} from '@shopify/hydrogen-react';
 import {getCustomer} from '~/data';
-import {getSession} from '~/lib/session.server';
 import {getFeaturedData} from './featured-products';
 
 export async function loader({request, context, params}: LoaderArgs) {
   const {pathname} = new URL(request.url);
-  const session = await getSession(request, context);
   const lang = params.lang;
-  const customerAccessToken = await session.get('customerAccessToken');
+  const customerAccessToken = await context.session.get('customerAccessToken');
   const isAuthenticated = Boolean(customerAccessToken);
   const loginPath = lang ? `${lang}/account/login` : '/account/login';
 

templates/demo-store/app/routes/account/__private/address/$id.tsx

@@ -16,7 +16,6 @@ import {
   updateCustomerAddress,
   updateCustomerDefaultAddress,
 } from '~/data';
-import {getSession} from '~/lib/session.server';
 import {getInputStyleClasses} from '~/lib/utils';
 import type {AccountOutletContext} from '../edit';
 
@@ -31,12 +30,9 @@ export const handle = {
 };
 
 export const action: ActionFunction = async ({request, context, params}) => {
-  const [formData, session] = await Promise.all([
-    request.formData(),
-    getSession(request, context),
-  ]);
+  const formData = await request.formData();
 
-  const customerAccessToken = await session.get('customerAccessToken');
+  const customerAccessToken = await context.session.get('customerAccessToken');
   invariant(customerAccessToken, 'You must be logged in to edit your account.');
 
   const addressId = formData.get('addressId');

templates/demo-store/app/routes/account/__private/edit.tsx

@@ -13,7 +13,6 @@ import clsx from 'clsx';
 import invariant from 'tiny-invariant';
 import {Button, Text} from '~/components';
 import {getCustomer, updateCustomer} from '~/data';
-import {getSession} from '~/lib/session.server';
 import {getInputStyleClasses} from '~/lib/utils';
 
 export interface AccountOutletContext {
@@ -48,12 +47,9 @@ export const handle = {
 };
 
 export const action: ActionFunction = async ({request, context, params}) => {
-  const [formData, session] = await Promise.all([
-    request.formData(),
-    getSession(request, context),
-  ]);
+  const formData = await request.formData();
 
-  const customerAccessToken = await session.get('customerAccessToken');
+  const customerAccessToken = await context.session.get('customerAccessToken');
 
   invariant(
     customerAccessToken,

templates/demo-store/app/routes/account/__private/logout.ts

@@ -4,14 +4,12 @@ import {
   redirect,
 } from '@shopify/hydrogen-remix';
 import {LoaderArgs} from '@remix-run/server-runtime';
-import {getSession} from '~/lib/session.server';
 
 export async function logout(
-  request: Request,
   context: AppLoadContext,
   params: LoaderArgs['params'],
 ) {
-  const session = await getSession(request, context);
+  const {session} = context;
   session.unset('customerAccessToken');
 
   return redirect(
@@ -28,6 +26,6 @@ export async function loader({params}: LoaderArgs) {
   return redirect(params.lang ? `${params.lang}/` : '/');
 }
 
-export const action: ActionFunction = async ({request, context, params}) => {
-  return logout(request, context, params);
+export const action: ActionFunction = async ({context, params}) => {
+  return logout(context, params);
 };

templates/demo-store/app/routes/account/__private/orders.$id.tsx

@@ -16,7 +16,6 @@ import type {
 } from '@shopify/hydrogen-react/storefront-api-types';
 import {Link, Heading, PageHeader, Text} from '~/components';
 import {getCustomerOrder} from '~/data';
-import {getSession} from '~/lib/session.server';
 
 export const meta: MetaFunction = ({data}) => ({
   title: `Order ${data?.order?.name}`,
@@ -32,8 +31,7 @@ export async function loader({request, context, params}: LoaderArgs) {
 
   invariant(orderToken, 'Order token is required');
 
-  const session = await getSession(request, context);
-  const customerAccessToken = await session.get('customerAccessToken');
+  const customerAccessToken = await context.session.get('customerAccessToken');
 
   if (!customerAccessToken) {
     return redirect(

templates/demo-store/app/routes/account/__public/activate.$id.$activationToken.tsx

@@ -8,7 +8,6 @@ import {
 import {Form, useActionData} from '@remix-run/react';
 import {useRef, useState} from 'react';
 import {activateAccount} from '~/data';
-import {getSession} from '~/lib/session.server';
 import {getInputStyleClasses} from '~/lib/utils';
 
 type ActionData = {
@@ -37,10 +36,7 @@ export const action: ActionFunction = async ({
     });
   }
 
-  const [formData, session] = await Promise.all([
-    request.formData(),
-    getSession(request, context),
-  ]);
+  const formData = await request.formData();
 
   const password = formData.get('password');
   const passwordConfirm = formData.get('passwordConfirm');
@@ -64,6 +60,8 @@ export const action: ActionFunction = async ({
       password,
     });
 
+    const {session} = context;
+
     session.set('customerAccessToken', accessToken);
 
     return redirect(lang ? `${lang}/account` : '/account', {

templates/demo-store/app/routes/account/__public/login.tsx

@@ -9,17 +9,15 @@ import {
 import {Form, useActionData, useLoaderData} from '@remix-run/react';
 import {useState} from 'react';
 import {login} from '~/data';
-import {getSession} from '~/lib/session.server';
 import {getInputStyleClasses} from '~/lib/utils';
 import {Link} from '~/components';
 
 export const handle = {
   isPublic: true,
 };
 
-export async function loader({request, context, params}: LoaderArgs) {
-  const session = await getSession(request, context);
-  const customerAccessToken = await session.get('customerAccessToken');
+export async function loader({context, params}: LoaderArgs) {
+  const customerAccessToken = await context.session.get('customerAccessToken');
 
   if (customerAccessToken) {
     return redirect(params.lang ? `${params.lang}/account` : '/account');
@@ -36,10 +34,7 @@ type ActionData = {
 const badRequest = (data: ActionData) => json(data, {status: 400});
 
 export const action: ActionFunction = async ({request, context, params}) => {
-  const [formData, session] = await Promise.all([
-    request.formData(),
-    getSession(request, context),
-  ]);
+  const formData = await request.formData();
 
   const email = formData.get('email');
   const password = formData.get('password');
@@ -57,6 +52,7 @@ export const action: ActionFunction = async ({request, context, params}) => {
 
   try {
     const customerAccessToken = await login(context, {email, password});
+    const {session} = context;
     session.set('customerAccessToken', customerAccessToken);
 
     return redirect(params.lang ? `${params.lang}/account` : '/account', {

templates/demo-store/app/routes/account/__public/recover.tsx

@@ -8,13 +8,11 @@ import {
 import {Form, useActionData} from '@remix-run/react';
 import {useState} from 'react';
 import {sendPasswordResetEmail} from '~/data';
-import {getSession} from '~/lib/session.server';
 import {Link} from '~/components';
 import {getInputStyleClasses} from '~/lib/utils';
 
-export async function loader({request, context, params}: LoaderArgs) {
-  const session = await getSession(request, context);
-  const customerAccessToken = await session.get('customerAccessToken');
+export async function loader({context, params}: LoaderArgs) {
+  const customerAccessToken = await context.session.get('customerAccessToken');
 
   if (customerAccessToken) {
     return redirect(params.lang ? `${params.lang}/account` : '/account');