Add support for feature_flags claim

README.md

@@ -116,6 +116,7 @@ The following claims may be populated if the user is part of an organization:
 - `organizationId`: The currently-selected organization.
 - `role`: The `role` of the user for the current organization.
 - `permissions`: Permissions corresponding to this role.
+- `featureFlags`: Enabled feature flags for the current organization.
 
 ## Passing Data Through Authentication Flows
 

package.json

@@ -37,6 +37,6 @@
     "react": ">=17"
   },
   "dependencies": {
-    "@workos-inc/authkit-js": "0.11.0"
+    "@workos-inc/authkit-js": "0.13.0"
   }
 }

src/provider.tsx

@@ -36,14 +36,19 @@ export function AuthKitProvider(props: AuthKitProviderProps) {
   const handleRefresh = React.useCallback(
     (response: OnRefreshResponse) => {
       const { user, accessToken, organizationId } = response;
-      const { role = null, permissions = [] } = getClaims(accessToken);
+      const {
+        role = null,
+        permissions = [],
+        feature_flags = [],
+      } = getClaims(accessToken);
       setState((prev) => {
         const next = {
           ...prev,
           user,
           organizationId: organizationId ?? null,
           role,
           permissions,
+          featureFlags: feature_flags,
         };
         return isEquivalentWorkOSSession(prev, next) ? prev : next;
       });
@@ -106,7 +111,10 @@ function isEquivalentWorkOSSession(
     a.user?.updatedAt === b.user?.updatedAt &&
     a.organizationId === b.organizationId &&
     a.role === b.role &&
-    a.permissions.every((perm, i) => perm === b.permissions[i])
+    a.permissions.length === b.permissions.length &&
+    a.permissions.every((perm, i) => perm === b.permissions[i]) &&
+    a.featureFlags.length === b.featureFlags.length &&
+    a.featureFlags.every((flag, i) => flag === b.featureFlags[i])
   );
 }
 

src/state.ts

@@ -6,6 +6,7 @@ export interface State {
   role: string | null;
   organizationId: string | null;
   permissions: string[];
+  featureFlags: string[];
 }
 
 export const initialState: State = {
@@ -14,4 +15,5 @@ export const initialState: State = {
   role: null,
   organizationId: null,
   permissions: [],
+  featureFlags: [],
 };