'How to set an Authorization Header for all requests under a sub-url in React App

I have built a web application where the frontend was made with React and the backend is made using Python (FastAPI). I'm currently integrating Grafana into the web application and have added auth-proxy capabilities to the backend. This proxy will take the JWT from the Authorization header in any request it receives, authenticate the user and then add new headers to the request it sends to Grafana in order to get a session cookie. The goal is to not have the user log in a second time when exiting the web application and heading to grafana.

For frontend routing, I'm using the react-router-dom package.

I have two issues currently:

  1. How do I get React to proxy all requests for the sub-url "/grafana" to the backend?
  2. With the above figured out, how do I then have React attach the authorization header with the JWT token in all requests destined to the backend from "/grafana"?
reactjsreact-router-domreverse-proxygrafanafilegoogle-apps-scriptdirectorymove


Solution 1:[1]

I found a solution. I created a button in React that makes a GET request with the JWT token in the Authorization header. I created a reverse proxy in FastAPI for the sub-url /grafana.

client = httpx.AsyncClient(base_url=f"http://{settings.GRAFANA_ADDR}/")

async def _reverse_proxy(request: Request):
    url = httpx.URL(path=request.url.path,
                    query=request.url.query.encode("utf-8"))
    new_header = MutableHeaders(request.headers)
    if "grafana_session" not in request.cookies:
        if "authorization" not in request.headers:
            return RedirectResponse("/")
        jwt_token = request.headers["authorization"].replace('Bearer ', '')
        current_user = get_current_user_from_token(token=jwt_token, db=some_session)
        org = get_org_by_id(current_user.org_id, some_session)
        if org is None:
            raise HTTPException(
                status_code=404,
                detail="Organization not found",
            )
        del new_header['authorization']
        new_header['X-WEBAUTH-USER'] = current_user.username
        new_header['X-Grafana-Org-Id'] = f"{org.grafana_org_id}"
    if "authorization" in new_header:
        del new_header['authorization']
    rp_req = client.build_request(request.method, url,
                                  headers=new_header.raw,
                                  content=await request.body())
    rp_resp = await client.send(rp_req, stream=True)
    return StreamingResponse(
        rp_resp.aiter_raw(),
        status_code=rp_resp.status_code,
        headers=rp_resp.headers,
        background=BackgroundTask(rp_resp.aclose),
    )

app = FastAPI(title=settings.PROJECT_NAME, version=settings.PROJECT_VERSION)
app.add_route("/grafana/{path:path}", _reverse_proxy, ["GET", "POST"])

If there's no Cookie in the request but there's a JWT token, it will authenticate the user in the web app and in Grafana. Grafana returns a session cookie and redirects to the home page for that user.

Solution 2:[2]

Try adding something like this:

while(jpgfiles.hasNext()) {
  let file = jpgfiles.next();
  file.mmoveTo()....

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Paul Côté
Solution 2 Cooper

Related Questions