How to SECURE My Microservices Architecture (REACTJS + SPRING CLOUD GATEWAY) With Keycloak

[@manee427]

Finally, find what I looked for. Really thanks and perfect video. keep doing more please

[@TheDevWorldbySergioLema]

Thank you for watching! I will keep doing more video. Don't forget to share to channel to your network 😅

[@camilosilva1010]

Your videos are amazing! Keep doing this great job!

[@TheDevWorldbySergioLema]

Thank you so much Camilo!

[@wanggewg]

Could you please make video to demo BFF pattern ( Backend for FrontEnd). BFF is thought more secure than PKCE flow.

[@TheDevWorldbySergioLema]

I first need to investigate a little bit more about it

[@camilosilva1010]

Thumbs up for this :) I'm currently struggling regard this approach

[@katacode]

Thank you very much. You explain very complicated things in very clear language

[@TheDevWorldbySergioLema]

Thank you! I try my best

[@daniellaerachannel]

in your project you're still on version 2.7.1; any update concerning spring 3.0.2 and keycloak? thanks

[@TheDevWorldbySergioLema]

Oh, didn't see that. I will update it in the repository.

[@codingstyle9480]

Hi, It seems, in this scenario, the role of the cloud gateway api is just to convey the request to different resource server(backend resources) endpoints? It has no contribution to the security. Here the first line of action takes place with the user requesting the react frontend, which redirects the user to keycloak login page if the user not logged in? In some scenarios where the cloud gateway is a part of the security and is the first line of action, and its called BFF(backend for front end) , if I am not mistaken. Is that right?

[@TheDevWorldbySergioLema]

Yes, in this scenario the backend is acting as a BFF, you're right. The security is split between the frontend (as the client server) and the private backend (as the resources server). The API gateway is only there to redirect the requests

[@andreamonte851]

Hi! I have a doubt. I have a Web site that must access protected API. I have a Spring Cloud gateway and some microservices and here I implemented the authorization based on roles.. Now I followed the way to register the Gateway as confidential client on Keycloak and store in it client_id and secret_id. I was wondering if this way was better and what the differences were. Thanks

[@TheDevWorldbySergioLema]

Using the authentication with Keycloak is very useful if you have many different applications (clients) which need this same authentication. If you only have one application (client), maybe putting all the authentication logic inside may reduce the complexity. But, using Keycloak is using a string authentication system, OAuth2. Which was tested for many years. Using you own authentication system means that you must take care of the security breaches. What I recommend? It depends on you (and your team): * if you need the same authentication system for many application -> use Keycloak * if you don't know much about security breaches or authentication systems -> use Keycloak * otherwise -> use a simple authentication system inside you already existing application Hope this will help you

[@andreamonte851]

@@TheDevWorldbySergioLema what the client scope is for? Is it mandatory?

[@TheDevWorldbySergioLema]

It's not mandatory. You can let the value to profile, name, email or openid. It says what kind of information you want to fetch from the User's profile.

[@treefrog9392]

How do you allow post requests using this keycloak flow? I am always getting back a missing csrf token error. Any idea how to configure this or to disable csrf?

[@TheDevWorldbySergioLema]

To allow the POST requests, make sure to allow the CORS in the application.yml of the Gateway. About the CSRF, I din't anything particular, it was disable by defautl.

[@stanleynyekpeye5318]

Thanks for the video. However, I have a question. Is there a way to login to keycloak without redirecting to the keycloak login page? I have a custom login screen in my ReactJS app and I want to make use of it instead.

[@TheDevWorldbySergioLema]

Yes, you can configure a custom login page in Keycloak

[@stanleynyekpeye5318]

@@TheDevWorldbySergioLema Ok. How do I go about it?

[@TheDevWorldbySergioLema]

I didn't try it, but this seems to be what you're looking for: www.baeldung.com/keycloak-custom-login-page

[@maxi331]

Hello! i'm trying to replay this situation and i have a CORS issue. Any idea?

[@TheDevWorldbySergioLema]

