feat(clerk-js): Handle new session pending status as authenticated state (#5136)

Author: LauraBeatris

.changeset/nasty-mangos-live.md

@@ -0,0 +1,11 @@
+---
+'@clerk/elements': minor
+'@clerk/shared': minor
+'@clerk/astro': minor
+'@clerk/clerk-react': minor
+'@clerk/types': minor
+'@clerk/clerk-expo': minor
+'@clerk/vue': minor
+---
+
+Surface new `pending` session as a signed-in state

.changeset/proud-cycles-roll.md

@@ -0,0 +1,20 @@
+---
+'@clerk/clerk-js': minor
+---
+
+- Initialize new `pending` session status as an signed-in state
+- Deprecate `Clerk.client.activeSessions` in favor of `Clerk.client.signedInSessions`
+- Introduce `Clerk.isSignedIn` property as an explicit signed-in state check, instead of `!!Clerk.session` or `!!Clerk.user`:
+
+```ts
+- if (Clerk.user) {
++ if (Clerk.isSignedIn) {
+  // Mount user button component
+  document.getElementById('signed-in').innerHTML = `
+    <div id="user-button"></div>
+  `
+
+  const userbuttonDiv = document.getElementById('user-button')
+
+  clerk.mountUserButton(userbuttonDiv)
+}

packages/astro/src/stores/internal.ts

@@ -1,9 +1,9 @@
 import type {
-  ActiveSessionResource,
   Clerk,
   ClientResource,
   InitialState,
   OrganizationResource,
+  SignedInSessionResource,
   UserResource,
 } from '@clerk/types';
 import { atom, map } from 'nanostores';
@@ -12,7 +12,7 @@ export const $csrState = map<{
   isLoaded: boolean;
   client: ClientResource | undefined | null;
   user: UserResource | undefined | null;
-  session: ActiveSessionResource | undefined | null;
+  session: SignedInSessionResource | undefined | null;
   organization: OrganizationResource | undefined | null;
 }>({
   isLoaded: false,

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

@@ -91,7 +91,7 @@ describe('Clerk singleton - Redirects', () => {
   beforeEach(() => {
     mockClientFetch.mockReturnValue(
       Promise.resolve({
-        activeSessions: [],
+        signedInSessions: [],
       }),
     );
   });