Skip to content
Frend Front

Client Side Sessions

Client side sessions are automatically managed by the @frend-digital/centra/client entry point. This is the entry point for the client side of the Centra API.

If you are using the auth() or geolocation() middleware in your Next.js project, then all client side sessions will re-use the session cookie set by the middleware.

The <CentraServerProvider /> Recommended

This is the recommended approach for server side rendering. It requires you to pass in a token prop to the provider. This token is used to authenticate against Centra APIs.

src/app/_RootLayout.tsx
export default async function RootLayout({
  children,
  locale: propsLocale,
}: Readonly<{
  children: React.ReactNode;
  locale?: string;
}>) {
  const locale = propsLocale || (await getLocale());
  setRequestLocale(locale);


  const messages = await getMessages();


  return (
    <html lang={getLang(locale)}>
      <body className={`${geistSans.variable} ${geistMono.variable}`}>
        <IntlProvider locale={locale} routing={routing} messages={messages}>
          <Providers>
            <CentraLoader>
              <Header />
              {children}
              <Footer />
              <Modals />
            </CentraLoader>
          </Providers>
        </IntlProvider>
      </body>
    </html>
  );
}


const CentraLoader = async ({ children }: { children: React.ReactNode }) => {
  const geo = await geolocation(); // Get the token in any way you like
  if (!geo?.token)
    return (
      <div>
        <h1>Token is missing. Please refresh the page.</h1>
        <p>
          This is a bug. Please click{" "}
          <form>
            <a href="/en-US">here</a>
          </form>{" "}
          to refresh the page. If the problem persists, please contact support.
        </p>
      </div>
    );


  return (
    <CentraServerProvider
      token={geo?.token}
      apiUrl={env.NEXT_PUBLIC_CENTRA_CHECKOUT}
    >
      {children}
    </CentraServerProvider>
  );
};

The <CentraClientProvider />

The <CentraClientProvider /> is a React component that wraps your application and provides the Centra session to your application. It will attempt to read the server side session cookie and set it to the client side session, otherwise it will fallback to client only session management.

Usage

First create a Client Side _Providers.tsx file in your project. This file will be used to wrap your application with the CentraProvider and QueryClientProvider.

src/app/_Providers.tsx
"use client";


import { CentraClientProvider } from "@frend-digital/centra/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";


interface Props {
  children: React.ReactNode;
}


export const Providers = ({ children }: Props) => {
  const [queryClient] = useState(() => new QueryClient());


  return (
    <QueryClientProvider client={queryClient}>
      <CentraClientProvider>{children}</CentraProvider>
    </QueryClientProvider>
  );
};

Using the client side hooks

Every client side interaction with Centra has a corresponding hook. This includes, adding a product to cart, getting the current cart, getting the current user, etc. Once your app is wrapped in the CentraProvider.

Example, displaying the current cart item count:

src/components/CartButton.tsx
"use client";
import React from "react";


export const CartButton = () => {
  const { data: itemCount } = centraClient.useSelection({
    select: (state) => state.selection.items.length,
  });
  return <button onClick={() => openCart()}>Cart ({itemCount})</button>;
};