Do you use the Spring Cloud Api Gateway? Or directly Spring Security? If you use Spring Security, check this other video where I configure the CORS: kzbin.info/www/bejne/ppnWamOVqJWAoM0

[@PatrikM]

Hey Sergio, thanks for a great tutorial. I've been looking for one covering both a backend and frontend connected to keycloak. I was wondering how you would implement redirect when logging out? As of this tutorial the logout button works but it doesn't take you back to the index page. I've been trying to use your solution for the signin callback, but with no luck. How would you implement the callback for logout?

[@TheDevWorldbySergioLema]

Hi Rekishi, thanks for your interest. I didn't try to the logout, but it's a good question. Did you check the settings of the frontend oidc-client library post_logout_redirect_uri (github.com/IdentityModel/oidc-client-js/wiki)? Maybe just adding this configuration when creating the frontend client is enough. If that's the case, let me know your feedbacks.

[@PatrikM]

@@TheDevWorldbySergioLema Thanks for the quick reply. I managed to solve it for now by adding the "post_logout_redirect_uri:" field to settings when creating the UserManager, then setting the same url in Keycloak and copying your signin-callback.html page and remaking it for using "signoutRedirectCallback()"

[@TheDevWorldbySergioLema]

Glad it worked so easily!

[@damjuve13]

now i know how to implement pkce authorization with react ! thanks !

[@TheDevWorldbySergioLema]

Glad it helped you!

[@Mateusz-dl1mr]

Great tutorial! But I have one question, what if there is multiple backend resources? Do i need to add security config in each microservice?

[@TheDevWorldbySergioLema]

Yes, all the resources servers you have need the configuration to be able to talk with Keycloak.

[@Mateusz-dl1mr]

@@TheDevWorldbySergioLema ok but what if there is for example 50 resources that have to be secured? Copy paste code in each? 😅

[@TheDevWorldbySergioLema]

Yes 😅. But you can also add a Config Server, kzbin.info/www/bejne/pmeYpmeqZ5t1eMU

[@Mateusz-dl1mr]

@@TheDevWorldbySergioLema I see but it wouldnt be better to configure api gateway as resource server and there provides configuration to secure some of services? It seems to be best solution if Spring Cloud Api Gateway is an entry point

[@TheDevWorldbySergioLema]

You're right, i will try to implement this solution

[@RohitMore-t5q]

what if my frontend request will be with https ?

[@TheDevWorldbySergioLema]

This should change. You need to add the SSL certificate to Keycloak and the Gateway

[@poomc5462]

Really great tutorial! Is there a way to create my own React login screen that could be used with keycloak? Thanks!

[@TheDevWorldbySergioLema]

Thanks! Yes you can create your own React login page. Then, in Keycloak, you can select the login page where the user will be redirected.

[@rajeevjayaram4981]

Great Video. It helped me a lot...We are planning to use Spring 3.1 Authorization server . I am tryin to use the React Code to connect to Spring Auth server. Login Screen is comming and the login is successful.. but in the end I am getting the following error in the signin-callback.html : No matching state found in storage. Could you please tell me how to fix this issue. With Keycloak it is fine....Thanks

[@TheDevWorldbySergioLema]

Thank you Rajeev. I've been looking around and found this information (github.com/IdentityModel/oidc-client-js/issues/1044). It seems to be the cookies.

[@arunadl143]

great tutorial!!.

[@TheDevWorldbySergioLema]

Thank you!

[@AlexanderKurguzkin]

Thank you, very useful!

[@TheDevWorldbySergioLema]

Thank you!

[@sinanbenlibas161]

So can I login without redirecting?

[@TheDevWorldbySergioLema]

Do you mean having a login form integrated inside the frontend without the redirection to the login page of Keycloak?

[@sinanbenlibas161]

@@TheDevWorldbySergioLema just like you said

[@TheDevWorldbySergioLema]

I don't if configuring a custom login page in Keycloak is enough. I never did it, so I can't tell you if it works.

[@sinanbenlibas161]

