client/web: signal need to wait for auth across tabs

This amends the session creation and auth status querying logic of the device UI
backend. On creation of new browser sessions we now store a PendingAuth flag
as part of the session that indicates a pending auth process that needs to be
awaited. On auth status queries, the server initiates a polling for the auth result
if it finds this flag to be true. Once the polling is completes, the flag is set to false.

Why this change was necessary: with regular browser settings, the device UI
frontend opens the control auth URL in a new tab and starts polling for the
results of the auth flow in the current tab. With certain browser settings (that
we still want to support), however, the auth URL opens in the same tab, thus
aborting the subsequent call to auth/session/wait that initiates the polling,
and preventing successful registration of the auth results in the session
status. The new logic ensures the polling happens on the next call to /api/auth
in these kinds of scenarios.

In addition to ensuring the auth wait happens, we now also revalidate the auth
state whenever an open tab regains focus, so that auth changes effected in one
tab propagate to other tabs without the need to refresh. This improves the
experience for all users of the web client when they've got multiple tabs open,
regardless of their browser settings.

Fixes #11905

Signed-off-by: Gesa Stupperich <gesa@tailscale.com>

client/web/auth.go

@@ -37,6 +37,7 @@ type browserSession struct {
 	AuthURL       string // from tailcfg.WebClientAuthResponse
 	Created       time.Time
 	Authenticated bool
+	PendingAuth   bool
 }
 
 // isAuthorized reports true if the given session is authorized
@@ -172,12 +173,14 @@ func (s *Server) newSession(ctx context.Context, src *apitype.WhoIsResponse) (*b
 		}
 		session.AuthID = a.ID
 		session.AuthURL = a.URL
+		session.PendingAuth = true
 	} else {
 		// control does not support check mode, so there is no additional auth we can do.
 		session.Authenticated = true
 	}
 
 	s.browserSessions.Store(sid, session)
+
 	return session, nil
 }
 
@@ -206,16 +209,24 @@ func (s *Server) awaitUserAuth(ctx context.Context, session *browserSession) err
 	if session.isAuthorized(s.timeNow()) {
 		return nil // already authorized
 	}
+
 	a, err := s.waitAuthURL(ctx, session.AuthID, session.SrcNode)
 	if err != nil {
-		// Clean up the session. Doing this on any error from control
-		// server to avoid the user getting stuck with a bad session
-		// cookie.
+		// Don't delete the session on context cancellation, as this is expected
+		// when users navigate away or refresh the page.
+		if errors.Is(err, context.Canceled) {
+			return err
+		}
+
+		// Clean up the session for non-cancellation errors from control server
+		// to avoid the user getting stuck with a bad session cookie.
 		s.browserSessions.Delete(session.ID)
 		return err
 	}
+
 	if a.Complete {
 		session.Authenticated = a.Complete
+		session.PendingAuth = false
 		s.browserSessions.Store(session.ID, session)
 	}
 	return nil

client/web/src/api.ts

