Teleport Connect headless approval - Skip Confirmation

[Joerger]

Updates Teleport Connect headless approval flow to skip the confirmation step (Approve/Cancel) and go straight to prompting for MFA in the background when the headless.skipConfirm config option is set to true.

Docs will be added in a follow up PR.

[Joerger]

@gzdunek @ravicious Any idea why I am getting process is not defined errors? Shouldn't process.env be accessible globally?

[gzdunek]

Shouldn't process.env be accessible globally?

No, it is a Node.js thing, and it is not passed to the renderer (or, in other words, the browser window).
There are ways to pass a value from the main process to the renderer, for example via our RuntimeSettings, but I'm wondering if it is a best idea to configure the app by the env var. IMO it is rather unusual for desktop apps, and I think it is better to add a config entry for this.
You can take a look at Configuration and appConfigSchema.ts to see how we configure other things.

[Joerger]

@ravicious @gzdunek For some reason, this OnApprove call results in an infinite loop, sending countless headless approval requests to the tshd daemon and overloading the yubikey. I have no idea why this would be an infinite loop while the on button press below works perfectly fine. Any ideas?

[ravicious]

That's because the body of a component function, HeadlessPrompt, is executed on each render and a component gets rendered each time you update it's state. So you end up with an infinite loop.

Try this patch:

Patch

diff --git a/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessAuthentication.tsx b/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessAuthentication.tsx
index 08da0c1aa6..fc73d9b1c3 100644
--- a/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessAuthentication.tsx
+++ b/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessAuthentication.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useRef } from 'react';
+import React, { useRef, useEffect } from 'react';
 
 import { useAsync } from 'shared/hooks/useAsync';
 
@@ -69,6 +69,12 @@ export function HeadlessAuthentication(props: HeadlessAuthenticationProps) {
     }
   }
 
+  useEffect(() => {
+    if (props.skipConfirm && updateHeadlessStateAttempt.status === '') {
+      handleHeadlessApprove();
+    }
+  }, []);
+
   return (
     <HeadlessPrompt
       cluster={cluster}
diff --git a/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessPrompt/HeadlessPrompt.tsx b/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessPrompt/HeadlessPrompt.tsx
index f1da2f1bd8..b0294cb162 100644
--- a/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessPrompt/HeadlessPrompt.tsx
+++ b/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessPrompt/HeadlessPrompt.tsx
@@ -52,13 +52,9 @@ export function HeadlessPrompt({
   updateHeadlessStateAttempt,
   onCancel,
 }: HeadlessPromptProps) {
-  const [waitForMfa, setWaitForMfa] = useState(false);
-
-  // skip to MFA confirmation step.
-  if (skipConfirm) {
-    setWaitForMfa(true);
-    onApprove();
-  }
+  // skipConfirm automatically attempts to approve a headless auth attempt,
+  // so let's show waitForMfa from the very beginning in that case.
+  const [waitForMfa, setWaitForMfa] = useState(skipConfirm);
 
   return (
     <DialogConfirmation

[Joerger]

Ah I suspected it was something like that but had no idea how to fix it, thanks!

[ravicious]

It should be good to go after implementing the changes I mentioned.

[ravicious]

That's because the body of a component function, HeadlessPrompt, is executed on each render and a component gets rendered each time you update it's state. So you end up with an infinite loop.

Try this patch:

Patch

diff --git a/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessAuthentication.tsx b/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessAuthentication.tsx
index 08da0c1aa6..fc73d9b1c3 100644
--- a/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessAuthentication.tsx
+++ b/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessAuthentication.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useRef } from 'react';
+import React, { useRef, useEffect } from 'react';
 
 import { useAsync } from 'shared/hooks/useAsync';
 
@@ -69,6 +69,12 @@ export function HeadlessAuthentication(props: HeadlessAuthenticationProps) {
     }
   }
 
+  useEffect(() => {
+    if (props.skipConfirm && updateHeadlessStateAttempt.status === '') {
+      handleHeadlessApprove();
+    }
+  }, []);
+
   return (
     <HeadlessPrompt
       cluster={cluster}
diff --git a/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessPrompt/HeadlessPrompt.tsx b/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessPrompt/HeadlessPrompt.tsx
index f1da2f1bd8..b0294cb162 100644
--- a/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessPrompt/HeadlessPrompt.tsx
+++ b/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessPrompt/HeadlessPrompt.tsx
@@ -52,13 +52,9 @@ export function HeadlessPrompt({
   updateHeadlessStateAttempt,
   onCancel,
 }: HeadlessPromptProps) {
-  const [waitForMfa, setWaitForMfa] = useState(false);
-
-  // skip to MFA confirmation step.
-  if (skipConfirm) {
-    setWaitForMfa(true);
-    onApprove();
-  }
+  // skipConfirm automatically attempts to approve a headless auth attempt,
+  // so let's show waitForMfa from the very beginning in that case.
+  const [waitForMfa, setWaitForMfa] = useState(skipConfirm);
 
   return (
     <DialogConfirmation

[gzdunek]

Tested, works fine.

[public-teleport-github-review-bot]

@Joerger See the table below for backport results.

Branch	Result
branch/v13	Failed