BUG: Interactive API panel does not support non-cloud authentication

[sm-Fifteen]

Bug Description

Given Prefect core does not currently support any form of application-side security, nor is this currently planned (see PrefectHQ/prefect#2238 and PrefectHQ/prefect#3222), this means deployment in any kind of configuration where not all users that might have access to the server's IP would be trusted with access to it needs to occur from behind a reverse proxy of sorts (or inside a DMZ, see #481). Using the basic http auth schema for testing seems to work fine for the regular GraphQL API calls, but the GraphiQL shell under the "Interactive API" tab appears to be forcing a token bearer schema:

https://github.com/PrefectHQ/ui/blob/be3252ba4ccc9a965adeaf0daa65765df12d07c0/src/pages/InteractiveAPI/InteractiveAPI.vue#L55-L67

From what I can gather, this is meant to carry the token that is required by Prefect Cloud (this becomes authorization: Bearer null on core servers), but causes the Interactive API panel to be non-functional when the graphql API endpoint is behind any other form of HTTP authentication†.

Steps To Reproduce

I'm using traefik for this because it's a single-binary proxy and the demo can fit in a single config file, but I've tried the same thing on Nginx.

1. Download traefik and extract it in a user-writable directory.
2. In that same directory, create traefik.toml and routes.toml with the content shown in the Notes section at the end.
3. Run traefik in its own directory with no extra parameters
4. Bring up a local prefect server with prefect server start
5. Open http://localhost:80/ in a browser and authentify with user "test" and password "helloworld" to get to the UI
6. In the "Getting started tab", ensure that the GraphQL endpoint is set to http://localhost:80/graphql instead of http://localhost:4200/graphql
   • You should not be reprompted for a password, since these are same-origin requests
7. Ensure that the UI is still working as expected
8. Go to "Interactive API"
   • Since Interactive API automatically sent a request with authorization: Bearer null, the browser will immediately "forget" about the prevous auth method and prompt the user with a password prompt. The first one will never succeed and must be cancelled out of.
   • Every subsequent graphql query will trigger a password prompt until the user re-inputs the username and password from step 5, and then go back to working properly afterwards.
9. Try launching a test graphql query manually
   • Same problems as step 8.

Browsers Tested:

• Chrome
• Firefox
• Safari
• Edge
• IE

---

Notes

Remarks

† Incidentally, the Apollo Playground that shows up when opening /graphql in a browser appears to be affected as well, though it is not part of the Prefect UI.

Config files

• traefik.toml:

  [entryPoints]
    [entryPoints.http]
      address = ":80"
  
  [providers]
    [providers.file]
      filename = "routes.toml"

• routes.toml:

  [http]
    [http.routers]
      [http.routers.to-prefect-ui-static]
        entryPoints = ["http"]
        rule = "PathPrefix(`/js/`, `/css/`, `/img/`, `/fonts/`, `/state-icons/`) || Path(`/settings.json`, `/site.webmanifest`, `/browserconfig.xml`, `/(favicon|mstile|android-chrome)(-\\d+x\\d+)?\\.(ico|png)`)"
        # No auth for static files
        service = "prefect-ui"
  
      [http.routers.to-prefect-server]
        entryPoints = ["http"]
        rule = "PathPrefix(`/graphql`)"
        middlewares = ["test-auth"]
        service = "prefect-server"
  
      [http.routers.to-prefect-ui]
        entryPoints = ["http"]
        rule = "PathPrefix(`/`)"
        middlewares = ["test-auth"]
        service = "prefect-ui"
  
    [http.services]
      [http.services.prefect-server.loadBalancer]
        [[http.services.prefect-server.loadBalancer.servers]]
          url = "http://localhost:4200"
  
      [http.services.prefect-ui.loadBalancer]
        [[http.services.prefect-ui.loadBalancer.servers]]
          url = "http://localhost:8080"
  
    [http.middlewares]
      [http.middlewares.test-auth.basicAuth]
        realm = "Protected Prefect"
        users = [
          # "test:helloworld",
          "test:$apr1$3pyPPczz$EJu0FWjAlgbWTiltQiHsK/",
        ]

[sm-Fifteen]

A workaround I've found is to have the reverse proxy intercept the request to the GraphQL endpoint when the Authorization is Bearer null and immediately throw a 400 error in order to prevent the application from asking the user to authenticate. That is, it doesn't solve the problem, but it does remedy the password prompt spam symptom, which was rather annoying.

For API testing, one can also use the Apollo Playground at /graphql directly by setting "request.credentials": "include", or "request.credentials": "same-origin", in the frontend settings, in the top right corner of the playground window.

[zhen0]

Closing the issue as we do not support auth for server. Hopefully the workaround may still be a useful reference for others.