[Final] Proxy Authentication

app/lib/auth/README.md

@@ -0,0 +1,3 @@
+# First pary auth - do not modify under this directory unless you are a inside collaborator.
+
+> Cases for general contributing, you won't have to modify files under this directory.

app/lib/auth/index.ts

@@ -5,10 +5,8 @@ import {
   AuthProxySessionStartRequest,
   AuthProxySessionStartResult,
 } from "@base-sdk-fp/auth";
-import { PluginSdk } from "@plugin-sdk/app";
-//#region export
-export * from "./storage";
-//#endregion export
+import { client_id } from "plugin-app";
+import { AuthStorage } from "./storage";
 
 const PROXY_AUTH_REQUEST_SECRET =
   process.env.GRIDA_FIRST_PARTY_PROXY_AUTH_REQUEST_TOTP_SECRET ??
@@ -17,8 +15,9 @@ const PROXY_AUTH_REQUEST_SECRET =
 function _make_request(): AuthProxySessionStartRequest {
   return {
     appId: "co.grida.assistant",
-    clientId: "", // todo
+    clientId: client_id,
     mode: ProxyAuthenticationMode.long_polling,
+    redirect_uri: "figma://", // TODO: change this scheme based on target platform.
   };
 }
 
@@ -37,6 +36,10 @@ export async function startAuthenticationWithSession(
     session,
     _make_request()
   );
+
+  AuthStorage.save(result.access_token);
+  // save result
+
   return result;
 }
 
@@ -45,6 +48,20 @@ export async function startAuthentication() {
   return await startAuthenticationWithSession(session);
 }
 
