From 8a04ae47b8305f994b348301fd8134d5baf02943 Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Tue, 5 Nov 2024 16:16:13 -0500
Subject: [PATCH] chore(clerk-react,shared): Use shared `deriveState` function
 (#4490)

---
 .changeset/wicked-tomatoes-explain.md         |  6 ++
 .../src/contexts/ClerkContextProvider.tsx     |  2 +-
 packages/react/src/utils/deriveState.ts       | 77 -------------------
 packages/shared/src/deriveState.ts            |  9 +++
 4 files changed, 16 insertions(+), 78 deletions(-)
 create mode 100644 .changeset/wicked-tomatoes-explain.md
 delete mode 100644 packages/react/src/utils/deriveState.ts

diff --git a/.changeset/wicked-tomatoes-explain.md b/.changeset/wicked-tomatoes-explain.md
new file mode 100644
index 0000000000..5f68742157
--- /dev/null
+++ b/.changeset/wicked-tomatoes-explain.md
@@ -0,0 +1,6 @@
+---
+"@clerk/clerk-react": patch
+"@clerk/shared": patch
+---
+
+Use shared `deriveState` function
diff --git a/packages/react/src/contexts/ClerkContextProvider.tsx b/packages/react/src/contexts/ClerkContextProvider.tsx
index 5316421e6d..13d8933943 100644
--- a/packages/react/src/contexts/ClerkContextProvider.tsx
+++ b/packages/react/src/contexts/ClerkContextProvider.tsx
@@ -1,10 +1,10 @@
+import { deriveState } from '@clerk/shared/deriveState';
 import { ClientContext, OrganizationProvider, SessionContext, UserContext } from '@clerk/shared/react';
 import type { ClientResource, InitialState, Resources } from '@clerk/types';
 import React from 'react';
 
 import { IsomorphicClerk } from '../isomorphicClerk';
 import type { IsomorphicClerkOptions } from '../types';
-import { deriveState } from '../utils/deriveState';
 import { AuthContext } from './AuthContext';
 import { IsomorphicClerkContext } from './IsomorphicClerkContext';
 
diff --git a/packages/react/src/utils/deriveState.ts b/packages/react/src/utils/deriveState.ts
deleted file mode 100644
index c301d47123..0000000000
--- a/packages/react/src/utils/deriveState.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import type {
-  ActiveSessionResource,
-  InitialState,
-  OrganizationCustomPermissionKey,
-  OrganizationCustomRoleKey,
-  OrganizationResource,
-  Resources,
-  UserResource,
-} from '@clerk/types';
-
-export const deriveState = (clerkLoaded: boolean, state: Resources, initialState: InitialState | undefined) => {
-  if (!clerkLoaded && initialState) {
-    return deriveFromSsrInitialState(initialState);
-  }
-  return deriveFromClientSideState(state);
-};
-
-const deriveFromSsrInitialState = (initialState: InitialState) => {
-  const userId = initialState.userId;
-  const user = initialState.user as UserResource;
-  const sessionId = initialState.sessionId;
-  const session = initialState.session as ActiveSessionResource;
-  const organization = initialState.organization as OrganizationResource;
-  const orgId = initialState.orgId;
-  const orgRole = initialState.orgRole as OrganizationCustomRoleKey;
-  const orgPermissions = initialState.orgPermissions as OrganizationCustomPermissionKey[];
-  const orgSlug = initialState.orgSlug;
-  const actor = initialState.actor;
-  const __experimental_factorVerificationAge = initialState.__experimental_factorVerificationAge;
-
-  return {
-    userId,
-    user,
-    sessionId,
-    session,
-    organization,
-    orgId,
-    orgRole,
-    orgPermissions,
-    orgSlug,
-    actor,
-    __experimental_factorVerificationAge,
-  };
-};
-
-const deriveFromClientSideState = (state: Resources) => {
-  const userId: string | null | undefined = state.user ? state.user.id : state.user;
-  const user = state.user;
-  const sessionId: string | null | undefined = state.session ? state.session.id : state.session;
-  const session = state.session;
-  const __experimental_factorVerificationAge: [number, number] | null = state.session
-    ? state.session.__experimental_factorVerificationAge
-    : null;
-  const actor = session?.actor;
-  const organization = state.organization;
-  const orgId: string | null | undefined = state.organization ? state.organization.id : state.organization;
-  const orgSlug = organization?.slug;
-  const membership = organization
-    ? user?.organizationMemberships?.find(om => om.organization.id === orgId)
-    : organization;
-  const orgPermissions = membership ? membership.permissions : membership;
-  const orgRole = membership ? membership.role : membership;
-
-  return {
-    userId,
-    user,
-    sessionId,
-    session,
-    organization,
-    orgId,
-    orgRole,
-    orgSlug,
-    orgPermissions,
-    actor,
-    __experimental_factorVerificationAge,
-  };
-};
diff --git a/packages/shared/src/deriveState.ts b/packages/shared/src/deriveState.ts
index 6a280fe4a6..03a51356b6 100644
--- a/packages/shared/src/deriveState.ts
+++ b/packages/shared/src/deriveState.ts
@@ -8,6 +8,9 @@ import type {
   UserResource,
 } from '@clerk/types';
 
+/**
+ * Derives authentication state based on the current rendering context (SSR or client-side).
+ */
 export const deriveState = (clerkLoaded: boolean, state: Resources, initialState: InitialState | undefined) => {
   if (!clerkLoaded && initialState) {
     return deriveFromSsrInitialState(initialState);
@@ -26,6 +29,7 @@ const deriveFromSsrInitialState = (initialState: InitialState) => {
   const orgPermissions = initialState.orgPermissions as OrganizationCustomPermissionKey[];
   const orgSlug = initialState.orgSlug;
   const actor = initialState.actor;
+  const __experimental_factorVerificationAge = initialState.__experimental_factorVerificationAge;
 
   return {
     userId,
@@ -38,6 +42,7 @@ const deriveFromSsrInitialState = (initialState: InitialState) => {
     orgPermissions,
     orgSlug,
     actor,
+    __experimental_factorVerificationAge,
   };
 };
 
@@ -46,6 +51,9 @@ const deriveFromClientSideState = (state: Resources) => {
   const user = state.user;
   const sessionId: string | null | undefined = state.session ? state.session.id : state.session;
   const session = state.session;
+  const __experimental_factorVerificationAge: [number, number] | null = state.session
+    ? state.session.__experimental_factorVerificationAge
+    : null;
   const actor = session?.actor;
   const organization = state.organization;
   const orgId: string | null | undefined = state.organization ? state.organization.id : state.organization;
@@ -67,5 +75,6 @@ const deriveFromClientSideState = (state: Resources) => {
     orgSlug,
     orgPermissions,
     actor,
+    __experimental_factorVerificationAge,
   };
 };