@@ -123,7 +123,10 @@ export function useAPI() {
           return apiFetch<{ url?: string }>("/up", "POST", t.data)
             .then((d) => d.url && window.open(d.url, "_blank")) // "up" login step
             .then(() => incrementMetric("web_client_node_connect"))
-            .then(() => mutate("/data"))
+            .then(() => {
+              mutate("/data")
+              mutate("/auth")
+            })
             .catch(handlePostError("Failed to login"))
 
         /**
@@ -134,9 +137,9 @@ export function useAPI() {
           // For logout, must increment metric before running api call,
           // as tailscaled will be unreachable after the call completes.
           incrementMetric("web_client_node_disconnect")
-          return apiFetch("/local/v0/logout", "POST").catch(
-            handlePostError("Failed to logout")
-          )
+          return apiFetch("/local/v0/logout", "POST")
+            .then(() => mutate("/auth"))
+            .catch(handlePostError("Failed to logout"))
 
         /**
          * "new-auth-session" handles creating a new check mode session to

client/web/src/hooks/auth.ts

@@ -3,6 +3,7 @@
 
 import { useCallback, useEffect, useState } from "react"
 import { apiFetch, setSynoToken } from "src/api"
+import useSWR from "swr"
 
 export type AuthResponse = {
   serverMode: AuthServerMode
@@ -49,33 +50,26 @@ export function hasAnyEditCapabilities(auth: AuthResponse): boolean {
  * useAuth reports and refreshes Tailscale auth status for the web client.
  */
 export default function useAuth() {
-  const [data, setData] = useState<AuthResponse>()
-  const [loading, setLoading] = useState<boolean>(true)
+  const { data, error, mutate } = useSWR<AuthResponse>("/auth")
   const [ranSynoAuth, setRanSynoAuth] = useState<boolean>(false)
 
-  const loadAuth = useCallback(() => {
-    setLoading(true)
-    return apiFetch<AuthResponse>("/auth", "GET")
-      .then((d) => {
-        setData(d)
-        if (d.needsSynoAuth) {
-          fetch("/webman/login.cgi")
-            .then((r) => r.json())
-            .then((a) => {
-              setSynoToken(a.SynoToken)
-              setRanSynoAuth(true)
-              setLoading(false)
-            })
-        } else {
-          setLoading(false)
-        }
-        return d
-      })
-      .catch((error) => {
-        setLoading(false)
-        console.error(error)
-      })
-  }, [])
+  const loading = !data && !error
+
+  // Start Synology auth flow if needed.
+  useEffect(() => {
+    if (data?.needsSynoAuth && !ranSynoAuth) {
+      fetch("/webman/login.cgi")
+        .then((r) => r.json())
+        .then((a) => {
+          setSynoToken(a.SynoToken)
+          setRanSynoAuth(true)
+          mutate()
+        })
+        .catch((error) => {
+          console.error("Synology auth error:", error)
+        })
+    }
+  }, [data?.needsSynoAuth, ranSynoAuth, mutate])
 
   const newSession = useCallback(() => {
     return apiFetch<{ authUrl?: string }>("/auth/session/new", "GET")
@@ -86,34 +80,26 @@ export default function useAuth() {
         }
       })
       .then(() => {
-        loadAuth()
+        mutate()
       })
       .catch((error) => {
         console.error(error)
       })
-  }, [loadAuth])
+  }, [mutate])
 
+  // Start regular auth flow.
   useEffect(() => {
-    loadAuth().then((d) => {
-      if (!d) {
-        return
-      }
-      if (
-        !d.authorized &&
-        hasAnyEditCapabilities(d) &&
-        // Start auth flow immediately if browser has requested it.
-        new URLSearchParams(window.location.search).get("check") === "now"
-      ) {
-        newSession()
-      }
-    })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+    const needsAuth =
+      data &&
+      !loading &&
+      !data.authorized &&
+      hasAnyEditCapabilities(data) &&
+      new URLSearchParams(window.location.search).get("check") === "now"
 
-  useEffect(() => {
-    loadAuth() // Refresh auth state after syno auth runs
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ranSynoAuth])
+    if (needsAuth) {
+      newSession()
+    }
+  }, [data, loading, newSession])
 
   return {
     data,

client/web/web.go

@@ -771,6 +771,19 @@ func (s *Server) serveAPIAuth(w http.ResponseWriter, r *http.Request) {
 		}
 	}
 
