Improve layout of CLI login prompt without QR code

[adombeck]

When logging in via SSH, the prompt currently looks like this (that's with the improvements from #1255):

== Device Authentication ==
Open the URL and enter the code below.
https://microsoft.com/devicelogin
            AC69QP9ZK            
 
  1. Wait for authentication result
  2. Request new code
Or enter 'r' to go back to select the authentication method

That layout could be improved. A suggestion from the thread at #1255 (comment) is:

== Device Authentication ==
Open the URL and enter the code below.

URL: https://microsoft.com/devicelogin
Code: AC69QP9ZK            

The other part:

  1. Wait for authentication result
  2. Request new code
Or enter 'r' to go back to select the authentication method

could also be revised.

The layout is implemented in the PAM module.

[adombeck]

We could also apply the "URL:" and "Code:" labels to the prompt with the QR code.

That prompt currently looks like this:

Scan the QR code or open the URL and enter the code below.       
                                                                 
█████████████████████████████████████                            
█████████████████████████████████████                            
████ ▄▄▄▄▄ █ █▄▄▀█▀ ▄▀ ▄▄█ ▄▄▄▄▄ ████                            
████ █   █ █▀▀▀ ▄▄▄▄▀▀█▀▄█ █   █ ████                            
████ █▄▄▄█ ███▀ ▀▄▀██▄▀  █ █▄▄▄█ ████                            
████▄▄▄▄▄▄▄█ █ ▀▄▀ █▄▀ █▄█▄▄▄▄▄▄▄████                            
████ ▀▄▄▀▄▄▄█▀▀█ ▄▄▀ ▄▄▀▀▀ ▀▀▄█▄ ████                            
████▄ █▀ ▄▄█▄▀  █▀  ██▄█▀ ▄▄▄█▄▄▀████                            
████▀▄▀█  ▄█▄▀ ▄▄▀███▄█ █▀▀▄█▄ ▀▀████                            
████▀▄██▀▄▄  ▀▀▄█▀▄█ ██ ▄█ ▄ █▄ ▄████                            
████▄ ▄█▄█▄ ▄█▄█▀▀█ ██▄█ ▄█ ▄ ▀ █████                            
████▄█▄▀▄▄▄█▀▄▄█▀██▄▄  ▀█▀   █ ██████                            
█████▄▄▄█▄▄▄▀█ █▀ ▀▄ ▄ █ ▄▄▄   ▀▀████                            
████ ▄▄▄▄▄ █ ▄█ ▀▄█▀▄▄   █▄█  █ ▀████                            
████ █   █ █▀█▄█▄█  ▀▄██  ▄  ▀▄▄▀████                            
████ █▄▄▄█ █▄▀▀█ ▄▀█▀█ ▀▀██ ▀▀▄▀▄████                            
████▄▄▄▄▄▄▄█▄▄█▄█▄█▄██▄▄▄█▄█▄██▄█████                            
█████████████████████████████████████                            
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀                            
  https://microsoft.com/devicelogin                              
              BG6225DPJ                                          
                                                                 
         [ Request new code ]                                    
                                                                 
  Press escape key to go back to select the authentication method

With labels it would look like this:

Scan the QR code or open the URL and enter the code below.       
                                                                 
█████████████████████████████████████                            
█████████████████████████████████████                            
████ ▄▄▄▄▄ █ █▄▄▀█▀ ▄▀ ▄▄█ ▄▄▄▄▄ ████                            
████ █   █ █▀▀▀ ▄▄▄▄▀▀█▀▄█ █   █ ████                            
████ █▄▄▄█ ███▀ ▀▄▀██▄▀  █ █▄▄▄█ ████                            
████▄▄▄▄▄▄▄█ █ ▀▄▀ █▄▀ █▄█▄▄▄▄▄▄▄████                            
████ ▀▄▄▀▄▄▄█▀▀█ ▄▄▀ ▄▄▀▀▀ ▀▀▄█▄ ████                            
████▄ █▀ ▄▄█▄▀  █▀  ██▄█▀ ▄▄▄█▄▄▀████                            
████▀▄▀█  ▄█▄▀ ▄▄▀███▄█ █▀▀▄█▄ ▀▀████                            
████▀▄██▀▄▄  ▀▀▄█▀▄█ ██ ▄█ ▄ █▄ ▄████                            
████▄ ▄█▄█▄ ▄█▄█▀▀█ ██▄█ ▄█ ▄ ▀ █████                            
████▄█▄▀▄▄▄█▀▄▄█▀██▄▄  ▀█▀   █ ██████                            
█████▄▄▄█▄▄▄▀█ █▀ ▀▄ ▄ █ ▄▄▄   ▀▀████                            
████ ▄▄▄▄▄ █ ▄█ ▀▄█▀▄▄   █▄█  █ ▀████                            
████ █   █ █▀█▄█▄█  ▀▄██  ▄  ▀▄▄▀████                            
████ █▄▄▄█ █▄▀▀█ ▄▀█▀█ ▀▀██ ▀▀▄▀▄████                            
████▄▄▄▄▄▄▄█▄▄█▄█▄█▄██▄▄▄█▄█▄██▄█████                            
█████████████████████████████████████                            
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀                            
URL:  https://microsoft.com/devicelogin                              
Code: BG6225DPJ                                          
                                                                 
         [ Request new code ]                                    
                                                                 
  Press escape key to go back to select the authentication method

I think the URL label is not really necessary here and makes the label too long to show it centered. I prefer only adding the "Code:" label in this case:

Scan the QR code or open the URL and enter the code below.       
                                                                 
█████████████████████████████████████                            
█████████████████████████████████████                            
████ ▄▄▄▄▄ █ █▄▄▀█▀ ▄▀ ▄▄█ ▄▄▄▄▄ ████                            
████ █   █ █▀▀▀ ▄▄▄▄▀▀█▀▄█ █   █ ████                            
████ █▄▄▄█ ███▀ ▀▄▀██▄▀  █ █▄▄▄█ ████                            
████▄▄▄▄▄▄▄█ █ ▀▄▀ █▄▀ █▄█▄▄▄▄▄▄▄████                            
████ ▀▄▄▀▄▄▄█▀▀█ ▄▄▀ ▄▄▀▀▀ ▀▀▄█▄ ████                            
████▄ █▀ ▄▄█▄▀  █▀  ██▄█▀ ▄▄▄█▄▄▀████                            
████▀▄▀█  ▄█▄▀ ▄▄▀███▄█ █▀▀▄█▄ ▀▀████                            
████▀▄██▀▄▄  ▀▀▄█▀▄█ ██ ▄█ ▄ █▄ ▄████                            
████▄ ▄█▄█▄ ▄█▄█▀▀█ ██▄█ ▄█ ▄ ▀ █████                            
████▄█▄▀▄▄▄█▀▄▄█▀██▄▄  ▀█▀   █ ██████                            
█████▄▄▄█▄▄▄▀█ █▀ ▀▄ ▄ █ ▄▄▄   ▀▀████                            
████ ▄▄▄▄▄ █ ▄█ ▀▄█▀▄▄   █▄█  █ ▀████                            
████ █   █ █▀█▄█▄█  ▀▄██  ▄  ▀▄▄▀████                            
████ █▄▄▄█ █▄▀▀█ ▄▀█▀█ ▀▀██ ▀▀▄▀▄████                            
████▄▄▄▄▄▄▄█▄▄█▄█▄█▄██▄▄▄█▄█▄██▄█████                            
█████████████████████████████████████                            
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀                            
 https://microsoft.com/devicelogin                              
           Code: BG6225DPJ           
                                                                 
         [ Request new code ]                                    
                                                                 
  Press escape key to go back to select the authentication method

[edibotopic]

We could also apply the "URL:" and "Code:" labels to the prompt with the QR code.

I think it's a good idea to do this, especially given the spatial distance separating the first mention of "URL" and "Code" and what they refer to on the screen.

[edibotopic]

Press escape key to go back to select the authentication method

Maybe consider changing this to:

To select an alternative authentication method, press the Esc key.

Why:

• start with the outcome the user wants, then tell them how to achieve it.
• using "Esc" helps to differentiate the term from the surrounding text and maps to what appears on most keyboards.
• say "alternative" because presumably nobody wants to go back to select the same thing again (?)
• minor: add missing "the" before "escape/Esc key", add the missing period, don't think "go back" is needed.

[edibotopic]

If this was our regular docs, I would suggest to replace the first period with a colon (a colon introduces what follows), and then I would consider using something other than a colon for the labels to ensure visual distinction:

Scan the QR code or open the URL and enter the code below:

█████████████████████████████████████                            
█████████████████████████████████████                            
████ ▄▄▄▄▄ █ █▄▄▀█▀ ▄▀ ▄▄█ ▄▄▄▄▄ ████                            
████ █   █ █▀▀▀ ▄▄▄▄▀▀█▀▄█ █   █ ████                            
████ █▄▄▄█ ███▀ ▀▄▀██▄▀  █ █▄▄▄█ ████                            
████▄▄▄▄▄▄▄█ █ ▀▄▀ █▄▀ █▄█▄▄▄▄▄▄▄████                            
████ ▀▄▄▀▄▄▄█▀▀█ ▄▄▀ ▄▄▀▀▀ ▀▀▄█▄ ████                            
████▄ █▀ ▄▄█▄▀  █▀  ██▄█▀ ▄▄▄█▄▄▀████                            
████▀▄▀█  ▄█▄▀ ▄▄▀███▄█ █▀▀▄█▄ ▀▀████                            
████▀▄██▀▄▄  ▀▀▄█▀▄█ ██ ▄█ ▄ █▄ ▄████                            
████▄ ▄█▄█▄ ▄█▄█▀▀█ ██▄█ ▄█ ▄ ▀ █████                            
████▄█▄▀▄▄▄█▀▄▄█▀██▄▄  ▀█▀   █ ██████                            
█████▄▄▄█▄▄▄▀█ █▀ ▀▄ ▄ █ ▄▄▄   ▀▀████                            
████ ▄▄▄▄▄ █ ▄█ ▀▄█▀▄▄   █▄█  █ ▀████                            
████ █   █ █▀█▄█▄█  ▀▄██  ▄  ▀▄▄▀████                            
████ █▄▄▄█ █▄▀▀█ ▄▀█▀█ ▀▀██ ▀▀▄▀▄████                            
████▄▄▄▄▄▄▄█▄▄█▄█▄█▄██▄▄▄█▄█▄██▄█████                            
█████████████████████████████████████                            
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀  

(URL)     https://microsoft.com/devicelogin                              
(Code)    BG6225DPJ    

But that's a subtle point.

[adombeck]

@nooreldeensalah, since you wrote that you want to work on this too, the layout of this prompt is implemented here:

authd/pam/internal/adapter/nativemodel.go

Lines 730 to 739 in 1b9ea6b

	if firstQrCodeLine == "" {
	firstQrCodeLine = m.uiLayout.GetContent()
	}
	centeredContent := centerString(m.uiLayout.GetContent(), firstQrCodeLine)
	qrcodeView = append(qrcodeView, centeredContent)
	if code := m.uiLayout.GetCode(); code != "" {
	qrcodeView = append(qrcodeView, centerString(code, firstQrCodeLine))
	}

You will have to rebuild the PAM module to test the changes, which should be documented here but I don't know how up to date those instructions are (and don't have the time currently to check). I suggest you test the changes in a VM.

