fix: allow anonymous StreamVideoClientOptions to accept token fields (#2142)

- allow `StreamVideoClientOptions` for anonymous users to accept `token` and `tokenProvider`
- fix React Native sample app compile errors caused by guest/anonymous union arguments at `getOrCreateInstance`

### 📝 Implementation notes
- split guest and anonymous option variants in
`packages/client/src/types.ts`
- keep guest behavior unchanged (`token`/`tokenProvider` are disallowed)
- add anonymous variant with optional `token` and `tokenProvider`
- keep authenticated user variant strict (at least one of `token` or
`tokenProvider`)
- update dogfood `GuestMeetingScreen` and expo sample `VideoWrapper` to
narrow user type before calling `getOrCreateInstance`

🎫 Ticket: #2138

Author: oliverlaz

packages/client/src/types.ts

@@ -350,14 +350,21 @@ type StreamVideoClientOptionsWithoutUser = StreamVideoClientBaseOptions & {
   tokenProvider?: never;
 };
 
-type GuestOrAnonymousUser = Extract<User, { type: 'guest' | 'anonymous' }>;
-type AuthenticatedUser = Exclude<User, GuestOrAnonymousUser>;
+type GuestUser = Extract<User, { type: 'guest' }>;
+type AnonymousUser = Extract<User, { type: 'anonymous' }>;
+type AuthenticatedUser = Exclude<User, GuestUser | AnonymousUser>;
 
-type StreamVideoClientOptionsWithGuestOrAnonymousUser =
+type StreamVideoClientOptionsWithGuestUser = StreamVideoClientBaseOptions & {
+  user: GuestUser;
+  token?: never;
+  tokenProvider?: never;
+};
+
+type StreamVideoClientOptionsWithAnonymousUser =
   StreamVideoClientBaseOptions & {
-    user: GuestOrAnonymousUser;
-    token?: never;
-    tokenProvider?: never;
+    user: AnonymousUser;
+    token?: string;
+    tokenProvider?: TokenProvider;
   };
 
 type StreamVideoClientOptionsWithAuthenticatedUser =
@@ -370,7 +377,8 @@ type StreamVideoClientOptionsWithAuthenticatedUser =
 
 export type StreamVideoClientOptions =
   | StreamVideoClientOptionsWithoutUser
-  | StreamVideoClientOptionsWithGuestOrAnonymousUser
+  | StreamVideoClientOptionsWithGuestUser
+  | StreamVideoClientOptionsWithAnonymousUser
   | StreamVideoClientOptionsWithAuthenticatedUser;
 
 export type CallRecordingType = CallRecordingStartedEventRecordingTypeEnum;

sample-apps/react-native/dogfood/src/screens/Meeting/GuestMeetingScreen.tsx

@@ -5,7 +5,6 @@ import {
   StreamCall,
   StreamVideo,
   StreamVideoClient,
-  User,
 } from '@stream-io/video-react-native-sdk';
 import { MeetingStackParamList } from '../../../types';
 import { MeetingUI } from '../../components/MeetingUI';
@@ -29,34 +28,33 @@ export const GuestMeetingScreen = (props: Props) => {
   } = props.route;
   const callType = 'default';
 
-  const userToConnect: User = useMemo(
-    () =>
-      mode === 'guest'
-        ? {
-            id: guestUserId,
-            type: 'guest',
-          }
-        : {
-            type: 'anonymous',
-          },
-    [mode, guestUserId],
-  );
-
   useEffect(() => {
     let _videoClient: StreamVideoClient | undefined;
     const run = async () => {
-      const { apiKey } = await createToken(
+      const { apiKey, token } = await createToken(
         {
-          user_id: userToConnect.id ?? '!anon',
+          user_id: mode === 'guest' ? guestUserId : '!anon',
           call_cids: mode === 'anonymous' ? `${callType}:${callId}` : undefined,
         },
         appEnvironment,
       );
-      _videoClient = StreamVideoClient.getOrCreateInstance({
-        apiKey,
-        user: userToConnect,
-        options: { logLevel: 'warn', rejectCallWhenBusy: true },
-      });
+
+      const options = { logLevel: 'warn', rejectCallWhenBusy: true } as const;
+      if (mode === 'guest') {
+        _videoClient = StreamVideoClient.getOrCreateInstance({
+          apiKey,
+          user: { id: guestUserId, type: 'guest' },
+          options,
+        });
+      } else {
+        _videoClient = StreamVideoClient.getOrCreateInstance({
+          apiKey,
+          user: { type: 'anonymous' },
+          token,
+          options,
+        });
+      }
+
       setVideoClient(_videoClient);
     };
 
@@ -66,7 +64,7 @@ export const GuestMeetingScreen = (props: Props) => {
       _videoClient?.disconnectUser();
       setVideoClient(undefined);
     };
-  }, [userToConnect, mode, callId, appEnvironment]);
+  }, [mode, guestUserId, callId, appEnvironment]);
 
   const call = useMemo<Call | undefined>(() => {
     if (!videoClient) {

sample-apps/react-native/expo-video-sample/components/VideoWrapper.tsx

@@ -23,12 +23,19 @@ export const VideoWrapper = ({ children }: PropsWithChildren<{}>) => {
       };
       const { apiKey, token } = await fetchAuthDetails();
 
-      if (user.type === 'guest' || user.type === 'anonymous') {
+      if (user.type === 'guest') {
         _videoClient = StreamVideoClient.getOrCreateInstance({
           apiKey,
           user,
           options: { logLevel: 'warn' },
         });
+      } else if (user.type === 'anonymous') {
+        _videoClient = StreamVideoClient.getOrCreateInstance({
+          apiKey,
+          user,
+          token,
+          options: { logLevel: 'warn' },
+        });
       } else {
         const tokenProvider = () =>
           fetchAuthDetails().then((auth) => auth.token);