feat: URL navigation in auth (#1603)

* bump to react 18 and install react-router-dom * Upgrade to react 18 root * update vite * add cs api's * convert state/auth to ts * add client config context * add auto discovery context * add spec version context * add auth flow context * add background dot pattern css * add promise utils * init url based routing * update auth route server path as effect * add auth server hook * always use server from discovery info in context * login - WIP * upgrade jotai to v2 * add atom with localStorage util * add multi account sessions atom * add default IGNORE res to auto discovery * add error type in async callback hook * handle password login error * fix async callback hook * allow password login * Show custom server not allowed error in mxId login * add sso login component * add token login * fix hardcoded m.login.password in login func * update server input on url change * Improve sso login labels * update folds * fix async callback batching state update in safari * wrap async callback set state in queueMicrotask * wip * wip - register * arrange auth file structure * add error codes * extract filed error component form password login * add register util function * handle register flow - WIP * update unsupported auth flow method reasons * improve password input styles * Improve UIA flow next stage calculation complete stages can have any order so we will look for first stage which is not in completed * process register UIA flow stages * Extract register UIA stages component * improve register error messages * add focus trap & step count in UIA stages * add reset password path and path utils * add path with origin hook * fix sso redirect url * rename register token query param to token * restyle auth screen header * add reset password component - WIP * add reset password form * add netlify rewrites * fix netlify file indentation * test netlify redirect * fix vite to include netlify toml * add more netlify redirects * add splat to public and assets path * fix vite base name * add option to use hash router in config and remove appVersion * add splash screen component * add client config loading and error screen * fix server picker bug * fix reset password email input type * make auth page small screen responsive * fix typo in reset password screen
2024-01-21 23:50:56 +11:00
parent bb88eb7154
commit 20db27fa7e
103 changed files with 4772 additions and 543 deletions
--- a/src/app/state/sessions.ts
+++ b/src/app/state/sessions.ts
@@ -0,0 +1,129 @@
+import { atom } from 'jotai';
+import {
+  atomWithLocalStorage,
+  getLocalStorageItem,
+  setLocalStorageItem,
+} from './utils/atomWithLocalStorage';
+
+export type Session = {
+  baseUrl: string;
+  userId: string;
+  deviceId: string;
+  accessToken: string;
+  expiresInMs?: number;
+  refreshToken?: string;
+  fallbackSdkStores?: boolean;
+};
+
+export type Sessions = Session[];
+export type SessionStoreName = {
+  sync: string;
+  crypto: string;
+};
+
+/**
+ * Migration code for old session
+ */
+const FALLBACK_STORE_NAME: SessionStoreName = {
+  sync: 'web-sync-store',
+  crypto: 'crypto-store',
+} as const;
+
+const removeFallbackSession = () => {
+  localStorage.removeItem('cinny_hs_base_url');
+  localStorage.removeItem('cinny_user_id');
+  localStorage.removeItem('cinny_device_id');
+  localStorage.removeItem('cinny_access_token');
+};
+const getFallbackSession = (): Session | undefined => {
+  const baseUrl = localStorage.getItem('cinny_hs_base_url');
+  const userId = localStorage.getItem('cinny_user_id');
+  const deviceId = localStorage.getItem('cinny_device_id');
+  const accessToken = localStorage.getItem('cinny_access_token');
+
+  if (baseUrl && userId && deviceId && accessToken) {
+    const session: Session = {
+      baseUrl,
+      userId,
+      deviceId,
+      accessToken,
+      fallbackSdkStores: true,
+    };
+
+    return session;
+  }
+
+  return undefined;
+};
+/**
+ * End of migration code for old session
+ */
+
+export const getSessionStoreName = (session: Session): SessionStoreName => {
+  if (session.fallbackSdkStores) {
+    return FALLBACK_STORE_NAME;
+  }
+
+  return {
+    sync: `sync${session.userId}`,
+    crypto: `crypto${session.userId}`,
+  };
+};
+
+export const MATRIX_SESSIONS_KEY = 'matrixSessions';
+const baseSessionsAtom = atomWithLocalStorage<Sessions>(
+  MATRIX_SESSIONS_KEY,
+  (key) => {
+    const defaultSessions: Sessions = [];
+    const sessions = getLocalStorageItem(key, defaultSessions);
+
+    // Before multi account support session was stored
+    // as multiple item in local storage.
+    // So we need these migration code.
+    const fallbackSession = getFallbackSession();
+    if (fallbackSession) {
+      removeFallbackSession();
+      sessions.push(fallbackSession);
+      setLocalStorageItem(key, sessions);
+    }
+    return sessions;
+  },
+  (key, value) => {
+    setLocalStorageItem(key, value);
+  }
+);
+
+export type SessionsAction =
+  | {
+      type: 'PUT';
+      session: Session;
+    }
+  | {
+      type: 'DELETE';
+      session: Session;
+    };
+
+export const sessionsAtom = atom<Sessions, [SessionsAction], undefined>(
+  (get) => get(baseSessionsAtom),
+  (get, set, action) => {
+    if (action.type === 'PUT') {
+      const sessions = [...get(baseSessionsAtom)];
+      const sessionIndex = sessions.findIndex(
+        (session) => session.userId === action.session.userId
+      );
+      if (sessionIndex === -1) {
+        sessions.push(action.session);
+      } else {
+        sessions.splice(sessionIndex, 1, action.session);
+      }
+      set(baseSessionsAtom, sessions);
+      return;
+    }
+    if (action.type === 'DELETE') {
+      const sessions = get(baseSessionsAtom).filter(
+        (session) => session.userId !== action.session.userId
+      );
+      set(baseSessionsAtom, sessions);
+    }
+  }
+);