package.json

@@ -38,7 +38,7 @@
 	},
 	"dependencies": {
 		"@descope/user-management-widget": "0.0.7",
-		"@descope/web-component": "3.7.0"
+		"@descope/web-component": "3.7.6"
 	},
 	"peerDependencies": {
 		"vue": ">=3"

src/Descope.vue

@@ -27,8 +27,28 @@ import { useOptions, useDescope } from './hooks';
 import { baseHeaders } from './constants';
 import { RequestConfig } from '@descope/core-js-sdk';
 import { computed } from 'vue';
+import { getGlobalSdk } from './sdk';
 
-DescopeWcClass.sdkConfigOverrides = { baseHeaders };
+DescopeWcClass.sdkConfigOverrides = {
+	// Overrides the web-component's base headers to indicate usage via the React SDK
+	baseHeaders,
+	// Disables token persistence within the web-component to delegate token management
+	// to the global SDK hooks. This ensures token handling aligns with the SDK's configuration,
+	// and web-component requests leverage the global SDK's beforeRequest hooks for consistency
+	persistTokens: false,
+	hooks: {
+		get beforeRequest() {
+			// Retrieves the beforeRequest hook from the global SDK, which is initialized
+			// within the AuthProvider using the desired configuration. This approach ensures
+			// the web-component utilizes the same beforeRequest hooks as the global SDK
+			return getGlobalSdk().httpClient.hooks.beforeRequest;
+		},
+		set beforeRequest(_) {
+			// The empty setter prevents runtime errors when attempts are made to assign a value to 'beforeRequest'.
+			// JavaScript objects default to having both getters and setters
+		}
+	}
+};
 
 const props = defineProps({
 	flowId: {

src/sdk.ts

@@ -3,7 +3,7 @@ import { IS_BROWSER } from './constants';
 import { wrapInTry } from './utils';
 
 type Sdk = ReturnType<typeof createSdkWrapper>;
-let sdkInstance: Sdk;
+let globalSdk: Sdk;
 
 const createSdkWrapper = <P extends Parameters<typeof createSdk>[0]>(
 	config: P
@@ -13,7 +13,7 @@ const createSdkWrapper = <P extends Parameters<typeof createSdk>[0]>(
 		persistTokens: IS_BROWSER as true,
 		autoRefresh: IS_BROWSER as true
 	});
-	sdkInstance = sdk;
+	globalSdk = sdk;
 
 	return sdk;
 };
@@ -25,11 +25,11 @@ const createSdkWrapper = <P extends Parameters<typeof createSdk>[0]>(
  * and we are creating a temp instance in order to export the getSessionToken
  * even before the SDK was init
  */
-sdkInstance = createSdkWrapper({ projectId: 'temp pid' });
+globalSdk = createSdkWrapper({ projectId: 'temp pid' });
 
 export const getSessionToken = () => {
 	if (IS_BROWSER) {
-		return sdkInstance?.getSessionToken();
+		return globalSdk?.getSessionToken();
 	}
 
 	// eslint-disable-next-line no-console
@@ -39,7 +39,7 @@ export const getSessionToken = () => {
 
 export const getRefreshToken = () => {
 	if (IS_BROWSER) {
-		return sdkInstance?.getRefreshToken();
+		return globalSdk?.getRefreshToken();
 	}
 	// eslint-disable-next-line no-console
 	console.warn('Get refresh token is not supported in SSR');
@@ -48,15 +48,16 @@ export const getRefreshToken = () => {
 
 export const getJwtPermissions = wrapInTry(
 	(token = getSessionToken(), tenant?: string) =>
-		sdkInstance?.getJwtPermissions(token, tenant)
+		globalSdk?.getJwtPermissions(token, tenant)
 );
 
 export const getJwtRoles = wrapInTry(
 	(token = getSessionToken(), tenant?: string) =>
-		sdkInstance?.getJwtRoles(token, tenant)
+		globalSdk?.getJwtRoles(token, tenant)
 );
 
-export const refresh = (token = getRefreshToken()) =>
-	sdkInstance?.refresh(token);
+export const refresh = (token = getRefreshToken()) => globalSdk?.refresh(token);
+
+export const getGlobalSdk = () => globalSdk;
 
 export default createSdkWrapper;

tests/Descope.test.ts

@@ -1,5 +1,6 @@
 import { shallowMount, mount } from '@vue/test-utils';
 import Descope from '../src/Descope.vue';
+import { default as DescopeWC } from '@descope/web-component';
 
 jest.mock('../src/hooks', () => ({
 	useOptions: () => ({ projectId: 'project1', baseUrl: 'baseUrl' }),
@@ -68,6 +69,23 @@ describe('Descope.vue', () => {
 		expect(wrapper.vm.client).toBeNull();
 	});
 
+	it('init sdk config', async () => {
+		const wrapper = mount(Descope);
+		const descopeWc = wrapper.find('descope-wc');
+		expect(descopeWc).toBeTruthy();
+
+		expect(DescopeWC.sdkConfigOverrides).toEqual({
+			baseHeaders: {
+				'x-descope-sdk-name': 'vue',
+				'x-descope-sdk-version': '123'
+			},
+			persistTokens: false,
+			hooks: {
+				beforeRequest: expect.any(Function)
+			}
+		});
+	});
+
 	it('emits a success event when the DescopeWc component emits a success event', async () => {
 		const wrapper = mount(Descope);
 		const descopeWc = wrapper.find('descope-wc');