Securing a React App with Keycloak | OpenID Connect

Поделиться
HTML-код
  • Опубликовано: 6 ноя 2024

Комментарии • 59

  • @TheWorldsFare1
    @TheWorldsFare1 16 дней назад

    Very succinct. Thank you!

  • @blacklight8932
    @blacklight8932 7 месяцев назад +2

    and when would you use oauth2 in this context?

    • @hexadefence
      @hexadefence  7 месяцев назад +1

      Openid connect protocol works on top of the oauth 2.0.

  • @coding-jungle
    @coding-jungle 28 дней назад

    great work buddy!

  • @luigicerrato6474
    @luigicerrato6474 11 месяцев назад +3

    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
      @EmanueleFaggio 11 месяцев назад +1

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

    • @hexadefence
      @hexadefence  11 месяцев назад +1

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

  • @sherifmakalou9690
    @sherifmakalou9690 4 месяца назад +1

    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
      @hexadefence  4 месяца назад +1

      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.

  • @AliIftikhar-ul1rw
    @AliIftikhar-ul1rw 3 месяца назад

    hats off to you man

  • @pratheekbanagar4420
    @pratheekbanagar4420 4 месяца назад

    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 .

  • @thelazycomputer99
    @thelazycomputer99 4 месяца назад

    Simple, to the point!
    thanks a lot

  • @TheCloudShepherd
    @TheCloudShepherd 8 месяцев назад +1

    Outstanding

  • @ГрыняДрыня
    @ГрыняДрыня 9 месяцев назад

    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
      @hexadefence  9 месяцев назад +2

      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

  • @KnowledgePursuitNT
    @KnowledgePursuitNT 3 месяца назад +1

    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
      @hexadefence  3 месяца назад

      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
      @ameenulhaseeb3899 3 месяца назад

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

    • @hexadefence
      @hexadefence  3 месяца назад

      Those things can be configured irrespective of the client type.

    • @ameenulhaseeb3899
      @ameenulhaseeb3899 3 месяца назад

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

  • @rohithgoud-e4p
    @rohithgoud-e4p 7 месяцев назад

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

  • @AkulaYamini
    @AkulaYamini 3 дня назад

    I am getting is authenticated as false even after assigning the roles ,I did not change any code can I know what is the problem

    • @hexadefence
      @hexadefence  3 дня назад

      Did you check whther you are receiving the tokens from Kecycloak after authentication?

  • @shubhambhosale5937
    @shubhambhosale5937 3 месяца назад

    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
      @hexadefence  3 месяца назад

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

    • @w_knd
      @w_knd Месяц назад

      Change "Filter by clients" to "Filter by realm roles".

  • @seulzarraga8506
    @seulzarraga8506 7 месяцев назад

    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
      @hexadefence  7 месяцев назад

      Can the new user access keycloak console?

    • @НикитаЮрков-э9з
      @НикитаЮрков-э9з 6 месяцев назад

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

  • @somnathdevdhe5188
    @somnathdevdhe5188 11 месяцев назад

    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
      @tasbeehaakmal 4 месяца назад

      Have you resolved this issue?

    • @hexadefence
      @hexadefence  4 месяца назад

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

  • @sakthivj1298
    @sakthivj1298 8 месяцев назад

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

    • @hexadefence
      @hexadefence  8 месяцев назад +1

      You can modify the theme.

  • @ИщенкоАндрей-и9й
    @ИщенкоАндрей-и9й 11 месяцев назад

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

    • @hexadefence
      @hexadefence  11 месяцев назад

      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.

  • @depression_plusplus6120
    @depression_plusplus6120 10 месяцев назад

    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
      @hexadefence  9 месяцев назад

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

  • @ductran1954
    @ductran1954 11 месяцев назад

    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
      @hexadefence  11 месяцев назад

      Can you please post the full error you are getting

    • @gnanadeep3605
      @gnanadeep3605 8 месяцев назад +1

      same issue. i can login but cant get the token

    • @hexadefence
      @hexadefence  8 месяцев назад

      Can you please post a detailed explanation to the issue?

    • @AliIftikhar-ul1rw
      @AliIftikhar-ul1rw 3 месяца назад

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

  • @hamedgorji2529
    @hamedgorji2529 Год назад +1

    Can I have this tutorial source code?

    • @hexadefence
      @hexadefence  Год назад +2

      github.com/hexadefence/keycloak-react-example

  • @anchalgupta4362
    @anchalgupta4362 8 месяцев назад

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

    • @hexadefence
      @hexadefence  8 месяцев назад

      Are you having an error related to jwt validation?

  • @uzdik.student
    @uzdik.student 5 месяцев назад

    1:40 How to set up access type?

    • @hexadefence
      @hexadefence  5 месяцев назад

      You can do it from client settings section

  • @YATENDRAKUMAR-e4i
    @YATENDRAKUMAR-e4i 3 месяца назад

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

    • @hexadefence
      @hexadefence  7 дней назад

      This error is shown even when the redirect url is incorrect.

    • @hexadefence
      @hexadefence  7 дней назад

      This error is shown even when the redirect url is incorrect.

  • @mokosandev07
    @mokosandev07 10 месяцев назад

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

    • @hexadefence
      @hexadefence  9 месяцев назад +1

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

    • @mokosandev07
      @mokosandev07 9 месяцев назад

      thanks @@hexadefence

  • @RaisanJM-w4s
    @RaisanJM-w4s Год назад +1

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

    • @hexadefence
      @hexadefence  Год назад +1

      Please check the channel details section for the email