google / google/adk-web

Is it possible for the placement of the OAuth2 login window to be more central?

Open
#97 0 comments 1 reaction 1 assignee Claimed by @wyf7107 View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.