Is it possible for the placement of the OAuth2 login window to be more central?
- Dominant language
- TypeScript
- Stars
- 1k
- Forks
- 267
- Avg merge
- 1d 12h
- Merged PRs (30d)
- 9
Description
**SUMMARY**
The Login window always and only appears in the far upper left of the screen.
Ideally it would appear more centrally, like near where the originating ADK dev-ui is running.
**IN MORE DETAIL**
The OAuth2 authentication seems to be working well.
When an agent uses
```py
auth_scheme = OpenIdConnectWithConfig(
authorization_endpoint=settings["OAUTH2_AUTHZ_ENDPOINT"],
token_endpoint=settings["OAUTH2_TOKEN_ENDPOINT"],
scopes=["openid", "read", "write"],
)
```
...the ADK does the right thing, pops the login window when necessary.
Agent Code
This is the code that sets up the OpenAPIToolset with OIDC
```py
auth_scheme = OpenIdConnectWithConfig(
authorization_endpoint=settings["OAUTH2_AUTHZ_ENDPOINT"],
token_endpoint=settings["OAUTH2_TOKEN_ENDPOINT"],
scopes=["openid", "read", "write"],
)
auth_credential = AuthCredential(
auth_type=AuthCredentialTypes.OPEN_ID_CONNECT,
oauth2=OAuth2Auth(
client_id=settings["OAUTH2_CLIENT_ID"],
client_secret=settings["OAUTH2_CLIENT_SECRET"],
),
)
# --- Create OpenAPIToolset ---
products_toolset = OpenAPIToolset(
spec_str=openapi_spec_string,
spec_str_type="yaml",
auth_scheme=auth_scheme,
auth_credential=auth_credential,
)
with open(
os.path.join(os.path.dirname(__file__), "instruction.md"), "r", encoding="utf-8"
) as f:
instruction_string = f.read()
# --- Agent Definition ---
root_agent = LlmAgent(
name="products_query_agent",
model="gemini-2.5-flash",
tools=[products_toolset],
instruction=instruction_string,
description="Manages product inventory queries.",
)
```
The problem is the window is always in the far upper left of the screen.
Normally we'd want the placement to be more central. This is possible if you modify the JavaScript that handles the 401 response.
But I see that code is sort of pre-built, available in src/google/adk/cli/browser only in minimized form.
**Desired Solution**
The login window appears more centrally on the window.
Illustration
The following provided by Gemini won't "work", but it illustrates the idea:
// Define the desired dimensions for the popup
const popupWidth = 500;
const popupHeight = 600;// Calculate the position for the popup to be centered
const leftPosition = (screen.width - popupWidth) / 2;
const topPosition = (screen.height - popupHeight) / 2;// The URL for your OIDC provider's login page
const loginUrl = 'https://my-oidc-provider.com/auth?...';// The 'features' string for window.open()
const windowFeatures = `
width=${popupWidth},
height=${popupHeight},
top=${topPosition},
left=${leftPosition},
resizable=yes,
scrollbars=yes,
status=yes
`;// Open the centered window
const loginWindow = window.open(loginUrl, 'oidcLogin', windowFeatures);
**alternatives I've considered**
There are none; the ADK is in control of where the login-and-consent window appears. And that code is minimized, so impenetrable.
Contributor guide
Assessment
This issue has not been assessed yet.