[WIP] New Onboarding flow

CHANGELOG.md

@@ -28,7 +28,12 @@
 - [Flutter] Poligon Node support with XImage (svg)
 - [Lint] Primal naming & grouping linting for better code export quality. this is tracked sperately on [lint](https://github.com/bridgedxyz/lint)
 
-## [2022.12.0.1] - 2022-12-6 (schduled)
+## [2023.5.1] - 2023-05-24
+
+- Signin is required to use Assistant
+  - Exsiting session might be expired
+
+## [2022.12.0.1] - 2022-12-6
 
 - New Icons set added.
   - Unicon Icons

app/lib/main/index.tsx

@@ -26,7 +26,7 @@ import { ToolboxScreen } from "../pages/tool-box";
 import { FontReplacerScreen } from "@toolbox/font-replacer";
 import { CodeScreen } from "@app/design-to-code";
 import { AboutScreen } from "../pages/about";
-import { SigninScreen } from "@app/auth";
+import { AuthGuard, SigninScreen } from "@app/auth";
 import { UpgradePage } from "@assistant-fp/early-access";
 import { ToolboxHome } from "@app/toolbox";
 import { LiveSessionPage } from "@app/live";
@@ -310,28 +310,33 @@ export default function App(props: { platform: TargetPlatform }) {
   return (
     <RecoilRoot>
       <PluginApp platform={props.platform}>
-        {/* @ts-ignore */}
-        <Router>
-          <Switch>
-            {/* # region unique route section */}
-            {standalone_pages.map((p) => {
-              return (
-                <Route
-                  key={p.id}
-                  path={p.path}
-                  render={() => {
-                    return <Screen screen={p.id} />;
-                  }}
-                />
-              );
-            })}
-            {/* # endregion unique route section */}
-            {/* dynamic route shall be placed at the last point, since it overwrites other routes */}
-            <Route path="/:workmode/:work" component={RouterTabNavigationApp} />
-            <Route path="/" component={Home} />
-            {/* 👆 this is for preventing blank page on book up. this will be fixed and removed.*/}
-          </Switch>
-        </Router>
+        <AuthGuard required>
+          {/* @ts-ignore */}
+          <Router>
+            <Switch>
+              {/* # region unique route section */}
+              {standalone_pages.map((p) => {
+                return (
+                  <Route
+                    key={p.id}
+                    path={p.path}
+                    render={() => {
+                      return <Screen screen={p.id} />;
+                    }}
+                  />
+                );
+              })}
+              {/* # endregion unique route section */}
+              {/* dynamic route shall be placed at the last point, since it overwrites other routes */}
+              <Route
+                path="/:workmode/:work"
+                component={RouterTabNavigationApp}
+              />
+              <Route path="/" component={Home} />
+              {/* 👆 this is for preventing blank page on book up. this will be fixed and removed.*/}
+            </Switch>
+          </Router>
+        </AuthGuard>
       </PluginApp>
     </RecoilRoot>
   );

packages/_firstparty-auth/index.ts

@@ -101,3 +101,6 @@ export async function getUserProfile() {
     throw error;
   }
 }
+
+export { AuthStorage } from "./storage";
+export * as k from "./k";

packages/_firstparty-auth/k.ts

@@ -0,0 +1,3 @@
+/** Preserve value: Do not change value */
+export const ASSISTANT_GRIDA_AUTHENTICATION_CREDENTIAL_KEY =
+  "co.grida.assistant/user-auth";

packages/_firstparty-auth/storage.ts

@@ -1,20 +1,28 @@
-///
-///
-///
-import { PluginSdk } from "@plugin-sdk/app";
-
-/** Preserve value: Do not change value */
-const _ASSISTANT_GRIDA_AUTHENTICATION_CREDENTIAL_KEY =
-  "co.grida.assistant/user-auth";
+import * as k from "./k";
 
 type Credential = string;
 
 function saveAuthCredential(credential: Credential) {
-  PluginSdk.setItem(_ASSISTANT_GRIDA_AUTHENTICATION_CREDENTIAL_KEY, credential);
+  // usees localstorage
+  localStorage.setItem(
+    k.ASSISTANT_GRIDA_AUTHENTICATION_CREDENTIAL_KEY,
+    credential
+  );
+
+  // propagate event (this is required since we're listening in same window)
+  // although, caution required since this will trigger multiple times if listening in other windows
+  // ref: https://stackoverflow.com/questions/35865481/storage-event-not-firing
+  const event = new StorageEvent("storage", {
+    key: k.ASSISTANT_GRIDA_AUTHENTICATION_CREDENTIAL_KEY,
+    oldValue: null,
+    newValue: credential,
+  });
+  window.dispatchEvent(event);
 }
 
 async function getAuthCredential(): Promise<Credential> {
-  return PluginSdk.getItem(_ASSISTANT_GRIDA_AUTHENTICATION_CREDENTIAL_KEY);
+  // usees localstorage
+  return localStorage.getItem(k.ASSISTANT_GRIDA_AUTHENTICATION_CREDENTIAL_KEY);
 }
 
 function saveProfile(profile) {

packages/app-auth/guard/auth-guard.tsx

@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from "react";
+import { Dialog } from "@material-ui/core";
+import { SigninScreen } from "../signin/signin-screen";
+import { useAssistantAuthState } from "../hooks";
+
+export function AuthGuard({
+  children,
+  required,
+}: React.PropsWithChildren<{
+  required?: boolean;
+}>) {
+  const authenticated = useAssistantAuthState();
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    switch (authenticated) {
+      case null:
+        break;
+      case false:
+        setOpen(true);
+        break;
+      case true:
+        break;
+    }
+  }, [authenticated]);
+
+  return (
+    <>
+      {children}
+      {required && (
+        <Dialog open={open} fullScreen>
+          <SigninScreen
+            onSignin={() => {
+              setOpen(false);
+            }}
+          />
+        </Dialog>
+      )}
+    </>
+  );
+}

