backstage: Bug in oauth2 authentication from Swagger API definitions - invalid redirect uri

Expected Behavior

I would expect to be able to login to spotify API via oauth and play with it

Actual Behavior

When I log in Iget a page with “invalid redirect uri”

Steps to Reproduce

Create a new backstage app (my is version 1.1.0)
Start it and go to API and choose spotify API
Click authenticate and type in you clientID and secret and login
you’ll get 404 “INVALID_CLIENT: Invalid redirect URI”

Context

I cannot connect to my own API’s anymore. I discovered it after upgrade from 0.4.3 to 1.0.3. And suddenly oauth2 was not working. It seems that the path to swagger page is included in redirect url like: https://localhost:3000/catalog/default/api/spotify/oauth2-redirect.html. It was in my old version https://localhost:3000/oauth2-redirect.html

Your Environment

Browser Information: Google Chrome 101.0.4951.54
Output of yarn backstage-cli info:

OS: Windows_NT 10.0.22000 - win32/x64 node: v14.17.1 yarn: 1.22.17 cli: 0.17.0 (installed)

Dependencies: @backstage/app-defaults @backstage/backend-common @backstage/backend-tasks @backstage/catalog-client @backstage/catalog-model @backstage/cli-common @backstage/cli @backstage/config-loader @backstage/config @backstage/core-app-api @backstage/core-components @backstage/core-plugin-api @backstage/errors @backstage/integration-react @backstage/integration @backstage/plugin-api-docs @backstage/plugin-app-backend @backstage/plugin-auth-backend @backstage/plugin-auth-node @backstage/plugin-catal @backstage/plugin-catalog-common @backstage/plugin-catalog-graph @backstage/plugin-catalog-import @backstage/plugin-catalog-react @backstage/plugin-catalog @backstage/plugin-github-actions @backstage/plugin-org @backstage/plugin-per @backstage/plugin-permi @backstage/plugin-perm @backstage/plugin-proxy-backend @backstage/plugin-sc @backstage/plugin-sca @backstage/plugin-scaffolder @backstage/plugin-s @backstage/plugin-search-backend @backstage/plugin-search-common @backstage/plugin-search-react @backstage/plugin-search @backstage/plugin-tech-radar @backstage/plugin-tech @backstage/plugin-techdocs-node @backstage/plugin-techdocs-react @backstage/plugin-techdocs @backstage/plugin-user-settings @backstage/release-manifests @backstage/search-common @backstage/test-utils @backstage/theme @backstage/types @backstage/version-bridge Done in 0.70s. 1.0.1 0.13.2 0.3.0 1.0.1 1.0.1 0.1.8 0.17.0 1.1.0 1.0.0 1.0.1 0.9.3 1.0.1 1.0.0 1.0.1 1.1.0 0.8.4 0.3.31 0.13.0 0.2.0 og-backend 1.1.1 1.0.1 0.2.16 0.8.7 1.0.1 1.1.0 0.5.4 0.5.4 mission-common 0.6.0 ssion-node 0.6.0 ission-react 0.4.0 0.2.25 affolder-backend 1.1.0 ffolder-common 1.0.1 1.1.0 earch-backend-node 0.6.0 0.5.1 0.3.3 0.1.0 0.8.0 0.5.11 docs-backend 1.1.0 1.1.0 0.1.0 1.1.0 0.4.3 0.0.2 0.3.3 1.0.1 0.2.15 1.0.0 1.0.1

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 2
Comments: 26 (18 by maintainers)

Most upvoted comments

As an intermediate solution, which works for me, you can do the next:

in the root package.json add

"resolutions": {
    "**/swagger-ui-react": "4.1.0"
}

Then cd ./packages/app && yarn add btoa
Then cd ../../ && yarn install

With this I make it to use the old version, where that improvement was not yet applied.

PavelPolyakov on Jun 1, 2022

seem like this might be an approach to resolve it for you: https://github.com/backstage/backstage/pull/15531#issuecomment-1424693056

pjungermann on Jun 12, 2023

@thatguysimon tbh, no idea. There was a PR referenced above which got closed unmerged. However, at a quick glance, it didn’t seem to be focused on this issue. I assume there was the idea that it could be used for it, potentially.

plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.tsx

contains

<SwaggerUI spec={def} url="" deepLinking />

and SwaggerUI has the optional property oauth2RedirectUrl.

Currently, only a definition gets passed. No other properties are used. (see OpenApiDefinitionProps)

OpenApiDefinition itself is used as part of LazyOpenApiDefinition used as part of OpenApiDefinitionWidget with OpenApiDefinitionWidgetProps only containing the definition as well.

And ultimately, it’s used at plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionWidget.tsx, again passing only the definition. It is used as part of the implementation of ApiDocsConfig.getApiDefinitionWidget (plugins/api-docs/src/config.ts, plugins/api-docs/src/plugin.ts)

Seems like there is still a need to define and implement, where the value has to come from and how this setting can be provided.

pjungermann on Jun 12, 2023

There’s some swagger work happening in #15531 which also discusses a way to pass this in as options. There might be good to be know in case it could solve both needs.

jhaals on Jan 9, 2023

I’m a rookie javascript developer but I’ll give it a shot next week after Danish holliday

lars1974 on May 12, 2022