mirror of
https://github.com/idanoo/autobrr
synced 2025-07-23 08:49:13 +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
|
|
@ -11,7 +11,7 @@ import { Portal } from "react-portal";
|
|||
import { Router } from "@app/routes";
|
||||
import { routerBasePath } from "@utils";
|
||||
import { queryClient } from "@api/QueryClient";
|
||||
import { AuthContext, SettingsContext } from "@utils/Context";
|
||||
import { SettingsContext } from "@utils/Context";
|
||||
|
||||
declare module '@tanstack/react-router' {
|
||||
interface Register {
|
||||
|
|
@ -33,17 +33,14 @@ export function App() {
|
|||
}, [setSettings]);
|
||||
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<Portal>
|
||||
<Toaster position="top-right" />
|
||||
</Portal>
|
||||
<RouterProvider
|
||||
basepath={routerBasePath()}
|
||||
router={Router}
|
||||
context={{
|
||||
auth: AuthContext,
|
||||
}}
|
||||
/>
|
||||
</QueryClientProvider>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<Portal>
|
||||
<Toaster position="top-right" />
|
||||
</Portal>
|
||||
<RouterProvider
|
||||
basepath={routerBasePath()}
|
||||
router={Router}
|
||||
/>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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({
|
|||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,36 +4,43 @@
|
|||
*/
|
||||
|
||||
import StackTracey from "stacktracey";
|
||||
import type { FallbackProps } from "react-error-boundary";
|
||||
import { ArrowPathIcon } from "@heroicons/react/24/solid";
|
||||
import { ExternalLink } from "@components/ExternalLink";
|
||||
|
||||
export const ErrorPage = ({ error, resetErrorBoundary }: FallbackProps) => {
|
||||
const stack = new StackTracey(error);
|
||||
const summary = stack.clean().asTable({
|
||||
maxColumnWidths: {
|
||||
callee: 48,
|
||||
file: 48,
|
||||
sourceLine: 384
|
||||
}
|
||||
});
|
||||
type ErrorPageProps = {
|
||||
error: unknown;
|
||||
reset: () => void;
|
||||
}
|
||||
|
||||
const parseTitle = () => {
|
||||
switch (error?.cause) {
|
||||
case "OFFLINE": {
|
||||
return "Connection to Autobrr failed! Check the application state and verify your connectivity.";
|
||||
export const ErrorPage = ({ error, reset }: ErrorPageProps) => {
|
||||
let pageTitle = "We caught an unrecoverable error!";
|
||||
let errorLine: string, summary ="";
|
||||
|
||||
if (error instanceof Error) {
|
||||
const stack = new StackTracey(error);
|
||||
summary = stack.clean().asTable({
|
||||
maxColumnWidths: {
|
||||
callee: 48,
|
||||
file: 48,
|
||||
sourceLine: 384
|
||||
}
|
||||
});
|
||||
|
||||
if (error.cause === "OFFLINE") {
|
||||
pageTitle = "Connection to Autobrr failed! Check the application state and verify your connectivity.";
|
||||
}
|
||||
default: {
|
||||
return "We caught an unrecoverable error!";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
errorLine = error.toString();
|
||||
} else {
|
||||
errorLine = String(error);
|
||||
// Leave summary blank?
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col justify-center py-12 px-2 sm:px-6 lg:px-8">
|
||||
<div className="sm:mx-auto sm:w-full sm:max-w-screen-md md:max-w-screen-lg lg:max-w-screen-xl">
|
||||
<h1 className="text-3xl font-bold leading-6 text-gray-900 dark:text-gray-200 mt-4 mb-3">
|
||||
{parseTitle()}
|
||||
{pageTitle}
|
||||
</h1>
|
||||
<h3 className="text-xl leading-6 text-gray-700 dark:text-gray-400 mb-4">
|
||||
Please consider reporting this error to our
|
||||
|
|
@ -60,14 +67,14 @@ export const ErrorPage = ({ error, resetErrorBoundary }: FallbackProps) => {
|
|||
>
|
||||
<div className="flex items-center">
|
||||
<svg className="mr-2 w-5 h-5 text-red-700 dark:text-red-800" fill="currentColor" viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<h3 className="text-lg font-medium text-red-700 dark:text-red-800">{error.toString()}</h3>
|
||||
<h3 className="text-lg font-medium text-red-700 dark:text-red-800">{errorLine}</h3>
|
||||
</div>
|
||||
{summary ? (
|
||||
<pre className="mt-2 mb-4 text-sm text-red-700 dark:text-red-800 overflow-x-auto">
|
||||
|
|
@ -83,7 +90,7 @@ export const ErrorPage = ({ error, resetErrorBoundary }: FallbackProps) => {
|
|||
className="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-red-800 dark:hover:bg-red-900"
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
resetErrorBoundary();
|
||||
reset();
|
||||
}}
|
||||
>
|
||||
<ArrowPathIcon className="-ml-0.5 mr-2 h-5 w-5"/>
|
||||
|
|
|
|||
|
|
@ -16,13 +16,11 @@ import { LeftNav } from "./LeftNav";
|
|||
import { RightNav } from "./RightNav";
|
||||
import { MobileNav } from "./MobileNav";
|
||||
import { ExternalLink } from "@components/ExternalLink";
|
||||
|
||||
import { AuthIndexRoute } from "@app/routes";
|
||||
import { ConfigQueryOptions, UpdatesQueryOptions } from "@api/queries";
|
||||
import { AuthContext } from "@utils/Context";
|
||||
|
||||
export const Header = () => {
|
||||
const router = useRouter()
|
||||
const { auth } = AuthIndexRoute.useRouteContext()
|
||||
|
||||
const { isError:isConfigError, error: configError, data: config } = useQuery(ConfigQueryOptions(true));
|
||||
if (isConfigError) {
|
||||
|
|
@ -40,9 +38,8 @@ export const Header = () => {
|
|||
toast.custom((t) => (
|
||||
<Toast type="success" body="You have been logged out. Goodbye!" t={t} />
|
||||
));
|
||||
auth.logout()
|
||||
|
||||
router.history.push("/")
|
||||
AuthContext.reset();
|
||||
router.history.push("/");
|
||||
},
|
||||
onError: (err) => {
|
||||
console.error("logout error", err)
|
||||
|
|
@ -60,7 +57,7 @@ export const Header = () => {
|
|||
<div className="border-b border-gray-300 dark:border-gray-775">
|
||||
<div className="flex items-center justify-between h-16 px-4 sm:px-0">
|
||||
<LeftNav />
|
||||
<RightNav logoutMutation={logoutMutation.mutate} auth={auth} />
|
||||
<RightNav logoutMutation={logoutMutation.mutate} />
|
||||
<div className="-mr-2 flex sm:hidden">
|
||||
{/* Mobile menu button */}
|
||||
<Disclosure.Button className="bg-gray-200 dark:bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-600 dark:text-gray-400 hover:text-white hover:bg-gray-700">
|
||||
|
|
@ -92,7 +89,7 @@ export const Header = () => {
|
|||
)}
|
||||
</div>
|
||||
|
||||
<MobileNav logoutMutation={logoutMutation.mutate} auth={auth} />
|
||||
<MobileNav logoutMutation={logoutMutation.mutate} />
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import { RightNavProps } from "./_shared";
|
|||
|
||||
import { Cog6ToothIcon, ArrowLeftOnRectangleIcon, MoonIcon, SunIcon } from "@heroicons/react/24/outline";
|
||||
import { Link } from "@tanstack/react-router";
|
||||
import { SettingsContext } from "@utils/Context";
|
||||
import { AuthContext, SettingsContext } from "@utils/Context";
|
||||
|
||||
export const RightNav = (props: RightNavProps) => {
|
||||
const [settings, setSettings] = SettingsContext.use();
|
||||
|
|
@ -56,7 +56,7 @@ export const RightNav = (props: RightNavProps) => {
|
|||
<span className="sr-only">
|
||||
Open user menu for{" "}
|
||||
</span>
|
||||
{props.auth.username}
|
||||
{AuthContext.get().username}
|
||||
</span>
|
||||
<UserIcon
|
||||
className="inline ml-1 h-5 w-5"
|
||||
|
|
|
|||
|
|
@ -3,8 +3,6 @@
|
|||
* SPDX-License-Identifier: GPL-2.0-or-later
|
||||
*/
|
||||
|
||||
import { AuthCtx } from "@utils/Context";
|
||||
|
||||
interface NavItem {
|
||||
name: string;
|
||||
path: string;
|
||||
|
|
@ -13,7 +11,6 @@ interface NavItem {
|
|||
|
||||
export interface RightNavProps {
|
||||
logoutMutation: () => void;
|
||||
auth: AuthCtx
|
||||
}
|
||||
|
||||
export const NAV_ROUTES: Array<NavItem> = [
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@ import {
|
|||
createRootRouteWithContext,
|
||||
createRoute,
|
||||
createRouter,
|
||||
ErrorComponent,
|
||||
Navigate,
|
||||
notFound,
|
||||
Outlet,
|
||||
redirect,
|
||||
} from "@tanstack/react-router";
|
||||
} from "@tanstack/react-router";
|
||||
import { z } from "zod";
|
||||
import { QueryClient } from "@tanstack/react-query";
|
||||
|
||||
|
|
@ -46,11 +46,13 @@ import DownloadClientSettings from "@screens/settings/DownloadClient";
|
|||
import FeedSettings from "@screens/settings/Feed";
|
||||
import { Dashboard } from "@screens/Dashboard";
|
||||
import AccountSettings from "@screens/settings/Account";
|
||||
import { AuthContext, AuthCtx, localStorageUserKey, SettingsContext } from "@utils/Context";
|
||||
import { AuthContext, SettingsContext } from "@utils/Context";
|
||||
import { TanStackRouterDevtools } from "@tanstack/router-devtools";
|
||||
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
|
||||
import { queryClient } from "@api/QueryClient";
|
||||
|
||||
import { ErrorPage } from "@components/alerts";
|
||||
|
||||
const DashboardRoute = createRoute({
|
||||
getParentRoute: () => AuthIndexRoute,
|
||||
path: '/',
|
||||
|
|
@ -133,16 +135,9 @@ export const FilterActionsRoute = createRoute({
|
|||
component: Actions
|
||||
});
|
||||
|
||||
const ReleasesRoute = createRoute({
|
||||
export const ReleasesRoute = createRoute({
|
||||
getParentRoute: () => AuthIndexRoute,
|
||||
path: 'releases'
|
||||
});
|
||||
|
||||
// type ReleasesSearch = z.infer<typeof releasesSearchSchema>
|
||||
|
||||
export const ReleasesIndexRoute = createRoute({
|
||||
getParentRoute: () => ReleasesRoute,
|
||||
path: '/',
|
||||
path: 'releases',
|
||||
component: Releases,
|
||||
validateSearch: (search) => z.object({
|
||||
offset: z.number().optional(),
|
||||
|
|
@ -260,7 +255,7 @@ export const LoginRoute = createRoute({
|
|||
validateSearch: z.object({
|
||||
redirect: z.string().optional(),
|
||||
}),
|
||||
beforeLoad: ({ navigate}) => {
|
||||
beforeLoad: ({ navigate }) => {
|
||||
// handle canOnboard
|
||||
APIClient.auth.canOnboard().then(() => {
|
||||
console.info("onboarding available, redirecting")
|
||||
|
|
@ -277,44 +272,36 @@ export const AuthRoute = createRoute({
|
|||
id: 'auth',
|
||||
// Before loading, authenticate the user via our auth context
|
||||
// This will also happen during prefetching (e.g. hovering over links, etc.)
|
||||
beforeLoad: ({context, location}) => {
|
||||
beforeLoad: ({ context, location }) => {
|
||||
// If the user is not logged in, check for item in localStorage
|
||||
if (!context.auth.isLoggedIn) {
|
||||
const storage = localStorage.getItem(localStorageUserKey);
|
||||
if (storage) {
|
||||
try {
|
||||
const json = JSON.parse(storage);
|
||||
if (json === null) {
|
||||
console.warn(`JSON localStorage value for '${localStorageUserKey}' context state is null`);
|
||||
} else {
|
||||
context.auth.isLoggedIn = json.isLoggedIn
|
||||
context.auth.username = json.username
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`auth Failed to merge ${localStorageUserKey} context state: ${e}`);
|
||||
}
|
||||
} else {
|
||||
// If the user is logged out, redirect them to the login page
|
||||
throw 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,
|
||||
},
|
||||
})
|
||||
}
|
||||
if (!AuthContext.get().isLoggedIn) {
|
||||
throw 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,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Otherwise, return the user in context
|
||||
return {
|
||||
username: AuthContext.username,
|
||||
}
|
||||
return context;
|
||||
},
|
||||
})
|
||||
|
||||
function AuthenticatedLayout() {
|
||||
const isLoggedIn = AuthContext.useSelector((s) => s.isLoggedIn);
|
||||
if (!isLoggedIn) {
|
||||
const redirect = (
|
||||
location.pathname.length > 1
|
||||
? { redirect: location.pathname }
|
||||
: undefined
|
||||
);
|
||||
return <Navigate to="/login" search={redirect} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen">
|
||||
<Header/>
|
||||
|
|
@ -345,7 +332,6 @@ export const RootComponent = () => {
|
|||
}
|
||||
|
||||
export const RootRoute = createRootRouteWithContext<{
|
||||
auth: AuthCtx,
|
||||
queryClient: QueryClient
|
||||
}>()({
|
||||
component: RootComponent,
|
||||
|
|
@ -354,7 +340,7 @@ export const RootRoute = createRootRouteWithContext<{
|
|||
|
||||
const filterRouteTree = FiltersRoute.addChildren([FilterIndexRoute, FilterGetByIdRoute.addChildren([FilterGeneralRoute, FilterMoviesTvRoute, FilterMusicRoute, FilterAdvancedRoute, FilterExternalRoute, FilterActionsRoute])])
|
||||
const settingsRouteTree = SettingsRoute.addChildren([SettingsIndexRoute, SettingsLogRoute, SettingsIndexersRoute, SettingsIrcRoute, SettingsFeedsRoute, SettingsClientsRoute, SettingsNotificationsRoute, SettingsApiRoute, SettingsReleasesRoute, SettingsAccountRoute])
|
||||
const authenticatedTree = AuthRoute.addChildren([AuthIndexRoute.addChildren([DashboardRoute, filterRouteTree, ReleasesRoute.addChildren([ReleasesIndexRoute]), settingsRouteTree, LogsRoute])])
|
||||
const authenticatedTree = AuthRoute.addChildren([AuthIndexRoute.addChildren([DashboardRoute, filterRouteTree, ReleasesRoute, settingsRouteTree, LogsRoute])])
|
||||
const routeTree = RootRoute.addChildren([
|
||||
authenticatedTree,
|
||||
LoginRoute,
|
||||
|
|
@ -368,9 +354,10 @@ export const Router = createRouter({
|
|||
<RingResizeSpinner className="text-blue-500 size-24"/>
|
||||
</div>
|
||||
),
|
||||
defaultErrorComponent: ({error}) => <ErrorComponent error={error}/>,
|
||||
defaultErrorComponent: (ctx) => (
|
||||
<ErrorPage error={ctx.error} reset={ctx.reset} />
|
||||
),
|
||||
context: {
|
||||
auth: undefined!, // We'll inject this when we render
|
||||
queryClient
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -26,16 +26,16 @@ interface NavTabType {
|
|||
}
|
||||
|
||||
const subNavigation: NavTabType[] = [
|
||||
{ name: "Application", href: ".", icon: CogIcon, exact: true },
|
||||
{ name: "Logs", href: "logs", icon: Square3Stack3DIcon },
|
||||
{ name: "Indexers", href: "indexers", icon: KeyIcon },
|
||||
{ name: "IRC", href: "irc", icon: ChatBubbleLeftRightIcon },
|
||||
{ name: "Feeds", href: "feeds", icon: RssIcon },
|
||||
{ name: "Clients", href: "clients", icon: FolderArrowDownIcon },
|
||||
{ name: "Notifications", href: "notifications", icon: BellIcon },
|
||||
{ name: "API keys", href: "api", icon: KeyIcon },
|
||||
{ name: "Releases", href: "releases", icon: RectangleStackIcon },
|
||||
{ name: "Account", href: "account", icon: UserCircleIcon }
|
||||
{ name: "Application", href: "/settings", icon: CogIcon, exact: true },
|
||||
{ name: "Logs", href: "/settings/logs", icon: Square3Stack3DIcon },
|
||||
{ name: "Indexers", href: "/settings/indexers", icon: KeyIcon },
|
||||
{ name: "IRC", href: "/settings/irc", icon: ChatBubbleLeftRightIcon },
|
||||
{ name: "Feeds", href: "/settings/feeds", icon: RssIcon },
|
||||
{ name: "Clients", href: "/settings/clients", icon: FolderArrowDownIcon },
|
||||
{ name: "Notifications", href: "/settings/notifications", icon: BellIcon },
|
||||
{ name: "API keys", href: "/settings/api", icon: KeyIcon },
|
||||
{ name: "Releases", href: "/settings/releases", icon: RectangleStackIcon },
|
||||
{ name: "Account", href: "/settings/account", icon: UserCircleIcon }
|
||||
// {name: 'Regex Playground', href: 'regex-playground', icon: CogIcon, current: false}
|
||||
// {name: 'Rules', href: 'rules', icon: ClipboardCheckIcon, current: false},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
import React, { useEffect } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { useMutation, useQueryErrorResetBoundary } from "@tanstack/react-query";
|
||||
import { useRouter, useSearch } from "@tanstack/react-router";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
|
|
@ -18,15 +18,20 @@ import { PasswordInput, TextInput } from "@components/inputs/text";
|
|||
import { LoginRoute } from "@app/routes";
|
||||
|
||||
import Logo from "@app/logo.svg?react";
|
||||
import { AuthContext } from "@utils/Context";
|
||||
// import { WarningAlert } from "@components/alerts";
|
||||
|
||||
type LoginFormFields = {
|
||||
username: string;
|
||||
password: string;
|
||||
};
|
||||
|
||||
export const Login = () => {
|
||||
export const Login = () => {
|
||||
const [auth, setAuth] = AuthContext.use();
|
||||
|
||||
const queryErrorResetBoundary = useQueryErrorResetBoundary()
|
||||
|
||||
const router = useRouter()
|
||||
const { auth } = LoginRoute.useRouteContext()
|
||||
const search = useSearch({ from: LoginRoute.id })
|
||||
|
||||
const { handleSubmit, register, formState } = useForm<LoginFormFields>({
|
||||
|
|
@ -35,14 +40,19 @@ export const Login = () => {
|
|||
});
|
||||
|
||||
useEffect(() => {
|
||||
queryErrorResetBoundary.reset()
|
||||
// remove user session when visiting login page
|
||||
auth.logout()
|
||||
}, []);
|
||||
AuthContext.reset();
|
||||
}, [queryErrorResetBoundary]);
|
||||
|
||||
const loginMutation = useMutation({
|
||||
mutationFn: (data: LoginFormFields) => APIClient.auth.login(data.username, data.password),
|
||||
onSuccess: (_, variables: LoginFormFields) => {
|
||||
auth.login(variables.username)
|
||||
queryErrorResetBoundary.reset()
|
||||
setAuth({
|
||||
isLoggedIn: true,
|
||||
username: variables.username
|
||||
});
|
||||
router.invalidate()
|
||||
},
|
||||
onError: (error) => {
|
||||
|
|
@ -60,7 +70,7 @@ export const Login = () => {
|
|||
} else if (auth.isLoggedIn) {
|
||||
router.history.push("/")
|
||||
}
|
||||
}, [auth.isLoggedIn, search.redirect])
|
||||
}, [auth.isLoggedIn, search.redirect]) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col justify-center px-3">
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export const Onboarding = () => {
|
|||
|
||||
const mutation = useMutation({
|
||||
mutationFn: (data: InputValues) => APIClient.auth.onboard(data.username, data.password1),
|
||||
onSuccess: () => navigate({ to: "/" })
|
||||
onSuccess: () => navigate({ to: "/login" })
|
||||
});
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -33,12 +33,12 @@ interface tabType {
|
|||
}
|
||||
|
||||
const tabs: tabType[] = [
|
||||
{ name: "General", href: ".", exact: true },
|
||||
{ name: "Movies and TV", href: "movies-tv" },
|
||||
{ name: "Music", href: "music" },
|
||||
{ name: "Advanced", href: "advanced" },
|
||||
{ name: "External", href: "external" },
|
||||
{ name: "Actions", href: "actions" }
|
||||
{ name: "General", href: "/filters/$filterId", exact: true },
|
||||
{ name: "Movies and TV", href: "/filters/$filterId/movies-tv" },
|
||||
{ name: "Music", href: "/filters/$filterId/music" },
|
||||
{ name: "Advanced", href: "/filters/$filterId/advanced" },
|
||||
{ name: "External", href: "/filters/$filterId/external" },
|
||||
{ name: "Actions", href: "/filters/$filterId/actions" }
|
||||
];
|
||||
|
||||
export interface NavLinkProps {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import {
|
|||
EyeSlashIcon
|
||||
} from "@heroicons/react/24/solid";
|
||||
|
||||
import { ReleasesIndexRoute } from "@app/routes";
|
||||
import { ReleasesRoute } from "@app/routes";
|
||||
import { ReleasesListQueryOptions } from "@api/queries";
|
||||
import { RandomLinuxIsos } from "@utils";
|
||||
|
||||
|
|
@ -94,7 +94,7 @@ const EmptyReleaseList = () => (
|
|||
);
|
||||
|
||||
export const ReleaseTable = () => {
|
||||
const search = ReleasesIndexRoute.useSearch()
|
||||
const search = ReleasesRoute.useSearch()
|
||||
|
||||
const columns = React.useMemo(() => [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -8,12 +8,11 @@ import { Form, Formik } from "formik";
|
|||
import toast from "react-hot-toast";
|
||||
import { UserIcon } from "@heroicons/react/24/solid";
|
||||
|
||||
import { SettingsAccountRoute } from "@app/routes";
|
||||
import { AuthContext } from "@utils/Context";
|
||||
import { APIClient } from "@api/APIClient";
|
||||
import { Section } from "./_components";
|
||||
import { PasswordField, TextField } from "@components/inputs";
|
||||
import Toast from "@components/notifications/Toast";
|
||||
import { AuthContext } from "@utils/Context";
|
||||
|
||||
const AccountSettings = () => (
|
||||
<Section
|
||||
|
|
@ -35,7 +34,7 @@ interface InputValues {
|
|||
}
|
||||
|
||||
function Credentials() {
|
||||
const ctx = SettingsAccountRoute.useRouteContext()
|
||||
const username = AuthContext.useSelector((s) => s.username);
|
||||
|
||||
const validate = (values: InputValues) => {
|
||||
const errors: Record<string, string> = {};
|
||||
|
|
@ -52,7 +51,7 @@ function Credentials() {
|
|||
const logoutMutation = useMutation({
|
||||
mutationFn: APIClient.auth.logout,
|
||||
onSuccess: () => {
|
||||
AuthContext.logout();
|
||||
AuthContext.reset();
|
||||
|
||||
toast.custom((t) => (
|
||||
<Toast type="success" body="User updated successfully. Please sign in again!" t={t} />
|
||||
|
|
@ -78,7 +77,7 @@ function Credentials() {
|
|||
<div className="px-2 pb-6 bg-white dark:bg-gray-800">
|
||||
<Formik
|
||||
initialValues={{
|
||||
username: ctx.auth.username!,
|
||||
username: username,
|
||||
newUsername: "",
|
||||
oldPassword: "",
|
||||
newPassword: "",
|
||||
|
|
|
|||
|
|
@ -21,16 +21,16 @@ export type FilterListState = {
|
|||
status: string;
|
||||
};
|
||||
|
||||
// interface AuthInfo {
|
||||
// username: string;
|
||||
// isLoggedIn: boolean;
|
||||
// }
|
||||
interface AuthInfo {
|
||||
username: string;
|
||||
isLoggedIn: boolean;
|
||||
}
|
||||
|
||||
// Default values
|
||||
// const AuthContextDefaults: AuthInfo = {
|
||||
// username: "",
|
||||
// isLoggedIn: false
|
||||
// };
|
||||
const AuthContextDefaults: AuthInfo = {
|
||||
username: "",
|
||||
isLoggedIn: false
|
||||
};
|
||||
|
||||
const SettingsContextDefaults: SettingsType = {
|
||||
debug: false,
|
||||
|
|
@ -72,11 +72,12 @@ function ContextMerger<T extends {}>(
|
|||
ctxState.set(values);
|
||||
}
|
||||
|
||||
const AuthKey = "autobrr_user_auth";
|
||||
const SettingsKey = "autobrr_settings";
|
||||
const FilterListKey = "autobrr_filter_list";
|
||||
|
||||
export const InitializeGlobalContext = () => {
|
||||
// ContextMerger<AuthInfo>(localStorageUserKey, AuthContextDefaults, AuthContextt);
|
||||
ContextMerger<AuthInfo>(AuthKey, AuthContextDefaults, AuthContext);
|
||||
ContextMerger<SettingsType>(
|
||||
SettingsKey,
|
||||
SettingsContextDefaults,
|
||||
|
|
@ -101,9 +102,12 @@ function DefaultSetter<T>(name: string, newState: T, prevState: T) {
|
|||
}
|
||||
}
|
||||
|
||||
// export const AuthContextt = newRidgeState<AuthInfo>(AuthContextDefaults, {
|
||||
// onSet: (newState, prevState) => DefaultSetter(localStorageUserKey, newState, prevState)
|
||||
// });
|
||||
export const AuthContext = newRidgeState<AuthInfo>(
|
||||
AuthContextDefaults,
|
||||
{
|
||||
onSet: (newState, prevState) => DefaultSetter(AuthKey, newState, prevState)
|
||||
}
|
||||
);
|
||||
|
||||
export const SettingsContext = newRidgeState<SettingsType>(
|
||||
SettingsContextDefaults,
|
||||
|
|
@ -121,29 +125,3 @@ export const FilterListContext = newRidgeState<FilterListState>(
|
|||
onSet: (newState, prevState) => DefaultSetter(FilterListKey, newState, prevState)
|
||||
}
|
||||
);
|
||||
|
||||
export type AuthCtx = {
|
||||
isLoggedIn: boolean
|
||||
username?: string
|
||||
login: (username: string) => void
|
||||
logout: () => void
|
||||
}
|
||||
|
||||
export const localStorageUserKey = "autobrr_user_auth"
|
||||
|
||||
export const AuthContext: AuthCtx = {
|
||||
isLoggedIn: false,
|
||||
username: undefined,
|
||||
login: (username: string) => {
|
||||
AuthContext.isLoggedIn = true
|
||||
AuthContext.username = username
|
||||
|
||||
localStorage.setItem(localStorageUserKey, JSON.stringify(AuthContext));
|
||||
},
|
||||
logout: () => {
|
||||
AuthContext.isLoggedIn = false
|
||||
AuthContext.username = undefined
|
||||
|
||||
localStorage.removeItem(localStorageUserKey);
|
||||
},
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue