Re: [PATCH proxmox-widget-toolkit v4 11/24] utils: Add OAuth2 flow handlers

[Arthur Bied-Charreton <a.bied-charreton@proxmox.com>]

On Thu, Apr 23, 2026 at 02:24:32PM +0200, Shannon Sterz wrote:
> On Tue Apr 21, 2026 at 1:59 PM CEST, Arthur Bied-Charreton wrote:
> > Introduce the Proxmox.OAuth2 singleton supporting Google and Microsoft
> > OAuth2. The flow is handled by opening a new window with the
> > authorization URL, and expecting to receive the resulting authorization
> > code from the redirect handler via a BroadcastChannel [0], which allows
> > communication between any two browsing contexts.
> >
> > [0]
> > https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel
> >
[...]
> > +    _handleFlow: function (config) {
> > +        return new Promise((resolve, reject) => {
> > +            let redirectUri = window.location.origin;
> > +            let channelName = `oauth2_${crypto.randomUUID()}`;
> > +            let state = encodeURIComponent(JSON.stringify({ channelName }));
> > +
> > +            let authParams = new URLSearchParams({
> > +                client_id: config.clientId,
> > +                response_type: 'code',
> > +                redirect_uri: redirectUri,
> > +                scope: config.scope,
> > +                state,
> > +                ...config.extraAuthParams,
> > +            });
> > +
> > +            let authUrl = `${config.authUrl}?${authParams}`;
> > +
> > +            // Opens OAuth2 authorization window. The app's redirect handler must
> > +            // extract the authorization code from the callback URL and send it via
> > +            // the BroadcastChannel whose name we passed along as a state parameter.
> > +            let channel = new BroadcastChannel(channelName);
> > +            let popup = window.open(authUrl);
> > +            if (!popup) {
> > +                reject(new Error(gettext('Could not open authentication window')));
> > +                return;
> > +            }
> > +
> > +            channel.addEventListener('message', async (event) => {
> > +                if (popup && !popup.closed) {
> > +                    popup.close();
> > +                }
> > +                channel.close();
> > +
> > +                try {
> > +                    let response = await fetch(config.tokenUrl, {
> > +                        method: 'POST',
> > +                        headers: {
> > +                            'Content-Type': 'application/x-www-form-urlencoded',
> > +                        },
> > +                        body: new URLSearchParams({
> > +                            grant_type: 'authorization_code',
> > +                            code: event.data.code,
> 
> should we check if code is set here properly? i know the sending code
> always sets this in theory, but it might be safer to check here again
> before triggering a request.
> 
Yes that would indeed be cleaner, I will add a check rejecting the
promise if the code is not set. 

> also if i remember correctly there was an issue with using the async
> fetch api in extjs, maybe @Dominik Csapak could take a look if this is
> fine here.
> 

I had a talk with Dominik off-list, async calls are indeed often an
issue in Ext.js, because it does not detect async functions, meaning it 
may treat functions defined as async the same way it would treat 
synchronous ones. This can lead to issues where e.g. a function that is
expected to be sync and return a string returns a promise instead,
breaking Ext.js' handling of the return value.

This is however not an issue here, because this is only called in the
SmtpEditPanel's Authorize button handler, which is defined as async and
expected by Ext.js to be async, so it will be properly awaited. 

> > +                            client_id: config.clientId,
> > +                            client_secret: config.clientSecret,
> > +                            redirect_uri: redirectUri,
> > +                        }),
> > +                    });
> > +
> > +                    let tokens = await response.json();
> > +                    if (!tokens.refresh_token) {
> > +                        reject(tokens.error_description || gettext('Token exchange failed'));
> > +                    }
> > +                    resolve(tokens.refresh_token);
> > +                } catch (error) {
> > +                    reject(error);
> > +                }
> > +            });
> > +        });
> > +    },
> > +});
> > +
> >  Ext.define('Proxmox.Async', {
> >      singleton: true,
> >
>