mirror of
https://github.com/idanoo/autobrr
synced 2025-07-25 17:59:14 +00:00
fix(auth): cookie expiry and renewal (#1527)
* fix(auth/web): logout when expired/invalid/no cookie is present * fix(auth/web): specify error message in invalid cookie * fix(auth/web): reset error boundary on login * fix(auth/web): fix onboarding * chore: code cleanup * fix(web): revert tanstack/router to 1.31.0 * refactor(web): remove react-error-boundary * feat(auth): refresh cookie when close to expiry * enhancement(web): specify defaultError message in HttpClient * fix(web): use absolute paths for router links (#1530) * chore(web): bump `@tanstack/react-router` to `1.31.6` * fix(web): settings routes * fix(web): filter routes * fix(web): remove unused ReleasesIndexRoute * chore(web): add documentation for HttpClient * chore(lint): remove unnecessary whitespace
This commit is contained in:
martylukyy
GitHub
parent
3dab295387
commit
8120c33f6b
19 changed files with 364 additions and 366 deletions
|
|
@ -5,17 +5,65 @@
|
|||
|
||||
import { baseUrl, sseBaseUrl } from "@utils";
|
||||
import { GithubRelease } from "@app/types/Update";
|
||||
import { AuthContext } from "@utils/Context";
|
||||
|
||||
type RequestBody = BodyInit | object | Record<string, unknown> | null;
|
||||
type Primitive = string | number | boolean | symbol | undefined;
|
||||
|
||||
interface HttpConfig {
|
||||
/**
|
||||
* One of "GET", "POST", "PUT", "PATCH", "DELETE", etc.
|
||||
* See https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods
|
||||
*/
|
||||
method?: string;
|
||||
/**
|
||||
* JSON body for this request. Once this is set to an object,
|
||||
* then `Content-Type` for this request is set to `application/json`
|
||||
* automatically.
|
||||
*/
|
||||
body?: RequestBody;
|
||||
/**
|
||||
* Helper to work with a query string/search param of a URL.
|
||||
* E.g. ?a=1&b=2&c=3
|
||||
*
|
||||
* Using this interface will automatically convert
|
||||
* the object values into RFC-3986-compliant strings.
|
||||
*
|
||||
* Keys will *NOT* be sanitized, and any whitespace and
|
||||
* invalid characters will remain.
|
||||
*
|
||||
* The only supported value types are:
|
||||
* numbers, booleans, strings and flat 1-D arrays.
|
||||
*
|
||||
* Objects as values are not supported.
|
||||
*
|
||||
* The supported values are serialized as follows:
|
||||
* - undefined values are ignored
|
||||
* - empty strings are ignored
|
||||
* - empty strings inside arrays are ignored
|
||||
* - empty arrays are ignored
|
||||
* - arrays append each time with the key and for each child
|
||||
* e.g. `{ arr: [1, 2, 3] }` will yield `?arr=1&arr=2&arr=3`
|
||||
* - array items with an undefined value (or which serialize to an empty string) are ignored,
|
||||
* e.g. `{ arr: [1, undefined, undefined] }` will yield `?arr=1`
|
||||
* (NaN, +Inf, -Inf, etc. will remain since they are valid serializations)
|
||||
*/
|
||||
queryString?: Record<string, Primitive | Primitive[]>;
|
||||
}
|
||||
|
||||
// See https://stackoverflow.com/a/62969380
|
||||
/**
|
||||
* Encodes a string into a RFC-3986-compliant string.
|
||||
*
|
||||
* By default, encodeURIComponent will not encode
|
||||
* any of the following characters: !'()*
|
||||
*
|
||||
* So a simple regex replace is done which will replace
|
||||
* these characters with their hex-value representation.
|
||||
*
|
||||
* @param str Input string (dictionary value).
|
||||
* @returns A RFC-3986-compliant string variation of the input string.
|
||||
* @note See https://stackoverflow.com/a/62969380
|
||||
*/
|
||||
function encodeRFC3986URIComponent(str: string): string {
|
||||
return encodeURIComponent(str).replace(
|
||||
/[!'()*]/g,
|
||||
|
|
@ -23,6 +71,29 @@ function encodeRFC3986URIComponent(str: string): string {
|
|||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Makes a request on the network and returns a promise.
|
||||
*
|
||||
* This function serves as both a request builder and a response interceptor.
|
||||
*
|
||||
* @param endpoint The endpoint path relative to the backend instance.
|
||||
* @param config A dictionary which specifies what information this network
|
||||
* request must relay during transport. See @ref HttpClient.
|
||||
* @returns A promise for the *sent* network request which must * be await'ed or .then()-chained before it can be used.
|
||||
*
|
||||
* If the status code returned by the server is in the [200, 300) range, then this is considered a success.
|
||||
* - This function resolves with an empty dictionary object, i.e. {}, if the status code is 204 No data
|
||||
* - The parsed JSON body is returned by this method if the server returns `Content-Type: application/json`.
|
||||
* - In all other scenarios, the raw Response object from window.fetch() is returned,
|
||||
* which must be handled manually by awaiting on one of its methods.
|
||||
*
|
||||
* The following is done if the status code that the server returns is NOT successful,
|
||||
* that is, if it falls outside of the [200, 300] range:
|
||||
* - A unique Error object is returned if the user is logged in and the status code is 403 Forbidden.
|
||||
* This Error object *should* be consumed by the @tanstack/query code, which indirectly calls HttpClient.
|
||||
* The current user is then prompted to log in again after being logged out.
|
||||
* - The `ErrorPage` screen appears in all other scenarios.
|
||||
*/
|
||||
export async function HttpClient<T = unknown>(
|
||||
endpoint: string,
|
||||
config: HttpConfig = {}
|
||||
|
|
@ -81,51 +152,54 @@ export async function HttpClient<T = unknown>(
|
|||
|
||||
const response = await window.fetch(`${baseUrl()}${endpoint}`, init);
|
||||
|
||||
const isJson = response.headers.get("Content-Type")?.includes("application/json");
|
||||
const json = isJson ? await response.json() : null;
|
||||
|
||||
switch (response.status) {
|
||||
case 204: {
|
||||
// 204 contains no data, but indicates success
|
||||
return Promise.resolve<T>({} as T);
|
||||
}
|
||||
case 401: {
|
||||
return Promise.reject<T>(json as T);
|
||||
}
|
||||
case 403: {
|
||||
return Promise.reject<T>(json as T);
|
||||
}
|
||||
case 404: {
|
||||
return Promise.reject<T>(json as T);
|
||||
}
|
||||
case 500: {
|
||||
const health = await window.fetch(`${baseUrl()}api/healthz/liveness`);
|
||||
if (!health.ok) {
|
||||
return Promise.reject(
|
||||
new Error(`[500] Offline (Internal server error): "${endpoint}"`)
|
||||
);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 503: {
|
||||
// Show an error toast to notify the user what occurred
|
||||
return Promise.reject(new Error(`[503] Service unavailable: "${endpoint}"`));
|
||||
}
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
// Resolve on success
|
||||
if (response.status >= 200 && response.status < 300) {
|
||||
// We received a successful response
|
||||
if (response.status === 204) {
|
||||
// 204 contains no data, but indicates success
|
||||
return Promise.resolve<T>({} as T);
|
||||
}
|
||||
|
||||
// If Content-Type is application/json, then parse response as JSON
|
||||
// otherwise, just resolve the Response object returned by window.fetch
|
||||
// and the consumer can call await response.text() if needed.
|
||||
const isJson = response.headers.get("Content-Type")?.includes("application/json");
|
||||
if (isJson) {
|
||||
return Promise.resolve<T>(json as T);
|
||||
return Promise.resolve<T>(await response.json() as T);
|
||||
} else {
|
||||
return Promise.resolve<T>(response as T);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// This is not a successful response.
|
||||
// It is most likely an error.
|
||||
switch (response.status) {
|
||||
case 403: {
|
||||
if (AuthContext.get().isLoggedIn) {
|
||||
return Promise.reject(new Error("Cookie expired or invalid."));
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 500: {
|
||||
const health = await window.fetch(`${baseUrl()}api/healthz/liveness`);
|
||||
if (!health.ok) {
|
||||
return Promise.reject(
|
||||
new Error(`[500] Offline (Internal server error): "${endpoint}"`)
|
||||
);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 503: {
|
||||
// Show an error toast to notify the user what occurred
|
||||
return Promise.reject(new Error(`[503] Service unavailable: "${endpoint}"`));
|
||||
}
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
// Otherwise reject, this is most likely an error
|
||||
return Promise.reject<T>(json as T);
|
||||
const defaultError = new Error(
|
||||
`HTTP request to '${endpoint}' failed with code ${response.status} (${response.statusText})`
|
||||
);
|
||||
return Promise.reject(defaultError);
|
||||
}
|
||||
}
|
||||
|
||||
const appClient = {
|
||||
|
|
|
|||
|
|
@ -6,26 +6,31 @@
|
|||
import { QueryCache, QueryClient } from "@tanstack/react-query";
|
||||
import { toast } from "react-hot-toast";
|
||||
import Toast from "@components/notifications/Toast";
|
||||
import { baseUrl } from "@utils";
|
||||
import { AuthContext } from "@utils/Context";
|
||||
import { redirect } from "@tanstack/react-router";
|
||||
import { LoginRoute } from "@app/routes";
|
||||
|
||||
const MAX_RETRIES = 6;
|
||||
const HTTP_STATUS_TO_NOT_RETRY = [400, 401, 403, 404];
|
||||
|
||||
export const queryClient = new QueryClient({
|
||||
queryCache: new QueryCache({
|
||||
onError: (error ) => {
|
||||
console.error("query client error: ", error);
|
||||
onError: (error, query) => {
|
||||
console.error(`Caught error for query '${query.queryKey}': `, error);
|
||||
|
||||
toast.custom((t) => <Toast type="error" body={error?.message} t={t}/>);
|
||||
|
||||
// @ts-expect-error TS2339: Property status does not exist on type Error
|
||||
if (error?.status === 401 || error?.status === 403) {
|
||||
// @ts-expect-error TS2339: Property status does not exist on type Error
|
||||
console.error("bad status, redirect to login", error?.status)
|
||||
// Redirect to login page
|
||||
window.location.href = baseUrl()+"login";
|
||||
|
||||
return
|
||||
if (error.message === "Cookie expired or invalid.") {
|
||||
AuthContext.reset();
|
||||
redirect({
|
||||
to: LoginRoute.to,
|
||||
search: {
|
||||
// Use the current location to power a redirect after login
|
||||
// (Do not use `router.state.resolvedLocation` as it can
|
||||
// potentially lag behind the actual current location)
|
||||
redirect: location.href
|
||||
},
|
||||
});
|
||||
return;
|
||||
} else {
|
||||
toast.custom((t) => <Toast type="error" body={ error?.message } t={ t }/>);
|
||||
}
|
||||
}
|
||||
}),
|
||||
|
|
@ -35,8 +40,12 @@ export const queryClient = new QueryClient({
|
|||
// See https://tanstack.com/query/v4/docs/guides/query-retries#retry-delay
|
||||
// delay = Math.min(1000 * 2 ** attemptIndex, 30000)
|
||||
// retry: false,
|
||||
throwOnError: true,
|
||||
throwOnError: (error) => {
|
||||
return error.message !== "Cookie expired or invalid.";
|
||||
|
||||
},
|
||||
retry: (failureCount, error) => {
|
||||
/*
|
||||
console.debug("retry count:", failureCount)
|
||||
console.error("retry err: ", error)
|
||||
|
||||
|
|
@ -46,7 +55,12 @@ export const queryClient = new QueryClient({
|
|||
console.log(`retry: Aborting retry due to ${error.status} status`);
|
||||
return false;
|
||||
}
|
||||
*/
|
||||
if (error.message === "Cookie expired or invalid.") {
|
||||
return false;
|
||||
}
|
||||
|
||||
console.error(`Retrying query (N=${failureCount}): `, error);
|
||||
return failureCount <= MAX_RETRIES;
|
||||
},
|
||||
},
|
||||
|
|
@ -54,8 +68,9 @@ export const queryClient = new QueryClient({
|
|||
onError: (error) => {
|
||||
console.log("mutation error: ", error)
|
||||
|
||||
// TODO: Maybe unneeded with our little HttpClient refactor.
|
||||
if (error instanceof Response) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
// Use a format string to convert the error object to a proper string without much hassle.
|
||||
|
|
@ -68,4 +83,4 @@ export const queryClient = new QueryClient({
|
|||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue