feat: add storagePrefix option to react sdk

packages/libs/sdk-mixins/src/index.ts

@@ -29,3 +29,4 @@ export * from './mixins/cookieConfigMixin';
 export * from './mixins/injectNpmLibMixin';
 export * from './mixins/injectStyleMixin';
 export * from './mixins/cspNonceMixin';
+export * from './mixins/storagePrefixMixin';

packages/libs/sdk-mixins/src/mixins/storagePrefixMixin.ts

@@ -0,0 +1,13 @@
+import { createSingletonMixin, compose } from '@descope/sdk-helpers';
+import { missingAttrValidator } from './createValidateAttributesMixin/commonValidators';
+import { createValidateAttributesMixin } from './createValidateAttributesMixin';
+
+export const storagePrefixMixin = createSingletonMixin(
+  <T extends CustomElementConstructor>(superclass: T) => {
+    return class ProjectIdMixinClass extends superclass {
+      get storagePrefix() {
+        return this.getAttribute('storage-prefix') || '';
+      }
+    };
+  },
+);

packages/sdks/react-sdk/src/components/AccessKeyManagement.tsx

@@ -19,7 +19,7 @@ const AccessKeyManagementWC = lazy(async () => {
 const AccessKeyManagement = React.forwardRef<
   HTMLElement,
   AccessKeyManagementProps
->(({ logger, tenant, theme, debug, widgetId, styleId }, ref) => {
+>(({ logger, tenant, theme, debug, widgetId, styleId, storagePrefix }, ref) => {
   const [innerRef, setInnerRef] = useState(null);
 
   useImperativeHandle(ref, () => innerRef);
@@ -37,6 +37,7 @@ const AccessKeyManagement = React.forwardRef<
         baseStaticUrl={baseStaticUrl}
         baseCdnUrl={baseCdnUrl}
         innerRef={setInnerRef}
+        storagePrefix={storagePrefix}
         {...{
           // attributes
           'theme.attr': theme,

packages/sdks/react-sdk/src/components/ApplicationsPortal.tsx

@@ -19,7 +19,7 @@ const ApplicationsPortalWC = lazy(async () => {
 const ApplicationsPortal = React.forwardRef<
   HTMLElement,
   ApplicationsPortalProps
->(({ logger, theme, debug, widgetId, styleId }, ref) => {
+>(({ logger, theme, debug, widgetId, styleId, storagePrefix }, ref) => {
   const [innerRef, setInnerRef] = useState(null);
 
   useImperativeHandle(ref, () => innerRef);
@@ -36,6 +36,7 @@ const ApplicationsPortal = React.forwardRef<
         baseStaticUrl={baseStaticUrl}
         baseCdnUrl={baseCdnUrl}
         innerRef={setInnerRef}
+        storagePrefix={storagePrefix}
         {...{
           // attributes
           'theme.attr': theme,

packages/sdks/react-sdk/src/components/AuditManagement.tsx

@@ -17,7 +17,7 @@ const AuditManagementWC = lazy(async () => {
 });
 
 const AuditManagement = React.forwardRef<HTMLElement, AuditManagementProps>(
-  ({ logger, tenant, theme, debug, widgetId, styleId }, ref) => {
+  ({ logger, tenant, theme, debug, widgetId, styleId, storagePrefix }, ref) => {
     const [innerRef, setInnerRef] = useState(null);
 
     useImperativeHandle(ref, () => innerRef);
@@ -35,6 +35,7 @@ const AuditManagement = React.forwardRef<HTMLElement, AuditManagementProps>(
           baseStaticUrl={baseStaticUrl}
           baseCdnUrl={baseCdnUrl}
           innerRef={setInnerRef}
+          storagePrefix={storagePrefix}
           {...{
             // attributes
             'theme.attr': theme,

packages/sdks/react-sdk/src/components/AuthProvider/AuthProvider.tsx

@@ -39,6 +39,8 @@ interface IAuthProviderProps {
   // Use this option if the authentication is done via cookie, and configured with a different name
   // Currently, this is done using Descope Flows
   refreshCookieName?: string;
+  // A prefix to add to the key of the local storage when persisting tokens
+  storagePrefix?: string;
   // Function to get external token, for seamless migration from external system
   getExternalToken?: () => Promise<string>;
   children?: React.ReactNode;
@@ -58,6 +60,7 @@ const AuthProvider: FC<IAuthProviderProps> = ({
   refreshCookieName = '',
   getExternalToken = undefined,
   children = undefined,
+  storagePrefix = undefined,
 }) => {
   const [user, setUser] = useState<User>();
   const [session, setSession] = useState<string>();
@@ -82,6 +85,7 @@ const AuthProvider: FC<IAuthProviderProps> = ({
     keepLastAuthenticatedUserAfterLogout,
     refreshCookieName,
     getExternalToken,
+    storagePrefix,
   });
 
   useEffect(() => {

packages/sdks/react-sdk/src/components/AuthProvider/useSdk.ts

@@ -14,6 +14,7 @@ type Config = Pick<
   | 'keepLastAuthenticatedUserAfterLogout'
   | 'refreshCookieName'
   | 'getExternalToken'
+  | 'storagePrefix'
 >;
 
 export default ({
@@ -27,6 +28,7 @@ export default ({
   storeLastAuthenticatedUser,
   keepLastAuthenticatedUserAfterLogout,
   getExternalToken,
+  storagePrefix,
 }: Config): ReturnType<typeof createSdk> =>
   useMemo(() => {
     if (!projectId) {
@@ -44,6 +46,7 @@ export default ({
       storeLastAuthenticatedUser,
       keepLastAuthenticatedUserAfterLogout,
       getExternalToken,
+      storagePrefix,
     });
   }, [
     projectId,
@@ -56,4 +59,5 @@ export default ({
     // See: https://github.com/descope/etc/issues/11965
     JSON.stringify(sessionTokenViaCookie),
     getExternalToken,
+    storagePrefix,
   ]);

packages/sdks/react-sdk/src/components/RoleManagement.tsx

@@ -17,7 +17,7 @@ const RoleManagementWC = lazy(async () => {
 });
 
 const RoleManagement = React.forwardRef<HTMLElement, RoleManagementProps>(
-  ({ logger, tenant, theme, debug, widgetId, styleId }, ref) => {
+  ({ logger, tenant, theme, debug, widgetId, styleId, storagePrefix }, ref) => {
     const [innerRef, setInnerRef] = useState(null);
 
     useImperativeHandle(ref, () => innerRef);
@@ -35,6 +35,7 @@ const RoleManagement = React.forwardRef<HTMLElement, RoleManagementProps>(
           baseStaticUrl={baseStaticUrl}
           baseCdnUrl={baseCdnUrl}
           innerRef={setInnerRef}
+          storagePrefix={storagePrefix}
           {...{
             // attributes
             'theme.attr': theme,

packages/sdks/react-sdk/src/components/TenantProfile.tsx

@@ -16,7 +16,7 @@ const TenantProfileWC = lazy(async () => {
 });
 
 const TenantProfile = React.forwardRef<HTMLElement, TenantProfileProps>(
-  ({ logger, theme, debug, widgetId, styleId, tenant }, ref) => {
+  ({ logger, theme, debug, widgetId, styleId, tenant, storagePrefix }, ref) => {
     const [innerRef, setInnerRef] = useState(null);
 
     useImperativeHandle(ref, () => innerRef);
@@ -34,6 +34,7 @@ const TenantProfile = React.forwardRef<HTMLElement, TenantProfileProps>(
           baseCdnUrl={baseCdnUrl}
           styleId={styleId}
           tenant={tenant}
+          storagePrefix={storagePrefix}
           ref={setInnerRef}
           {...{
             'theme.attr': theme,

packages/sdks/react-sdk/src/components/UserManagement.tsx

@@ -17,7 +17,7 @@ const UserManagementWC = lazy(async () => {
 });
 
 const UserManagement = React.forwardRef<HTMLElement, UserManagementProps>(
-  ({ logger, tenant, theme, debug, widgetId, styleId }, ref) => {
+  ({ logger, tenant, theme, debug, widgetId, styleId, storagePrefix }, ref) => {
     const [innerRef, setInnerRef] = useState(null);
 
     useImperativeHandle(ref, () => innerRef);
@@ -34,6 +34,7 @@ const UserManagement = React.forwardRef<HTMLElement, UserManagementProps>(
           baseUrl={baseUrl}
           baseStaticUrl={baseStaticUrl}
           baseCdnUrl={baseCdnUrl}
+          storagePrefix={storagePrefix}
           ref={setInnerRef}
           {...{
             // attributes

packages/sdks/react-sdk/src/components/UserProfile.tsx

@@ -24,7 +24,10 @@ const UserProfileWC = lazy(async () => {
 });
 
 const UserProfile = React.forwardRef<HTMLElement, UserProfileProps>(
-  ({ logger, theme, debug, widgetId, onLogout, styleId }, ref) => {
+  (
+    { logger, theme, debug, widgetId, onLogout, styleId, storagePrefix },
+    ref,
+  ) => {
     const [innerRef, setInnerRef] = useState(null);
 
     useImperativeHandle(ref, () => innerRef);
@@ -71,6 +74,7 @@ const UserProfile = React.forwardRef<HTMLElement, UserProfileProps>(
           baseCdnUrl={baseCdnUrl}
           styleId={styleId}
           ref={setInnerRef}
+          storagePrefix={storagePrefix}
           {...{
             // attributes
             'theme.attr': theme,

packages/sdks/react-sdk/src/types.ts

@@ -38,6 +38,7 @@ type WidgetProps = {
   theme?: ThemeOptions;
   debug?: boolean;
   styleId?: string;
+  storagePrefix?: string;
 };
 
 type FlowResponse = Awaited<ReturnType<Sdk['flow']['next']>>;

packages/sdks/react-sdk/test/components/AuthProvider.test.tsx

@@ -152,4 +152,21 @@ describe('AuthProvider', () => {
       expect(createSdk).toHaveBeenCalledTimes(1);
     });
   });
+
+  it('Should init sdk config with customized storage prefix option', async () => {
+    render(
+      <AuthProvider projectId="pr1" storagePrefix="APP_">
+        <div>hello</div>
+      </AuthProvider>,
+    );
+
+    await waitFor(() => {
+      expect(createSdk).toHaveBeenCalledWith(
+        expect.objectContaining({
+          projectId: 'pr1',
+          storagePrefix: 'APP_',
+        }),
+      );
+    });
+  });
 });

packages/widgets/access-key-management-widget/src/lib/widget/mixins/apiMixin.ts

@@ -6,6 +6,7 @@ import {
   loggerMixin,
   observeAttributesMixin,
   projectIdMixin,
+  storagePrefixMixin,
 } from '@descope/sdk-mixins';
 import { Sdk, createSdk } from '../api/sdk';
 
@@ -20,6 +21,7 @@ export const apiMixin = createSingletonMixin(
       createValidateAttributesMixin({
         tenant: createValidateAttributesMixin.missingAttrValidator,
       }),
+      storagePrefixMixin,
     )(superclass);
 
     return class ApiMixinClass extends BaseClass {
@@ -32,6 +34,7 @@ export const apiMixin = createSingletonMixin(
             projectId: this.projectId,
             baseUrl: this.baseUrl,
             refreshCookieName: this.refreshCookieName,
+            storagePrefix: this.storagePrefix,
           },
           this.tenantId,
           this.mock === 'true',

packages/widgets/applications-portal-widget/src/lib/widget/mixins/apiMixin.ts

@@ -5,6 +5,7 @@ import {
   loggerMixin,
   observeAttributesMixin,
   projectIdMixin,
+  storagePrefixMixin,
 } from '@descope/sdk-mixins';
 import { Sdk, createSdk } from '../api/sdk';
 
@@ -16,6 +17,7 @@ export const apiMixin = createSingletonMixin(
       loggerMixin,
       cookieConfigMixin,
       baseUrlMixin,
+      storagePrefixMixin,
     )(superclass);
 
     return class ApiMixinClass extends BaseClass {
@@ -28,6 +30,7 @@ export const apiMixin = createSingletonMixin(
             projectId: this.projectId,
             baseUrl: this.baseUrl,
             refreshCookieName: this.refreshCookieName,
+            storagePrefix: this.storagePrefix,
           },
           this.mock === 'true',
           this.widgetId,

packages/widgets/audit-management-widget/src/lib/widget/mixins/apiMixin.ts

@@ -6,6 +6,7 @@ import {
   loggerMixin,
   observeAttributesMixin,
   projectIdMixin,
+  storagePrefixMixin,
 } from '@descope/sdk-mixins';
 import { Sdk, createSdk } from '../api/sdk';
 
@@ -20,6 +21,7 @@ export const apiMixin = createSingletonMixin(
       createValidateAttributesMixin({
         tenant: createValidateAttributesMixin.missingAttrValidator,
       }),
+      storagePrefixMixin,
     )(superclass);
 
     return class ApiMixinClass extends BaseClass {
@@ -32,6 +34,7 @@ export const apiMixin = createSingletonMixin(
             projectId: this.projectId,
             baseUrl: this.baseUrl,
             refreshCookieName: this.refreshCookieName,
+            storagePrefix: this.storagePrefix,
           },
           this.tenantId,
           this.mock === 'true',

packages/widgets/role-management-widget/src/lib/widget/mixins/apiMixin.ts

@@ -6,6 +6,7 @@ import {
   loggerMixin,
   observeAttributesMixin,
   projectIdMixin,
+  storagePrefixMixin,
 } from '@descope/sdk-mixins';
 import { Sdk, createSdk } from '../api/sdk';
 
@@ -20,6 +21,7 @@ export const apiMixin = createSingletonMixin(
       createValidateAttributesMixin({
         tenant: createValidateAttributesMixin.missingAttrValidator,
       }),
+      storagePrefixMixin,
     )(superclass);
 
     return class ApiMixinClass extends BaseClass {
@@ -32,6 +34,7 @@ export const apiMixin = createSingletonMixin(
             projectId: this.projectId,
             baseUrl: this.baseUrl,
             refreshCookieName: this.refreshCookieName,
+            storagePrefix: this.storagePrefix,
           },
           this.tenantId,
           this.mock === 'true',

packages/widgets/tenant-profile-widget/src/lib/widget/mixins/apiMixin.ts

@@ -5,6 +5,7 @@ import {
   loggerMixin,
   observeAttributesMixin,
   projectIdMixin,
+  storagePrefixMixin,
 } from '@descope/sdk-mixins';
 import { Sdk, createSdk } from '../api/sdk';
 
@@ -16,6 +17,7 @@ export const apiMixin = createSingletonMixin(
       loggerMixin,
       baseUrlMixin,
       cookieConfigMixin,
+      storagePrefixMixin,
     )(superclass);
 
     return class ApiMixinClass extends BaseClass {
@@ -28,6 +30,7 @@ export const apiMixin = createSingletonMixin(
             projectId: this.projectId,
             baseUrl: this.baseUrl,
             refreshCookieName: this.refreshCookieName,
+            storagePrefix: this.storagePrefix,
           },
           this.tenantId,
           this.mock === 'true',

packages/widgets/user-management-widget/src/lib/widget/mixins/apiMixin.ts

@@ -6,6 +6,7 @@ import {
   loggerMixin,
   observeAttributesMixin,
   projectIdMixin,
+  storagePrefixMixin,
 } from '@descope/sdk-mixins';
 import { Sdk, createSdk } from '../api/sdk';
 
@@ -20,6 +21,7 @@ export const apiMixin = createSingletonMixin(
       createValidateAttributesMixin({
         tenant: createValidateAttributesMixin.missingAttrValidator,
       }),
+      storagePrefixMixin,
     )(superclass);
 
     return class ApiMixinClass extends BaseClass {
@@ -32,6 +34,7 @@ export const apiMixin = createSingletonMixin(
             projectId: this.projectId,
             baseUrl: this.baseUrl,
             refreshCookieName: this.refreshCookieName,
+            storagePrefix: this.storagePrefix,
           },
           this.tenantId,
           this.mock === 'true',

packages/widgets/user-profile-widget/src/lib/widget/mixins/apiMixin.ts

@@ -5,6 +5,7 @@ import {
   loggerMixin,
   observeAttributesMixin,
   projectIdMixin,
+  storagePrefixMixin,
 } from '@descope/sdk-mixins';
 import { Sdk, createSdk } from '../api/sdk';
 
@@ -16,6 +17,7 @@ export const apiMixin = createSingletonMixin(
       loggerMixin,
       baseUrlMixin,
       cookieConfigMixin,
+      storagePrefixMixin,
     )(superclass);
 
     return class ApiMixinClass extends BaseClass {
@@ -27,7 +29,8 @@ export const apiMixin = createSingletonMixin(
           {
             projectId: this.projectId,
             baseUrl: this.baseUrl,
-            refreshCookieName: this.refreshCookieName,
+            refreshCookieName: this.accessKey,
+            storagePrefix: this.storagePrefix,
           },
           this.mock === 'true',
           this.widgetId,