feat: save token to session storage and read from it

plugins/circleci/src/components/LoginCard/LoginCard.tsx

@@ -10,10 +10,36 @@ import { Person as PersonIcon } from '@material-ui/icons';
 import { InfoCard, useApi } from '@backstage/core';
 import { circleCIApiRef } from 'api';
 
+const useSessionStorage = (key: string): [string, (value: string) => void] => {
+  const [value, setter] = React.useState(sessionStorage.getItem(key) ?? '');
+  const setValue = (newValue: string) => {
+    sessionStorage.setItem(key, newValue);
+    setter(sessionStorage.getItem(key) ?? '');
+  };
+
+  React.useEffect(() => {
+    const storageChangeHandle = (e: StorageEvent) => {
+      if (e.storageArea !== sessionStorage) return;
+      if (e.key !== key) return;
+      if (e.newValue !== e.oldValue) {
+        setter(e.newValue ?? '');
+      }
+    };
+    window.addEventListener('storage', storageChangeHandle);
+    return () => window.removeEventListener('storage', storageChangeHandle);
+  }, [key, setter]);
+
+  return [value, setValue];
+};
 export const LoginCard = () => {
-  const [token, setToken] = React.useState('');
+  const [token, setToken] = useSessionStorage(circleCIApiRef.id);
   const api = useApi(circleCIApiRef);
 
+  React.useEffect(() => {
+    if (token && token !== '') {
+      api.authenticate(token);
+    }
+  }, []);
   return (
     <InfoCard>
       <Typography variant="h6">