feat: access session on ssr #26 (NTR)

.changeset/small-kiwis-remember.md

@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/types": minor
+---
+
+removed wrong `User` type and replaces with proper `Customer`

.changeset/small-mayflies-add.md

@@ -0,0 +1,6 @@
+---
+"@shopware-pwa/composables-next": minor
+"vue-demo-store": minor
+---
+
+improved session context to be better handled on SSR

.changeset/thirty-dodos-drop.md

@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/nuxt3-module": patch
+---
+
+`swSessionContext` available also in Nuxt `useState`

.changeset/wild-gifts-brake.md

@@ -0,0 +1,5 @@
+---
+"vue-demo-store": minor
+---
+
+added to template `useAuthGuard` which redirects to homepage if user is not logged in. You can adjust it to your desired behaviour.

packages/composables/build.config.ts

@@ -10,5 +10,6 @@ export default defineBuildConfig({
     "@shopware-pwa/api-client",
     "@shopware-pwa/helpers-next",
     "@shopware-pwa/types",
+    "@vueuse/core",
   ],
 });

packages/composables/src/internal/_useContext.ts

@@ -3,12 +3,26 @@ import { inject, provide, ref, Ref, unref } from "vue";
 /**
  * Internal context helper
  */
-export function _useContext<T>(injectionName: string, context?: Ref<T> | T) {
-  const isNewContext = !!context;
+export function _useContext<T>(
+  injectionName: string,
+  params?: {
+    context?: Ref<T> | T;
+    replace?: T;
+  }
+) {
+  const isNewContext = !!params?.context;
+
   const _context: Ref<T> = isNewContext
-    ? (ref(unref(context)) as Ref<T>)
-    : (inject(injectionName) as Ref<T>);
+    ? (ref(unref(params?.context)) as Ref<T>)
+    : (inject(injectionName, ref()) as Ref<T>);
   provide(injectionName, _context);
 
+  /**
+   * Used for global context to replace it with new Value. Used mainly for session context
+   */
+  if (!!params?.replace) {
+    _context.value = unref(params.replace);
+  }
+
   return _context;
 }

packages/composables/src/useCategory.ts

@@ -7,7 +7,7 @@ export type UseCategoryReturn = {
 };
 
 export function useCategory(category?: Ref<Category>): UseCategoryReturn {
-  const _category = _useContext("category", category);
+  const _category = _useContext("category", { context: category });
   if (!_category.value) {
     // TODO link docs with composables context usage
     throw new Error("Category context is not provided.");

packages/composables/src/useNavigationContext.ts

@@ -12,7 +12,7 @@ export type UseNavigationContextReturn = {
 export function useNavigationContext(
   context?: Ref<SeoUrl | null>
 ): UseNavigationContextReturn {
-  const _context = _useContext("navigation", context);
+  const _context = _useContext("navigation", { context: context });
 
   const routeName = computed(() => _context.value?.routeName);
   const foreignKey = computed(() => _context.value?.foreignKey || "");

packages/composables/src/useProduct.ts

@@ -12,12 +12,14 @@ export function useProduct(
   product?: Ref<Product> | Product,
   configurator?: Ref<PropertyGroup[]> | PropertyGroup[]
 ): UseProductReturn {
-  const _product = _useContext("product", product);
+  const _product = _useContext("product", { context: product });
   if (!_product.value) {
     // TODO link docs with composables context usage
     throw new Error("Product context is not provided");
   }
-  const _configurator = _useContext("configurator", product && configurator);
+  const _configurator = _useContext("configurator", {
+    context: product && configurator,
+  });
 
   function changeVariant(variant: Partial<Product>) {
     _product.value = Object.assign({}, _product.value, variant);

packages/composables/src/useSessionContext.ts

@@ -19,7 +19,7 @@ import {
 } from "@shopware-pwa/api-client";
 import { useShopwareContext } from "./useShopwareContext";
 import { usePrice } from "./usePrice";
-import { useUser } from "./useUser";
+import { _useContext } from "./internal/_useContext";
 
 export type UseSessionContextReturn = {
   sessionContext: ComputedRef<SessionContext | undefined>;
@@ -46,7 +46,7 @@ export type UseSessionContextReturn = {
   onShippingMethodChange: (
     fn: (params: { shippingMethod: ShippingMethod }) => void
   ) => void;
-  userFromContext: ComputedRef<Customer | null>;
+  userFromContext: ComputedRef<Customer | undefined>;
 };
 
 interface IInterceptorCallbackFunction {
@@ -57,35 +57,30 @@ interface IInterceptorCallbackFunction {
  * Composable for session management. Options - {@link UseSessionContextReturn}
  * SessionContext contain all related data like user, currency, country, shippingMethod, paymentMethod etc.
  */
-export function useSessionContext(): UseSessionContextReturn {
+export function useSessionContext(
+  newContext?: SessionContext
+): UseSessionContextReturn {
   const { apiInstance } = useShopwareContext();
-  const { setUser } = useUser();
   const { init } = usePrice();
   // const { broadcast, intercept } = useIntercept();
 
-  // const { sharedRef } = useSharedState();
-  const storeSessionContext: Ref<SessionContext | any> = inject(
-    "swSessionContext",
-    ref()
-  );
-  provide("swSessionContext", storeSessionContext);
+  const _sessinContext = _useContext("swSessionContext", {
+    replace: newContext,
+  });
 
   const onCurrencyChange = (fn: IInterceptorCallbackFunction) => {}; // intercept(INTERCEPTOR_KEYS.SESSION_SET_CURRENCY, fn);
   const onPaymentMethodChange = (fn: IInterceptorCallbackFunction) => {}; // intercept(INTERCEPTOR_KEYS.SESSION_SET_PAYMENT_METHOD, fn);
   const onShippingMethodChange = (fn: IInterceptorCallbackFunction) => {}; // intercept(INTERCEPTOR_KEYS.SESSION_SET_SHIPPING_METHOD, fn);
 
-  const sessionContext = computed(() => storeSessionContext.value);
+  const sessionContext = computed(() => _sessinContext.value);
   const refreshSessionContext = async () => {
     try {
       const context = await getSessionContext(apiInstance);
-      storeSessionContext.value = context;
+      _sessinContext.value = context;
       init({
         currencyPosition: context.currency.position,
         currencySymbol: context.currency.symbol,
       });
-      if (context.customer) {
-        setUser(context.customer);
-      }
     } catch (e) {
       console.error("[UseSessionContext][refreshSessionContext]", e);
     }

packages/composables/src/useUser.ts

@@ -15,16 +15,21 @@ import {
 import {
   Customer,
   CustomerRegistrationParams,
-  ClientApiError,
-  ShopwareError,
   Country,
   Salutation,
   ShopwareSearchParams,
   PaymentMethodTranslation,
   BillingAddress,
   ShippingAddress,
 } from "@shopware-pwa/types";
-import { useShopwareContext, useCart, useInternationalization } from ".";
+import {
+  useShopwareContext,
+  useCart,
+  useInternationalization,
+  useSessionContext,
+} from ".";
+import { _useContext } from "./internal/_useContext";
+import { syncRefs } from "@vueuse/core";
 
 export type UseUserReturn = {
   login: (params: { username: string; password: string }) => Promise<void>;
@@ -44,25 +49,26 @@ export type UseUserReturn = {
   updatePersonalInfo: (personals: CustomerUpdateProfileParam) => Promise<void>;
   updateEmail: (updateEmailData: CustomerUpdateEmailParam) => Promise<void>;
   setDefaultPaymentMethod: (paymentMethodId: string) => Promise<void>;
-  setUser: (user: Partial<Customer>) => void;
   userDefaultPaymentMethod: ComputedRef<PaymentMethodTranslation | null>;
   userDefaultBillingAddress: ComputedRef<BillingAddress | null>;
   userDefaultShippingAddress: ComputedRef<ShippingAddress | null>;
 };
 
-const storeUser = ref<Partial<Customer>>();
-
 /**
  * Composable for user management. Options - {@link UseUserReturn}
  */
 export function useUser(): UseUserReturn {
   const { apiInstance } = useShopwareContext();
+  const { userFromContext, refreshSessionContext } = useSessionContext();
+
+  const _user = _useContext<Customer | undefined>("customer");
+  syncRefs(userFromContext, _user, {
+    immediate: true,
+  });
+
   const { getStorefrontUrl } = useInternationalization();
   const { refreshCart } = useCart();
 
-  const setUser = (user: Partial<Customer>) => {
-    storeUser.value = user;
-  };
   const userDefaultPaymentMethod = computed(
     () => user.value?.defaultPaymentMethod?.translated || null
   );
@@ -74,14 +80,14 @@ export function useUser(): UseUserReturn {
   );
   const country: Ref<Country | null> = ref(null);
   const salutation: Ref<Salutation | null> = ref(null);
-  const user = computed(() => storeUser.value);
+  const user = computed(() => _user.value);
 
   async function login({
     username,
     password,
   }: { username?: string; password?: string } = {}): Promise<void> {
     await apiLogin({ username, password }, apiInstance);
-    await refreshUser();
+    await refreshSessionContext();
     refreshCart();
   }
 
@@ -92,13 +98,14 @@ export function useUser(): UseUserReturn {
       { ...params, storefrontUrl: getStorefrontUrl() } as any,
       apiInstance
     );
-    storeUser.value = customer;
+    _user.value = customer;
+    await refreshSessionContext();
     return customer;
   }
 
   async function logout(): Promise<void> {
     await apiLogout(apiInstance);
-    await refreshUser();
+    await refreshSessionContext();
     refreshCart();
   }
 
@@ -112,9 +119,9 @@ export function useUser(): UseUserReturn {
         ),
         apiInstance
       );
-      storeUser.value = (user as Customer) || {};
+      _user.value = user as Customer;
     } catch (e) {
-      storeUser.value = {};
+      _user.value = undefined;
       console.error("[useUser][refreshUser]", e);
     }
   }
@@ -172,7 +179,6 @@ export function useUser(): UseUserReturn {
     salutation,
     loadCountry,
     country,
-    setUser,
     defaultBillingAddressId,
     defaultShippingAddressId,
     userDefaultPaymentMethod,

packages/nuxt3-module/plugin.ts

@@ -51,7 +51,10 @@ const ShopwarePlugin = {
       shopwareDefaults: options.apiDefaults,
     });
     app.provide("shopware", shopwareContext);
-    app.provide("swSessionContext", ref());
+    const sessionContextData = ref();
+    app.provide("swSessionContext", sessionContextData);
+    // in case someone tries to use it in nuxt specific code like middleware
+    useState("swSessionContext", () => sessionContextData);
   },
 };
 

packages/types/shopware-6-client/models/content/media/Media.d.ts

@@ -15,7 +15,7 @@ import { Document } from "../../checkout/document/Document";
 import { ProductManufacturer } from "../product/ProductManufacturer";
 import { OrderLineItem } from "../../checkout/order/OrderLineItem";
 import { CustomField } from "../../common/CustomField";
-import { User } from "../../system/user/User";
+import { Customer } from "../../checkout/customer/Customer";
 
 /**
  * @public
@@ -33,12 +33,12 @@ export type Media = {
   alt: string | null;
   url: string;
   fileName: string;
-  user: User;
+  user: Customer;
   translations: MediaTranslation[] | null;
   categories: Category[] | null;
   productManufacturers: ProductManufacturer[] | null;
   productMedia: ProductMedia | null;
-  avatarUser: User | null;
+  avatarUser: Customer | null;
   thumbnails: MediaThumbnail[] | null;
   mediaFolderId: string | null;
   mediaFolder: MediaFolder | null;

packages/types/shopware-6-client/models/system/locale/Locale.d.ts

@@ -1,7 +1,7 @@
 import { LocaleTranslation } from "./LocaleTranslation";
-import { User } from "../user/User";
 import { Language } from "../../framework/language/Language";
 import { CustomField } from "../../common/CustomField";
+import { Customer } from "../../checkout/customer/Customer";
 
 /**
  * @public
@@ -11,7 +11,7 @@ export type Locale = {
   name: string | null;
   territory: string | null;
   translations: LocaleTranslation[] | null;
-  users: User[] | null;
+  users: Customer[] | null;
   languages: Language[] | null;
   customFields: CustomField | null;
 };

packages/types/shopware-6-client/models/system/state-machine/StateMachineHistory.d.ts

@@ -1,6 +1,6 @@
 import { StateMachineState } from "./StateMachineState";
 import { StateMachine } from "./StateMachine";
-import { User } from "../user/User";
+import { Customer } from "../../checkout/customer/Customer";
 
 /**
  * @public
@@ -15,5 +15,5 @@ export type StateMachineHistory = {
   toStateId: string;
   toStateMachineState: StateMachineState | null;
   userId: string;
-  user: User | null;
+  user: Customer | null;
 };

packages/types/shopware-6-client/response/SessionContext.d.ts

@@ -2,10 +2,10 @@ import { PaymentMethod } from "../models/checkout/payment/PaymentMethod";
 import { ShippingMethod } from "../models/checkout/shipping/ShippingMethod";
 import { ShippingAddress } from "../models/checkout/customer/ShippingAddress";
 import { Country } from "../models/system/country/Country";
-import { User } from "../models/system/user/User";
 import { Currency } from "../models/system/currency/Currency";
 import { Language } from "../models/framework/language/Language";
 import { Category } from "../models/content/category/Category";
+import { Customer } from "../models/checkout/customer/Customer";
 
 export type ContextTokenResponse = {
   contextToken: string;
@@ -112,7 +112,7 @@ export type SessionContext = {
     id: string;
     name: string;
   }[];
-  customer?: User;
+  customer?: Customer;
   paymentMethod: PaymentMethod;
   shippingMethod: ShippingMethod;
   shippingLocation: {