chore(pronto): support ?environment flag (#2026)

Next to supporting `?api_key={key}&token={token}` we now allow one to
directly specify the `?environment` where Pronto will operate on.
Example: `pronto.getstream.io/join/123?enviroment=demo` will connect the
current Pronto instance to our demo env.

Author: oliverlaz

sample-apps/react/react-dogfood/context/AppEnvironmentContext.tsx

@@ -1,7 +1,6 @@
 import { useConnectedUser } from '@stream-io/video-react-sdk';
 import { createContext, PropsWithChildren, useContext } from 'react';
-
-export type AppEnvironment = 'pronto' | 'demo' | string;
+import type { AppEnvironment } from '../lib/environmentConfig';
 
 const environmentOverride =
   typeof window !== 'undefined' &&

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

@@ -1,5 +1,5 @@
 import { StreamVideoClient, User } from '@stream-io/video-react-sdk';
-import { AppEnvironment } from '../context/AppEnvironmentContext';
+import type { AppEnvironment } from '../lib/environmentConfig';
 import {
   CreateJwtTokenRequest,
   CreateJwtTokenResponse,

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

@@ -48,7 +48,9 @@ export const createToken = async (
   });
 };
 
-export const decodeToken = (token: string): Record<string, any> => {
+export const decodeToken = (
+  token: string,
+): Record<string, string | undefined> => {
   const [, payload] = token.split('.');
   if (!payload) throw new Error('Malformed token, missing payload');
   try {

sample-apps/react/react-dogfood/lib/environmentConfig.ts

@@ -0,0 +1,43 @@
+export type AppConfig = {
+  apiKey: string;
+  secret: string;
+  // a link to the app that can be opened in a browser:
+  // https://sample.app/rooms/join/{type}/{id}?user_id={userId}&user_name={user_name}&token={token}&api_key={api_key}
+  // supported replacements:
+  // - {type}, {id},
+  // - {userId}, {user_name}, {token},
+  // - {api_key}
+  deepLink?: string;
+  defaultCallType?: string;
+};
+
+export type SampleAppCallConfig = {
+  [appType: string]: AppConfig | undefined;
+};
+
+export type AppEnvironment = 'pronto' | 'demo' | (string & {});
+
+const config: SampleAppCallConfig = JSON.parse(
+  process.env.SAMPLE_APP_CALL_CONFIG || '{}',
+);
+
+// 'pronto' is a special environment that we ensure it exists
+if (!config['pronto']) {
+  config.pronto = {
+    apiKey: process.env.STREAM_API_KEY!,
+    secret: process.env.STREAM_SECRET_KEY!,
+  };
+}
+
+export const getEnvironmentConfig = (env: AppEnvironment) => {
+  const appConfig = config[env];
+  if (!appConfig) {
+    throw new Error(`Invalid environment: ${env}`);
+  }
+
+  if (!appConfig.apiKey || !appConfig.secret) {
+    throw new Error(`Environment '${env}' is not configured properly.`);
+  }
+
+  return appConfig;
+};

sample-apps/react/react-dogfood/lib/getServerSideCredentialsProps.ts

@@ -3,6 +3,8 @@ import { getServerSession } from 'next-auth';
 import { authOptions } from '../pages/api/auth/[...nextauth]';
 import { createToken, decodeToken } from '../helpers/jwt';
 import type { User } from '@stream-io/video-react-sdk';
+import { getEnvironmentConfig } from './environmentConfig';
+import { getRandomName, sanitizeUserId } from './names';
 
 export type ServerSideCredentialOptions = {
   signInAutomatically?: boolean;
@@ -19,6 +21,7 @@ type QueryParams = {
   api_key?: string;
   token?: string;
   user_id?: string;
+  environment?: string;
 };
 
 export const getServerSideCredentialsPropsWithOptions =
@@ -46,13 +49,18 @@ export const getServerSideCredentialsPropsWithOptions =
 
     const query = context.query as QueryParams;
 
-    const apiKey = query.api_key || (process.env.STREAM_API_KEY as string);
-    const secretKey = process.env.STREAM_SECRET_KEY as string;
+    const environment = query.environment || 'pronto';
+    const appConfig = getEnvironmentConfig(environment);
+
+    const apiKey =
+      query.api_key ||
+      appConfig.apiKey ||
+      (process.env.STREAM_API_KEY as string);
+    const secretKey =
+      appConfig.secret || (process.env.STREAM_SECRET_KEY as string);
     const gleapApiKey = (process.env.GLEAP_API_KEY as string) || null;
 
-    const userIdOverride =
-      query.token &&
-      (decodeToken(query.token)['user_id'] as string | undefined);
+    const userIdOverride = query.token && decodeToken(query.token)['user_id'];
     const userId =
       userIdOverride || query.user_id || session.user?.streamUserId;
 
@@ -66,8 +74,10 @@ export const getServerSideCredentialsPropsWithOptions =
     }
 
     // Chat does not allow for Id's to include special characters
-    const streamUserId = userId.replace(/[^_\-0-9a-zA-Z@]/g, '_');
+    const streamUserId = sanitizeUserId(userId);
 
+    const isProntoSales =
+      process.env.NEXT_PUBLIC_APP_ENVIRONMENT === 'pronto-sales';
     const token =
       query.token ||
       (await createToken(
@@ -76,9 +86,7 @@ export const getServerSideCredentialsPropsWithOptions =
         secretKey,
         session.user?.stream
           ? {
-              ...(process.env.NEXT_PUBLIC_APP_ENVIRONMENT === 'pronto-sales'
-                ? { role: 'stream' }
-                : {}),
+              ...(isProntoSales ? { role: 'stream' } : {}),
               name: session.user?.name,
               image: session.user?.image,
               email: session.user?.email,
@@ -92,7 +100,9 @@ export const getServerSideCredentialsPropsWithOptions =
         userToken: token,
         user: {
           id: streamUserId,
-          ...(session.user?.name ? { name: session.user.name } : {}),
+          ...(session.user?.name
+            ? { name: session.user.name }
+            : { name: isProntoSales ? '' : getRandomName() }),
           ...(session.user?.image ? { image: session.user.image } : {}),
         },
         gleapApiKey,

sample-apps/react/react-dogfood/pages/api/auth/create-token.ts

@@ -1,19 +1,6 @@
 import { NextApiRequest, NextApiResponse } from 'next';
 import { createToken, maxTokenValidityInSeconds } from '../../../helpers/jwt';
-import { SampleAppCallConfig } from '../call/sample';
-import type { AppEnvironment } from '../../../context/AppEnvironmentContext';
-
-const config: SampleAppCallConfig = JSON.parse(
-  process.env.SAMPLE_APP_CALL_CONFIG || '{}',
-);
-
-// 'pronto' is a special environment that we ensure it exists
-if (!config['pronto']) {
-  config.pronto = {
-    apiKey: process.env.STREAM_API_KEY,
-    secret: process.env.STREAM_SECRET_KEY,
-  };
-}
+import { getEnvironmentConfig } from '../../../lib/environmentConfig';
 
 export type CreateJwtTokenErrorResponse = {
   error: string;
@@ -28,7 +15,7 @@ export type CreateJwtTokenResponse = {
 
 export type CreateJwtTokenRequest = {
   user_id: string;
-  environment?: AppEnvironment;
+  environment?: string;
   /** @deprecated */
   api_key?: string;
   [key: string]: string | string[] | undefined;
@@ -53,22 +40,6 @@ const createJwtToken = async (
     else if (apiKeyFromRequest === '2g3htdemzwhg') environment = 'demo-flutter';
   }
 
-  const appConfig = config[(environment || 'demo') as AppEnvironment];
-  if (!appConfig) {
-    return error(res, `'environment' parameter is invalid.`);
-  }
-
-  if (!appConfig.apiKey || !appConfig.secret) {
-    return res.status(400).json({
-      error: `environment: '${environment}' is not configured properly.`,
-    });
-  }
-
-  const { apiKey, secret: secretKey } = appConfig;
-  if (!secretKey) {
-    return error(res, `'api_key' parameter is invalid.`);
-  }
-
   if (!userId) {
     return error(res, `'user_id' is a mandatory query parameter.`);
   }
@@ -93,21 +64,30 @@ const createJwtToken = async (
         .map((cid) => cid.trim());
     }
   }
-
+  const appConfig = getEnvironmentConfig(environment || 'demo');
   const token = await createToken(
     userId,
-    apiKey,
-    secretKey,
+    appConfig.apiKey,
+    appConfig.secret,
     params as Record<string, string | string[]>,
   );
-  return res.status(200).json({
+  res.status(200).json({
     userId,
-    apiKey,
+    apiKey: appConfig.apiKey,
     token,
   });
 };
 
-export default createJwtToken;
+export default async function createTokenApi(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  try {
+    return await createJwtToken(req, res);
+  } catch (e) {
+    return error(res, (e as Error).message);
+  }
+}
 
 const error = (
   res: NextApiResponse,

sample-apps/react/react-dogfood/pages/api/call/sample.ts

@@ -2,23 +2,7 @@ import { NextApiRequest, NextApiResponse } from 'next';
 import { meetingId } from '../../../lib/idGenerators';
 import { createToken } from '../../../helpers/jwt';
 import { getRandomName } from '../../../lib/names';
-
-export type AppConfig = {
-  apiKey?: string;
-  secret?: string;
-  // a link to the app that can be opened in a browser:
-  // https://sample.app/rooms/join/{type}/{id}?user_id={userId}&user_name={user_name}&token={token}&api_key={api_key}
-  // supported replacements:
-  // - {type}, {id},
-  // - {userId}, {user_name}, {token},
-  // - {api_key}
-  deepLink?: string;
-  defaultCallType?: string;
-};
-
-export type SampleAppCallConfig = {
-  [appType: string]: AppConfig | undefined;
-};
+import { getEnvironmentConfig } from '../../../lib/environmentConfig';
 
 type CreateSampleAppCallResponse = {
   apiKey: string;
@@ -38,35 +22,28 @@ type CreateSampleAppCallRequest = {
   call_type?: string;
 };
 
-const config: SampleAppCallConfig = JSON.parse(
-  process.env.SAMPLE_APP_CALL_CONFIG || '{}',
-);
-
-export default async function createSampleAppCall(
+export default async function createSampleAppCallApi(
   req: NextApiRequest,
   res: NextApiResponse,
 ) {
-  if (!req.query['app_type']) {
+  try {
+    return await createSampleAppCall(req, res);
+  } catch (e) {
     return res.status(400).json({
-      error: 'app_type is a mandatory query parameter.',
+      error: (e as Error).message,
     });
   }
+}
 
-  const data = req.query as CreateSampleAppCallRequest;
-  const appConfig = config[data.app_type];
-  if (!appConfig) {
+async function createSampleAppCall(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.query['app_type']) {
     return res.status(400).json({
-      error: `app_type '${
-        data.app_type
-      }' is not supported. Supported types: ${Object.keys(config).join(', ')}`,
+      error: 'app_type is a mandatory query parameter.',
     });
   }
 
-  if (!appConfig.apiKey || !appConfig.secret) {
-    return res.status(400).json({
-      error: `app_type '${data.app_type}' is not configured properly.`,
-    });
-  }
+  const data = req.query as CreateSampleAppCallRequest;
+  const appConfig = getEnvironmentConfig(data.app_type);
 
   const userName = getRandomName();
   const userId = toUserId(userName);