From 94012e90f6c591667e18e0eaadee65b0600226b3 Mon Sep 17 00:00:00 2001 From: wil Date: Thu, 11 Apr 2024 13:07:43 -0400 Subject: [PATCH 1/5] rid of react-cookie package --- .../Authentication/Authentication.tsx | 7 ++- app/root.tsx | 19 +++---- package-lock.json | 50 +++---------------- package.json | 1 - 4 files changed, 18 insertions(+), 59 deletions(-) diff --git a/app/contexts/Authentication/Authentication.tsx b/app/contexts/Authentication/Authentication.tsx index 2d294007e1..a0da3f27bc 100644 --- a/app/contexts/Authentication/Authentication.tsx +++ b/app/contexts/Authentication/Authentication.tsx @@ -7,7 +7,6 @@ import { Dispatch, SetStateAction } from "react"; -import { useCookies } from 'react-cookie'; import { SessionResponse, @@ -32,7 +31,7 @@ export const AuthenticationContext = createContext<{ export const AuthenticationProvider = ({children}:{children:ReactNode})=>{ // console.log('auth provider rerender'); - const [, setAuthCookie, removeAuthCookie] = useCookies([STORAGE_KEYS.USER_INFO]); + // const [, setAuthCookie, removeAuthCookie] = useCookies([STORAGE_KEYS.USER_INFO]); const [authState, setAuthState] = useState({}); const loginAndGetUserInfo = useCallback(( @@ -106,12 +105,12 @@ export const AuthenticationProvider = ({children}:{children:ReactNode})=>{ // Propagate session data to localstorage if(authState.sessionData !== null && authState.sessionData !== undefined){ localStorage.setItem(STORAGE_KEYS.USER_INFO, authState.sessionData); - setAuthCookie(STORAGE_KEYS.USER_INFO, authState.userInfo); + // setAuthCookie(STORAGE_KEYS.USER_INFO, authState.userInfo); } // Propagate Logout else if (authState.sessionData === null){ localStorage.removeItem(STORAGE_KEYS.USER_INFO); - removeAuthCookie(STORAGE_KEYS.USER_INFO); + // removeAuthCookie(STORAGE_KEYS.USER_INFO); } },[authState]); diff --git a/app/root.tsx b/app/root.tsx index 9fb106feeb..84ce1b4cdd 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -1,5 +1,4 @@ import React, { useState, useEffect } from "react"; -import { CookiesProvider } from "react-cookie"; import { Transition } from "@headlessui/react"; import { LinksFunction } from "@remix-run/deno"; import { @@ -96,16 +95,14 @@ export default function App() { - - - - -
- - - - - + + + +
+ + + + diff --git a/package-lock.json b/package-lock.json index 99779ed447..5ff8a0fa85 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,6 @@ "ccapture.js": "github:aceslowman/ccapture.js#npm-fix", "isbot": "^4.1.0", "react": "^18.2.0", - "react-cookie": "^7.1.4", "react-dom": "^18.2.0", "tailwind-merge": "^2.2.2", "terser": "^5.30.3", @@ -2346,15 +2345,6 @@ "@types/unist": "^2" } }, - "node_modules/@types/hoist-non-react-statics": { - "version": "3.3.5", - "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz", - "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==", - "dependencies": { - "@types/react": "*", - "hoist-non-react-statics": "^3.3.0" - } - }, "node_modules/@types/json-schema": { "version": "7.0.15", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", @@ -2412,12 +2402,14 @@ "node_modules/@types/prop-types": { "version": "15.7.11", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", - "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==" + "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==", + "dev": true }, "node_modules/@types/react": { "version": "18.2.57", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.57.tgz", "integrity": "sha512-ZvQsktJgSYrQiMirAN60y4O/LRevIV8hUzSOSNB6gfR3/o3wCBFQx3sPwIYtuDMeiVgsSS3UzCV26tEzgnfvQw==", + "dev": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -2436,7 +2428,8 @@ "node_modules/@types/scheduler": { "version": "0.16.8", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", - "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==" + "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", + "dev": true }, "node_modules/@types/semver": { "version": "7.5.7", @@ -3969,7 +3962,8 @@ "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "dev": true }, "node_modules/damerau-levenshtein": { "version": "1.0.8", @@ -6122,14 +6116,6 @@ "url": "https://opencollective.com/unified" } }, - "node_modules/hoist-non-react-statics": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", - "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", - "dependencies": { - "react-is": "^16.7.0" - } - }, "node_modules/hosted-git-info": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-6.1.1.tgz", @@ -10395,19 +10381,6 @@ "node": ">=0.10.0" } }, - "node_modules/react-cookie": { - "version": "7.1.4", - "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-7.1.4.tgz", - "integrity": "sha512-wDxxa/HYaSXSMlyWJvJ5uZTzIVtQTPf1gMksFgwAz/2/W3lCtY8r4OChCXMPE7wax0PAdMY97UkNJedGv7KnDw==", - "dependencies": { - "@types/hoist-non-react-statics": "^3.3.5", - "hoist-non-react-statics": "^3.3.2", - "universal-cookie": "^7.0.0" - }, - "peerDependencies": { - "react": ">= 16.3.0" - } - }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -12510,15 +12483,6 @@ "url": "https://opencollective.com/unified" } }, - "node_modules/universal-cookie": { - "version": "7.1.4", - "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-7.1.4.tgz", - "integrity": "sha512-Q+DVJsdykStWRMtXr2Pdj3EF98qZHUH/fXv/gwFz/unyToy1Ek1w5GsWt53Pf38tT8Gbcy5QNsj61Xe9TggP4g==", - "dependencies": { - "@types/cookie": "^0.6.0", - "cookie": "^0.6.0" - } - }, "node_modules/universalify": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz", diff --git a/package.json b/package.json index 509db7cff2..3f2793a864 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,6 @@ "ccapture.js": "github:aceslowman/ccapture.js#npm-fix", "isbot": "^4.1.0", "react": "^18.2.0", - "react-cookie": "^7.1.4", "react-dom": "^18.2.0", "tailwind-merge": "^2.2.2", "terser": "^5.30.3", From 925e488a56dc45bb029f082b1676de6818ca66b0 Mon Sep 17 00:00:00 2001 From: wil Date: Thu, 11 Apr 2024 13:16:31 -0400 Subject: [PATCH 2/5] try call without include credentials --- .../comps/DialogueTTS/generateTts.tsx | 37 +------------------ 1 file changed, 1 insertion(+), 36 deletions(-) diff --git a/app/pages/PageEnigma/comps/DialogueTTS/generateTts.tsx b/app/pages/PageEnigma/comps/DialogueTTS/generateTts.tsx index eaeb358993..c2ed530190 100644 --- a/app/pages/PageEnigma/comps/DialogueTTS/generateTts.tsx +++ b/app/pages/PageEnigma/comps/DialogueTTS/generateTts.tsx @@ -24,7 +24,7 @@ export async function GenerateTtsAudio(request: GenerateTtsAudioRequest) : Promi 'Accept': 'application/json', 'Content-Type': 'application/json', }, - credentials: 'include', + // credentials: 'include', body: JSON.stringify(request), }) .then(res => res.json()) @@ -47,39 +47,4 @@ export async function GenerateTtsAudio(request: GenerateTtsAudioRequest) : Promi return { error: GenerateTtsAudioErrorType.UnknownError }; }); - // return await fetch(inferTts, { - // method: 'POST', - // headers: { - // 'Accept': 'application/json', - // 'Content-Type': 'application/json', - // }, - // credentials: 'include', - // body: JSON.stringify(request), - // }) - // .then(res => res.json().then(data => ({ status: res.status, body: data }))) - // .then((fullResponse) => { - // let maybeError = maybeMapError(fullResponse); - // if (maybeError !== undefined) { - // return { error: maybeError }; - // } - // if (!fullResponse.body || !fullResponse.body.success) { - // return { error: GenerateTtsAudioErrorType.UnknownError }; - // } - - // if (!('inference_job_token' in fullResponse.body)) { - // return { error: GenerateTtsAudioErrorType.UnknownError }; - // } else { - // return { - // inference_job_token: fullResponse.body.inference_job_token, - // inference_job_token_type: fullResponse.body.inference_job_token_type, - // }; - // } - // }) - // .catch(e => { - // let maybeError = maybeMapError(e); - // if (maybeError !== undefined) { - // return { error: maybeError }; - // } - // return { error: GenerateTtsAudioErrorType.UnknownError }; - // }); }; From cb8e93ec3cdd60199425da7c92045d98826382cf Mon Sep 17 00:00:00 2001 From: wil Date: Thu, 11 Apr 2024 14:08:34 -0400 Subject: [PATCH 3/5] new login --- .../Authentication/Authentication.tsx | 128 ------------------ .../Authentication/AuthenticationContext.tsx | 18 +++ .../Authentication/AuthenticationProvider.tsx | 123 +++++++++++++++++ app/contexts/Authentication/index.tsx | 3 +- app/contexts/Authentication/types.tsx | 8 +- app/contexts/Authentication/utilities.tsx | 6 +- .../useInferenceJobManager.tsx | 2 +- app/modules/TopBar/AuthButtons.tsx | 5 +- app/modules/withProtectedRoute/index.tsx | 28 ++-- .../AudioTabComponent/listAudioByUser.tsx | 2 +- app/pages/PageEnigma/js/api_manager.ts | 10 +- app/routes/Login.tsx | 10 +- 12 files changed, 183 insertions(+), 160 deletions(-) delete mode 100644 app/contexts/Authentication/Authentication.tsx create mode 100644 app/contexts/Authentication/AuthenticationContext.tsx create mode 100644 app/contexts/Authentication/AuthenticationProvider.tsx diff --git a/app/contexts/Authentication/Authentication.tsx b/app/contexts/Authentication/Authentication.tsx deleted file mode 100644 index a0da3f27bc..0000000000 --- a/app/contexts/Authentication/Authentication.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import { - createContext, - useCallback, - useEffect, - useState, - ReactNode, - Dispatch, - SetStateAction -} from "react"; - -import { - SessionResponse, - AuthState, - STORAGE_KEYS -} from "./types"; - -import { CreateSession, DestroySession, GetSession } from "./utilities"; - -export const AuthenticationContext = createContext<{ - authState: AuthState, - setAuthState?: Dispatch>, - loginAndGetUserInfo?: ( - usernameOrEmail: string, - password:string, - failureCallback?:()=>void - )=>void; - logout?: ()=>void; -}>({ - authState:{} -}); - -export const AuthenticationProvider = ({children}:{children:ReactNode})=>{ - // console.log('auth provider rerender'); - // const [, setAuthCookie, removeAuthCookie] = useCookies([STORAGE_KEYS.USER_INFO]); - const [authState, setAuthState] = useState({}); - - const loginAndGetUserInfo = useCallback(( - usernameOrEmail: string, - password:string, - failureCallback?:()=>void - )=>{ - CreateSession({usernameOrEmail, password}) - .then((respond)=>{ - GetSession().then(( - res: SessionResponse - )=>{ - if(res.success && res.user && setAuthState){ - setAuthState({ - isLoggedIn: true, - sessionData: JSON.stringify(res.user), - userInfo: res.user - }); - }else{ - if(failureCallback) failureCallback(); - } - }); - }); - },[]); - - const setLogoutState = useCallback(()=>{ - setAuthState({ - isLoggedIn: false, - sessionData: null, - userInfo: undefined - }); - },[]); - - const logout = useCallback(()=>{ - DestroySession().then((res)=>{ - if (res) setLogoutState(); - }); - },[]); - - //Set Session upon Auth State Changes - useEffect(()=>{ - //On First Load - if(authState.isLoggedIn === undefined){ - //Persist Login if Session Data exist - const sessionData = localStorage.getItem(STORAGE_KEYS.USER_INFO); - // console.log(`Session Data: ${sessionData?.substring(0, 30)}${sessionData ? '...':''}`); - if (sessionData !== null){ - // console.log('Getting session to persist login'); - GetSession().then(( - res: SessionResponse - )=>{ - // console.log('Session Returned'); - // console.log(res); - if(res.success && res.user){ - // console.log('Setting Auth State'); - setAuthState({ - isLoggedIn: true, - sessionData: JSON.stringify(res.user), - userInfo: res.user - }); - }else{ - // console.log('Session expired, setting State'); - setLogoutState(); - } - }); - }else{ - setLogoutState(); - } - } - - // Propagate session data to localstorage - if(authState.sessionData !== null && authState.sessionData !== undefined){ - localStorage.setItem(STORAGE_KEYS.USER_INFO, authState.sessionData); - // setAuthCookie(STORAGE_KEYS.USER_INFO, authState.userInfo); - } - // Propagate Logout - else if (authState.sessionData === null){ - localStorage.removeItem(STORAGE_KEYS.USER_INFO); - // removeAuthCookie(STORAGE_KEYS.USER_INFO); - } - },[authState]); - - return( - - {children} - - ) -} - \ No newline at end of file diff --git a/app/contexts/Authentication/AuthenticationContext.tsx b/app/contexts/Authentication/AuthenticationContext.tsx new file mode 100644 index 0000000000..821bb92c1b --- /dev/null +++ b/app/contexts/Authentication/AuthenticationContext.tsx @@ -0,0 +1,18 @@ +import { createContext, Dispatch, SetStateAction } from "react"; +import { AuthState, AUTH_STATUS } from "./types"; + +export const AuthenticationContext = createContext<{ + authState: AuthState, + setAuthState?: Dispatch>, + login?: ( + usernameOrEmail: string, + password:string, + failureCallback?:()=>void + )=>void; + logout?: ()=>void; +}>({ + authState:{ + authStatus: AUTH_STATUS.INIT + } +}); + diff --git a/app/contexts/Authentication/AuthenticationProvider.tsx b/app/contexts/Authentication/AuthenticationProvider.tsx new file mode 100644 index 0000000000..c09239fe66 --- /dev/null +++ b/app/contexts/Authentication/AuthenticationProvider.tsx @@ -0,0 +1,123 @@ +import { useCallback, useEffect, useState, ReactNode} from "react"; +import { SessionResponse, AuthState, STORAGE_KEYS, AUTH_STATUS, UserInfo} from "./types"; +import { CreateSession, DestroySession, GetSession } from "./utilities"; +import { AuthenticationContext } from "./AuthenticationContext"; + +export const AuthenticationProvider = ({children}:{children:ReactNode})=>{ + console.log('auth provider rerender'); + + const [authState, setAuthState] = useState({ + authStatus: AUTH_STATUS.INIT + }); + + const startLoggingState = useCallback(()=>{ + setAuthState({ + authStatus: AUTH_STATUS.LOGGING, + sessionToken: undefined, + userInfo: undefined + }); + }, []); + + const updateLoggingState = useCallback((sessionToken: string)=>{ + setAuthState({ + authStatus: AUTH_STATUS.LOGGING, + sessionToken: sessionToken, + userInfo: undefined + }); + }, []); + + const setLoginState = useCallback((userInfo: UserInfo)=>{ + setAuthState((curr)=>({ + ...curr, + authStatus: AUTH_STATUS.LOGGED_IN, + userInfo: userInfo, + })); + }, []) + + const setLogoutState = useCallback(()=>{ + setAuthState({ + authStatus: AUTH_STATUS.LOGGED_OUT, + sessionToken: undefined, + userInfo: undefined + }); + },[]); + + const login = useCallback(( + usernameOrEmail: string, + password:string, + failureCallback?:()=>void + )=>{ + console.log('CreateSession'); + startLoggingState(); + CreateSession({usernameOrEmail, password}) + .then((loginResponse)=>{ + updateLoggingState(loginResponse.signed_session); + GetSession().then(( + sessionResponse: SessionResponse + )=>{ + if(sessionResponse.success && sessionResponse.user && sessionResponse.user !== null){ + setLoginState(sessionResponse.user); + }else{ + if(failureCallback) failureCallback(); + setLogoutState(); + } + }); + }); + },[]); + + const logout = useCallback(()=>{ + DestroySession().then((res)=>{ + if (res) setLogoutState(); + }); + },[]); + + //Set Session upon Auth State Changes + useEffect(()=>{ + //On First Load + if(authState.authStatus === AUTH_STATUS.INIT){ + //Persist Login if Session Data exist + const sessionData = localStorage.getItem(STORAGE_KEYS.SESSION_TOKEN); + console.log(`Session Data: ${sessionData?.substring(0, 30)}${sessionData ? '...':''}`); + if (sessionData !== null){ + console.log('Getting session to persist login'); + updateLoggingState(sessionData); + GetSession().then(( + sessionResponse: SessionResponse + )=>{ + console.log('Session Returned'); + console.log(sessionResponse); + if(sessionResponse.success && sessionResponse.user && sessionResponse.user !== null){ + console.log('Setting Auth State'); + setLoginState(sessionResponse.user) + }else{ + console.log('Session expired, setting State'); + setLogoutState(); + } + }); + }else{ + setLogoutState(); + } + } + + // Propagate session data to localstorage + if(authState.sessionToken !== null && authState.sessionToken !== undefined){ + localStorage.setItem(STORAGE_KEYS.SESSION_TOKEN, authState.sessionToken); + } + // Propagate Logout + else if (authState.sessionToken === null){ + localStorage.removeItem(STORAGE_KEYS.SESSION_TOKEN); + } + },[authState]); + + return( + + {children} + + ) +} + \ No newline at end of file diff --git a/app/contexts/Authentication/index.tsx b/app/contexts/Authentication/index.tsx index 0074994891..d8182c97c6 100644 --- a/app/contexts/Authentication/index.tsx +++ b/app/contexts/Authentication/index.tsx @@ -1,4 +1,5 @@ -import { AuthenticationContext, AuthenticationProvider } from "./Authentication"; +import { AuthenticationContext, } from "./AuthenticationContext"; +import { AuthenticationProvider } from "./AuthenticationProvider"; import { UserInfo, AUTH_STATUS } from "./types"; diff --git a/app/contexts/Authentication/types.tsx b/app/contexts/Authentication/types.tsx index b1e05ae494..7666c58134 100644 --- a/app/contexts/Authentication/types.tsx +++ b/app/contexts/Authentication/types.tsx @@ -1,15 +1,17 @@ export enum STORAGE_KEYS{ - USER_INFO = "user_info", + SESSION_TOKEN = "session_token", } + export enum AUTH_STATUS { + INIT = "INIT", LOGGED_IN = "logged_in", LOGGING = "logging", LOGGED_OUT = "logged_out", } export type AuthState = { - isLoggedIn?: boolean; - sessionData?: string | null; + authStatus: AUTH_STATUS; + sessionToken?: string | null; userInfo?: UserInfo; } export interface UserInfo { diff --git a/app/contexts/Authentication/utilities.tsx b/app/contexts/Authentication/utilities.tsx index 0cc54b8f46..78a11ee0bd 100644 --- a/app/contexts/Authentication/utilities.tsx +++ b/app/contexts/Authentication/utilities.tsx @@ -21,7 +21,7 @@ export const CreateSession = async ({ "Accept": "application/json", "Content-Type": "application/json", }, - credentials: 'include', + // credentials: 'include', body: JSON.stringify(request) }) .then(res => res.json()) @@ -39,7 +39,7 @@ export const GetSession = async () => { headers: { 'Accept': 'application/json', }, - credentials: 'include', + // credentials: 'include', }) .then(res => res.json()) .then(res => { @@ -59,7 +59,7 @@ export async function DestroySession() : Promise { headers: { 'Accept': 'application/json', }, - credentials: 'include', + // credentials: 'include', }) .then(res => res.json()) .then(res => { diff --git a/app/hooks/useInferenceJobManager/useInferenceJobManager.tsx b/app/hooks/useInferenceJobManager/useInferenceJobManager.tsx index 89c5206542..f107143d55 100644 --- a/app/hooks/useInferenceJobManager/useInferenceJobManager.tsx +++ b/app/hooks/useInferenceJobManager/useInferenceJobManager.tsx @@ -59,7 +59,7 @@ export async function GetInferenceJobStatus(jobToken:string) : Promise res.json()) .then(res => { diff --git a/app/modules/TopBar/AuthButtons.tsx b/app/modules/TopBar/AuthButtons.tsx index 1f7474667a..fc7ed8a14c 100644 --- a/app/modules/TopBar/AuthButtons.tsx +++ b/app/modules/TopBar/AuthButtons.tsx @@ -1,10 +1,9 @@ import { useContext, } from "react"; import { useSignals } from "@preact/signals-react/runtime"; -import { AuthenticationContext } from "~/contexts/Authentication"; +import { AUTH_STATUS, AuthenticationContext } from "~/contexts/Authentication"; import { Button, ButtonLink } from "~/components"; import { DialogueInference } from "../DialogueInference"; -import { inferenceJobs } from "~/pages/PageEnigma/store/inferenceJobs"; export const AuthButtons = ()=>{ useSignals(); @@ -13,7 +12,7 @@ export const AuthButtons = ()=>{ const handleLogout = ()=>{ if(logout)logout(); } - if ( authState && authState.isLoggedIn ) { + if ( authState && authState.authStatus === AUTH_STATUS.LOGGED_IN ) { return( <> diff --git a/app/modules/withProtectedRoute/index.tsx b/app/modules/withProtectedRoute/index.tsx index 1278e11b6f..aff5cb6a75 100644 --- a/app/modules/withProtectedRoute/index.tsx +++ b/app/modules/withProtectedRoute/index.tsx @@ -1,25 +1,33 @@ import { useContext, useEffect, ComponentType } from "react"; import { useNavigate, useLocation } from "@remix-run/react"; -import { AuthenticationContext } from "~/contexts/Authentication"; +import { AUTH_STATUS, AuthenticationContext } from "~/contexts/Authentication"; +import { LoadingDots } from "~/components"; export const withProtectionRoute =

(Component: ComponentType

) => (rest:P) => { const { authState } = useContext(AuthenticationContext); - if (authState.isLoggedIn === undefined ) { - return <>waiting; - } - if (authState.isLoggedIn === false) { + if (authState.authStatus === AUTH_STATUS.LOGGED_OUT) { return } - return ( - - ); + else if (authState.authStatus === AUTH_STATUS.LOGGED_IN ) { + return (); + }else { + return( +

+ +
+ ); + } } const RedirectToLogin = ()=>{ const navigate = useNavigate(); const {pathname} = useLocation(); useEffect(()=>{ - navigate(`/login?redirect=${pathname}`); + setTimeout(()=>navigate(`/login?redirect=${pathname}`), 2000); },[]); - return <>redirecting + return ( +
+ +
+ ); } \ No newline at end of file diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/listAudioByUser.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/listAudioByUser.tsx index b277c03941..19e0d23c3e 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/listAudioByUser.tsx +++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/listAudioByUser.tsx @@ -40,7 +40,7 @@ export const ListAudioByUser = async(username:string) => { headers: { "Accept": "application/json", }, - credentials: 'include' + // credentials: 'include' }) .then(res => res.json()) .then(res => { diff --git a/app/pages/PageEnigma/js/api_manager.ts b/app/pages/PageEnigma/js/api_manager.ts index 8657109208..14d6f554e7 100644 --- a/app/pages/PageEnigma/js/api_manager.ts +++ b/app/pages/PageEnigma/js/api_manager.ts @@ -238,7 +238,7 @@ export class APIManager { const response = await fetch(url, { method: "POST", - credentials: "include", + // credentials: "include", headers: { Accept: "application/json", }, @@ -291,7 +291,7 @@ export class APIManager { const response = await fetch(url, { method: "POST", - credentials: "include", + // credentials: "include", headers: { Accept: "application/json", }, @@ -325,7 +325,7 @@ export class APIManager { const response = await fetch(url, { method: "POST", - credentials: "include", + // credentials: "include", headers: { Accept: "application/json", }, @@ -362,7 +362,7 @@ export class APIManager { const response = await fetch(url, { method: "POST", - credentials: "include", + // credentials: "include", headers: { Accept: "application/json", }, @@ -421,7 +421,7 @@ export class APIManager { const response = await fetch(`${this.baseUrl}/v1/video/enqueue_vst`, { method: "POST", - credentials: "include", + // credentials: "include", headers: { Accept: "application/json", "Content-Type": "application/json", diff --git a/app/routes/Login.tsx b/app/routes/Login.tsx index eb1205dcf3..db398880d7 100644 --- a/app/routes/Login.tsx +++ b/app/routes/Login.tsx @@ -1,7 +1,7 @@ import { useContext, useEffect, useState, useRef } from "react"; import { useNavigate, useSearchParams } from "@remix-run/react"; import { faKey, faUser } from "@fortawesome/pro-solid-svg-icons"; -import { AuthenticationContext } from "~/contexts/Authentication"; +import { AUTH_STATUS, AuthenticationContext } from "~/contexts/Authentication"; import { Button,H1,Input,Link,P } from '~/components'; import { LoadingDots } from "~/components"; @@ -12,7 +12,7 @@ export default function LoginScreen() { const [showLoader, setShowLoader] = useState(undefined); const formRef = useRef(null); - const {authState, loginAndGetUserInfo} = useContext(AuthenticationContext); + const {authState, login} = useContext(AuthenticationContext); const handleOnSumbit = (ev: React.FormEvent)=>{ ev.preventDefault(); @@ -20,9 +20,9 @@ export default function LoginScreen() { const form = new FormData(formRef.current); const usernameOrEmail = form.get("usernameOrEmail")?.toString(); const password = form.get("password")?.toString(); - if( usernameOrEmail && password && loginAndGetUserInfo){ + if( usernameOrEmail && password && login){ setShowLoader("Authenticating"); - loginAndGetUserInfo( + login( usernameOrEmail, password, ()=>{ @@ -34,7 +34,7 @@ export default function LoginScreen() { useEffect(()=>{ const redirectPath = searchParams.get('redirect'); - if(authState && authState.isLoggedIn) + if(authState && authState.authStatus === AUTH_STATUS.LOGGED_IN) navigate(redirectPath ? redirectPath:'/'); },[authState]); From bec9d611aafed4a7b9f39e9fef3d6c9acea4e051 Mon Sep 17 00:00:00 2001 From: wil Date: Thu, 11 Apr 2024 14:32:48 -0400 Subject: [PATCH 4/5] include session token in request head --- app/contexts/Authentication/utilities.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/app/contexts/Authentication/utilities.tsx b/app/contexts/Authentication/utilities.tsx index 78a11ee0bd..81d2ddd6c1 100644 --- a/app/contexts/Authentication/utilities.tsx +++ b/app/contexts/Authentication/utilities.tsx @@ -33,11 +33,12 @@ export const CreateSession = async ({ }; }); } -export const GetSession = async () => { +export const GetSession = async (sessionToken:string) => { return await fetch(getSession, { method: 'GET', headers: { 'Accept': 'application/json', + 'session': sessionToken, }, // credentials: 'include', }) @@ -53,11 +54,12 @@ export const GetSession = async () => { }; }); } -export async function DestroySession() : Promise { +export async function DestroySession(sessionToken:string) : Promise { return await fetch(logout, { method: 'POST', headers: { 'Accept': 'application/json', + 'session': sessionToken, }, // credentials: 'include', }) From 265e22e96bcad515179efc96084abb627d40f74e Mon Sep 17 00:00:00 2001 From: wil Date: Thu, 11 Apr 2024 14:59:09 -0400 Subject: [PATCH 5/5] no cookie is successful --- .../Authentication/AuthenticationProvider.tsx | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/app/contexts/Authentication/AuthenticationProvider.tsx b/app/contexts/Authentication/AuthenticationProvider.tsx index c09239fe66..fa9e47be05 100644 --- a/app/contexts/Authentication/AuthenticationProvider.tsx +++ b/app/contexts/Authentication/AuthenticationProvider.tsx @@ -52,7 +52,7 @@ export const AuthenticationProvider = ({children}:{children:ReactNode})=>{ CreateSession({usernameOrEmail, password}) .then((loginResponse)=>{ updateLoggingState(loginResponse.signed_session); - GetSession().then(( + GetSession(loginResponse.signed_session).then(( sessionResponse: SessionResponse )=>{ if(sessionResponse.success && sessionResponse.user && sessionResponse.user !== null){ @@ -66,9 +66,12 @@ export const AuthenticationProvider = ({children}:{children:ReactNode})=>{ },[]); const logout = useCallback(()=>{ - DestroySession().then((res)=>{ - if (res) setLogoutState(); - }); + const sessionToken = localStorage.getItem(STORAGE_KEYS.SESSION_TOKEN); + if (sessionToken !== null){ + DestroySession(sessionToken).then((res)=>{ + //TODO: error handling maybe necessary + });} + setLogoutState(); },[]); //Set Session upon Auth State Changes @@ -76,12 +79,12 @@ export const AuthenticationProvider = ({children}:{children:ReactNode})=>{ //On First Load if(authState.authStatus === AUTH_STATUS.INIT){ //Persist Login if Session Data exist - const sessionData = localStorage.getItem(STORAGE_KEYS.SESSION_TOKEN); - console.log(`Session Data: ${sessionData?.substring(0, 30)}${sessionData ? '...':''}`); - if (sessionData !== null){ + const sessionToken = localStorage.getItem(STORAGE_KEYS.SESSION_TOKEN); + console.log(`Session Data: ${sessionToken?.substring(0, 30)}${sessionToken ? '...':''}`); + if (sessionToken !== null){ console.log('Getting session to persist login'); - updateLoggingState(sessionData); - GetSession().then(( + updateLoggingState(sessionToken); + GetSession(sessionToken).then(( sessionResponse: SessionResponse )=>{ console.log('Session Returned');