From 8095a06eea384473113b2e811aef60f857e24af2 Mon Sep 17 00:00:00 2001
From: "guys-inc-ops[bot]"
 <321481384+guys-inc-ops[bot]@users.noreply.github.com>
Date: Fri, 28 Aug 2026 01:26:31 +0000
Subject: [PATCH] Show the device code in the welcome flow too

3.5.1 fixed the re-authentication dialog. First-run sign-in to GitHub.com is
still broken, and it is the path most new users take.

There are three sign-in surfaces, not two. Welcome renders Start for dotcom
sign-in, and Start was never given the sign-in state at all - only a
loadingBrowserAuth boolean. So it showed a spinner and the pre-device-flow
message about the browser redirecting back, which no longer happens, and the
code had nowhere to appear. The device flow work in #26 wired the code into
AuthenticationForm, which on the welcome path is reached only when signing
in to Enterprise.

Confirmed from a user's log on 3.5.1:

  [Welcome] advancing to step: SignInToDotComWithBrowser
  [SignInStore] initializing OAuth device flow
  [main] opening in browser: https://github.com/login/device

and then nothing, because the request had succeeded and the result was
rendered by nobody.

Counting the markup in the built renderer is what distinguishes these:
3.5.0 had it once, 3.5.1 twice, and with this change three times - one per
surface. That count is the check worth keeping.
---
 app/src/ui/welcome/start.tsx   | 58 +++++++++++++++++++++++++++-------
 app/src/ui/welcome/welcome.tsx | 14 ++++++--
 2 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/app/src/ui/welcome/start.tsx b/app/src/ui/welcome/start.tsx
index 7669398fee..060d1282f6 100644
--- a/app/src/ui/welcome/start.tsx
+++ b/app/src/ui/welcome/start.tsx
@@ -7,6 +7,7 @@ import * as octicons from '../octicons/octicons.generated'
 import { Button } from '../lib/button'
 import { Loading } from '../lib/loading'
 import { BrowserRedirectMessage } from '../lib/authentication-form'
+import { Ref } from '../lib/ref'
 import { SamplesURL } from '../../lib/stats'
 
 /**
@@ -20,6 +21,15 @@ interface IStartProps {
   readonly advance: (step: WelcomeStep) => void
   readonly dispatcher: Dispatcher
   readonly loadingBrowserAuth: boolean
+
+  /**
+   * The device flow verification, once GitHub has issued one. Present means
+   * there is a code on screen for the user to type into their browser.
+   */
+  readonly deviceFlow?: {
+    readonly userCode: string
+    readonly verificationURI: string
+  }
 }
 
 /** The first step of the Welcome flow. */
@@ -35,17 +45,7 @@ export class Start extends React.Component<IStartProps, {}> {
           <h1 className="welcome-title">
             Welcome to <span>GitHub Desktop</span>
           </h1>
-          {!this.props.loadingBrowserAuth ? (
-            <>
-              <p id="start-description" className="welcome-text">
-                GitHub Desktop is a seamless way to contribute to projects on
-                GitHub and GitHub Enterprise. Sign in below to get started with
-                your existing projects.
-              </p>
-            </>
-          ) : (
-            <p>{BrowserRedirectMessage}</p>
-          )}
+          {this.renderIntroOrCode()}
 
           <div className="welcome-main-buttons">
             <Button
@@ -107,6 +107,42 @@ export class Start extends React.Component<IStartProps, {}> {
     )
   }
 
+  /**
+   * Before sign in starts, explain what this is. Once a device code exists,
+   * show it - it is the only thing standing between the user and being signed
+   * in, and it appears nowhere else in this flow.
+   */
+  private renderIntroOrCode() {
+    const { loadingBrowserAuth, deviceFlow } = this.props
+
+    if (deviceFlow) {
+      return (
+        <>
+          <p className="device-flow-instructions">
+            Enter this code at <Ref>{deviceFlow.verificationURI}</Ref> to finish
+            signing in. Keep this window open — it'll continue automatically
+            once you approve.
+          </p>
+          <div className="device-flow-user-code" role="status">
+            {deviceFlow.userCode}
+          </div>
+        </>
+      )
+    }
+
+    if (loadingBrowserAuth) {
+      return <p>{BrowserRedirectMessage}</p>
+    }
+
+    return (
+      <p id="start-description" className="welcome-text">
+        GitHub Desktop is a seamless way to contribute to projects on GitHub and
+        GitHub Enterprise. Sign in below to get started with your existing
+        projects.
+      </p>
+    )
+  }
+
   private signInWithBrowser = (event?: React.MouseEvent<HTMLButtonElement>) => {
     if (event) {
       event.preventDefault()
diff --git a/app/src/ui/welcome/welcome.tsx b/app/src/ui/welcome/welcome.tsx
index ccbe952d44..e00a8b7db0 100644
--- a/app/src/ui/welcome/welcome.tsx
+++ b/app/src/ui/welcome/welcome.tsx
@@ -137,17 +137,25 @@ export class Welcome extends React.Component<IWelcomeProps, IWelcomeState> {
     switch (step) {
       case WelcomeStep.Start:
       case WelcomeStep.SignInToDotComWithBrowser:
-        const loadingBrowserAuth =
+        const authenticating =
           step === WelcomeStep.SignInToDotComWithBrowser &&
           signInState !== null &&
-          signInState.kind === SignInStep.Authentication &&
-          signInState.loading
+          signInState.kind === SignInStep.Authentication
+
+        const loadingBrowserAuth = authenticating && signInState.loading
+
+        // Sign in is the OAuth device flow, so there is a code the user has to
+        // type into their browser. This is the only component rendered for
+        // dotcom sign-in, so if it is not handed the code there is nowhere for
+        // the code to appear.
+        const deviceFlow = authenticating ? signInState.deviceFlow : undefined
 
         return (
           <Start
             advance={this.advanceToStep}
             dispatcher={this.props.dispatcher}
             loadingBrowserAuth={loadingBrowserAuth}
+            deviceFlow={deviceFlow}
           />
         )