@@TheDevWorldbySergioLema thank you i have last question You have installed keycloak legacy version . Would it be a problem if we use the release version?

[@TheDevWorldbySergioLema]

I don't thing there is much difference

[@cyper0418]

Agree, I think resource server brings us too much overhead given microservices in reality hides behind the gateway and frontend cannot access it directly. So I would like to see a solution where we only parse the token in gateway once via some filter. And then pass the the resolved userId to microservcies through some http header(Not pass token, this way we don't need to set each and every micro-service as a resource server.

[@TheDevWorldbySergioLema]

Yes, I will try to implement this way. I've already done something similar, with a single JWT, but not with OAuth2 and Keycloak.

[@istvanduro3394]

Hy! Any update on this? Sorry for bothering you.

[@TheDevWorldbySergioLema]

It's planned, but i didn't started yet

[@techlead_ashu]

TUSM. Great content. Just one thing - you have been writing OIDC, Open ID Connect ... but you pronounce OI-SEE-d, lol xD

[@TheDevWorldbySergioLema]

😂 Yes, I saw that when writing the subtitles

[@poseidonzf]

Could gateway be also a resource server so it can validate tokens? In my case I get Cors error: Missing allow origin header in preflight request, I already tried several ways to enable Cors with no luck.

[@TheDevWorldbySergioLema]

Yes, someone already told me about this alternative. I will try to make another video with this solution. About the CORS problem, you must configure them in both the api gateway and keycloak. Try with different browsers (sometimes they act differently).

[@mariomatejovic2190]

Hey , have you been able to mange that cors issue ?

[@ismailforeveryone6889]

Good job keep going

[@TheDevWorldbySergioLema]

Thank you!

[@jonathanmoore4837]

Thanks for video

[@TheDevWorldbySergioLema]

Hope it helped you!

[@rustemzinnatullin6941]

ITM - Всем здарова! Вам тоже сложно даются видосы на инглише?

[@telongrestur9110]

logout redirect not working??

[@TheDevWorldbySergioLema]

I didn't try the logout. Have you any message describing the error? Or nothing is shown?

[@telongrestur9110]

@@TheDevWorldbySergioLema Like logout was working but it was not redirect back to app, I have to set post logout redirect url and it worked. Thanks for the video.

[@TheDevWorldbySergioLema]

Thanks for your feedback!

[@techlead_ashu]

Thank you so much :)

[@TheDevWorldbySergioLema]

I'm so glad you liked it!

[@cristianpadilla2069]

Hi sergio, have a question, what about registration?

[@TheDevWorldbySergioLema]

It must be done directly in Keycloak.

[@TheDevWorldbySergioLema]

You can see it in this video, kzbin.info/www/bejne/j3m6l31-gKyMfas

[@cristianpadilla2069]

@@TheDevWorldbySergioLema thanks sergio, so every user that wants to use my application must first register on keycloak? let´s say an E-comerce

[@TheDevWorldbySergioLema]

Yes, that's the goal of an SSO, you use keycloak just to sign, not to register. If you want to register the users in your application and manage their accounts, it's another authentication system you need

[@DivinePositives]

If possible to rubyonrails

[@TheDevWorldbySergioLema]

Oh no! Please, no, not rubyonrails

[@TheDevWorldbySergioLema]

😅🙏

[@ThePazuzu]

Why do all keycloak teachers think we all use java?

[@TheDevWorldbySergioLema]

🤣 In fack, my channel is mainly about Java, and I've done a few videos with Keycloak. Which language are you looking for?

[@ThePazuzu]

@@TheDevWorldbySergioLema I'm a Rails or Express guy so maybe JavaScript or Ruby.

[@ThePazuzu]

@@TheDevWorldbySergioLema the keycloak documentation is terrible and I've wasted weeks trying to figure out how to integrate a rails api with a react frontend with keycloak. One of the worst documented projects I've ever seen.

[@TheDevWorldbySergioLema]

It's not well documented. But once you've started and configured Keycloak, what you need to know is the OAuth2 protocol with whatever language.