How to log in using an existing JWT token?

Hi! I have a react application, which uses react-keycloak and keycloak-js to log in using keycloak.

From this application, I want to access directus, which uses grant. This directus instance is configured using the same keycloak instance, as the react application above (but a different client configuration). I can login to directus admin, using keycloak.

Keycloak, directus and my react application run under three different subdomains.

Now, my question is, how do I get an access token for directus, which I can pass with every request? Neither the directus documentation, nor the grant readme, help me much, at the moment.

What I found out so far:

• With react-keycloak I already have an access token. But passing this access token with a request to directus, always results in HTTP 401 Unauthorized. So, it seems, directus only accepts JWT tokens, generated by directus itself.
• As far as I understand, I have to call https://<directus>/auth/oauth/keycloak to login. But this redirects to my keycloak login, and since I do this call using fetch, this ends up in CORS errors for multiple reasons (one of them being the client configuration for directus set to confidential instead of public).

But why should we do an additional roundtrip to keycloak? Shouldn’t it be possible to pass the JWT token of my existing login directly to directus, which then validates this token (optionally using a call to keycloak) and logs me in?

I know, this topic is more about the usage of grant within directus and not about grant itself. But the directus community seems to be a bit too far away from oauth topics, so I hope to find help here now. Maybe the usage of grant adds a solution for my problem to directus out of the box?

[benhubert]

Many thanks for your help. In the meantime I went for a different solution: I created an API gateway in between, which validates the JWT token, and passes the request to directus. On the directus side I use a single user for all requests with a static API key, which I personally don’t like too much, but at least it works. With this solution I also avoid navigating the user to the login, and can do everything directly via fetch.

Nevertheless, I really appreciate all your quick responses and detailed explanation. All in all, you helped me a lot with my decision.

I’ll close this for now. Thank you!

[simov]

In this case you need to configure your Grant instance inside Directus with:

{
  "defaults": {
    "callback": "https:// the absolute path to your React app to handle the callback",
    "transport": "querystring"
  }
}

That way you will receive the response data as:

https://react.app?access_token=...

You can configure the callback and the transport for specific provider/override only or set them dynamically as well, it’s not a requirement to set those values inside the defaults key.

You can also use the response option to trim the response data if needed. All of that can be found in the docs.

Let me know if it works for you.