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

In this video I show how to connect a React application to a Spring Cloud Gateway backend using Keycloak as an Authorization Server.

Content:
* What's the difference between the backend authentication workflow and the frontend authentication workflow with Keycloak;
* What's the PKCE Authorization Code Flow;
* How is the API Gateway configured with a connected React application;
* How is the resources server configured to be connected with Keycloak;
* How to connect a React application with Keycloak;
* How to register a public client in Keycloak.

Icons:
* File by Alwin Aulia from Noun Project
* Lock by Aya Sofya from Noun Project
* Police by James Smith from Noun Project

[manee]

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

[katacode]

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

[damjuve]

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

[wanggewg]

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

[techlead_ashu]

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

[Mateusz-dlmr]

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

[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?

[daniellaerachannel]

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

[stanleynyekpeye]

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.

[songbaiyin]

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.

[maxi]

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

[codingstyle]

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?

[poomc]

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

[andreamonte]

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

[treefrog]

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?

[rajeevjayaram]

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

[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.

[rustemzinnatullin]

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

[cristianpadilla]

Hi sergio, have a question, what about registration?

[EugeneZimin]

Video is nice, but if you had less content switched back and fort to your face - it would be way better.