packages/app-auth/guard/index.ts

@@ -0,0 +1 @@
+export * from "./auth-guard";

packages/app-auth/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./use-assistant-auth-state";

packages/app-auth/hooks/use-assistant-auth-state.ts

@@ -0,0 +1,36 @@
+import { useState, useEffect } from "react";
+import { AuthStorage, k } from "@assistant-fp/auth";
+
+export function useAssistantAuthState() {
+  const [state, setState] = useState<boolean>(null);
+
+  const validate = (token: string) => {
+    // ping
+    // TODO: send auth ping
+    if (token) {
+      setState(true);
+    } else {
+      setState(false);
+    }
+  };
+
+  useEffect(() => {
+    // check initial state
+    AuthStorage.get().then(validate);
+
+    const listener = (e: StorageEvent) => {
+      if (e.key === k.ASSISTANT_GRIDA_AUTHENTICATION_CREDENTIAL_KEY) {
+        validate(e.newValue);
+      }
+    };
+
+    // listen for storage events
+    window.addEventListener("storage", listener);
+
+    return () => {
+      window.removeEventListener("storage", listener);
+    };
+  }, []);
+
+  return state;
+}

packages/app-auth/index.ts

@@ -1 +1,2 @@
 export { SigninScreen } from "./signin/signin-screen";
+export { AuthGuard } from "./guard";

packages/app-auth/signin/signin-screen.tsx

@@ -100,13 +100,13 @@ export function SigninScreen({
   const history = useHistory();
 
   const close = () => {
-    onClose ? onClose?.() : history.goBack();
+    onClose ? onClose?.() : history?.goBack?.();
   };
 
   return (
     <>
       <ContentWrap>
-        <RouteBackButton onClick={close} />
+        {onClose && <RouteBackButton onClick={close} />}
         <Inner>
           {!isAuthenticated ? (
             !isLoading ? (