Use own JWT in grafana

Hi,
Our site retrieves a JWT from keycloak when the user logs in.
This JWT is stored in the browser storage.

We are having, amongst other pages, a grafana dashboard.
We would like grafana to use our JWT for all its API calls. We have an authentication service in front of it.

For it to work in our service we need it to have the Authorization header and X-Original-Uri header.
If grafana can pass these headers with the necessary info, our auth service will handle them and we shoudn’t need grafana to do anything besides handle its API call.

How can we achieve this? We can have the JS set data in the browser in some other many if need be.

I found the following issues that look similar to our needs.


Any help or information would be great!

Thank you!

IMHO: use Grafana in Auth proxy mode + add properly configured keycloak-gatekeeper in front of Grafana -> standard cookies will be used.

Definitely better, than hacking Grafana source code only to add special headers for obscure authN/authZ system (I hope your don’t need that, because your request is only about JWT :slight_smile: ).

1 Like

Hi, we decided to use embedded and load grafana in an iframe.
Now the parent can refresh the token and update the cookie.
This is proving to work rather well.

I just thought there would be a way to use the header, but even then I realize once that JWT expires, it still needs to be refreshed, which is a whole other issue.

Hi Michael
How did you embed Grafana into an iFrame? Is the look and feel of Grafana intact that way?
Is that the best approach you think? We also have a system where JWT token is basically user authentication thrown everywhere, and the question right now is how can Grafana handle this; can it forward tokens to the backend as headers directly? Please share if you have some details on both options?
Thanks
Rajesh

We use a basic iframe in angular to load grafana.
The url it loads is like:

this.url = 'https://' + subdomain + '.' + this.base_url +'/?user=' + username + '&token=' + token + '&realm=' + this.realm;

and the html is like"

<div class="iframe-wrapper"><iframe [src]="urlSafe" (load)="loadediframe()"></iframe></div>

The reason to have the querystring is because grafana uses cookies and our angular app is doing the jwt auth and refresh then after the angular refreshes the token, it updates the cookie with the new token so grafana does not get logged out.

There is some stuff in the backend with the nginx config also to set the cookies and such.

The look is fine since you can style the page around the iFrame however you want.

It is not ideal though because mobile browsers do not allow the iframe.

I do not know if it is the best approach but it works for now.