Emit custom event when token is refreshed (#51)

Author: chaance

.gitignore

@@ -1,3 +1,5 @@
 /node_modules
 /dist
 .idea/
+.DS_Store
+*.log

.prettierrc

@@ -0,0 +1 @@
+{}

src/utils/session-data.test.ts

@@ -0,0 +1,59 @@
+import { setSessionData } from "./session-data";
+import { storageKeys } from "./storage-keys";
+import { memoryStorage } from "./memory-storage";
+import { User } from "../interfaces/user.interface";
+
+const mockUser: User = {
+  object: "user",
+  id: "123",
+  email: "[email protected]",
+  emailVerified: true,
+  profilePictureUrl: "https://example.com/profile.png",
+  firstName: "Test",
+  lastName: "User",
+  externalId: "123",
+  lastSignInAt: new Date("2021-01-01").toISOString(),
+  createdAt: new Date("2021-01-01").toISOString(),
+  updatedAt: new Date("2021-01-01").toISOString(),
+};
+
+describe("setSessionData", () => {
+  // Valid JWT token for testing (not a real token, just for testing purposes)
+  const validToken =
+    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InRlc3Qta2V5In0.eyJpc3MiOiJodHRwczovL2V4YW1wbGUuY29tIiwic3ViIjoiMTIzNDU2Nzg5MCIsImF1ZCI6WyJhdWRpZW5jZTEiLCJhdWRpZW5jZTIiXSwiZXhwIjoxNzM1Njg5NjAwLCJpYXQiOjE3MzU2MDMyMDAsImp0aSI6InVuaXF1ZS1pZCIsImN1c3RvbSI6InZhbHVlIiwibmVzdGVkIjp7ImtleSI6InZhbHVlIn19.signature";
+
+  const tokenchangeListener = jest.fn();
+  beforeEach(() => {
+    window.addEventListener("authkit:tokenchange", tokenchangeListener);
+  });
+  afterEach(() => {
+    window.removeEventListener("authkit:tokenchange", tokenchangeListener);
+    memoryStorage.reset();
+  });
+
+  it("updates storage when the access token is set", () => {
+    const currentAccessToken = memoryStorage.getItem(storageKeys.accessToken);
+    setSessionData({
+      accessToken: validToken,
+      refreshToken: "refresh_token",
+      user: mockUser,
+    });
+    expect(memoryStorage.getItem(storageKeys.accessToken)).toBe(validToken);
+    expect(memoryStorage.getItem(storageKeys.accessToken)).not.toBe(
+      currentAccessToken,
+    );
+  });
+
+  it("dispatches a tokenchange event when the access token is set", () => {
+    setSessionData({
+      accessToken: validToken,
+      refreshToken: "refresh_token",
+      user: mockUser,
+    });
+    expect(tokenchangeListener).toHaveBeenCalledWith(
+      expect.objectContaining({
+        detail: { accessToken: validToken },
+      }),
+    );
+  });
+});

src/utils/session-data.ts

@@ -18,7 +18,15 @@ export function setSessionData(
 ) {
   const { user, accessToken, refreshToken } = data;
   memoryStorage.setItem(storageKeys.user, user);
-  memoryStorage.setItem(storageKeys.accessToken, accessToken);
+  const currentAccessToken = memoryStorage.getItem(storageKeys.accessToken);
+  if (currentAccessToken !== accessToken) {
+    globalThis.dispatchEvent(
+      new CustomEvent("authkit:tokenchange", {
+        detail: { accessToken },
+      }),
+    );
+    memoryStorage.setItem(storageKeys.accessToken, accessToken);
+  }
   (devMode ? window.localStorage : memoryStorage).setItem(
     storageKeys.refreshToken,
     refreshToken,
@@ -44,3 +52,17 @@ export function getRefreshToken({ devMode = false } = {}) {
     storageKeys.refreshToken,
   ) as string | undefined;
 }
+
+interface CustomEventMap {
+  "authkit:tokenchange": CustomEvent<{ accessToken: string }>;
+}
+
+declare global {
+  interface Window {
+    addEventListener<K extends keyof CustomEventMap>(
+      type: K,
+      listener: (this: Document, ev: CustomEventMap[K]) => void,
+    ): void;
+    dispatchEvent<K extends keyof CustomEventMap>(ev: CustomEventMap[K]): void;
+  }
+}