+	// We might have a session for which we haven't awaited the result yet.
+	// This can happen when the AuthURL opens in the same browser tab instead
+	// of a new one due to browser settings.
+	// (See https://github.com/tailscale/tailscale/issues/11905)
+	// We therefore set a PendingAuth flag when creating a new session, check
+	// it here and call awaitUserAuth if we find it to be true. Once the auth
+	// wait completes, awaitUserAuth will set PendingAuth to false.
+	if sErr == nil && session.PendingAuth == true {
+		if err := s.awaitUserAuth(r.Context(), session); err != nil {
+			sErr = err
+		}
+	}
+
 	switch {
 	case sErr != nil && errors.Is(sErr, errNotUsingTailscale):
 		s.lc.IncrementCounter(r.Context(), "web_client_viewing_local", 1)

client/web/web_test.go

@@ -582,12 +582,23 @@ func TestServeAuth(t *testing.T) {
 
 	successCookie := "ts-cookie-success"
 	s.browserSessions.Store(successCookie, &browserSession{
-		ID:      successCookie,
-		SrcNode: remoteNode.Node.ID,
-		SrcUser: user.ID,
-		Created: oneHourAgo,
-		AuthID:  testAuthPathSuccess,
-		AuthURL: *testControlURL + testAuthPathSuccess,
+		ID:          successCookie,
+		SrcNode:     remoteNode.Node.ID,
+		SrcUser:     user.ID,
+		Created:     oneHourAgo,
+		AuthID:      testAuthPathSuccess,
+		AuthURL:     *testControlURL + testAuthPathSuccess,
+		PendingAuth: true,
+	})
+	successCookie2 := "ts-cookie-success-2"
+	s.browserSessions.Store(successCookie2, &browserSession{
+		ID:          successCookie2,
+		SrcNode:     remoteNode.Node.ID,
+		SrcUser:     user.ID,
+		Created:     oneHourAgo,
+		AuthID:      testAuthPathSuccess,
+		AuthURL:     *testControlURL + testAuthPathSuccess,
+		PendingAuth: true,
 	})
 	failureCookie := "ts-cookie-failure"
 	s.browserSessions.Store(failureCookie, &browserSession{
@@ -642,14 +653,15 @@ func TestServeAuth(t *testing.T) {
 				AuthID:        testAuthPath,
 				AuthURL:       *testControlURL + testAuthPath,
 				Authenticated: false,
+				PendingAuth:   true,
 			},
 		},
 		{
-			name:       "query-existing-incomplete-session",
-			path:       "/api/auth",
+			name:       "existing-session-used",
+			path:       "/api/auth/session/new", // should not create new session
 			cookie:     successCookie,
 			wantStatus: http.StatusOK,
-			wantResp:   &authResponse{ViewerIdentity: vi, ServerMode: ManageServerMode},
+			wantResp:   &newSessionAuthResponse{AuthURL: *testControlURL + testAuthPathSuccess},
 			wantSession: &browserSession{
 				ID:            successCookie,
 				SrcNode:       remoteNode.Node.ID,
@@ -658,14 +670,15 @@ func TestServeAuth(t *testing.T) {
 				AuthID:        testAuthPathSuccess,
 				AuthURL:       *testControlURL + testAuthPathSuccess,
 				Authenticated: false,
+				PendingAuth:   true,
 			},
 		},
 		{
-			name:       "existing-session-used",
-			path:       "/api/auth/session/new", // should not create new session
+			name:       "transition-to-successful-session-via-api-auth-session-wait",
+			path:       "/api/auth/session/wait",
 			cookie:     successCookie,
 			wantStatus: http.StatusOK,
-			wantResp:   &newSessionAuthResponse{AuthURL: *testControlURL + testAuthPathSuccess},
+			wantResp:   nil,
 			wantSession: &browserSession{
 				ID:            successCookie,
 				SrcNode:       remoteNode.Node.ID,
@@ -673,17 +686,17 @@ func TestServeAuth(t *testing.T) {
 				Created:       oneHourAgo,
 				AuthID:        testAuthPathSuccess,
 				AuthURL:       *testControlURL + testAuthPathSuccess,
-				Authenticated: false,
+				Authenticated: true,
 			},
 		},
 		{
-			name:       "transition-to-successful-session",
-			path:       "/api/auth/session/wait",
-			cookie:     successCookie,
+			name:       "transition-to-successful-session-via-api-auth",
+			path:       "/api/auth",
+			cookie:     successCookie2,
 			wantStatus: http.StatusOK,
-			wantResp:   nil,
+			wantResp:   &authResponse{Authorized: true, ViewerIdentity: vi, ServerMode: ManageServerMode},
 			wantSession: &browserSession{
-				ID:            successCookie,
+				ID:            successCookie2,
 				SrcNode:       remoteNode.Node.ID,
 				SrcUser:       user.ID,
 				Created:       oneHourAgo,
@@ -731,6 +744,7 @@ func TestServeAuth(t *testing.T) {
 				AuthID:        testAuthPath,
 				AuthURL:       *testControlURL + testAuthPath,
 				Authenticated: false,
+				PendingAuth:   true,
 			},
 		},
 		{
@@ -748,6 +762,7 @@ func TestServeAuth(t *testing.T) {
 				AuthID:        testAuthPath,
 				AuthURL:       *testControlURL + testAuthPath,
 				Authenticated: false,
+				PendingAuth:   true,
 			},
 		},
 		{