-export async function checkAuthSession() {
-  //
+export async function isAuthenticated() {
+  return (await AuthStorage.get())?.length > 1; // using 1 (same as != undefined.)
+}
+
+export async function checkAuthSession(session: string): Promise<boolean> {
+  // TODO:
+  const res = await __auth_proxy.checkProxyAuthResult(
+    PROXY_AUTH_REQUEST_SECRET,
+    session
+  );
+
+  const success = res.success && res.access_token !== undefined;
+  if (success) {
+    AuthStorage.save(res.access_token);
+  }
+  return success;
 }

app/lib/pages/signin/index.tsx

@@ -3,7 +3,9 @@ import styled from "@emotion/styled";
 import {
   startAuthenticationWithSession,
   startAuthenticationSession,
+  checkAuthSession,
 } from "../../auth";
+import { AuthProxySessionStartResult } from "@base-sdk-fp/auth";
 import {
   BlackButton,
   ButtonStyle,
@@ -23,7 +25,7 @@ import {
   Title,
   Wrapper,
 } from "./style";
-import { AuthProxySessionStartResult } from "@base-sdk-fp/auth";
+import { PluginSdk } from "@plugin-sdk/app";
 
 // onClick={() => {
 //   startAuthentication();
@@ -59,7 +61,11 @@ function InitialStateContent() {
   );
 }
 
-function LoadingContents(props: { authUrl: string; onCheckAuth: () => void }) {
+function LoadingContents(props: {
+  authUrl: string;
+  onCheckAuth: () => void;
+  showUserOptions: boolean;
+}) {
   return (
     <>
       <Title>
@@ -75,12 +81,16 @@ function LoadingContents(props: { authUrl: string; onCheckAuth: () => void }) {
         link below.
       </Contents>
       <LinkWrapper>
-        <LinkContents>
-          👉 Let me in, I’ve completed all steps on the browser.
-        </LinkContents>
-        <LinkContents href={props.authUrl} target="_blank">
-          👉 Open the sign-in page again
-        </LinkContents>
+        {props.showUserOptions && (
+          <>
+            <LinkContents>
+              👉 Let me in, I’ve completed all steps on the browser.
+            </LinkContents>
+            <LinkContents href={props.authUrl} target="_blank">
+              👉 Open the sign-in page again
+            </LinkContents>
+          </>
+        )}
       </LinkWrapper>
     </>
   );
@@ -104,43 +114,75 @@ function FinishCheckingAuth(props: { username: string }) {
 
 function Signin() {
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [isAuthToken, setIsAuthToken] = useState<boolean>(false);
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
   const [sessionInfo, setSessionInfo] = useState<AuthProxySessionStartResult>();
+  const [sessionStarted, setSessionStarted] = useState<boolean>(false);
   const history = useHistory();
 
+  const close = () => {
+    history.goBack();
+  };
+
   return (
     <Wrapper>
-      <BackIcon onClick={() => history.goBack()}>
+      <BackIcon onClick={close}>
         <LeftArrow />
       </BackIcon>
       <Inner>
-        {!isAuthToken ? (
+        {!isAuthenticated ? (
           !isLoading ? (
             <InitialStateContent />
           ) : (
             <LoadingContents
-              authUrl={sessionInfo.authUrl}
-              onCheckAuth={() => {}}
-            /> // TODO: provide callback state check & browser url.
+              authUrl={sessionInfo?.authUrl}
+              showUserOptions={sessionStarted}
+              onCheckAuth={() => {
+                PluginSdk.notify(
+                  "Checking if you signed in via browser..",
+                  1.5
+                );
+                checkAuthSession(sessionInfo.id).then((authenticated) => {
+                  if (authenticated) {
+                    setIsAuthenticated(true);
+                  }
+                });
+              }}
+            />
           )
         ) : (
-          <FinishCheckingAuth username="Universe" /> // TODO: change with authenticated user name
+          <FinishCheckingAuth username="" /> // TODO: change with authenticated user name (use fetch user profile)
         )}
         <BtnWrapper>
-          {isAuthToken ? (
+          {isAuthenticated ? (
             <>
-              <StyledButton>Aaaallll Right !</StyledButton>
+              <StyledButton onClick={close}>Aaaallll Right !</StyledButton>
             </>
           ) : (
             <>
               <SignInBtn
                 disabled={isLoading}
                 onClick={() => {
-                  startAuthenticationSession().then((s) => {
-                    setSessionInfo(s);
-                    startAuthenticationWithSession(s);
-                  });
+                  setSessionStarted(false); // session is not yet started. (session start triggered.)
                   setIsLoading(true);
+                  startAuthenticationSession()
+                    .then((s) => {
+                      setSessionStarted(true);
+                      open(s.authUrl); // open browser initially.
+                      setSessionInfo(s);
+                      startAuthenticationWithSession(s).then((d) => {
+                        setIsAuthenticated(true);
+                      });
+                    })
+                    .catch((_) => {
+                      console.log(
+                        "error occured while requesting proxy auth session start",
+                        _
+                      );
+                      PluginSdk.notify(
+                        "please try again. (check your internet connection)"
+                      );
+                      setIsLoading(false);
+                    });
                 }}
               >
                 {!isLoading ? "Sign in" : "Sign in ..."}
@@ -162,6 +204,17 @@ function Signin() {
   );
 }
 
+/**
+ * TODO: migrate this under base-sdk
+ */
+function fetchUserProfile(): {
+  id: string;
+  username: string;
+  email: string;
+} {
+  return;
+}
+
 const StyledButton = styled.button`
   ${ButtonStyle}
   width: calc(100vw - 54px);

app/lib/pages/signin/signin-prompts.tsx

@@ -3,6 +3,7 @@ import styled from "@emotion/styled";
 import { BlackButton, WhtieButton } from "../../components/style/global-style";
 import { useHistory } from "react-router";
 import { startAuthentication } from "../../auth";
+import BackArrowIcon from "@assistant/icons/back-arrow";
 import {
   BackIcon,
   BtnWrapper,
@@ -15,30 +16,13 @@ import {
   Wrapper,
 } from "./style";
 
-function LeftArrow() {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z"
-        fill="black"
-      />
-    </svg>
-  );
-}
-
 function SigninPrompts() {
   const history = useHistory();
 
   return (
     <Wrapper>
       <BackIcon onClick={() => history.goBack()}>
-        <LeftArrow />
+        <BackArrowIcon />
       </BackIcon>
       <Inner>
         <Title>