// @ts-expect-error: Internal property for SSR frameworks like Nuxt

const { __internal_clerk_initial_state } = options;

const loaded = shallowRef(false);

const clerk = shallowRef<Clerk | null>(null);

const resources = ref<Resources>({

client: {} as ClientResource,

session: undefined,

user: undefined,

organization: undefined,

});

// We need this check for SSR apps like Nuxt as it will try to run this code on the server

// and loadClerkJsScript contains browser-specific code

if (inBrowser()) {

void loadClerkJsScript(options).then(async () => {

if (!window.Clerk) {

throw new Error('Failed to download latest ClerkJS. Contact support@clerk.com.');

}

clerk.value = window.Clerk;

await window.Clerk.load(options);

loaded.value = true;

clerk.value.addListener(payload => {

resources.value = payload;

});

// When Clerk updates its state internally, Vue's reactivity system doesn't detect

// the change since it's an external object being mutated. triggerRef() forces Vue

// to re-evaluate all dependencies regardless of how the value was changed.

triggerRef(clerk);

});

}

const derivedState = computed(() => deriveState(loaded.value, resources.value, __internal_clerk_initial_state));

const authCtx = computed(() => {

const { sessionId, userId, orgId, actor, orgRole, orgSlug, orgPermissions } = derivedState.value;

return { sessionId, userId, actor, orgId, orgRole, orgSlug, orgPermissions };

});

const clientCtx = computed(() => resources.value.client);

const userCtx = computed(() => derivedState.value.user);

const sessionCtx = computed(() => derivedState.value.session);

const organizationCtx = computed(() => derivedState.value.organization);

app.provide(ClerkInjectionKey, {

clerk,

authCtx,

clientCtx,

sessionCtx,

userCtx,

organizationCtx,

});