OAuth token to 3rd party api

[shy ginkgo]

Does anyone have an example of how to use the oauthApi in a plugin? I’m using the api ref to call an api on behalf of the user. But when I request the token using getAccessToken(“my-new-scope”), it blows up the authentication to backstage because it sets the refresh token cookie.
I’m using Microsoft Azure AD for the provider.

[shy ginkgo]

I assume I’m missing something. I’m switching to just integrating msal-node into my plugin to get the OBO token. Presents its own challenges of course

[devout imp]

because it sets the refresh token cookie? What's the actual problem that occurs?

Are you not using the microsoftAuthApiRef?

[shy ginkgo]

I am using the microsoftAuthApiRef. In the plugin, I pass it as a dependency as OAuthApi. Then when I call this.config.oauthApi.getAccessToken(‘https://my-client.com/user_impersonation’), the token is retrieved. However after I make the api call, backstage kicks me to the login screen and says “the Microsoft provider is not configured to support sign-in” until I clear the refresh-token in my browser.

Unfortunately I can’t access discord on my work machine, I’ll upload some code samples on my personal machine later today

[shy ginkgo]

I also get an error that indicates the returned access token cannot be converted to JSON when checking to see if I can even access the api.

[shy ginkgo]

// plugin.ts
/** @public */
export const xmattersPlugin = createPlugin({
    id: 'xmatters',
    apis: [
        createApiFactory({
            api: xmattersApiRef,
            deps: {
                discoveryApi: discoveryApiRef,
                configApi: configApiRef,
                fetchApi: fetchApiRef,
                oauthApi: microsoftAuthApiRef,
            },
            factory: ({ configApi, discoveryApi, fetchApi, oauthApi }) => 
                XMattersClient.fromConfig(configApi, {
                    discoveryApi,
                    fetchApi,
                    oauthApi,
                }),
        }),
    ],
});

// client.ts
private async findByUrl<T>(url: string): Promise<T> {
    const token = await this.config.oauthApi.getAccessToken("https://my.hosted.xmatters.com/user_impersonation");
    const options = {
        method: 'GET',
        headers: {
            Authorization: `Bearer ${token}`
        }
    }
    const response = await this.request(url, options);
    return response.json();
}

private async request(
    url: string,
    options: RequestOptions,
): Promise<Response> {
    const response = await this.config.fetchApi.fetch(url, options);
    /** handle response */
}

[shy ginkgo]

@devout imp Anything obvious jump out at you? After getAccessToken is called, I can navigate around but when I refresh the page, I get kicked to the login screen with the error The microsoft provider is not configured to support sign-in. I can get back in if I clear the microsoft-refresh-token cookie in my browser.

[spring ruin]

@shy ginkgo can you update in here if you somehow fix it?

[shy ginkgo]

After digging into the code, it seems like the underlying session is being set, which changes the audience of the token. That must be what triggers the auth to boot me to the sign in page. Im thinking I need to implement with MSAL to acquire a token using the existing access token. Running into issues with that as well. For whatever reason I’m getting a “network error” when it tries to call the .well-known endpoint of the authority.

[shy ginkgo]

@devout imp does this ☝️ sound correct? Anything I’m missing?

[devout imp]

This is not my area of expertise honestly. And I happen to be off for the summer right now!

[spring ruin]

@shy ginkgo did you manage to get any further on this?

[shy ginkgo]

For several reasons, I haven’t had a chance to dig into this again. Still want to figure it out though.

[spring ruin]

All good. I saw your issue on the backstage repo, and decided to bump it. I hope we can proceed on it