feat(web): redirect to login on expired cookie (#201)

* feat(web): redirect to login on expired cookie

* refactor: simplify auth wrapper
This commit is contained in:
Ludvig Lundgren 2022-03-26 19:46:16 +01:00 committed by GitHub
parent baac92cc25
commit 2d3ab67604
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 25 additions and 11 deletions

View file

@ -1,5 +1,6 @@
import { QueryClient, QueryClientProvider } from "react-query";
import { Fragment } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";
import { Toaster } from "react-hot-toast";
@ -12,10 +13,10 @@ import { AuthContext, SettingsContext } from "./utils/Context";
function Protected() {
return (
<>
<Fragment>
<Toaster position="top-right" />
<Base />
</>
</Fragment>
)
}
@ -24,14 +25,15 @@ export const queryClient = new QueryClient();
export function App() {
const authContext = AuthContext.useValue();
const settings = SettingsContext.useValue();
return (
<QueryClientProvider client={queryClient}>
<Router basename={baseUrl()}>
{authContext.isLoggedIn ? (
<Route exact path="/*" component={Protected} />
) : (
) :
<Route exact path="/*" component={Login} />
)}
}
<Route exact path="/logout" component={Logout} />
</Router>
{settings.debug ? (

View file

@ -1,4 +1,6 @@
import {baseUrl, sseBaseUrl} from "../utils";
import {AuthContext} from "../utils/Context";
import {Cookies} from "react-cookie";
interface ConfigType {
body?: BodyInit | Record<string, unknown> | null;
@ -20,9 +22,19 @@ export async function HttpClient<T>(
...customConfig
} as RequestInit;
return window.fetch(`${baseUrl()}${endpoint}`, config)
.then(async response => {
if ([401, 403, 404].includes(response.status))
if (response.status === 401) {
// if 401 consider the session expired and force logout
const cookies = new Cookies();
cookies.remove("user_session");
AuthContext.reset()
return Promise.reject(new Error(response.statusText));
}
if ([403, 404].includes(response.status))
return Promise.reject(new Error(response.statusText));
if ([201, 204].includes(response.status))
@ -49,7 +61,7 @@ export const APIClient = {
auth: {
login: (username: string, password: string) => appClient.Post("api/auth/login", { username: username, password: password }),
logout: () => appClient.Post("api/auth/logout", null),
test: () => appClient.Get<void>("api/auth/test"),
validate: () => appClient.Get<void>("api/auth/validate"),
},
actions: {
create: (action: Action) => appClient.Post("api/actions", action),