[edibotopic]

On this:

  1. Wait for authentication result
  2. Request new code
Or enter 'r' to go back to select the authentication method

It might be convention, but is using 'r' preferable to just using another number?

  1. Wait for authentication result
  2. Request new code
  3. Select an alternative authentication method

[shiv-tyagi]

DeviceAuthResponse in oauth2 package provides the VerificationURIComplete field which includes the device code in the URI (see this).

We can present this URI to the user while authenticating, allowing them to easily complete the authentication process without needing to manually enter the device code.

Here is the sample API response from Okta. Other providers would likely have a similar response.

{
    "device_code": "abc-def-xyz",
    "user_code": "ABCDEF",
    "verification_uri": "https://integrator-xyz.okta.com/activate",
    "verification_uri_complete": "https://integrator-xyz.okta.com/activate?user_code=ABCDEF",
    "expires_in": 600,
    "interval": 5
}

A simple CTRL+Click on the URL (after a user selects device authentication option in authd) can take the user directly to the verification page with the code pre-filled, which I think would be nice from UX perspective.

If we agree on this, I will be happy to take this up in a separate PR after #1266 maybe.

[adombeck]

@shiv-tyagi Good to know that Okta supports this optional field. We don't use it yet because Entra ID and Google don't set it.

Now that we have the authd-oidc broker, I agree that we should use the field when it's set.

[shiv-tyagi]

I have created #1280 to track this.

[adombeck]

I have created #1280 to track this.

Thanks!