Securing a React App with Keycloak | OpenID Connect

[@thelazycomputer99]

Simple, to the point! thanks a lot

[@AliIftikhar-ul1rw]

hats off to you man

[@TheCloudShepherd]

Outstanding

[@luigicerrato6474]

Hi, can you do a new video, there you show us how to use "usekeycloak" to access the current state and other properties in another pages? Thanks a lot it's helpful.

[@EmanueleFaggio]

I follow you! how Can I use Keycloak with the component?

[@hexadefence]

Thanks for the request. It is possible to make kc object available across the whole application so any component can access it.

[@sherifmakalou9690]

Great job ! But how to use our own home page which redirects us towards keycloak authentication when clicking on "Login with keycloak" button for example ?

[@hexadefence]

You need to change 'login-required' option to 'check-sso' option, then you have to create a function to call kc.login() on the login button click.

[@pratheekbanagar4420]

Thanks for making the video, I have a requirement in my project where in I need to login from my custom login page, with spring boot being the backend connected to keycloak, The communication needs to take place with the help of Rest API. Please suggest on how can I achieve this .

[@blacklight8932]

and when would you use oauth2 in this context?

[@hexadefence]

Openid connect protocol works on top of the oauth 2.0.

[@KnowledgePursuitNT]

Thanks a lot, but I have trouble with client authentication (confidential access type) when I turned it on. I can't get the token. Please help me. Thank you.

[@hexadefence]

Making the client confidential is not necessary. React app is loaded in the user's web browser. He can inspect the source code and get the secret easily. Therefore normally web browser clients are kept public.

[@ameenulhaseeb3899]

@@hexadefence Then how can i possible authorization (Scope,Permission,Resource) using React?

[@hexadefence]

Those things can be configured irrespective of the client type.

[@ameenulhaseeb3899]

@@hexadefence When i switch on authorization button.authentication is not working. How can resolve this?

[@user-xg5mt7wz5o]

Greetings, thank you for this tutorial.I have a question regarding proper token validation on the resource server side.Can you tell me how you would implement this.Thank you in advance!

[@hexadefence]

Thanks for the message. For that you need to implement an access token validator in your backend API. That validator will validate things like who issued the token, token expired or not, audience of the token, etc

[@shubhambhosale5937]

At 4.15 while assigning role, I am not getting the admin role, I am getting only offline_access and uma_authorization role, can you help why is it so and what should be my next steps if admin role is not present.

[@hexadefence]

Does the user that you have used to access the keycloak console have admin role?

[@user-xh1cp3fb9c]

can we use these process in react native app for authorization code flow

[@somnathdevdhe5188]

Thanks for providing a detailed video. I need your help to address an issue. I have used the same code as yours. But when I run my application in the browser, first the application page is displayed and later the Keycloak login page is displayed. Do you have any idea where I am making a mistake in the code. Please help me to address the issue. Do let me know if you require any additional information from my end. Thanks in advance.

[@tasbeehaakmal]

Have you resolved this issue?

[@hexadefence]

@tasbeehaakmal typical flow is first the single page app is loaded and after that it redirects to the keycloak login page. Since the time between the two events are very small, application is not visible to the end user. End user feels like he was directly sent to the login screen. Are you experiencing something other than this?

[@seulzarraga8506]

Great, thanks for sharing this video. I'm getting an error when I try to login with a created user. it says "We are sorry... Cookie not found. Please make sure cookies are enabled in your browser." I looked for some info about this error, but I can't get something that make it works. Have you seen it before???

[@hexadefence]

Can the new user access keycloak console?

[@user-jm6eh6ni3g]

Hello! Did you find a solution to this problem? I have the same situation.

[@user-ol9fs8rm8f]

Hello! Where should I pass clientSecret if access is not public?

[@hexadefence]

There is no advantage of using a private client since the application is running on user's web browser. So the user can inspect the code and steal your secret. That is why PKCE method is used to strengthen the security of the public clients.

[@sakthivj1298]

Hi bro How to customise your login form screen in keycloak version 23

[@hexadefence]

You can modify the theme.

[@hamedgorji2529]

Can I have this tutorial source code?

[@hexadefence]

github.com/hexadefence/keycloak-react-example

[@depression_plusplus6120]

Where is this access token and refresh token stored in? ...Cookie? And why does this token gets changed each time I refresh...like in just seconds it changes...wtf

[@hexadefence]

Tokens are not stored in cookies. Changing token in each refresh is the normal behavior

[@uzdik.student]

1:40 How to set up access type?

[@hexadefence]

You can do it from client settings section

[@ductran1954]

I get some errors, I can login but can't authenticate and can't get the token. And when i try catch error , i get undefined....

[@hexadefence]

Can you please post the full error you are getting

[@gnanadeep3605]

same issue. i can login but cant get the token

[@hexadefence]

Can you please post a detailed explanation to the issue?

[@AliIftikhar-ul1rw]

getting the same after login it console the error of unauthorized on get token call. i did exact same step.

[@anchalgupta4362]

Hi I'm facing jwt error token errors Please help me there

[@hexadefence]

Are you having an error related to jwt validation?

[@user-do7zv9fn8f]

because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'

[@mokosandev07]

Hello can you make video keyclock integration with laravel , already subscribe your channel

[@hexadefence]

Thanks for the request. Will produce a one in near future

[@mokosandev07]

thanks @@hexadefence

[@user-jx7gp7cj4b]

thanks bro, can you share your gmail or linkedin profile link

[@hexadefence]

Please check the channel details section for the email