Iframe embedding not authorizing with JWT

Hi, I’m trying to embed my Grafana dashboard in a React app using <iframe> with pass-through authentication.

This is what I’m following: Configure JWT authentication | Grafana documentation

I have added the required claims, created a JWT and created an API for JWKS.

The iframe loads Grafana, but it just takes me to the login page and there are no logs for what’s going wrong. I don’t know if it’s a config issue, or something in the code.

This is what the config file looks like:

[auth.jwt]

enabled = true
enable_login_token = true
email_claim = email
username_claim = preferred_username
jwk_set_url = https://MY_API_SERVER/grafana/jwks
cache_ttl = 60m
auto_sign_up = true
url_login = true

This is what I see in the Grafana server logs
INFO [07-12|00:28:31] Request Completed logger=context userId=0 orgId=0 uname= method=GET path=/d/ddr4vzrqimf40c status=302 remote_addr=119.73.97.90 time_ms=0 duration=330.833µs size=29 referer=https://my-api-server/ handler=/d/:uid status_source=server

I see the userId=0 and orgId=0, this is what my URL looks like:
https://MY_API_SERVER/d/ddr4vzrqimf40c?orgId=1&kiosk&auth_token=MY_JWT_TOKEN

And this is in the encoded JWT

{
  "userId": "e29d30be-aa72-4698-9ca1-f8d6b1ca7414",
  "preferred_username": "Kumail",
  "email": "user@example.com",
  "exp": 1720729572
}