fix auth for email actions in MFA scenarios

src/frontend/src/functions/auth.tsx

@@ -201,7 +201,7 @@ export function handleMfaLogin(
   location: Location<any>,
   values: { code: string }
 ) {
-  const { session, setToken } = useUserState.getState();
+  const { session, setToken, setSession } = useUserState.getState();
 
   api
     .post(
@@ -212,6 +212,7 @@ export function handleMfaLogin(
       { headers: { 'X-Session-Token': session } }
     )
     .then((response) => {
+      setSession(response.data.meta.session_token);
       setToken(response.data.meta.access_token);
       followRedirect(navigate, location?.state);
     });

src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx

@@ -99,11 +99,15 @@ export function SecurityContent() {
 function EmailContent() {
   const [value, setValue] = useState<string>('');
   const [newEmailValue, setNewEmailValue] = useState('');
-  const [user] = useUserState((state) => [state.user]);
+  const [session] = useUserState((state) => [state.session]);
   const { isLoading, data, refetch } = useQuery({
     queryKey: ['emails'],
     queryFn: () =>
-      api.get(apiUrl(ApiEndpoints.user_emails)).then((res) => res.data)
+      api
+        .get(apiUrl(ApiEndpoints.user_emails), {
+          headers: { 'X-Session-Token': session }
+        })
+        .then((res) => res.data.data)
   });
 
   function runServerAction(
@@ -122,7 +126,11 @@ function EmailContent() {
         act = api.delete;
         break;
     }
-    act(apiUrl(url), { email: value })
+    act(
+      apiUrl(url),
+      { email: value },
+      { headers: { 'X-Session-Token': session } }
+    )
       .then(() => {
         refetch();
       })
@@ -131,9 +139,13 @@ function EmailContent() {
 
   function addEmail() {
     api
-      .post(apiUrl(ApiEndpoints.user_emails), {
+      .post(
+        apiUrl(ApiEndpoints.user_emails),
+        {
           email: newEmailValue
-      })
+        },
+        { headers: { 'X-Session-Token': session } }
+      )
       .then(() => {
         refetch();
       })
@@ -142,10 +154,14 @@ function EmailContent() {
 
   function changePrimary() {
     api
-      .post(apiUrl(ApiEndpoints.user_emails), {
+      .post(
+        apiUrl(ApiEndpoints.user_emails),
+        {
           email: value,
           primary: true
-      })
+        },
+        { headers: { 'X-Session-Token': session } }
+      )
       .then(() => {
         refetch();
       })
@@ -157,6 +173,11 @@ function EmailContent() {
   return (
     <Grid>
       <Grid.Col span={6}>
+        {data.length == 0 ? (
+          <Text>
+            <Trans>Currently no emails are registered</Trans>
+          </Text>
+        ) : (
           <Radio.Group
             value={value}
             onChange={setValue}
@@ -166,8 +187,8 @@ function EmailContent() {
             <Stack mt='xs'>
               {data.map((email: any) => (
                 <Radio
-                key={email.id}
+                  key={email.email}
-                value={String(email.id)}
+                  value={String(email.email)}
                   label={
                     <Group justify='space-between'>
                       {email.email}
@@ -191,6 +212,7 @@ function EmailContent() {
               ))}
             </Stack>
           </Radio.Group>
+        )}
       </Grid.Col>
       <Grid.Col span={6}>
         <Stack>