Skip to main content

Initialization

RechargeSession​

Add a rechargeSession module that can be used to store the Recharge Session in your app. This uses secure cookie storage but can be customized to support other implementations.

/app/lib/rechargeSession.server.js

import { createCookieSessionStorage } from '@shopify/remix-oxygen';

// Recharge session is good for 60 minutes so set to 55 minutes to avoid race conditions
const RECHARGE_SESSION_DURATION = 60 * 55;

/**
 * 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 RechargeSession {
  #sessionStorage;
  #session;

  /**
   * @param {SessionStorage} sessionStorage
   * @param {Session} session
   */
  constructor(sessionStorage, session) {
    this.#sessionStorage = sessionStorage;
    this.#session = session;
  }

  /**
   * @static
   * @param {Request} request
   * @param {string[]} secrets
   */
  static async init(request, secrets) {
    const storage = createCookieSessionStorage({
      cookie: {
        name: 'session_recharge',
        httpOnly: true,
        path: '/',
        sameSite: 'lax',
        secrets,
        maxAge: RECHARGE_SESSION_DURATION,
      },
    });

    const session = await storage.getSession(request.headers.get('Cookie')).catch(() => storage.getSession());

    return new this(storage, session);
  }

  get has() {
    return this.#session.has;
  }

  get get() {
    return this.#session.get;
  }

  get flash() {
    return this.#session.flash;
  }

  get unset() {
    return this.#session.unset;
  }

  get set() {
    return this.#session.set;
  }

  destroy() {
    return this.#sessionStorage.destroySession(this.#session);
  }

  commit() {
    return this.#sessionStorage.commitSession(this.#session);
  }
}

InitRecharge​

We recommend only using the JavaScript SDK from the server context of a Hydrogen app. You can initialize the Recharge SDK from the context.js file in the root directory of your Hydrogen app so the rest of your app can take advantage of the single initialization.

Import initRecharge and initialize it within a component using the PUBLIC_STORE_DOMAIN & PUBLIC_RECHARGE_STOREFRONT_ACCESS_TOKEN environment variables.

context.js

import { createHydrogenContext } from '@shopify/hydrogen';
import { AppSession } from '~/lib/session';
import { CART_QUERY_FRAGMENT } from '~/lib/fragments';
import { initRecharge } from '@rechargeapps/storefront-client';
import { RechargeSession } from '~/lib/rechargeSession.server';

/**
 * The context implementation is separate from server.ts
 * so that type can be extracted for AppLoadContext
 * @param {Request} request
 * @param {Env} env
 * @param {ExecutionContext} executionContext
 * @param {RechargeSession} rechargeSession
 */
export async function createAppLoadContext(request, env, executionContext) {
  /**
   * Open a cache instance in the worker and a custom session instance.
   */
  if (!env?.SESSION_SECRET) {
    throw new Error('SESSION_SECRET environment variable is not set');
  }

  const waitUntil = executionContext.waitUntil.bind(executionContext);

  /** Initialize Recharge JavaScript SDK */
  initRecharge({
    storeIdentifier: env.PUBLIC_STORE_DOMAIN,
    storefrontAccessToken: env.PUBLIC_RECHARGE_STOREFRONT_ACCESS_TOKEN,
    appName: 'appName',
    appVersion: '1.0.0',
  });

  const [cache, session, rechargeSession] = await Promise.all([
    caches.open('hydrogen'),
    AppSession.init(request, [env.SESSION_SECRET]),
    RechargeSession.init(request, [env.SESSION_SECRET]),
  ]);

  const hydrogenContext = createHydrogenContext({
    env,
    request,
    cache,
    waitUntil,
    session,
    i18n: { language: 'EN', country: 'US' },
    cart: {
      queryFragment: CART_QUERY_FRAGMENT,
    },
  });

  return {
    ...hydrogenContext,
    // declare additional Remix loader context
    rechargeSession,
  };
}