[web] Move custom apiOrigin to IndexDB (#2306)

Earlier we were storing the custom API origin setting in local storage. Local storage is not accessible from web workers, which is a problem in general (and in particular, this caused face indexing to fail since we were not able to put the embeddings to remote since that code runs in a web worker). Move this to a Indexed DB. Do this in a way we can reuse the same table for more such ad-hoc keys.
ente-io · Jun 27, 2024 · 5140d6c · 5140d6c
2 parents 0def478 + c7d5dde
commit 5140d6c
Show file tree

Hide file tree

Showing 39 changed files with 487 additions and 260 deletions.
diff --git a/web/apps/accounts/src/services/passkey.ts b/web/apps/accounts/src/services/passkey.ts
@@ -1,5 +1,5 @@
 import { isDevBuild } from "@/next/env";
-import { apiOrigin } from "@/next/origins";
+import { apiURL } from "@/next/origins";
 import { clientPackageName } from "@/next/types/app";
 import { TwoFactorAuthorizationResponse } from "@/next/types/credentials";
 import { ensure } from "@/utils/ensure";
@@ -58,7 +58,7 @@ const GetPasskeysResponse = z.object({
  * has no passkeys.
  */
 export const getPasskeys = async (token: string) => {
-    const url = `${apiOrigin()}/passkeys`;
+    const url = await apiURL("/passkeys");
     const res = await fetch(url, {
         headers: accountsAuthenticatedRequestHeaders(token),
     });
@@ -82,7 +82,7 @@ export const renamePasskey = async (
     name: string,
 ) => {
     const params = new URLSearchParams({ friendlyName: name });
-    const url = `${apiOrigin()}/passkeys/${id}`;
+    const url = await apiURL(`/passkeys/${id}`);
     const res = await fetch(`${url}?${params.toString()}`, {
         method: "PATCH",
         headers: accountsAuthenticatedRequestHeaders(token),
@@ -98,7 +98,7 @@ export const renamePasskey = async (
  * @param id The `id` of the existing passkey to delete.
  */
 export const deletePasskey = async (token: string, id: string) => {
-    const url = `${apiOrigin()}/passkeys/${id}`;
+    const url = await apiURL(`/passkeys/${id}`);
     const res = await fetch(url, {
         method: "DELETE",
         headers: accountsAuthenticatedRequestHeaders(token),
@@ -149,7 +149,7 @@ interface BeginPasskeyRegistrationResponse {
 }
 
 const beginPasskeyRegistration = async (token: string) => {
-    const url = `${apiOrigin()}/passkeys/registration/begin`;
+    const url = await apiURL("/passkeys/registration/begin");
     const res = await fetch(url, {
         method: "POST",
         headers: accountsAuthenticatedRequestHeaders(token),
@@ -293,7 +293,7 @@ const finishPasskeyRegistration = async ({
     const transports = attestationResponse.getTransports();
 
     const params = new URLSearchParams({ friendlyName, sessionID });
-    const url = `${apiOrigin()}/passkeys/registration/finish`;
+    const url = await apiURL("/passkeys/registration/finish");
     const res = await fetch(`${url}?${params.toString()}`, {
         method: "POST",
         headers: accountsAuthenticatedRequestHeaders(token),
@@ -414,7 +414,7 @@ export const passkeySessionAlreadyClaimedErrorMessage =
 export const beginPasskeyAuthentication = async (
     passkeySessionID: string,
 ): Promise<BeginPasskeyAuthenticationResponse> => {
-    const url = `${apiOrigin()}/users/two-factor/passkeys/begin`;
+    const url = await apiURL("/users/two-factor/passkeys/begin");
     const res = await fetch(url, {
         method: "POST",
         body: JSON.stringify({ sessionID: passkeySessionID }),
@@ -504,7 +504,7 @@ export const finishPasskeyAuthentication = async ({
         ceremonySessionID,
         clientPackage,
     });
-    const url = `${apiOrigin()}/users/two-factor/passkeys/finish`;
+    const url = await apiURL("/users/two-factor/passkeys/finish");
     const res = await fetch(`${url}?${params.toString()}`, {
         method: "POST",
         headers: {

diff --git a/web/apps/auth/src/services/remote.ts b/web/apps/auth/src/services/remote.ts
@@ -1,5 +1,5 @@
 import log from "@/next/log";
-import { apiOrigin } from "@/next/origins";
+import { apiURL } from "@/next/origins";
 import ComlinkCryptoWorker from "@ente/shared/crypto";
 import { ApiError, CustomError } from "@ente/shared/error";
 import HTTPService from "@ente/shared/network/HTTPService";
@@ -81,7 +81,7 @@ interface AuthKey {
 export const getAuthKey = async (): Promise<AuthKey> => {
     try {
         const resp = await HTTPService.get(
-            `${apiOrigin()}/authenticator/key`,
+            await apiURL("/authenticator/key"),
             {},
             {
                 "X-Auth-Token": getToken(),
@@ -108,7 +108,7 @@ export const getDiff = async (
 ): Promise<AuthEntity[]> => {
     try {
         const resp = await HTTPService.get(
-            `${apiOrigin()}/authenticator/entity/diff`,
+            await apiURL("/authenticator/entity/diff"),
             {
                 sinceTime,
                 limit,

diff --git a/web/apps/cast/src/services/render.ts b/web/apps/cast/src/services/render.ts
@@ -17,7 +17,7 @@ import type {
 } from "@/new/photos/types/file";
 import { nameAndExtension } from "@/next/file";
 import log from "@/next/log";
-import { apiOrigin, customAPIOrigin } from "@/next/origins";
+import { apiURL, customAPIOrigin } from "@/next/origins";
 import { shuffled } from "@/utils/array";
 import { ensure } from "@/utils/ensure";
 import { wait } from "@/utils/promise";
@@ -164,7 +164,7 @@ const getEncryptedCollectionFiles = async (
     let resp: AxiosResponse;
     do {
         resp = await HTTPService.get(
-            `${apiOrigin()}/cast/diff`,
+            await apiURL("/cast/diff"),
             { sinceTime },
             {
                 "Cache-Control": "no-cache",
@@ -317,8 +317,9 @@ const downloadFile = async (
     if (!isImageOrLivePhoto(file))
         throw new Error("Can only cast images and live photos");
 
+    const customOrigin = await customAPIOrigin();
+
     const getFile = () => {
-        const customOrigin = customAPIOrigin();
         if (customOrigin) {
             // See: [Note: Passing credentials for self-hosted file fetches]
             const params = new URLSearchParams({ castToken });

diff --git a/web/apps/photos/package.json b/web/apps/photos/package.json
@@ -22,7 +22,6 @@
         "fast-srp-hap": "^2.0.4",
         "ffmpeg-wasm": "file:./thirdparty/ffmpeg-wasm",
         "hdbscan": "0.0.1-alpha.5",
-        "idb": "^8",
         "leaflet": "^1.9.4",
         "leaflet-defaulticon-compatibility": "^0.1.1",
         "localforage": "^1.9.0",

diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx
@@ -679,15 +679,15 @@ const ExitSection: React.FC = () => {
 const DebugSection: React.FC = () => {
     const appContext = useContext(AppContext);
     const [appVersion, setAppVersion] = useState<string | undefined>();
+    const [host, setHost] = useState<string | undefined>();
 
     const electron = globalThis.electron;
 
     useEffect(() => {
-        electron?.appVersion().then((v) => setAppVersion(v));
+        void electron?.appVersion().then(setAppVersion);
+        void customAPIHost().then(setHost);
     });
 
-    const host = customAPIHost();
-
     const confirmLogDownload = () =>
         appContext.setDialogMessage({
             title: t("DOWNLOAD_LOGS"),

diff --git a/web/apps/photos/src/pages/index.tsx b/web/apps/photos/src/pages/index.tsx
@@ -22,7 +22,7 @@ import { t } from "i18next";
 import { useRouter } from "next/router";
 import { CarouselProvider, DotGroup, Slide, Slider } from "pure-react-carousel";
 import "pure-react-carousel/dist/react-carousel.es.css";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Trans } from "react-i18next";
 import { useAppContext } from "./_app";
 
@@ -31,14 +31,17 @@ export default function LandingPage() {
 
     const [loading, setLoading] = useState(true);
     const [showLogin, setShowLogin] = useState(true);
-    // This is kept as state because it can change as a result of user action
-    // while we're on this page (there currently isn't an event listener we can
-    // attach to for observing changes to local storage by the same window).
-    const [host, setHost] = useState(customAPIHost());
+    const [host, setHost] = useState<string | undefined>();
 
     const router = useRouter();
 
+    const refreshHost = useCallback(
+        () => void customAPIHost().then(setHost),
+        [],
+    );
+
     useEffect(() => {
+        refreshHost();
         showNavBar(false);
         const currentURL = new URL(window.location.href);
         const albumsURL = new URL(albumsAppOrigin());
@@ -51,9 +54,7 @@ export default function LandingPage() {
         } else {
             handleNormalRedirect();
         }
-    }, []);
-
-    const handleMaybeChangeHost = () => setHost(customAPIHost());
+    }, [refreshHost]);
 
     const handleAlbumsRedirect = async (currentURL: URL) => {
         const end = currentURL.hash.lastIndexOf("&");
@@ -117,7 +118,7 @@ export default function LandingPage() {
     const redirectToLoginPage = () => router.push(PAGES.LOGIN);
 
     return (
-        <TappableContainer onMaybeChangeHost={handleMaybeChangeHost}>
+        <TappableContainer onMaybeChangeHost={refreshHost}>
             {loading ? (
                 <EnteSpinner />
             ) : (

diff --git a/web/apps/photos/src/services/billingService.ts b/web/apps/photos/src/services/billingService.ts
@@ -1,5 +1,5 @@
 import log from "@/next/log";
-import { apiOrigin, paymentsAppOrigin } from "@/next/origins";
+import { apiURL, paymentsAppOrigin } from "@/next/origins";
 import HTTPService from "@ente/shared/network/HTTPService";
 import {
     LS_KEYS,
@@ -33,11 +33,11 @@ class billingService {
             let response;
             if (!token) {
                 response = await HTTPService.get(
-                    `${apiOrigin()}/billing/plans/v2`,
+                    await apiURL("/billing/plans/v2"),
                 );
             } else {
                 response = await HTTPService.get(
-                    `${apiOrigin()}/billing/user-plans`,
+                    await apiURL("/billing/user-plans"),
                     null,
                     {
                         "X-Auth-Token": getToken(),
@@ -53,7 +53,7 @@ class billingService {
     public async syncSubscription() {
         try {
             const response = await HTTPService.get(
-                `${apiOrigin()}/billing/subscription`,
+                await apiURL("/billing/subscription"),
                 null,
                 {
                     "X-Auth-Token": getToken(),
@@ -97,7 +97,7 @@ class billingService {
     public async cancelSubscription() {
         try {
             const response = await HTTPService.post(
-                `${apiOrigin()}/billing/stripe/cancel-subscription`,
+                await apiURL("/billing/stripe/cancel-subscription"),
                 null,
                 null,
                 {
@@ -115,7 +115,7 @@ class billingService {
     public async activateSubscription() {
         try {
             const response = await HTTPService.post(
-                `${apiOrigin()}/billing/stripe/activate-subscription`,
+                await apiURL("/billing/stripe/activate-subscription"),
                 null,
                 null,
                 {
@@ -139,7 +139,7 @@ class billingService {
                 return;
             }
             const response = await HTTPService.post(
-                `${apiOrigin()}/billing/verify-subscription`,
+                await apiURL("/billing/verify-subscription"),
                 {
                     paymentProvider: "stripe",
                     productID: null,
@@ -165,7 +165,7 @@ class billingService {
         }
         try {
             await HTTPService.delete(
-                `${apiOrigin()}/family/leave`,
+                await apiURL("/family/leave"),
                 null,
                 null,
                 {
@@ -197,7 +197,7 @@ class billingService {
         try {
             const redirectURL = this.getRedirectURL();
             const response = await HTTPService.get(
-                `${apiOrigin()}/billing/stripe/customer-portal`,
+                await apiURL("/billing/stripe/customer-portal"),
                 { redirectURL },
                 {
                     "X-Auth-Token": getToken(),