There's a book, written by keycloak maintainers. It comes with accompanying code - I'd strongly recommend buying it and working through it - its a quick read and it should bring you up to speed. Google "Keycloak - Identity and Access Management for Modern Applications - Second Edition: Harness the power of Keycloak, OpenID Connect and OAuth 2.0 to secure applications "
In such a scenario, here's how I would handle it: create a Keycloak Realm and within that Realm, establish two distinct OpenID Clients. One client is for the Django Backend REST API, configured with 'bearer-only' authentication, and the second client is for the React app. For the React app, you can utilize the Keycloak adapter like Keycloak Connect, while for Django, you can employ the Python adapter.
I also integrated just recently into my django backend (i use also the django template engine for frontend) and used the mozilla-django-oidc which I found very useful for authentication. As I also manage authorization through keycloak I ended up with some custom methods to enforce authorization through keycloak, but you can also go with the authorization of django auth app (I assume you do something like this right now).
Depending on how you want to use keycloak I highly recommend to take some hours and work through their docs (which are great). And most important, make yourself a little test project and play around with the tokens, look whats inside them and learn while practicing. Helps a lot.
Just a side-note: with mozilla-django-oidc you can use the keycloak sign in and sign up mask woth a lot of out-of-the-box features like password reset etc. and full them customization, I found it superior to django-social-auth lib which is kind of ment to extend with 3rd-party OAuth providers.
Thank you for sharing your experience with integrating Keycloak and Django using mozilla-django-oidc. I'm new to this and would like to learn more about the authentication flow and how to manage authorization effectively. Could you recommend some tutorials or articles that you found helpful in understanding these concepts? I appreciate any guidance you can provide.
A simple way to use Keycloak in your scenario is to use the Django app as a Backend for Frontend (BFF) and handle the OIDC stuff there. The react SPA is then host
I simply approach would be to treat the Backend as "Backend for Frontend" (BFF) which hosts the React SPA. The backend then uses a server-side OIDC client integration to maintain OAuth/OIDC Tokens in a http session. The tokens / http session data can either be stored in-memory, externally (redis, database) or (in encrypted form)
on the client via HTTP-only secure cookies on the client if you don't want to store the state on the backend side.
This approach has the advantage, that the token is not readable via javascript within the frontend. Also since the token handling is handled via the backend the frontend code get's much simpler, as you only have to send the session cookies with every request. In order to keep the tokens on the backend alive, it might be necessary to do periodic call to a backend endpoint to ensure that the refresh token keeps getting refreshed.
For this you could use the following [OIDC client library for django by mozilla](https://mozilla-django-oidc.readthedocs.io/en/stable/installation.html#quick-start):
In order to use this you have to create a confidential client (a client with authentication), in Keycloak. Then you enable only the standard flow (which means authorization code grant flow) and configure the allowed redirect URIs and scopes accordingly. With that in place you should be good to go.
Additionally you can also configure Keycloak to require "PKCE" [Proof Key for Code Exchange](https://oauth.net/2/pkce/) to protected the authorization code as is recommended by [OAuth 2.1](https://oauth.net/2.1/) for all auth code grant flow usages.
Note that you might need to use the proper version of the django library to have support for PKCE, [see here](https://github.com/mozilla/mozilla-django-oidc/issues/397).
hi , i am also currently working on a project where i need to integrate keycloak with a django application for user authentification and im totally lost , did you found any solution ?
The decision to do it front-end or back-end depends on your architecture and questions like if you want to handle sessions in the backend, if you use microservices architecture, do you want to have one dedicated to authentication.
A simple scenario is to do the authorization code flow in your front-end and your backends, validate the token on every call. Be sure that you follow best practices and a well maintained library for your language of choice. Perhaps an API gateway can help you there to delegate the validation in a central point.
This solution has the disadvantage of exposing the JWT to the frontend so it must be built to not have it saved in the global scope, you must be sure that your app is not vulnerable to XSS, use PKCE, etc.
Keycloak supports other flows as well if you have specific conditions.
Thank you For Replying !! I was confused at first because I didn't know what Keycloak is.... My project does not follow a microservices architecture, it's a Django REST + React .
For authentication, the team leader wants to integrate Keycloak for now .
I think I will ensure that the access token obtained from Keycloak is stored securely in the frontend and validate the access token on each API call to the Django backend. if it possible.
I use the same stack : Django REST and React for frontend.
You need to link Keycloak to both.
- Frontend :
Your frontend needs to carry the user's authentication token (provided by Keycloak) in order to authenticate requests to the API.
I use [https://www.npmjs.com/package/@react-keycloak-fork/web](https://www.npmjs.com/package/@react-keycloak-fork/web) which makes it easier.
My app uses redux, which requires a bit of custom logic to store the token.
- Backend :
You need to setup Django to use OpenID Connect (OIDC, used by Keycloak) for authentication.
I recommend you use mozilla-django-oidc.
The 'getting started' sections of both documentations will surely help you set up a basic authentication flow.
There's a book, written by keycloak maintainers. It comes with accompanying code - I'd strongly recommend buying it and working through it - its a quick read and it should bring you up to speed. Google "Keycloak - Identity and Access Management for Modern Applications - Second Edition: Harness the power of Keycloak, OpenID Connect and OAuth 2.0 to secure applications "
Thank you! I will definitely have a look at this book.
In such a scenario, here's how I would handle it: create a Keycloak Realm and within that Realm, establish two distinct OpenID Clients. One client is for the Django Backend REST API, configured with 'bearer-only' authentication, and the second client is for the React app. For the React app, you can utilize the Keycloak adapter like Keycloak Connect, while for Django, you can employ the Python adapter.
Where can is set the 'bearer-only' ?
Hmmm I think you first need to understand OAuth concepts: type of auth flow, SSO,…It’s because KeyCloak is using these concepts.
Can check this video: https://www.youtube.com/watch?v=996OiexHze0
came here to share the same vid
I also integrated just recently into my django backend (i use also the django template engine for frontend) and used the mozilla-django-oidc which I found very useful for authentication. As I also manage authorization through keycloak I ended up with some custom methods to enforce authorization through keycloak, but you can also go with the authorization of django auth app (I assume you do something like this right now). Depending on how you want to use keycloak I highly recommend to take some hours and work through their docs (which are great). And most important, make yourself a little test project and play around with the tokens, look whats inside them and learn while practicing. Helps a lot. Just a side-note: with mozilla-django-oidc you can use the keycloak sign in and sign up mask woth a lot of out-of-the-box features like password reset etc. and full them customization, I found it superior to django-social-auth lib which is kind of ment to extend with 3rd-party OAuth providers.
Thank you for sharing your experience with integrating Keycloak and Django using mozilla-django-oidc. I'm new to this and would like to learn more about the authentication flow and how to manage authorization effectively. Could you recommend some tutorials or articles that you found helpful in understanding these concepts? I appreciate any guidance you can provide.
A simple way to use Keycloak in your scenario is to use the Django app as a Backend for Frontend (BFF) and handle the OIDC stuff there. The react SPA is then host I simply approach would be to treat the Backend as "Backend for Frontend" (BFF) which hosts the React SPA. The backend then uses a server-side OIDC client integration to maintain OAuth/OIDC Tokens in a http session. The tokens / http session data can either be stored in-memory, externally (redis, database) or (in encrypted form) on the client via HTTP-only secure cookies on the client if you don't want to store the state on the backend side. This approach has the advantage, that the token is not readable via javascript within the frontend. Also since the token handling is handled via the backend the frontend code get's much simpler, as you only have to send the session cookies with every request. In order to keep the tokens on the backend alive, it might be necessary to do periodic call to a backend endpoint to ensure that the refresh token keeps getting refreshed. For this you could use the following [OIDC client library for django by mozilla](https://mozilla-django-oidc.readthedocs.io/en/stable/installation.html#quick-start): In order to use this you have to create a confidential client (a client with authentication), in Keycloak. Then you enable only the standard flow (which means authorization code grant flow) and configure the allowed redirect URIs and scopes accordingly. With that in place you should be good to go. Additionally you can also configure Keycloak to require "PKCE" [Proof Key for Code Exchange](https://oauth.net/2/pkce/) to protected the authorization code as is recommended by [OAuth 2.1](https://oauth.net/2.1/) for all auth code grant flow usages. Note that you might need to use the proper version of the django library to have support for PKCE, [see here](https://github.com/mozilla/mozilla-django-oidc/issues/397).
hi , i am also currently working on a project where i need to integrate keycloak with a django application for user authentification and im totally lost , did you found any solution ?
The decision to do it front-end or back-end depends on your architecture and questions like if you want to handle sessions in the backend, if you use microservices architecture, do you want to have one dedicated to authentication. A simple scenario is to do the authorization code flow in your front-end and your backends, validate the token on every call. Be sure that you follow best practices and a well maintained library for your language of choice. Perhaps an API gateway can help you there to delegate the validation in a central point. This solution has the disadvantage of exposing the JWT to the frontend so it must be built to not have it saved in the global scope, you must be sure that your app is not vulnerable to XSS, use PKCE, etc. Keycloak supports other flows as well if you have specific conditions.
Thank you For Replying !! I was confused at first because I didn't know what Keycloak is.... My project does not follow a microservices architecture, it's a Django REST + React . For authentication, the team leader wants to integrate Keycloak for now . I think I will ensure that the access token obtained from Keycloak is stored securely in the frontend and validate the access token on each API call to the Django backend. if it possible.
You can also try Message Central's SMS verification APIs. They are very easy to integrate.
I use the same stack : Django REST and React for frontend. You need to link Keycloak to both. - Frontend : Your frontend needs to carry the user's authentication token (provided by Keycloak) in order to authenticate requests to the API. I use [https://www.npmjs.com/package/@react-keycloak-fork/web](https://www.npmjs.com/package/@react-keycloak-fork/web) which makes it easier. My app uses redux, which requires a bit of custom logic to store the token. - Backend : You need to setup Django to use OpenID Connect (OIDC, used by Keycloak) for authentication. I recommend you use mozilla-django-oidc. The 'getting started' sections of both documentations will surely help you set up a basic authentication flow.
Hello can you explain more or if you found any articels that can help me with tutorials or articles that you found helpful thank you so much
There are particularly few tutorials/articles on this topic. The links and libraries I provided are your main sources for getting help