Connect extension with logged in Credentials (#9)

* implemented hooks and functions to make api calls

* added auth url

* added success login component

* added clearing error message after 7 seconds

* added clearing error message after 7 seconds

* some minor changes

* wip loading status

* extension popup loading(analyzing) state

* fixed popup label

* reverted login url after installing

* set to false initial value of submittedCode

* finishing integrating with auth0 backend

* finished integrating with backend login

* biome format

* biome format

* biome check fix

* biome check fix

* Integrated extension with login credentials from backend

* Restricted extension to record if user is not logged in

* run biome format

* changed login and cookie url

* added todo comment

apps/mocksi-lite/background.ts

@@ -1,5 +1,3 @@
-console.log("Hello from the background script!");
-
 addEventListener("install", () => {
 	// TODO test if this works on other browsers
 	// TODO2 Read from environment variable the correct URL to redirect after install
@@ -8,6 +6,16 @@ addEventListener("install", () => {
 	});
 });
 
+// TODO The same login URL should be the cookie URL
+// TODO2 What should we do if user is not logged in?
 chrome.action.onClicked.addListener((tab) => {
-	chrome.tabs.sendMessage(tab?.id || 0, { text: "clickedIcon" });
+	chrome.cookies.get(
+		{ url: "https://mocksi.ai/", name: "sessionid" },
+		(cookie) => {
+			chrome.tabs.sendMessage(tab?.id || 0, {
+				text: "clickedIcon",
+				loginToken: cookie?.value || "",
+			});
+		},
+	);
 });

apps/mocksi-lite/content/ContentApp.tsx

@@ -5,6 +5,7 @@ import { RecordButton, RecordingState } from "./RecordButton";
 
 interface ContentProps {
 	isOpen?: boolean;
+	sessionCookie?: string | null;
 }
 const recordingLabel = (currentStatus: RecordingState) => {
 	switch (currentStatus) {
@@ -14,14 +15,18 @@ const recordingLabel = (currentStatus: RecordingState) => {
 			return "Mocksi Recording";
 		case RecordingState.ANALYZING:
 			return "Analyzing...";
+		case RecordingState.UNAUTHORIZED:
+			return "Login to record";
 		default:
 			return "Record your app";
 	}
 };
 
-export default function ContentApp({ isOpen }: ContentProps) {
+export default function ContentApp({ isOpen, sessionCookie }: ContentProps) {
 	const [isdialogOpen, setIsDialogOpen] = useState(isOpen || false);
-	const [state, setState] = useState<RecordingState>(RecordingState.READY);
+	const [state, setState] = useState<RecordingState>(
+		sessionCookie ? RecordingState.READY : RecordingState.UNAUTHORIZED,
+	);
 
 	if (!isdialogOpen) return null;
 	return (
@@ -41,7 +46,7 @@ export default function ContentApp({ isOpen }: ContentProps) {
 					{recordingLabel(state)}
 				</span>
 			</div>
-			<RecordButton onRecordChange={setState} />
+			{sessionCookie && <RecordButton onRecordChange={setState} />}
 		</div>
 	);
 }

apps/mocksi-lite/content/RecordButton.tsx

@@ -7,6 +7,7 @@ interface RecordButtonProps {
 const MOCKSI_RECORDING_STATE = "mocksi-recordingState";
 
 export enum RecordingState {
+	UNAUTHORIZED = "UNAUTHORIZED",
 	READY = "READY",
 	RECORDING = "RECORDING",
 	ANALYZING = "ANALYZING",
@@ -69,6 +70,7 @@ export const RecordButton = ({ onRecordChange }: RecordButtonProps) => {
 		if (newRecordState === RecordingState.ANALYZING) {
 			setTimeout(() => {
 				setStatus(RecordingState.READY);
+				onRecordChange(RecordingState.READY);
 				localStorage.setItem(
 					MOCKSI_RECORDING_STATE,
 					RecordingState.READY.toString(),

apps/mocksi-lite/content/content.tsx

@@ -4,9 +4,6 @@ import("./base.css");
 import("./content.css");
 import("./spinner.css");
 
-import("./base.css");
-import("./content.css");
-
 setTimeout(initial, 1000);
 
 let root: ReactDOM.Root;
@@ -15,7 +12,7 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
 		const extensionRoot = document.getElementById("extension-root");
 		if (extensionRoot?.firstChild === null) {
 			root = ReactDOM.createRoot(extensionRoot);
-			root.render(<ContentApp isOpen={true} />);
+			root.render(<ContentApp isOpen={true} sessionCookie={msg.loginToken} />);
 		} else {
 			root.unmount();
 		}

apps/mocksi-lite/manifest.json

@@ -20,9 +20,10 @@
 		"downloads",
 		"storage",
 		"background",
-		"tabs"
+		"tabs",
+		"cookies"
 	],
-	"host_permissions": ["<all_urls>"],
+	"host_permissions": ["https://*/*", "<all_urls>"],
 	"icons": {
 		"16": "public/icon/icon_16.png",
 		"48": "public/icon/icon_48.png"

apps/web/app/components/confirmation-code-input.tsx

@@ -63,6 +63,7 @@ export const ConfirmationCodeInput = ({ submittedEmail, onSuccess }: Confirmatio
               } 
               value={value} 
               onChange={({ target, nativeEvent }) => {
+                // TODO Find a better way to implement this!
                 nativeEvent.inputType === "insertFromPaste" ? 
                   onPastedValue(target.value) :
                   onChangedValue(nativeEvent.data, index)
@@ -74,12 +75,14 @@ export const ConfirmationCodeInput = ({ submittedEmail, onSuccess }: Confirmatio
                       styles.middleInput
                     )
                 }
+              errorMessage={errorMessage}
+              showErrorMessage={false}
             />
           ))
         }
       </div>
       {isLoading && <h2>Validating Code...</h2>}
-      {errorMessage && <h3>{errorMessage}</h3>}
+      {errorMessage && <span style={{marginLeft: '8px', fontSize: '14px', color: '#B8293D'}}>{errorMessage}</span>}
     </>
   )
 }

apps/web/app/components/submit-email.module.css

@@ -1,4 +1,9 @@
 .button {
   width: 180px;
   margin-top: 8px;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
 }

apps/web/app/components/submit-email.tsx

@@ -41,6 +41,7 @@ export const SubmitEmail = ({ setSubmittedEmail }: SubmitEmailProps) => {
           e.preventDefault()
           submitSignIn()
         }}
+        className={styles.form}
       >
         <Input
           onChange={({ target }) => {

apps/web/app/hooks/createAccount.ts

@@ -37,8 +37,9 @@ export const useConfirmAccount = (
   const callSendCode = (email: string, code: string) => {
     setIsLoading(true)
     sendCode(email, code)
-      .then(() => {
+      .then((response) => {
         setIsLoading(false)
+        manageCookies(`${response.token_type} ${response.access_token}`, response.expires_in)
         onSuccess()
       })
       .catch(() => {
@@ -53,4 +54,7 @@ export const useConfirmAccount = (
   }
 }
 
-const sendCode = (email: string, code: string) => apiCall('auth/email/complete', { email, code })
+const sendCode = (email: string, code: string) => apiCall('auth/email/complete', { email, code })
+
+// TODO see ways to make more secure this cookie...
+const manageCookies = (token: string, expires: number) => document.cookie = `sessionid=${token}; max-age=${expires}`

apps/web/app/utils.ts

@@ -1,4 +1,5 @@
 
+// TODO move this to .env file
 const API_URL = 'https://auth-2hfb.onrender.com'
 export const apiCall = async (
     url: string,
@@ -13,7 +14,11 @@ export const apiCall = async (
         body: JSON.stringify(body),
       }
     );
-		return res.json();
+    const response = await res.json();
+    if (res.ok) {
+      return response
+    }
+    throw new Error(response.error_description || response.error)
 	} catch (err) {
     throw err
 	}

packages/ui/src/input.tsx

@@ -12,6 +12,7 @@ interface InputProps {
   onFocus? : () => void
   onBlur? : () => void
   errorMessage?: string;
+  showErrorMessage?: boolean;
   inputType?: HTMLInputTypeAttribute;
 }
 
@@ -23,6 +24,7 @@ export const Input = forwardRef(({
   inputClassName,
   onChange,
   errorMessage,
+  showErrorMessage = true,
   inputType,
 }: InputProps, ref: ForwardedRef<any>) => {
   const [focused, setFocused] = useState(false)
@@ -44,13 +46,14 @@ export const Input = forwardRef(({
           }}
           onFocus={() => setFocused(true)}
           onBlur={() => setFocused(false)}
+          onChange={onChange}
           className={inputClassName}
           value={value || ""}
           type={inputType}
           ref={ref}
         />
       </label>
-      {errorMessage && <span style={{marginLeft: '8px', fontSize: '14px', color: '#B8293D'}}>{errorMessage}</span>}
+      {(errorMessage && showErrorMessage) && <span style={{marginLeft: '8px', fontSize: '14px', color: '#B8293D'}}>{errorMessage}</span>}
     </>
   )
 })