feat: expose token as client setting

Author: stigi

packages/react-headless/src/components/MagicBellProvider/MagicBellProvider.tsx

@@ -19,6 +19,7 @@ export interface MagicBellProviderProps {
   userEmail?: string;
   userExternalId?: string;
   userKey?: string;
+  token?: string;
   children: React.ReactElement | React.ReactElement[];
   stores?: StoreConfig[];
   serverURL?: string;
@@ -54,6 +55,7 @@ function setupStores(storesConfig: StoreConfig[]) {
  * @param props.userEmail Email of the user whose notifications will be displayed
  * @param props.userExternalId External ID of the user whose notifications will be displayed
  * @param props.userKey Computed HMAC of the user whose notifications will be displayed, compute this with the secret of the magicbell project
+ * @param props.token User token that can be used to authenticate instead of using the apiKey + userEmail/userExternalID combination
  * @param props.stores List of stores to be created
  * @param props.disableRealtime Disable realtime updates
  *

packages/react-headless/src/stores/clientSettings.ts

@@ -8,6 +8,7 @@ export type ClientSettings = {
   userEmail?: string;
   userExternalId?: string;
   userKey?: string;
+  token?: string;
   clientId: string;
   serverURL: string;
   getClient(): InstanceType<typeof UserClient>;
@@ -30,13 +31,14 @@ const clientSettings = createStore<ClientSettings>((set, get) => {
     userEmail: undefined,
     userExternalId: undefined,
     userKey: undefined,
+    token: undefined,
     clientId: Math.random().toString(36).substring(2) + Date.now(),
     serverURL: 'https://api.magicbell.com',
     appInfo: undefined,
 
     getClient() {
       const state = get();
-      const key = JSON.stringify([state.apiKey, state.userEmail, state.userExternalId, state.userKey]);
+      const key = JSON.stringify([state.apiKey, state.userEmail, state.userExternalId, state.userKey, state.token]);
 
       if (key !== _key) {
         _key = key;
@@ -45,6 +47,7 @@ const clientSettings = createStore<ClientSettings>((set, get) => {
           userEmail: state.userEmail,
           userHmac: state.userKey,
           apiKey: state.apiKey,
+          token: state.token,
           host: state.serverURL,
           appInfo: state.appInfo || {
             name: pkg.name,