fix: use hard navigate for auth pages navigation

apps/web/src/app-effects.js

@@ -10,6 +10,7 @@ import { registerKeyMap } from "./common/key-map";
 import { isUserPremium } from "./hooks/use-is-user-premium";
 import { loadTrackerScript } from "./utils/analytics";
 import Modal from "react-modal";
+import useDatabase from "./hooks/use-database";
 
 Modal.setAppElement("#root");
 if (process.env.NODE_ENV === "production") {
@@ -27,9 +28,11 @@ export default function AppEffects({ setShow }) {
   const initUser = useUserStore((store) => store.init);
   const initNotes = useNotesStore((store) => store.init);
   const setIsVaultCreated = useStore((store) => store.setIsVaultCreated);
+  const [isAppLoaded] = useDatabase();
 
   useEffect(
     function initializeApp() {
+      if (!isAppLoaded) return;
       refreshColors();
       refreshMenuPins();
       initUser();
@@ -41,6 +44,7 @@ export default function AppEffects({ setShow }) {
       })();
     },
     [
+      isAppLoaded,
       updateLastSynced,
       refreshColors,
       refreshMenuPins,

apps/web/src/app.js

@@ -1,12 +1,11 @@
 import React, { useState, Suspense } from "react";
-import { Box, Flex, Text } from "rebass";
+import { Box, Flex } from "rebass";
 import ThemeProvider from "./components/theme-provider";
 import { AnimatedFlex } from "./components/animated";
 import NavigationMenuPlaceholder from "./components/navigationmenu/index.lite";
 import StatusBarPlaceholder from "./components/statusbar/index.lite";
 import useMobile from "./utils/use-mobile";
 import useTablet from "./utils/use-tablet";
-import { Loading } from "./components/icons";
 import { LazyMotion, domAnimation } from "framer-motion";
 import useDatabase from "./hooks/use-database";
 import Loader from "./components/loader";

apps/web/src/common/reminders.js

@@ -5,7 +5,7 @@ import { store as appStore } from "../stores/app-store";
 import * as Icon from "../components/icons";
 import dayjs from "dayjs";
 import { showRecoveryKeyDialog } from "../common/dialog-controller";
-import { hashNavigate, navigate } from "../navigation";
+import { hardNavigate, hashNavigate } from "../navigation";
 import { isDesktop } from "../utils/platform";
 import saveFile from "../commands/save-file";
 import { PATHS } from "@notesnook/desktop/paths";
@@ -51,7 +51,7 @@ export const Reminders = {
   login: {
     title: "Login to sync your notes",
     subtitle: "You are not logged in",
-    action: () => navigate("/login"),
+    action: () => hardNavigate("/login"),
     icon: Icon.User,
   },
   email: {

apps/web/src/components/navigation-menu/index.js

@@ -19,7 +19,7 @@ import {
 } from "../icons";
 import { AnimatedFlex } from "../animated";
 import NavigationItem from "./navigation-item";
-import { navigate } from "../../navigation";
+import { hardNavigate, navigate } from "../../navigation";
 import { db } from "../../common/db";
 import useMobile from "../../utils/use-mobile";
 import { showRenameColorDialog } from "../../common/dialog-controller";
@@ -243,7 +243,7 @@ function NavigationMenu(props) {
           <NavigationItem
             title="Login"
             icon={Login}
-            onClick={() => navigate("/login")}
+            onClick={() => hardNavigate("/login")}
           />
         )}
         {bottomRoutes.map((item) => (

apps/web/src/components/properties/toggle.js

@@ -24,7 +24,7 @@ function Toggle(props) {
         <ToggleIcon size={13} sx={{ flexShrink: 0, mr: 1 }} />
         {label}
       </Text>
-      <ReactToggle size={20} checked={isOn} icons={false} />
+      <ReactToggle size={20} onChange={() => {}} checked={isOn} icons={false} />
     </Flex>
   );
 }

apps/web/src/components/status-bar/index.js

@@ -5,7 +5,7 @@ import { Circle, Sync, Loading, Update } from "../icons";
 import { useStore as useUserStore } from "../../stores/user-store";
 import { useStore as useAppStore } from "../../stores/app-store";
 import TimeAgo from "timeago-react";
-import { hashNavigate, navigate } from "../../navigation";
+import { hardNavigate, hashNavigate, navigate } from "../../navigation";
 import useAutoUpdater from "../../hooks/use-auto-updater";
 import downloadUpdate from "../../commands/download-update";
 import installUpdate from "../../commands/install-update";
@@ -73,7 +73,7 @@ function StatusBar() {
           <Button
             variant="statusitem"
             display="flex"
-            onClick={() => navigate("/login")}
+            onClick={() => hardNavigate("/login")}
             sx={{ alignItems: "center", justifyContent: "center" }}
           >
             <Circle size={7} color="error" />

apps/web/src/hooks/use-database.js

@@ -1,14 +1,20 @@
 import { useEffect, useState } from "react";
 import { initializeDatabase } from "../common/db";
 
+const memory = {
+  isAppLoaded: false,
+};
 export default function useDatabase() {
-  const [isAppLoaded, setIsAppLoaded] = useState(false);
+  const [isAppLoaded, setIsAppLoaded] = useState(memory.isAppLoaded);
 
   useEffect(() => {
+    if (memory.isAppLoaded) return;
+
     (async () => {
       await import("../app.css");
       await initializeDatabase();
       setIsAppLoaded(true);
+      memory.isAppLoaded = true;
     })();
   }, []);
 

apps/web/src/interfaces/nncrypto.stub.js

@@ -17,6 +17,10 @@ async function loadNNCrypto() {
 }
 
 var instance = null;
+/**
+ *
+ * @returns {Promise<import("nncrypto/src/interfaces").INNCrypto>}
+ */
 export async function getNNCrypto() {
   if (instance) return instance;
   const NNCrypto = await loadNNCrypto();

apps/web/src/navigation/index.js

@@ -91,3 +91,7 @@ const HOMEPAGE_ROUTE = {
 export function getHomeRoute() {
   return HOMEPAGE_ROUTE[Config.get("homepage", 0)];
 }
+
+export function hardNavigate(route) {
+  window.location.assign(route);
+}

apps/web/src/views/auth.js

@@ -3,7 +3,12 @@ import { Box, Button, Flex, Text } from "rebass";
 import ThemeProvider from "../components/theme-provider";
 import { CheckCircle, Loading, ArrowRight, Error } from "../components/icons";
 import Field from "../components/field";
-import { getQueryParams, navigate, useQueryParams } from "../navigation";
+import {
+  getQueryParams,
+  hardNavigate,
+  navigate,
+  useQueryParams,
+} from "../navigation";
 import { store as userstore } from "../stores/user-store";
 import { db } from "../common/db";
 import Config from "../utils/config";
@@ -56,7 +61,7 @@ const authTypes = {
       text: "Already have an account?",
       action: {
         text: "Log in",
-        onClick: () => navigate("/login", getQueryParams()),
+        onClick: () => hardNavigate("/login", getQueryParams()),
       },
     },
     labels: { email: "Your email", password: "Set password" },
@@ -109,7 +114,7 @@ const authTypes = {
       text: "Don't have an account?",
       action: {
         text: "Sign up!",
-        onClick: () => navigate("/signup", getQueryParams()),
+        onClick: () => hardNavigate("/signup", getQueryParams()),
       },
     },
     autoComplete: { password: "current-password" },
@@ -133,7 +138,7 @@ const authTypes = {
       text: "Remember your password?",
       action: {
         text: "Log in",
-        onClick: () => navigate("/login", getQueryParams()),
+        onClick: () => hardNavigate("/login", getQueryParams()),
       },
     },
     helpTexts: {
@@ -384,7 +389,7 @@ function Auth(props) {
                   alignSelf="start"
                   mt={2}
                   variant="anchor"
-                  onClick={() => navigate("/recover", getQueryParams())}
+                  onClick={() => hardNavigate("/recover", getQueryParams())}
                 >
                   Forgot password?
                 </Button>

apps/web/src/views/settings.js

@@ -21,7 +21,7 @@ import ScrollContainer from "../components/scroll-container";
 import { showLoadingDialog } from "../common/dialog-controller";
 import { showToast } from "../utils/toast";
 import { showPasswordDialog } from "../common/dialog-controller";
-import { hashNavigate, navigate } from "../navigation";
+import { hardNavigate, hashNavigate } from "../navigation";
 import useVersion from "../utils/useVersion";
 import { CHECK_IDS } from "notes-core/common";
 import { openPaddleDialog } from "../common/checkout";
@@ -179,7 +179,7 @@ function Settings(props) {
             p={1}
             sx={{ borderRadius: "default", cursor: "pointer" }}
             onClick={async () => {
-              navigate("/login", { redirect: "/settings" });
+              hardNavigate("/login", { redirect: "/settings" });
             }}
           >
             <Flex