Plug pending session into main Client resource

Author: LauraBeatris

integration/testUtils/handshake.ts

@@ -108,6 +108,7 @@ export function generateConfig({ mode, matchedKeys = true }: { mode: 'test' | 'l
     state,
     extraClaims,
   }: {
+    // todo -> add tests for pending
     state: 'active' | 'expired' | 'early';
     extraClaims?: Map<string, any>;
   }) => {

packages/astro/src/stores/internal.ts

@@ -1,5 +1,5 @@
 import type {
-  ActiveSessionResource,
+  AuthenticatedSessionResource,
   Clerk,
   ClientResource,
   InitialState,
@@ -12,7 +12,7 @@ export const $csrState = map<{
   isLoaded: boolean;
   client: ClientResource | undefined | null;
   user: UserResource | undefined | null;
-  session: ActiveSessionResource | undefined | null;
+  session: AuthenticatedSessionResource | undefined | null;
   organization: OrganizationResource | undefined | null;
 }>({
   isLoaded: false,

packages/clerk-js/src/core/__tests__/clerk.test.ts

@@ -148,6 +148,7 @@ describe('Clerk singleton', () => {
     });
   });
 
+  // todo -> add tests for pending
   describe('.setActive', () => {
     const mockSession = {
       id: '1',
@@ -455,6 +456,7 @@ describe('Clerk singleton', () => {
     });
   });
 
+  // todo -> add tests for pending
   describe('.load()', () => {
     const mockSession = {
       id: '1',

packages/clerk-js/src/core/clerk.ts

@@ -10,7 +10,7 @@ import { addClerkPrefix, isAbsoluteUrl, stripScheme } from '@clerk/shared/url';
 import { handleValueOrFn, noop } from '@clerk/shared/utils';
 import type {
   __internal_UserVerificationModalProps,
-  ActiveSessionResource,
+  AuthenticatedSessionResource,
   AuthenticateWithCoinbaseWalletParams,
   AuthenticateWithGoogleOneTapParams,
   AuthenticateWithMetamaskParams,
@@ -164,7 +164,7 @@ export class Clerk implements ClerkInterface {
   };
 
   public client: ClientResource | undefined;
-  public session: ActiveSessionResource | null | undefined;
+  public session: AuthenticatedSessionResource | null | undefined;
   public organization: OrganizationResource | null | undefined;
   public user: UserResource | null | undefined;
   public __internal_country?: string | null;
@@ -385,7 +385,7 @@ export class Clerk implements ClerkInterface {
       });
     };
 
-    if (!opts.sessionId || this.client.activeSessions.length === 1) {
+    if (!opts.sessionId || this.client.authenticatedSessions.length === 1) {
       if (this.#options.experimental?.persistClient ?? true) {
         await this.client.removeSessions();
       } else {
@@ -395,7 +395,7 @@ export class Clerk implements ClerkInterface {
       return handleSetActive();
     }
 
-    const session = this.client.activeSessions.find(s => s.id === opts.sessionId);
+    const session = this.client.authenticatedSessions.find(s => s.id === opts.sessionId);
     const shouldSignOutCurrent = session?.id && this.session?.id === session.id;
     await session?.remove();
     if (shouldSignOutCurrent) {
@@ -846,12 +846,12 @@ export class Clerk implements ClerkInterface {
         : noop;
 
     if (typeof session === 'string') {
-      session = (this.client.sessions.find(x => x.id === session) as ActiveSessionResource) || null;
+      session = (this.client.sessions.find(x => x.id === session) as AuthenticatedSessionResource) || null;
     }
 
     let newSession = session === undefined ? this.session : session;
 
-    // At this point, the `session` variable should contain either an `ActiveSessionResource`
+    // At this point, the `session` variable should contain either an `AuthenticatedSessionResource`
     // ,`null` or `undefined`.
     // We now want to set the last active organization id on that session (if it exists).
     // However, if the `organization` parameter is not given (i.e. `undefined`), we want
@@ -889,7 +889,7 @@ export class Clerk implements ClerkInterface {
     //   Note that this will also update the session's active organization
     //   id.
     if (inActiveBrowserTab() || !this.#options.standardBrowser) {
-      await this.#touchLastActiveSession(newSession);
+      await this.#touchCurrentSession(newSession);
       // reload session from updated client
       newSession = this.#getSessionFromClient(newSession?.id);
     }
@@ -1983,14 +1983,14 @@ export class Clerk implements ClerkInterface {
     this.#emit();
   };
 
-  #defaultSession = (client: ClientResource): ActiveSessionResource | null => {
+  #defaultSession = (client: ClientResource): AuthenticatedSessionResource | null => {
     if (client.lastActiveSessionId) {
       const lastActiveSession = client.activeSessions.find(s => s.id === client.lastActiveSessionId);
       if (lastActiveSession) {
         return lastActiveSession;
       }
     }
-    const session = client.activeSessions[0];
+    const session = client.authenticatedSessions[0];
     return session || null;
   };
 
@@ -2006,7 +2006,7 @@ export class Clerk implements ClerkInterface {
         }
         this.#touchThrottledUntil = Date.now() + 5_000;
 
-        void this.#touchLastActiveSession(this.session);
+        void this.#touchCurrentSession(this.session);
       }
     });
 
@@ -2018,7 +2018,7 @@ export class Clerk implements ClerkInterface {
   };
 
   // TODO: Be more conservative about touches. Throttle, don't touch when only one user, etc
-  #touchLastActiveSession = async (session?: ActiveSessionResource | null): Promise<void> => {
+  #touchCurrentSession = async (session?: AuthenticatedSessionResource | null): Promise<void> => {
     if (!session || !this.#options.touchSession) {
       return Promise.resolve();
     }
@@ -2068,14 +2068,14 @@ export class Clerk implements ClerkInterface {
     );
   };
 
-  #setAccessors = (session?: ActiveSessionResource | null) => {
+  #setAccessors = (session?: AuthenticatedSessionResource | null) => {
     this.session = session || null;
     this.organization = this.#getLastActiveOrganizationFromSession();
     this.#aliasUser();
   };
 
-  #getSessionFromClient = (sessionId: string | undefined): ActiveSessionResource | null => {
-    return this.client?.activeSessions.find(x => x.id === sessionId) || null;
+  #getSessionFromClient = (sessionId: string | undefined): AuthenticatedSessionResource | null => {
+    return this.client?.authenticatedSessions.find(x => x.id === sessionId) || null;
   };
 
   #aliasUser = () => {

packages/clerk-js/src/core/resources/Client.ts

@@ -1,10 +1,11 @@
-import type {
-  ActiveSessionResource,
-  ClientJSON,
-  ClientJSONSnapshot,
-  ClientResource,
-  SignInResource,
-  SignUpResource,
+import {
+  type ActiveSessionResource,
+  type AuthenticatedSessionResource,
+  type ClientJSON,
+  type ClientJSONSnapshot,
+  type ClientResource,
+  type SignInResource,
+  type SignUpResource,
 } from '@clerk/types';
 
 import { unixEpochToDate } from '../../utils/date';
@@ -53,10 +54,15 @@ export class Client extends BaseResource implements ClientResource {
     return this.signIn;
   }
 
+  // todo -> maybe deprecate it? unless we want to explicitly point to active sessions somewhere
   get activeSessions(): ActiveSessionResource[] {
     return this.sessions.filter(s => s.status === 'active') as ActiveSessionResource[];
   }
 
+  get authenticatedSessions(): AuthenticatedSessionResource[] {
+    return this.sessions.filter(s => s.status === 'active' || s.status === 'pending') as AuthenticatedSessionResource[];
+  }
+
   create(): Promise<this> {
     return this._basePut();
   }

packages/clerk-js/src/ui/components/ImpersonationFab/ImpersonationFab.tsx

@@ -1,5 +1,5 @@
 import { useClerk, useSession, useUser } from '@clerk/shared/react';
-import type { ActiveSessionResource } from '@clerk/types';
+import type { AuthenticatedSessionResource } from '@clerk/types';
 import type { PointerEventHandler } from 'react';
 import React, { useEffect, useRef } from 'react';
 
@@ -66,7 +66,7 @@ const FabContent = ({ title, signOutText }: FabContentProps) => {
   const { otherSessions } = useMultipleSessions({ user });
   const { navigateAfterSignOut, navigateAfterMultiSessionSingleSignOutUrl } = useSignOutContext();
 
-  const handleSignOutSessionClicked = (session: ActiveSessionResource) => () => {
+  const handleSignOutSessionClicked = (session: AuthenticatedSessionResource) => () => {
     if (otherSessions.length === 0) {
       return signOut(navigateAfterSignOut);
     }

packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx

@@ -1,4 +1,4 @@
-import type { ActiveSessionResource } from '@clerk/types';
+import type { AuthenticatedSessionResource } from '@clerk/types';
 
 import type { ElementDescriptor, ElementId } from '../../../ui/customizables/elementDescriptors';
 import { useRouter } from '../../../ui/router';
@@ -13,9 +13,9 @@ import type { DefaultItemIds, MenuItem } from '../../utils/createCustomMenuItems
 
 type SingleSessionActionsProps = {
   handleManageAccountClicked: () => Promise<unknown> | void;
-  handleSignOutSessionClicked: (session: ActiveSessionResource) => () => Promise<unknown> | void;
+  handleSignOutSessionClicked: (session: AuthenticatedSessionResource) => () => Promise<unknown> | void;
   handleUserProfileActionClicked: (startPath?: string) => Promise<unknown> | void;
-  session: ActiveSessionResource;
+  session: AuthenticatedSessionResource;
   completedCallback: () => void;
 };
 
@@ -113,12 +113,12 @@ export const SingleSessionActions = (props: SingleSessionActionsProps) => {
 
 type MultiSessionActionsProps = {
   handleManageAccountClicked: () => Promise<unknown> | void;
-  handleSignOutSessionClicked: (session: ActiveSessionResource) => () => Promise<unknown> | void;
-  handleSessionClicked: (session: ActiveSessionResource) => () => Promise<unknown> | void;
+  handleSignOutSessionClicked: (session: AuthenticatedSessionResource) => () => Promise<unknown> | void;
+  handleSessionClicked: (session: AuthenticatedSessionResource) => () => Promise<unknown> | void;
   handleAddAccountClicked: () => Promise<unknown> | void;
   handleUserProfileActionClicked: (startPath?: string) => Promise<unknown> | void;
-  session: ActiveSessionResource;
-  otherSessions: ActiveSessionResource[];
+  session: AuthenticatedSessionResource;
+  otherSessions: AuthenticatedSessionResource[];
   completedCallback: () => void;
 };
 

packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx

@@ -1,5 +1,5 @@
 import { useSession, useUser } from '@clerk/shared/react';
-import type { ActiveSessionResource } from '@clerk/types';
+import type { AuthenticatedSessionResource } from '@clerk/types';
 import React from 'react';
 
 import { useEnvironment, useUserButtonContext } from '../../contexts';
@@ -14,7 +14,7 @@ type UserButtonPopoverProps = { close?: (open: boolean) => void } & PropsOfCompo
 export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopoverProps>((props, ref) => {
   const { close: unsafeClose, ...rest } = props;
   const close = () => unsafeClose?.(false);
-  const { session } = useSession() as { session: ActiveSessionResource };
+  const { session } = useSession() as { session: AuthenticatedSessionResource };
   const userButtonContext = useUserButtonContext();
   const { __experimental_asStandalone } = userButtonContext;
   const { authConfig } = useEnvironment();

packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx

@@ -1,5 +1,5 @@
 import { useClerk } from '@clerk/shared/react';
-import type { ActiveSessionResource, UserButtonProps, UserResource } from '@clerk/types';
+import type { AuthenticatedSessionResource, UserButtonProps, UserResource } from '@clerk/types';
 
 import { windowNavigate } from '../../../utils/windowNavigate';
 import { useCardState } from '../../elements';
@@ -20,10 +20,10 @@ type UseMultisessionActionsParams = {
 export const useMultisessionActions = (opts: UseMultisessionActionsParams) => {
   const { setActive, signOut, openUserProfile } = useClerk();
   const card = useCardState();
-  const { activeSessions, otherSessions } = useMultipleSessions({ user: opts.user });
+  const { authenticatedSessions, otherSessions } = useMultipleSessions({ user: opts.user });
   const { navigate } = useRouter();
 
-  const handleSignOutSessionClicked = (session: ActiveSessionResource) => () => {
+  const handleSignOutSessionClicked = (session: AuthenticatedSessionResource) => () => {
     if (otherSessions.length === 0) {
       return signOut(opts.navigateAfterSignOut);
     }
@@ -66,7 +66,7 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => {
     return signOut(opts.navigateAfterSignOut);
   };
 
-  const handleSessionClicked = (session: ActiveSessionResource) => async () => {
+  const handleSessionClicked = (session: AuthenticatedSessionResource) => async () => {
     card.setLoading();
     return setActive({ session, redirectUrl: opts.afterSwitchSessionUrl }).finally(() => {
       card.setIdle();
@@ -87,6 +87,6 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => {
     handleSessionClicked,
     handleAddAccountClicked,
     otherSessions,
-    activeSessions,
+    authenticatedSessions,
   };
 };

packages/clerk-js/src/ui/hooks/useMultipleSessions.ts

@@ -1,17 +1,21 @@
-import { useSessionList } from '@clerk/shared/react';
+import { useClerk, useSessionList } from '@clerk/shared/react';
 import type { ActiveSessionResource, UserResource } from '@clerk/types';
 
 type UseMultipleSessionsParam = {
   user: UserResource | null | undefined;
 };
 
 const useMultipleSessions = (params: UseMultipleSessionsParam) => {
+  const clerk = useClerk();
   const { sessions } = useSessionList();
-  const activeSessions = sessions?.filter(s => s.status === 'active') as ActiveSessionResource[];
-  const otherSessions = activeSessions.filter(s => s.user?.id !== params.user?.id);
+
+  const authenticatedSessions = sessions?.filter(
+    s => s.status === 'active' || s.status === 'pending',
+  ) as ActiveSessionResource[];
+  const otherSessions = authenticatedSessions.filter(s => s.user?.id !== params.user?.id);
 
   return {
-    activeSessions,
+    authenticatedSessions: clerk.client.authenticatedSessions,
     otherSessions,
   };
 };

packages/elements/src/react/sign-in/choose-session/choose-session.hooks.ts

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { useActiveTags } from '../../hooks';
 import { SignInRouterCtx } from '../context';
 
+// todo -> handle pending
 export type SignInActiveSessionListItem = Pick<ActiveSessionResource, 'id'> & PublicUserData;
 
 export const SignInActiveSessionContext = React.createContext<SignInActiveSessionListItem | null>(null);

packages/react/src/isomorphicClerk.ts

@@ -5,7 +5,7 @@ import { handleValueOrFn } from '@clerk/shared/utils';
 import type {
   __internal_UserVerificationModalProps,
   __internal_UserVerificationProps,
-  ActiveSessionResource,
+  AuthenticatedSessionResource,
   AuthenticateWithCoinbaseWalletParams,
   AuthenticateWithGoogleOneTapParams,
   AuthenticateWithMetamaskParams,
@@ -615,7 +615,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   }
 
-  get session(): ActiveSessionResource | undefined | null {
+  get session(): AuthenticatedSessionResource | undefined | null {
     if (this.clerkjs) {
       return this.clerkjs.session;
     } else {

packages/shared/src/deriveState.ts

@@ -1,5 +1,5 @@
 import type {
-  ActiveSessionResource,
+  AuthenticatedSessionResource,
   InitialState,
   OrganizationCustomPermissionKey,
   OrganizationCustomRoleKey,
@@ -22,7 +22,7 @@ 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 session = initialState.session as AuthenticatedSessionResource;
   const organization = initialState.organization as OrganizationResource;
   const orgId = initialState.orgId;
   const orgRole = initialState.orgRole as OrganizationCustomRoleKey;

packages/shared/src/react/contexts.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type {
-  ActiveSessionResource,
+  AuthenticatedSessionResource,
   ClerkOptions,
   ClientResource,
   LoadedClerk,
@@ -17,7 +17,7 @@ import { createContextAndHook } from './hooks/createContextAndHook';
 const [ClerkInstanceContext, useClerkInstanceContext] = createContextAndHook<LoadedClerk>('ClerkInstanceContext');
 const [UserContext, useUserContext] = createContextAndHook<UserResource | null | undefined>('UserContext');
 const [ClientContext, useClientContext] = createContextAndHook<ClientResource | null | undefined>('ClientContext');
-const [SessionContext, useSessionContext] = createContextAndHook<ActiveSessionResource | null | undefined>(
+const [SessionContext, useSessionContext] = createContextAndHook<AuthenticatedSessionResource | null | undefined>(
   'SessionContext',
 );