removed SET_AUTH=none option

Author: danielboxer

webmoti-react/.env.example

@@ -4,12 +4,10 @@ TWILIO_API_KEY_SID=SKxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 TWILIO_API_KEY_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 TWILIO_CONVERSATIONS_SERVICE_SID=ISxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 
-# Auth mode: (choose one)
-# none: local testing without auth
+# Auth mode:
+# leave unset: local testing without auth
 # passcode: passcode that expires after a week (not secure)
 # firebase: secure with firebase auth (use this for deploying)
-# VITE_SET_AUTH=none
-# VITE_SET_AUTH=passcode
 VITE_SET_AUTH=firebase
 
 # required for firebase auth

webmoti-react/package.json

@@ -89,9 +89,9 @@
     "server": "ts-node -T -P server/tsconfig.json server/index.ts",
     "typescript:server": "tsc --noEmit -p server/",
     "cypress:open": "cypress open",
-    "cypress:dev": "cross-env VITE_SET_AUTH=none CYPRESS_baseUrl=http://localhost:3000 start-server-and-test start http://localhost:8081 cypress:open",
+    "cypress:dev": "cross-env VITE_SET_AUTH= CYPRESS_baseUrl=http://localhost:3000 start-server-and-test start http://localhost:8081 cypress:open",
     "cypress:run": "cypress run --browser chrome",
-    "cypress:ci": "cross-env VITE_SET_AUTH=none npm run build && cross-env VITE_SET_AUTH=none CYPRESS_baseUrl=http://localhost:8081 start-server-and-test server http://localhost:8081 cypress:run",
+    "cypress:ci": "cross-env VITE_SET_AUTH= npm run build && cross-env VITE_SET_AUTH= CYPRESS_baseUrl=http://localhost:8081 start-server-and-test server http://localhost:8081 cypress:run",
     "deploy:base": "cross-env VITE_SET_AUTH=firebase npm run build && twilio rtc:apps:video:deploy --authentication=firebase --app-directory ./build --override",
     "deploy:base:passcode": "cross-env VITE_SET_AUTH=passcode npm run build && twilio rtc:apps:video:deploy --authentication=passcode --app-directory ./build --override",
     "deploy": "npm run deploy:base -- --room-type=group",

webmoti-react/src/clientEnv.ts

