went through every file to rid of session token (#487)

- changed env to not go through proxy
- some logging states need updates to accommodate the change

Co-authored-by: wil <wil@storyteller.ai>

.env

@@ -1,5 +1,5 @@
-BASE_API="http://localhost:3000"
-GOOGLE_API="http://localhost:3000/google"
-FUNNEL_API="http://localhost:3000/funnel"
-CDN_API="http://localhost:3000/cdn"
+BASE_API="https://api.storyteller.ai"
+GOOGLE_API="https://storage.googleapis.com"
+FUNNEL_API="https://style.storyteller.ai"
+CDN_API="https://cdn.storyteller.ai"
 GRAVATAR_API="https://www.gravatar.com"

app/api/MakeMultipartRequest.ts

@@ -1,19 +1,15 @@
-import { authentication } from "~/signals";
-
 const MakeMultipartRequest = (endpoint = "", body: any) => {
-  const { sessionToken } = authentication;
   const formData = new FormData();
 
   Object.keys(body).forEach((key) => formData.append(key, body[key]));
 
   formData.append("source", "file");
 
-  return fetch(`https://api.fakeyou.com${endpoint}`, {
+  return fetch(`https://api.storyteller.ai${endpoint}`, {
     method: "POST",
     credentials: "include",
     headers: {
       Accept: "application/json",
-      session: sessionToken.value || "",
     },
     body: formData,
   })

app/api/MakeRequest.ts

@@ -1,4 +1,4 @@
-import { environmentVariables, authentication } from "~/signals";
+import { environmentVariables } from "~/signals";
 
 type UrlRoutingFunction<UrlRouteArgs> = (urlRouteArgs: UrlRouteArgs) => string;
 
@@ -29,7 +29,6 @@ const MakeRequest = <UrlRouteArgs, Request, Response, UrlParams>(
     request: Request,
     queries?: any,
   ): Promise<Response> {
-    const { sessionToken } = authentication;
     const newQueries = queries
       ? Object.keys(queries)
           .map((key, i) => {
@@ -48,9 +47,8 @@ const MakeRequest = <UrlRouteArgs, Request, Response, UrlParams>(
       headers: {
         Accept: "application/json",
         ...(methodOmitsBody ? {} : { "Content-Type": "application/json" }),
-        session: sessionToken.value || "",
       },
-      // credentials: "include",
+      credentials: "include",
       ...(methodOmitsBody ? {} : { body: JSON.stringify(request) }),
     })
       .then((res) => res.json())

app/components/signaled/TopBar/utilities.tsx

@@ -1,36 +1,28 @@
 import { renameScene as renameSceneEndpoint } from "~/api";
-import { authentication } from "~/signals";
 
 export const renameScene = (sceneTitle: string, sceneToken: string) => {
-  const { sessionToken } = authentication;
   const endpoint = renameSceneEndpoint(sceneToken);
 
-  if (sessionToken.value) {
-    return fetch(endpoint, {
-      method: "POST",
-      headers: {
-        Accept: "application/json",
-        session: sessionToken.value,
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        name: sceneTitle,
-      }),
+  return fetch(endpoint, {
+    method: "POST",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+    },
+    credentials: "include",
+    body: JSON.stringify({
+      name: sceneTitle,
+    }),
+  })
+    .then((res) => res.json())
+    .then((res) => {
+      if (res && res.success) {
+        // console.log(res);
+        return res;
+      }
+      return { success: false };
     })
-      .then((res) => res.json())
-      .then((res) => {
-        if (res && res.success) {
-          // console.log(res);
-          return res;
-        }
-        return { success: false };
-      })
-      .catch((e) => {
-        return { success: false };
-      });
-  } else {
-    return new Promise((resolve) => {
-      resolve({ success: false });
+    .catch(() => {
+      return { success: false };
     });
-  }
 };

app/components/signaled/UploadAudioButtonDialogue/utilities.tsx

@@ -1,5 +1,4 @@
 import { uploadMedia } from "~/api";
-import { authentication } from "~/signals";
 
 export interface UploadMediaRequest {
   uuid_idempotency_token: string;
@@ -25,8 +24,8 @@ export const UploadMedia = (request: UploadMediaRequest) => {
     method: "POST",
     headers: {
       Accept: "application/json",
-      session: authentication.sessionToken.value || "",
     },
+    credentials: "include",
     body: formData,
   })
     .then((res) => res.json())

app/components/signaled/UploadAudioComponent/utilities.tsx

@@ -1,9 +1,8 @@
 import { uploadAudioV2V } from "~/api";
-import { authentication } from "~/signals";
 export interface UploadAudioRequest {
   uuid_idempotency_token: string;
   source?: string; // eg. "device", "file"
-  file: any;
+  file: File;
 }
 
 export interface UploadAudioResponse {
@@ -31,8 +30,8 @@ export async function UploadAudio(
     method: "POST",
     headers: {
       Accept: "application/json",
-      session: authentication.sessionToken.value || "",
     },
+    credentials: "include",
     body: formData,
   })
     .then((res) => res.json())
@@ -42,7 +41,7 @@ export async function UploadAudio(
       }
       return { success: false };
     })
-    .catch((e) => {
+    .catch(() => {
       return { success: false };
     });
 }

app/enums/authentication.ts

@@ -7,6 +7,7 @@ export enum AUTH_STATUS {
   NO_ACCESS = "no_access",
   LOGGED_IN = "logged_in",
   LOGGING = "logging",
+  LOGGING2 = "logging_2",
   LOGGED_OUT = "logged_out",
 }
 

app/hoc/withProtectedRoute.tsx

@@ -12,16 +12,15 @@ export const withProtectionRoute = <P extends object>(
   function ProtectionRoute(rest: P) {
     useSignals();
     useSignalEffect(() => {
-      if (authentication.status.value === AUTH_STATUS.INIT) {
-        persistLogin();
-      }
+      persistLogin();
     });
 
     const { status, userInfo } = authentication;
     //render according to auth status
     if (
       status.value === AUTH_STATUS.INIT ||
-      status.value === AUTH_STATUS.LOGGING
+      status.value === AUTH_STATUS.LOGGING ||
+      status.value === AUTH_STATUS.LOGGING2
     ) {
       return (
         <div className="fixed flex h-full w-full flex-col  items-center justify-center">

app/pages/PageEnigma/Editor/api_fetchers.ts

@@ -1,14 +1,10 @@
 import { v4 as uuidv4 } from "uuid";
 import {
   uploadNewScene as uploadNewSceneEndpoint,
-  updateExistingScene as updateExistingSceneEndpoint
+  updateExistingScene as updateExistingSceneEndpoint,
 } from "~/api";
 
-export const uploadNewScene = async (
-  file:File,
-  sceneTitle: string,
-  sessionToken: string
-) => {
+export const uploadNewScene = async (file: File, sceneTitle: string) => {
   const endpoint = uploadNewSceneEndpoint;
   const formData = new FormData();
   formData.append("uuid_idempotency_token", uuidv4());
@@ -16,93 +12,52 @@ export const uploadNewScene = async (
   formData.append("maybe_title", sceneTitle);
   formData.append("maybe_visibility", "public");
   formData.append("engine_category", "scene");
-  
+
   return await fetch(endpoint, {
-    method: 'POST',
+    method: "POST",
     headers: {
-      Accept: 'application/json',
-      session: sessionToken,
+      Accept: "application/json",
     },
+    credentials: "include",
     body: formData,
   })
-  .then(res => res.json())
-  .then(res => {
-    if (res && res.success) {
-      return res;
-    } else {
-      return { success : false };
-    }
-  })
-  .catch(e => {
-    return { success : false };
-  });
-}
+    .then((res) => res.json())
+    .then((res) => {
+      if (res && res.success) {
+        return res;
+      } else {
+        return { success: false };
+      }
+    })
+    .catch(() => {
+      return { success: false };
+    });
+};
 
-export const updateExistingScene = async (
-  file:File,
-  sceneToken: string,
-  sessionToken: string,
-) => {
+export const updateExistingScene = async (file: File, sceneToken: string) => {
   const endpoint = updateExistingSceneEndpoint(sceneToken);
 
   const formData = new FormData();
   formData.append("uuid_idempotency_token", uuidv4());
   formData.append("file", file);
- 
+
   return await fetch(endpoint, {
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        session: sessionToken,
-      },
-      body: formData,
+    method: "POST",
+    headers: {
+      Accept: "application/json",
+    },
+    credentials: "include",
+    body: formData,
   })
-  .then(res => res.json())
-  .then(res => {
-    if (res && res.success) {
-      return res;
-    } else {
-      return { success : false };
-    }
-  })
-  .catch(e => {
-    return { success : false };
-  });
-}
-
-// function uploadEngineAsset(
-//   file: File,
-//   media_file_token: string | null,
-// ): Promise<any> {
-//   const url = `${this.baseUrl}/v1/media_files/write/engine_asset`;
-//   const uuid = uuidv4();
-//   const form_data = new FormData();
-//   form_data.append("uuid_idempotency_token", uuid);
-
-//   // update existing scene otherwise create new glb scene and use it's media_file_id
-//   if (media_file_token != null) {
-//     form_data.append("media_file_token", media_file_token);
-//   }
-
-//   form_data.append("file", file);
-//   form_data.append("source", "file");
-//   form_data.append("media_file_subtype", "scene_import");
-//   form_data.append("media_file_class", "scene");
-
-//   const response = await fetch(url, {
-//     method: "POST",
-//     // credentials: "include",
-//     headers: {
-//       Accept: "application/json",
-//       session: this.sessionToken,
-//     },
-//     body: form_data,
-//   });
-
-//   if (!response.ok) {
-//     throw new Error("Failed to Send Data");
-//   } else {
-//     const json_data = await response.json();
-//     return json_data; // or handle the response as appropriate
-//   }
-// }
+    .then((res) => res.json())
+    .then((res) => {
+      if (res && res.success) {
+        return res;
+      } else {
+        return { success: false };
+      }
+    })
+    .catch(() => {
+      return { success: false };
+    });
+};

app/pages/PageEnigma/Editor/api_manager.ts

@@ -98,11 +98,9 @@ class APIManagerResponseError extends Error {
 
 export class APIManager {
   baseUrl: string;
-  sessionToken: string;
 
   constructor() {
     this.baseUrl = environmentVariables.value.BASE_API;
-    this.sessionToken = localStorage.getItem(STORAGE_KEYS.SESSION_TOKEN) || "";
   }
 
   /**
@@ -127,8 +125,8 @@ export class APIManager {
     });
 
     const uploadSceneResponse = sceneToken
-      ? await updateExistingScene(file, sceneToken, this.sessionToken)
-      : await uploadNewScene(file, sceneTitle, this.sessionToken);
+      ? await updateExistingScene(file, sceneToken)
+      : await uploadNewScene(file, sceneTitle);
 
     if (sceneThumbnail) {
       const image_resp = await this.uploadMediaSceneThumbnail(

app/pages/PageEnigma/comps/ControlsTopButtons/LoadUserScenes/utilities.ts

@@ -9,7 +9,7 @@ export const GetScenesByUser = () => {
     success: false,
     error_reason: "Unknown error in Loading User Scenes",
   };
-  if (!authentication.userInfo.value || !authentication.sessionToken.value) {
+  if (!authentication.userInfo.value) {
     return new Promise<typeof unknownError>((resolve) => {
       resolve(unknownError);
     });
@@ -23,8 +23,8 @@ export const GetScenesByUser = () => {
     method: "GET",
     headers: {
       Accept: "application/json",
-      session: authentication.sessionToken.value,
     },
+    credentials: "include",
   })
     .then((res) => res.json())
     .then((res: GetMediaListResponse) => {
@@ -34,40 +34,3 @@ export const GetScenesByUser = () => {
       return unknownError;
     });
 };
-
-// (
-//       userInfo.value.username,
-//       {},
-//       {
-//         filter_engine_categories: MediaFileType.Scene,
-//       },
-//     )
-//       .then((res: GetMediaListResponse) => {
-//         if (res.success && res.results) {
-//           setScenes(updateScenes(res.results));
-//           setIsSceneLoading(false);
-//         }
-//       })
-//       .catch(() => {
-//         return {
-//           success: false,
-//           error_reason: "Unknown error",
-//         };
-//       });
-//     if (featuredStatus === FetchStatus.ready) {
-//       featuredStatusSet(FetchStatus.in_progress);
-//       ListFeaturedMediaFiles(
-//         "",
-//         {},
-//         {
-//           filter_engine_categories: "scene",
-//           page_size: 100,
-//         },
-//       ).then((res: ListFeaturedMediaFilesResponse) => {
-//         if (res.success && res.results) {
-//           featuredStatusSet(FetchStatus.success);
-//           featuredSet(updateScenes(res.results));
-//         }
-//       });
-//     }
-//   }, [featuredStatus, scenes, userInfo.value]);

app/pages/PageEnigma/comps/ControlsTopButtons/NewSceneFromTemplate/utilities.ts

@@ -1,5 +1,5 @@
 import { ListFeaturedMediaFilesResponse } from "~/api/media_files/ListFeaturedMediaFiles";
-import { authentication, environmentVariables } from "~/signals";
+import { environmentVariables } from "~/signals";
 
 const listFeaturedScenes = () =>
   `${environmentVariables.value.BASE_API}/v1/media_files/list_featured?filter_media_type=scene_json`;
@@ -9,19 +9,14 @@ export const ListFeaturedScenes = () => {
     success: false,
     error_reason: "Unknown error in Loading Featured Scenes",
   };
-  if (!authentication.userInfo.value || !authentication.sessionToken.value) {
-    return new Promise<typeof unknownError>((resolve) => {
-      resolve(unknownError);
-    });
-  }
   const endpoint = listFeaturedScenes();
 
   return fetch(endpoint, {
     method: "GET",
     headers: {
       Accept: "application/json",
-      session: authentication.sessionToken.value,
     },
+    credentials: "include",
   })
     .then((res) => res.json())
     .then((res: ListFeaturedMediaFilesResponse) => {

app/pages/PageEnigma/comps/GenerateModals/InProgressCard.tsx

@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faClose } from "@fortawesome/pro-solid-svg-icons";
 
-import { STORAGE_KEYS, ToastTypes } from "~/enums";
+import { ToastTypes } from "~/enums";
 import { addToast, environmentVariables } from "~/signals";
 
 import { JobState } from "~/pages/PageEnigma/enums";
@@ -33,14 +33,13 @@ export function InProgressCard({ movie }: Props) {
 
   const deleteJob = useCallback(() => {
     const endpoint = `${environmentVariables.value.BASE_API}/v1/jobs/job/${movie.job_token}`;
-    const sessionToken = localStorage.getItem(STORAGE_KEYS.SESSION_TOKEN) || "";
 
     fetch(endpoint, {
       method: "DELETE",
       headers: {
         Accept: "application/json",
-        session: sessionToken,
       },
+      credentials: "include",
     })
       .then(() => {
         addToast(ToastTypes.SUCCESS, "File successfully deleted.");

app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/AudioTab/utilities.ts

@@ -26,18 +26,18 @@ import {
 } from "~/pages/PageEnigma/models";
 
 import { authentication } from "~/signals";
-const { userInfo, sessionToken } = authentication;
+const { userInfo } = authentication;
 
 export const ListAudioByUser = () => {
-  if (userInfo.value && sessionToken.value) {
+  if (userInfo.value) {
     return fetch(
       listMediaByUser(userInfo.value.username) + "?filter_media_type=audio",
       {
         method: "GET",
         headers: {
           Accept: "application/json",
-          session: sessionToken.value,
         },
+        credentials: "include",
       },
     )
       .then((res) => res.json())
@@ -57,13 +57,13 @@ export const ListAudioByUser = () => {
 };
 
 export function ListTtsModels(): Promise<Array<TtsModelListItem> | undefined> {
-  if (userInfo.value && sessionToken.value) {
+  if (userInfo.value) {
     return fetch(listTts, {
       method: "GET",
       headers: {
         Accept: "application/json",
-        session: sessionToken.value,
       },
+      credentials: "include",
     })
       .then((res) => res.json())
       .then((res) => {
@@ -106,8 +106,8 @@ export function GenerateTtsAudio(
     headers: {
       Accept: "application/json",
       "Content-Type": "application/json",
-      session: sessionToken.value || "",
     },
+    credentials: "include",
     body: JSON.stringify(request),
   })
     .then((res) => res.json())
@@ -139,8 +139,8 @@ export function GetMediaFileByToken(
     headers: {
       Accept: "application/json",
       "Content-Type": "application/json",
-      session: sessionToken.value || "",
     },
+    credentials: "include",
   })
     .then((res) => res.json())
     .then((res) => {
@@ -167,31 +167,25 @@ export function GetMediaFileByToken(
 export function ListVoiceConversionModels(): Promise<
   Array<VoiceConversionModelListItem> | undefined
 > {
-  if (sessionToken.value) {
-    return fetch(listV2V, {
-      method: "GET",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-        session: sessionToken.value,
-      },
+  return fetch(listV2V, {
+    method: "GET",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+    },
+    credentials: "include",
+  })
+    .then((res) => res.json())
+    .then((res) => {
+      const response: VoiceConversionModelListResponse = res;
+      if (!response.success) {
+        return;
+      }
+      return response?.models;
     })
-      .then((res) => res.json())
-      .then((res) => {
-        const response: VoiceConversionModelListResponse = res;
-        if (!response.success) {
-          return;
-        }
-        return response?.models;
-      })
-      .catch(() => {
-        return undefined;
-      });
-  } else {
-    return new Promise((resolve) => {
-      resolve(undefined);
+    .catch(() => {
+      return undefined;
     });
-  }
 }
 
 export function GenerateVoiceConversion(
@@ -202,7 +196,6 @@ export function GenerateVoiceConversion(
     headers: {
       Accept: "application/json",
       "Content-Type": "application/json",
-      session: sessionToken.value || "",
     },
     body: JSON.stringify(request),
   })

app/routes/Login.tsx

@@ -139,7 +139,7 @@ const getAuthLoaderMessage = () => {
   if (authentication.status.value === AUTH_STATUS.LOGGED_IN) {
     return "Authenticated, Redirecting...";
   }
-  if (authentication.sessionToken) {
+  if (authentication.status.value === AUTH_STATUS.LOGGING2) {
     return "Getting User Info...";
   }
   return "Getting Session...";

app/signals/authentication/authentication.ts

@@ -3,7 +3,6 @@ import { ActiveSubscriptions, UserInfo } from "~/models";
 import { AUTH_STATUS, LoyaltyProgram } from "~/enums";
 
 const status = signal<AUTH_STATUS>(AUTH_STATUS.INIT);
-const sessionToken = signal<string | undefined>(undefined);
 const userInfo = signal<UserInfo | undefined>(undefined);
 const activeSubs = signal<ActiveSubscriptions | undefined>(undefined);
 
@@ -32,7 +31,6 @@ const hasPremium = computed(() => {
 
 export const authentication = {
   status,
-  sessionToken,
   userInfo,
   activeSubs,
   hasAccess,

app/signals/authentication/fetchers.ts

@@ -5,7 +5,6 @@ import { BillingApi } from "~/Classes/ApiManager/BillingApi";
 import {
   updateActiveSubscriptions,
   updateAuthStatus,
-  updateSessionToken,
   updateUserInfo,
   setLogoutStates,
 } from "./utilities";
@@ -42,8 +41,6 @@ export const login = async ({
     setLogoutStates();
     return;
   }
-  //TODO: DELETE THIS TOKEN HACK ASAP
-  updateSessionToken(loginResponse.data.signedSession);
 
   // technically user is login with the system now, HOWEVER,
   // in storyteller studio, only having a sesison is not enough,
@@ -56,37 +53,11 @@ export const persistLogin = async () => {
   if (authentication.status.value !== AUTH_STATUS.INIT) {
     return;
   }
-  //Persist Login if Session Data exist
-  const sessionCookie = await getSessionCookie();
-  if (!sessionCookie) {
-    // case of no existing session
-    setLogoutStates();
-    return;
-  }
-
-  //TODO: DELETE THIS TOKEN HACK ASAP
-  updateSessionToken(sessionCookie);
   handleLoginPartTwo();
 };
 
-function getSessionCookie() {
-  if (!document) {
-    return undefined;
-  }
-  const cookies = document.cookie.split(";");
-  const cookieKeyValue = cookies.find((cookie) => {
-    return cookie.includes("session=");
-  });
-  if (!cookieKeyValue) {
-    // no cookie
-    return undefined;
-  }
-  const [, cookieValue] = cookieKeyValue.trim().split("=");
-  return cookieValue;
-}
-
 async function handleLoginPartTwo() {
-  console.log("parttwo");
+  updateAuthStatus(AUTH_STATUS.LOGGING2);
   const usersApi = new UsersApi();
   const sessionResponse = await usersApi.GetSession();
   if (

app/signals/authentication/utilities.ts

@@ -3,12 +3,6 @@ import { authentication } from "./authentication";
 import { AUTH_STATUS } from "~/enums";
 import { UserInfo, ActiveSubscriptions } from "~/models";
 
-//TODO: DELETE THIS TOKEN HACK ASAP
-export const updateSessionToken = (newToken: string | undefined) => {
-  console.log("HACK // set session token >>", newToken);
-  authentication.sessionToken.value = newToken;
-};
-
 export const updateAuthStatus = (newStatus: AUTH_STATUS) => {
   authentication.status.value = newStatus;
 };
@@ -40,6 +34,4 @@ export const setLogoutStates = () => {
   updateAuthStatus(AUTH_STATUS.LOGGED_OUT);
   updateUserInfo(undefined);
   updateActiveSubscriptions(undefined);
-  //TODO: DELETE THIS TOKEN HACK ASAP
-  updateSessionToken(undefined);
 };