feat: Expose individual stores for user, session, sessionList etc (#179)

* feat: Expose individual stores for user, session, sessionList etc.

* feat: Expose individual stores for user, session, sessionList etc.

* chore: Update README

* fix: Incorrect import path for nanostores

.changeset/silent-spies-shop.md

@@ -0,0 +1,12 @@
+---
+"astro-clerk-auth": minor
+---
+
+Expose individual stores for client resources.
+- $userStore
+- $sessionStore
+- $sessionListStore
+- $clerkStore
+- $clerkStore
+- $signInStore
+- $signUpStore

apps/playground-with-package/src/lib/astro-components/SignOutButton.astro

@@ -12,7 +12,7 @@ interface Props extends SignOutOptions {
 </script>
 
 <script>
-  import { $clerk } from "astro-clerk-auth/stores";
+  import { $clerkStore } from "astro-clerk-auth/client/stores";
 
   const button = document.querySelector(
     "[data-sign-out-button]",
@@ -21,12 +21,16 @@ interface Props extends SignOutOptions {
   button?.addEventListener("click", (e) => {
     e.preventDefault();
 
-    // @ts-ignore
-    $clerk.get()?.signOut(SIGN_OUT_BUTTON_PROPS);
+    $clerkStore.get()?.signOut(
+      //@ts-ignore
+      SIGN_OUT_BUTTON_PROPS,
+    );
 
     // @ts-ignore
     if (SIGN_OUT_BUTTON_PROPS.signOutUrl)
-      // @ts-ignore
-      window.location.replace(SIGN_OUT_BUTTON_PROPS.signOutUrl);
+      window.location.replace(
+        // @ts-ignore
+        SIGN_OUT_BUTTON_PROPS.signOutUrl,
+      );
   });
 </script>

packages/astro-clerk-auth/README.md

@@ -193,13 +193,12 @@ export const GET: APIRoute = async ({ locals }) => {
 
 ## Use Astro.locals
 - Use `Astro.locals.auth()` to retrieve the [Authentication Object](https://clerk.com/docs/references/nextjs/authentication-object#authentication-object)
-- Use `await Astro.locals.currentUser()` to retrieve the backend User object
 
 
 ## Deep dive
 
 ### Use Clerk react hooks
-Example SignedIn React component that supports SSR
+Example SignedIn React component that **supports SSR**
 ```tsx
 import type { PropsWithChildren } from 'react';
 import { useAuth } from 'astro-clerk-auth/client/react';
@@ -214,12 +213,12 @@ export function SignedIn(props: PropsWithChildren) {
 }
 ```
 
-### Use the isomorphic authStore to build your custom logic
-Example SignedOut React component that supports SSR
+### Use a client store to build your custom logic
+Warning: **SSR not supported**
 ```tsx
 import type { PropsWithChildren } from 'react';
 import { useStore } from '@nanostores/react';
-import { $authStore } from 'astro-clerk-auth/stores';
+import { $authStore } from 'astro-clerk-auth/client/stores';
 
 export function SignedOut(props: PropsWithChildren) {
   const { userId } = useStore($authStore);

packages/astro-clerk-auth/client/stores/package.json

@@ -0,0 +1,3 @@
+{
+    "main": "../../dist/client/stores/index.js"
+}

packages/astro-clerk-auth/package.json

@@ -52,6 +52,10 @@
       "types": "./dist/client/react/index.d.ts",
       "import": "./dist/client/react/index.js"
     },
+    "./client/stores": {
+      "types": "./dist/client/stores/index.d.ts",
+      "import": "./dist/client/stores/index.js"
+    },
     "./client": {
       "types": "./dist/client/index.d.ts",
       "import": "./dist/client/index.js"

packages/astro-clerk-auth/src/client/react/hooks.ts

@@ -3,13 +3,13 @@ import type {
   CheckAuthorizationWithCustomPermissions,
   Clerk,
   GetToken,
-  LoadedClerk,
   OrganizationCustomRoleKey,
   SignOut,
 } from '@clerk/types';
 import type { Store, StoreValue } from 'nanostores';
 import { useCallback, useSyncExternalStore } from 'react';
-import { $authStore, $clerk, $csrState } from '../../stores/internal';
+import { $clerk, $csrState } from '../../stores/internal';
+import { $authStore } from '../../stores/external';
 // @ts-ignore
 import { authAsyncStorage } from '#async-local-storage';
 
@@ -264,4 +264,4 @@ function useStore<T extends Store, SV extends StoreValue<T>>(store: T): SV {
      */
     return get();
   });
-}
+}

packages/astro-clerk-auth/src/client/stores/index.ts

@@ -0,0 +1 @@
+export * from '../../stores/external';

packages/astro-clerk-auth/src/stores/external.ts

@@ -0,0 +1,30 @@
+import { computed } from 'nanostores';
+import { $clerk, $csrState, $initialState } from './internal';
+import { deriveState } from './utils';
+
+export const $authStore = computed([$csrState, $initialState], (state, initialState) => {
+  return deriveState(
+    state.isLoaded,
+    {
+      session: state.session,
+      user: state.user,
+      organization: state.organization,
+      client: state.client!,
+    },
+    initialState,
+  );
+});
+
+export const $userStore = computed([$authStore], (auth) => auth.user);
+// TODO: on mounted subscriber log telemetry
+// onMount($userStore, () => {
+//   // isomorphicClerk.telemetry?.record(eventMethodCalled('useSignIn'));
+// });
+
+export const $sessionStore = computed([$authStore], (auth) => auth.session);
+export const $organizationStore = computed([$authStore], (auth) => auth.organization);
+export const $clientStore = computed([$csrState], (csr) => csr.client);
+export const $clerkStore = computed([$clerk], (clerk) => clerk);
+export const $sessionListStore = computed([$clientStore], (client) => client?.sessions);
+export const $signInStore = computed([$clientStore], (client) => client?.signIn);
+export const $signUpStore = computed([$clientStore], (client) => client?.signUp);

packages/astro-clerk-auth/src/stores/index.ts

@@ -1,2 +1,2 @@
-// TODO: Don't expose everything
+// TODO: Don't expose internal
 export * from './internal';

packages/astro-clerk-auth/src/stores/internal.ts

@@ -6,9 +6,13 @@ import type {
   OrganizationResource,
   UserResource,
 } from '@clerk/types';
-import { atom, map, computed } from 'nanostores';
-import { deriveState } from './utils';
+import { atom, map } from 'nanostores';
 
+// Deprecation warning as for not for the authors of this library
+
+/**
+ * @deprecated Use the individual stores exported from `/client/stores`
+ */
 export const $csrState = map<{
   isLoaded: boolean;
   client: ClientResource | undefined | null;
@@ -23,19 +27,13 @@ export const $csrState = map<{
   organization: null,
 });
 
+/**
+ * @deprecated Use the individual stores exported from `/client/stores`
+ */
 export const $initialState = map<InitialState>();
 
+// Use atom instead of `map` to prohibit key changes and allow only replacing the whole object
+/**
+ * @deprecated Use the individual stores exported from `/client/stores`
+ */
 export const $clerk = atom<Clerk | null>(null);
-
-export const $authStore = computed([$csrState, $initialState], (state, initialState) => {
-  return deriveState(
-    state.isLoaded,
-    {
-      session: state.session,
-      user: state.user,
-      organization: state.organization,
-      client: state.client!,
-    },
-    initialState,
-  );
-});

packages/astro-clerk-auth/tsup.config.ts

@@ -8,6 +8,7 @@ export default defineConfig(() => {
       './src/index.ts',
       './src/hotload.ts',
       './src/client/react/index.ts',
+      './src/client/stores/index.ts',
       './src/client/index.ts',
       './src/client/hotload.ts',
       './src/stores/index.ts',