feat: account handoff from photos-web to passkeys

apps/accounts/src/pages/account-handoff.tsx

@@ -0,0 +1,41 @@
+import EnteSpinner from '@ente/shared/components/EnteSpinner';
+import { VerticallyCentered } from '@ente/shared/components/Container';
+import { setData, LS_KEYS } from '@ente/shared/storage/localStorage';
+import { useRouter } from 'next/router';
+import { ACCOUNTS_PAGES } from '@ente/shared/constants/pages';
+import { useEffect } from 'react';
+import { logError } from '@ente/shared/sentry';
+
+const AccountHandoff = () => {
+    const router = useRouter();
+
+    const retrieveAccountData = () => {
+        try {
+            // get the data from the fragment
+            const fragment = window.location.hash;
+
+            const stringified = window.atob(fragment);
+
+            const deserialized = JSON.parse(stringified);
+
+            setData(LS_KEYS.USER, deserialized);
+
+            router.push(ACCOUNTS_PAGES.PASSKEYS);
+        } catch (e) {
+            logError(e, 'Failed to deserialize and set passed user data');
+            router.push(ACCOUNTS_PAGES.LOGIN);
+        }
+    };
+
+    useEffect(() => {
+        retrieveAccountData();
+    }, []);
+
+    return (
+        <VerticallyCentered>
+            <EnteSpinner />
+        </VerticallyCentered>
+    );
+};
+
+export default AccountHandoff;

apps/auth/public/locales/en/translation.json

@@ -615,5 +615,6 @@
     "FLIP": "Flip",
     "ROTATION": "Rotation",
     "RESET": "Reset",
-    "PHOTO_EDITOR": "Photo Editor"
+    "PHOTO_EDITOR": "Photo Editor",
+    "PASSKEYS": "Passkeys"
 }

apps/photos/src/components/Sidebar/UtilitySection.tsx

@@ -4,14 +4,17 @@ import { t } from 'i18next';
 // import FixLargeThumbnails from 'components/FixLargeThumbnail';
 import RecoveryKey from '@ente/shared/components/RecoveryKey';
 import TwoFactorModal from 'components/TwoFactor/Modal';
-import { PHOTOS_PAGES as PAGES } from '@ente/shared/constants/pages';
+import {
+    PHOTOS_PAGES as PAGES,
+    ACCOUNTS_PAGES,
+} from '@ente/shared/constants/pages';
 import { useRouter } from 'next/router';
 import { AppContext } from 'pages/_app';
 // import mlIDbStorage from 'utils/storage/mlIDbStorage';
 import isElectron from 'is-electron';
 import WatchFolder from 'components/WatchFolder';
 import { getDownloadAppMessage } from 'utils/ui';
-
+import { getData, LS_KEYS } from '@ente/shared/storage/localStorage';
 import { isInternalUser } from 'utils/user';
 import Preferences from './Preferences';
 import { EnteMenuItem } from 'components/Menu/EnteMenuItem';
@@ -62,6 +65,17 @@ export default function UtilitySection({ closeSidebar }) {
         router.push(PAGES.CHANGE_EMAIL);
     };
 
+    const redirectToAccountsPage = () => {
+        closeSidebar();
+
+        // serialize the user data to pass it over to accounts
+        const userData = getData(LS_KEYS.USER);
+        const serialized = JSON.stringify(userData);
+        const serializeB64 = window.btoa(serialized);
+
+        window.location.href = `${process.env.NEXT_PUBLIC_ACCOUNTS_ENDPOINT}${ACCOUNTS_PAGES.ACCOUNT_HANDOFF}#${serializeB64}`;
+    };
+
     const redirectToDeduplicatePage = () => router.push(PAGES.DEDUPLICATE);
 
     const somethingWentWrong = () =>
@@ -112,6 +126,12 @@ export default function UtilitySection({ closeSidebar }) {
                 label={t('TWO_FACTOR')}
             />
 
+            <EnteMenuItem
+                variant="secondary"
+                onClick={redirectToAccountsPage}
+                label={t('PASSKEYS')}
+            />
+
             <EnteMenuItem
                 variant="secondary"
                 onClick={redirectToChangePasswordPage}

packages/shared/constants/pages.tsx

@@ -45,4 +45,5 @@ export enum ACCOUNTS_PAGES {
     VERIFY = '/verify',
     ROOT = '/',
     PASSKEYS = '/passkeys',
+    ACCOUNT_HANDOFF = '/account-handoff',
 }