fix: Allow guest and anonymous users without auth options (#2140)

Update StreamVideoClientOptions typing so guest and anonymous users must
not provide token or tokenProvider, while authenticated users must
provide at least one of them.

Continuation of: #2138

### 📝 Implementation notes

- disallow token/tokenProvider for guest and anonymous user options
- keep authenticated users requiring token or tokenProvider
- keep token/tokenProvider disallowed when user is omitted
- verified with package and sample app TypeScript checks

🎫 Ticket:
https://linear.app/stream/issue/RN-352/error-in-streamvideoclientgetorcreateinstance-method-and-user
📑 Docs: GetStream/docs-content#1042

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Enhanced type safety with distinct configuration options for guest,
anonymous, and authenticated users.
  
* **Bug Fixes**
* Simplified authentication flow for guest and anonymous users, reducing
unnecessary token/provider configurations.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: oliverlaz

packages/client/src/types.ts

@@ -350,16 +350,28 @@ type StreamVideoClientOptionsWithoutUser = StreamVideoClientBaseOptions & {
   tokenProvider?: never;
 };
 
-type StreamVideoClientOptionsWithUser = StreamVideoClientBaseOptions & {
-  user: User;
-} & (
-    | { token: string; tokenProvider?: TokenProvider }
-    | { token?: string; tokenProvider: TokenProvider }
-  );
+type GuestOrAnonymousUser = Extract<User, { type: 'guest' | 'anonymous' }>;
+type AuthenticatedUser = Exclude<User, GuestOrAnonymousUser>;
+
+type StreamVideoClientOptionsWithGuestOrAnonymousUser =
+  StreamVideoClientBaseOptions & {
+    user: GuestOrAnonymousUser;
+    token?: never;
+    tokenProvider?: never;
+  };
+
+type StreamVideoClientOptionsWithAuthenticatedUser =
+  StreamVideoClientBaseOptions & {
+    user: AuthenticatedUser;
+  } & (
+      | { token: string; tokenProvider?: TokenProvider }
+      | { token?: string; tokenProvider: TokenProvider }
+    );
 
 export type StreamVideoClientOptions =
   | StreamVideoClientOptionsWithoutUser
-  | StreamVideoClientOptionsWithUser;
+  | StreamVideoClientOptionsWithGuestOrAnonymousUser
+  | StreamVideoClientOptionsWithAuthenticatedUser;
 
 export type CallRecordingType = CallRecordingStartedEventRecordingTypeEnum;
 export type StartCallRecordingFnType = {

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

@@ -45,22 +45,16 @@ export const GuestMeetingScreen = (props: Props) => {
   useEffect(() => {
     let _videoClient: StreamVideoClient | undefined;
     const run = async () => {
-      const fetchAuthDetails = async () => {
-        return await createToken(
-          {
-            user_id: userToConnect.id ?? '!anon',
-            call_cids:
-              mode === 'anonymous' ? `${callType}:${callId}` : undefined,
-          },
-          appEnvironment,
-        );
-      };
-      const { apiKey } = await fetchAuthDetails();
-      const tokenProvider = () => fetchAuthDetails().then((auth) => auth.token);
+      const { apiKey } = await createToken(
+        {
+          user_id: userToConnect.id ?? '!anon',
+          call_cids: mode === 'anonymous' ? `${callType}:${callId}` : undefined,
+        },
+        appEnvironment,
+      );
       _videoClient = StreamVideoClient.getOrCreateInstance({
         apiKey,
         user: userToConnect,
-        tokenProvider,
         options: { logLevel: 'warn', rejectCallWhenBusy: true },
       });
       setVideoClient(_videoClient);

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

@@ -15,20 +15,31 @@ export const VideoWrapper = ({ children }: PropsWithChildren<{}>) => {
   useEffect(() => {
     let _videoClient: StreamVideoClient | undefined;
     const run = async () => {
-      const user_id = user?.id;
+      if (!user) return;
+      const user_id = user.type === 'anonymous' ? '!anon' : user.id;
       if (!user_id) return;
       const fetchAuthDetails = async () => {
         return await createToken({ user_id });
       };
       const { apiKey, token } = await fetchAuthDetails();
-      const tokenProvider = () => fetchAuthDetails().then((auth) => auth.token);
-      _videoClient = StreamVideoClient.getOrCreateInstance({
-        apiKey,
-        user,
-        token,
-        tokenProvider,
-        options: { logLevel: 'warn' },
-      });
+
+      if (user.type === 'guest' || user.type === 'anonymous') {
+        _videoClient = StreamVideoClient.getOrCreateInstance({
+          apiKey,
+          user,
+          options: { logLevel: 'warn' },
+        });
+      } else {
+        const tokenProvider = () =>
+          fetchAuthDetails().then((auth) => auth.token);
+        _videoClient = StreamVideoClient.getOrCreateInstance({
+          apiKey,
+          user,
+          token,
+          tokenProvider,
+          options: { logLevel: 'warn' },
+        });
+      }
       setVideoClient(_videoClient);
     };
     run();

sample-apps/react/livestream-app/src/hooks/useInitVideoClient.ts

@@ -21,7 +21,7 @@ export const useInitVideoClient = ({
   const { callId } = useParams<{ callId: string }>();
   const { api_key, token, type } = getURLCredentials();
   const user = useMemo<User>(() => {
-    return isAnon ? { id: '!anon', type: 'anonymous' } : getUser();
+    return isAnon ? { type: 'anonymous' } : getUser();
   }, [isAnon]);
   const apiKey = api_key ?? envApiKey;
 
@@ -31,9 +31,12 @@ export const useInitVideoClient = ({
     const tokenProvider = async () => {
       const endpoint = new URL(tokenProviderUrl);
       endpoint.searchParams.set('api_key', apiKey);
-      endpoint.searchParams.set('user_id', isAnon ? '!anon' : user.id!);
+      endpoint.searchParams.set(
+        'user_id',
+        user.type === 'anonymous' ? '!anon' : user.id!,
+      );
 
-      if (isAnon) {
+      if (user.type === 'anonymous') {
         endpoint.searchParams.set(
           'call_cids',
           `${type ?? DEFAULT_CALL_TYPE}:${callId}`,
@@ -42,12 +45,14 @@ export const useInitVideoClient = ({
       const response = await fetch(endpoint).then((res) => res.json());
       return response.token as string;
     };
-    const _client = new StreamVideoClient({
-      apiKey,
-      user,
-      token,
-      tokenProvider,
-    });
+    const _client =
+      user.type === 'anonymous' || user.type === 'guest'
+        ? new StreamVideoClient({ apiKey, user })
+        : new StreamVideoClient({
+            apiKey,
+            user,
+            ...(token ? { token, tokenProvider } : { tokenProvider }),
+          });
     setClient(_client);
 
     return () => {
@@ -56,7 +61,7 @@ export const useInitVideoClient = ({
         .catch((error) => console.error(`Unable to disconnect user`, error));
       setClient(undefined);
     };
-  }, [apiKey, callId, isAnon, token, type, user]);
+  }, [apiKey, callId, token, type, user]);
 
   return client;
 };

sample-apps/react/react-dogfood/helpers/client.ts

@@ -38,28 +38,32 @@ export const getClient = (
         storageKey: '@pronto/device-preferences',
       },
     };
-    const tokenProvider = createTokenProvider(creds.user.id, environment);
-    const authOptions = creds.userToken
-      ? {
-          token: creds.userToken,
-          tokenProvider,
-        }
-      : tokenProvider
-        ? { tokenProvider }
-        : undefined;
+    if (creds.user.type === 'guest' || creds.user.type === 'anonymous') {
+      client = new StreamVideoClient({
+        apiKey: creds.apiKey,
+        user: creds.user,
+        options,
+      });
+    } else {
+      const tokenProvider = createTokenProvider(creds.user.id, environment);
+      if (!creds.userToken && !tokenProvider) {
+        throw new Error(
+          'Cannot initialize StreamVideoClient with an authenticated user without token or tokenProvider',
+        );
+      }
 
-    if (!authOptions) {
-      throw new Error(
-        'Cannot initialize StreamVideoClient with a user without token or tokenProvider',
-      );
+      client = new StreamVideoClient({
+        apiKey: creds.apiKey,
+        user: creds.user,
+        ...(creds.userToken
+          ? {
+              token: creds.userToken,
+              ...(tokenProvider ? { tokenProvider } : {}),
+            }
+          : { tokenProvider: tokenProvider! }),
+        options,
+      });
     }
-
-    client = new StreamVideoClient({
-      apiKey: creds.apiKey,
-      user: creds.user,
-      ...authOptions,
-      options,
-    });
   }
 
   return client;