webnet/tailscale
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Gesa Stupperich
2026-03-11 08:15:21 +00:00
committed by GitHub
parent 16fa81e804
commit 7a43e41a27
5 changed files with 104 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/web/auth.go
+14 -3
View File
@@ -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
+7 -4
View File
@@ -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
+32 -46
View File
@@ -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
+13
View File
@@ -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
+38 -23
View File
@@ -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,22 +653,7 @@ func TestServeAuth(t *testing.T) {
AuthID: testAuthPath,
AuthURL: *testControlURL + testAuthPath,
Authenticated: false,
},
},
{
name: "query-existing-incomplete-session",
path: "/api/auth",
cookie: successCookie,
wantStatus: http.StatusOK,
wantResp: &authResponse{ViewerIdentity: vi, ServerMode: ManageServerMode},
wantSession: &browserSession{
ID: successCookie,
SrcNode: remoteNode.Node.ID,
SrcUser: user.ID,
Created: oneHourAgo,
AuthID: testAuthPathSuccess,
AuthURL: *testControlURL + testAuthPathSuccess,
Authenticated: false,
PendingAuth: true,
},
},
{
@@ -674,10 +670,11 @@ func TestServeAuth(t *testing.T) {
AuthID: testAuthPathSuccess,
AuthURL: *testControlURL + testAuthPathSuccess,
Authenticated: false,
PendingAuth: true,
},
},
{
name: "transition-to-successful-session",
name: "transition-to-successful-session-via-api-auth-session-wait",
path: "/api/auth/session/wait",
cookie: successCookie,
wantStatus: http.StatusOK,
@@ -692,6 +689,22 @@ func TestServeAuth(t *testing.T) {
Authenticated: true,
},
},
{
name: "transition-to-successful-session-via-api-auth",
path: "/api/auth",
cookie: successCookie2,
wantStatus: http.StatusOK,
wantResp: &authResponse{Authorized: true, ViewerIdentity: vi, ServerMode: ManageServerMode},
wantSession: &browserSession{
ID: successCookie2,
SrcNode: remoteNode.Node.ID,
SrcUser: user.ID,
Created: oneHourAgo,
AuthID: testAuthPathSuccess,
AuthURL: *testControlURL + testAuthPathSuccess,
Authenticated: true,
},
},
{
name: "query-existing-complete-session",
path: "/api/auth",
@@ -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,
},
},
{