@@ -1,10 +1,3 @@
-const validAuthModes = ['firebase', 'passcode', 'none'] as const;
-type AuthMode = (typeof validAuthModes)[number];
-
-const requiredEnvVars = {
-  VITE_SET_AUTH: validAuthModes,
-} satisfies Record<string, readonly string[]>;
-
 // it uses functions for easier mocking in jest tests
 const clientEnv = {
   FIREBASE_API_KEY: () => import.meta.env.VITE_FIREBASE_API_KEY,
@@ -16,7 +9,7 @@ const clientEnv = {
 
   LIVEKIT_URL: () => import.meta.env.VITE_LIVEKIT_URL,
 
-  SET_AUTH: () => import.meta.env.VITE_SET_AUTH as AuthMode,
+  SET_AUTH: () => import.meta.env.VITE_SET_AUTH,
   DISABLE_TWILIO_CONVERSATIONS: () => import.meta.env.VITE_DISABLE_TWILIO_CONVERSATIONS,
   TOKEN_ENDPOINT: () => import.meta.env.VITE_TOKEN_ENDPOINT,
   ROOM_TYPE: () => import.meta.env.VITE_ROOM_TYPE,
@@ -27,18 +20,4 @@ const clientEnv = {
   IS_DEV_MODE: () => import.meta.env.DEV,
 };
 
-function validateEnvVars(rules: Record<string, readonly string[]>) {
-  for (const [key, allowed] of Object.entries(rules)) {
-    const val = import.meta.env[key];
-    if (!val) {
-      throw new Error(`Missing required environment variable: ${key}`);
-    }
-    if (!allowed.includes(val)) {
-      throw new Error(`Invalid value for ${key}: "${val}". Expected one of: ${allowed.join(', ')}`);
-    }
-  }
-}
-
-validateEnvVars(requiredEnvVars);
-
 export { clientEnv };

webmoti-react/src/components/LoginPage/LoginPage.test.tsx

@@ -109,7 +109,7 @@ describe('the LoginPage component', () => {
   });
 
   it('should redirect to "/" when auth is disabled', () => {
-    (clientEnv.SET_AUTH as jest.Mock).mockReturnValue("none");
+    (clientEnv.SET_AUTH as jest.Mock).mockReturnValue(undefined);
     mockUseAppState.mockImplementation(() => ({ user: null, signIn: () => Promise.resolve(), isAuthReady: true }));
     render(<LoginPage />);
     expect(mockNavigate).toHaveBeenCalledWith('/', { replace: true });

webmoti-react/src/components/LoginPage/LoginPage.tsx

@@ -72,7 +72,7 @@ export default function LoginPage() {
   const [passcode, setPasscode] = useState('');
   const [authError, setAuthError] = useState<Error | null>(null);
 
-  const isAuthEnabled = clientEnv.SET_AUTH() !== 'none';
+  const isAuthEnabled = !!clientEnv.SET_AUTH();
 
   const from = (location.state as { from?: Location })?.from?.pathname || '/';
 

webmoti-react/src/components/MenuBar/MenuBar.tsx

@@ -65,7 +65,7 @@ export default function MenuBar() {
             <Typography variant="body1">
               {/* only show room name in dev */}
               {/* also show when SET_AUTH is none (in cypress tests) */}
-              {(clientEnv.IS_DEV_MODE() || clientEnv.SET_AUTH() === 'none') && `${room!.name}`}
+              {(clientEnv.IS_DEV_MODE() || !clientEnv.SET_AUTH()) && `${room!.name}`}
               {/* {' | '}
               {participants.length + 1} participant
               {participants.length ? 's' : ''} */}

webmoti-react/src/components/PreJoinScreens/RoomNameScreen/RoomNameScreen.tsx

@@ -99,10 +99,9 @@ export default function RoomNameScreen({ name, roomName, setName, setRoomName, h
               />
             </div>
           )}
-          {/* hide room name field when running prod */}
-          {/* (it confuses participants and we only need one room for now) */}
-          {/* also show when SET_AUTH is none (in cypress tests) */}
-          {(clientEnv.IS_DEV_MODE() || clientEnv.SET_AUTH() === 'none') && (
+          {/* show room name field in dev or when auth is disabled (in cypress tests) */}
+          {/* hide in prod when auth is enabled */}
+          {(clientEnv.IS_DEV_MODE() || !clientEnv.SET_AUTH()) && (
             <div className={classes.textFieldContainer}>
               <InputLabel shrink htmlFor="input-room-name">
                 Room Name

webmoti-react/src/components/PrivateRoute/PrivateRoute.test.tsx

@@ -83,7 +83,7 @@ describe('PrivateRoute', () => {
 
   describe('with auth disabled', () => {
     it('renders children regardless of user or authReady', () => {
-      (clientEnv.SET_AUTH as jest.Mock).mockReturnValue("none");
+      (clientEnv.SET_AUTH as jest.Mock).mockReturnValue(undefined);
       mockUseAppState.mockReturnValue({ user: null, isAuthReady: false });
 
       render(

webmoti-react/src/components/PrivateRoute/PrivateRoute.tsx

@@ -12,7 +12,8 @@ export default function PrivateRoute({ children }: Props) {
   const { isAuthReady, user } = useAppState();
   const location = useLocation();
 
-  const renderChildren = user || clientEnv.SET_AUTH() === 'none';
+  const isAuthDisabled = !clientEnv.SET_AUTH();
+  const renderChildren = user || isAuthDisabled;
 
   if (!renderChildren && !isAuthReady) {
     return null;

webmoti-react/src/state/index.test.tsx

@@ -28,8 +28,8 @@ const wrapper = ({ children }: { children: ReactNode }) => <AppStateProvider>{ch
 describe('the useAppState hook', () => {
   beforeEach(jest.clearAllMocks);
   beforeEach(() => {
-    (clientEnv.SET_AUTH as jest.Mock).mockReturnValue("none");
-    (clientEnv.TOKEN_ENDPOINT as jest.Mock).mockReturnValue("none");
+    (clientEnv.SET_AUTH as jest.Mock).mockReturnValue(undefined);
+    (clientEnv.TOKEN_ENDPOINT as jest.Mock).mockReturnValue(undefined);
   });
 
   it('should set an error', () => {
@@ -63,7 +63,7 @@ describe('the useAppState hook', () => {
 
   describe('with auth disabled', () => {
     it('should not use any auth hooks', async () => {
-      (clientEnv.SET_AUTH as jest.Mock).mockReturnValue("none");
+      (clientEnv.SET_AUTH as jest.Mock).mockReturnValue(undefined);
 
       renderHook(useAppState, { wrapper });
       expect(useFirebaseAuth).not.toHaveBeenCalled();