Merge pull request #148 from storytold/no-cookie

No cookie
This commit is contained in:
ArEnSc authored and GitHub committed 2024-04-11 22:40:30 -04:00
commit f64902dae1
16 files changed
+206 -254

No files matched your search

@@ -1,129 +0,0 @@
import {
createContext,
useCallback,
useEffect,
useState,
ReactNode,
Dispatch,
SetStateAction
} from "react";
import { useCookies } from 'react-cookie';
import {
SessionResponse,
AuthState,
STORAGE_KEYS
} from "./types";
import { CreateSession, DestroySession, GetSession } from "./utilities";
export const AuthenticationContext = createContext<{
authState: AuthState,
setAuthState?: Dispatch<SetStateAction<AuthState>>,
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<AuthState>({});
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(
<AuthenticationContext.Provider value={{
authState,
setAuthState,
loginAndGetUserInfo,
logout,
}}>
{children}
</AuthenticationContext.Provider>
)
}
@@ -0,0 +1,18 @@
import { createContext, Dispatch, SetStateAction } from "react";
import { AuthState, AUTH_STATUS } from "./types";
export const AuthenticationContext = createContext<{
authState: AuthState,
setAuthState?: Dispatch<SetStateAction<AuthState>>,
login?: (
usernameOrEmail: string,
password:string,
failureCallback?:()=>void
)=>void;
logout?: ()=>void;
}>({
authState:{
authStatus: AUTH_STATUS.INIT
}
});
@@ -0,0 +1,126 @@
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<AuthState>({
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(loginResponse.signed_session).then((
sessionResponse: SessionResponse
)=>{
if(sessionResponse.success && sessionResponse.user && sessionResponse.user !== null){
setLoginState(sessionResponse.user);
}else{
if(failureCallback) failureCallback();
setLogoutState();
}
});
});
},[]);
const logout = useCallback(()=>{
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
useEffect(()=>{
//On First Load
if(authState.authStatus === AUTH_STATUS.INIT){
//Persist Login if Session Data exist
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(sessionToken);
GetSession(sessionToken).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(
<AuthenticationContext.Provider value={{
authState,
setAuthState,
login,
logout,
}}>
{children}
</AuthenticationContext.Provider>
)
}
+2 -1
View File
@@ -1,4 +1,5 @@
import { AuthenticationContext, AuthenticationProvider } from "./Authentication";
import { AuthenticationContext, } from "./AuthenticationContext";
import { AuthenticationProvider } from "./AuthenticationProvider";
import { UserInfo, AUTH_STATUS } from "./types";
+5 -3
View File
@@ -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 {
+7 -5
View File
@@ -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())
@@ -33,13 +33,14 @@ 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',
// credentials: 'include',
})
.then(res => res.json())
.then(res => {
@@ -53,13 +54,14 @@ export const GetSession = async () => {
};
});
}
export async function DestroySession() : Promise<boolean> {
export async function DestroySession(sessionToken:string) : Promise<boolean> {
return await fetch(logout, {
method: 'POST',
headers: {
'Accept': 'application/json',
'session': sessionToken,
},
credentials: 'include',
// credentials: 'include',
})
.then(res => res.json())
.then(res => {
@@ -59,7 +59,7 @@ export async function GetInferenceJobStatus(jobToken:string) : Promise<GetJobSta
headers: {
'Accept': 'application/json',
},
credentials: 'include',
// credentials: 'include',
})
.then(res => res.json())
.then(res => {
+2 -3
View File
@@ -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(
<>
<DialogueInference />
+18 -10
View File
@@ -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 = <P extends {}>(Component: ComponentType<P>) => (rest:P) => {
const { authState } = useContext(AuthenticationContext);
if (authState.isLoggedIn === undefined ) {
return <>waiting</>;
}
if (authState.isLoggedIn === false) {
if (authState.authStatus === AUTH_STATUS.LOGGED_OUT) {
return <RedirectToLogin />
}
return (
<Component {...rest}/>
);
else if (authState.authStatus === AUTH_STATUS.LOGGED_IN ) {
return (<Component {...rest}/>);
}else {
return(
<div className="fixed w-full h-full flex flex-col justify-center items-center">
<LoadingDots type="bricks" message="Checking for Authentication..."/>
</div>
);
}
}
const RedirectToLogin = ()=>{
const navigate = useNavigate();
const {pathname} = useLocation();
useEffect(()=>{
navigate(`/login?redirect=${pathname}`);
setTimeout(()=>navigate(`/login?redirect=${pathname}`), 2000);
},[]);
return <>redirecting</>
return (
<div className="fixed w-full h-full flex flex-col justify-center items-center">
<LoadingDots type="bricks" message="Failed, redirecting..."/>
</div>
);
}
@@ -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: <number>res.status, body: <EndpointResponse>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 <GenerateTtsAudioSuccess> {
// 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 };
// });
};
@@ -40,7 +40,7 @@ export const ListAudioByUser = async(username:string) => {
headers: {
"Accept": "application/json",
},
credentials: 'include'
// credentials: 'include'
})
.then(res => res.json())
.then(res => {
+5 -5
View File
@@ -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",
+8 -11
View File
@@ -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() {
</head>
<body className="overflow-hidden bg-ui-background">
<CompleteTakeoverLoadingScreen isShowing={showLoader} />
<CookiesProvider defaultSetOptions={{ path: "/" }}>
<AuthenticationProvider>
<ToasterProvider>
<AppUIProvider>
<div className="topbar-spacer" />
<Outlet />
</AppUIProvider>
</ToasterProvider>
</AuthenticationProvider>
</CookiesProvider>
<AuthenticationProvider>
<ToasterProvider>
<AppUIProvider>
<div className="topbar-spacer" />
<Outlet />
</AppUIProvider>
</ToasterProvider>
</AuthenticationProvider>
<ScrollRestoration />
<Scripts />
</body>
+5 -5
View File
@@ -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<string|undefined>(undefined);
const formRef = useRef<HTMLFormElement | null>(null);
const {authState, loginAndGetUserInfo} = useContext(AuthenticationContext);
const {authState, login} = useContext(AuthenticationContext);
const handleOnSumbit = (ev: React.FormEvent<HTMLFormElement>)=>{
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]);
+7 -43
View File
@@ -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",
-1
View File
@@ -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",