feat(react-headless): expose token as client setting (#465)

The v1 user client supports token auth
([code](https://github.com/magicbell/magicbell-js/blob/794f5220f485415863e414bf500d8d982ff66663/packages/magicbell/src/user-client.ts/#L14)),
but that was not available in react-headless
([code](https://github.com/magicbell/magicbell-js/blob/794f5220f485415863e414bf500d8d982ff66663/packages/react-headless/src/stores/clientSettings.ts/#L6-L15)).

This PR allows to pass the `token` through the `MagicBellProvide` to the
`UserClient` where it was already accepted.

I've tested this in magicbell/mobile-inbox#21
where I used the preview package and can confirm that notifications load
successfully when using a v2 JWT token.

Author: stigi

.changeset/tidy-gorillas-lie.md

@@ -0,0 +1,5 @@
+---
+'@magicbell/react-headless': minor
+---
+
+Added `token` as a way to authenticate the react-headless SDK. Also improved typings to make clear which combination of parameters are expected

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

@@ -14,16 +14,16 @@ type StoreConfig = {
   defaults?: Partial<Omit<INotificationStore, 'context'>>;
 };
 
-export interface MagicBellProviderProps {
-  apiKey: string;
-  userEmail?: string;
-  userExternalId?: string;
-  userKey?: string;
+export type MagicBellProviderProps = {
   children: React.ReactElement | React.ReactElement[];
   stores?: StoreConfig[];
   serverURL?: string;
   disableRealtime?: boolean;
-}
+} & (
+  | { apiKey: string; userEmail: string; userKey?: string; token?: never }
+  | { apiKey: string; userExternalId: string; userKey?: string; token?: never }
+  | { token: string; apiKey?: never }
+);
 
 function setupXHR({ serverURL, ...userSettings }: Omit<MagicBellProviderProps, 'children' | 'stores'>) {
   const settings = userSettings as ClientSettings;
@@ -54,6 +54,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,