This video was taken down due to a false copyright strike and was unavailable for the past two weeks. The issue is resolved and TH-cam just restored the video. Thanks for all the support. 🙏
Quality content right here. I was struggling to find a good tutorial on this, but your approach is actually well thought out and very thorough. I love how you show a hands-on implementation of react using keycloak. Pretty sure no other tutorial on youtube has this so far, and I really appreciate it!
19:45 thanks that helped a lot!! I had first learnt React over two years ago and didn't know they changed the behavior of useEffect :// I was pulling my hair out over all that refreshing
You are a life saver! I have struggled with the strict mode for so long I even tried removing it but this solved my issue. I'm using next.js & keycloak implemented in a java backend
i am facing in error while configuring keycloak. For once the keycloak login is working but after login it is showing public page only and No 'Access-Control-Allow-Origin' header is present on the requested resource. this error is being displayed in console. ANYONE PLEASE HELP ME OUT> I M STUCK IN THIS FOR 3 DAYS
Perfect session, to the point info, Thank You so much!!! do you conduct keycloak trainings, I want to take a training ,please share your contact details, Thanks
Great tutorial! I encountered an issue with authentication: even tho the authentication was successful, I was always redirected to the public page. I managed to solve it by putting the character '+' in the web origins, so that it uses the authorised redirect URIs as web origins! Hope this helps!
please sir for some reason, i have followed your content till the end but my browser keeps displaying a blank page.. the public or protected text does not even sure at first ... i don't know how your is showing but mine is not
Hi ! thanks a lot for this video. I am stuck @21:30 because after logged in, I access the public page and not the protected page. F12 (in Firefox) reveals this error : "Reason: CORS header 'Access-Control-Allow-Origin' missing". After verification, my code and settings are the same as yours. Have you got an idea to fix this error ? Has it a link with Keycloak settings ? Could you please share your source code via a Github repo ?
Managed to fix it - instead of putting the client URL into Web Origins just type + That adds all the valid redirect URIs that you defined to the Web Origins headers. As long as you have the correct Redirect URI as outlined in the video, you’ll get past it.
This is a great video, thanks but, I have a problem with 37:09 . Probably the problem in authenticate.js, and this is my problem => "return done(new JsonWebTokenError('jwt malformed'));"
Great content but I think that the logic you took to protect the backend route is not good because you just check if the token is provided and then decode it, this way I can use the backend route with a fake jwt and it's gonna work. Correct me if I'm wrong 😅
I explained this point at @27:55. AFAIK, you cannot fake jwt. The JWT token only gets generated by the private key associated with the realm, when the login is successful. So the token itself serves as the auth validator. There is however a risk that someone can steal the token to gain access to the backend system.
rest assure jwt tokens are fully secure because the client doesn't know the secret key that is used to sign tokens you can't really fake a jwt. In this case keycloak is verifying the signature, that's how it knows it hasn't been tampered with. the signature is base64 header + base64 payload, you manually change any of these and it will cause an error. If jwt's were insecure, pretty much 90% of the internet would be vulnerable lol.
Thanks for this video , its smark work :) i need small help , how we need validate the token , from backed . from the video , you did from publick key and decode the token and getting user name . need to know , the given token is valide for current login user . please support .
The decode fail if the token expires. So include token validation on every authenticated backend route, and implement front end logic to logout the user when the token expires. You can also call the logout method on keycloak client, if you wish you manually logout user.
hey man, really helpfull video but i have one question. From what i see you didnt surround you app with ReactKeycloakProvider, is it necessary beacuse when I try to do it it just keeps refreshinf the page infinitly
You don't need to wrap your app component with ReactKeycloakProvider. Page reloading could be an issue with allow origin. Ensure your urls are whitelisted at the client level.
The url is the base url of the server where keycloak is running. If you are running on localhost on port 4000, it will be 127.0.0.1:4000/. If you are running on a server, you can replace ip and port number with the domain name. If you have nginx or some kind of load balancer, you may also specify the path (route) that fits your server side config.
12:43 on writing 14th line i get blank on the browser and there is a error in console saying unmatched client I'd even though I have given correct one. Please help me with this
@@redpirates2664 check if you specified the correct realm in environment variables. Also, console log and verify that the variables are passed correctly. They can be undefined if not passed correctly.
I am using keycloak in nodeJS, 1)whichever request is below of keycloak.middlwere, whether if it is open(without --> keycloak.protect('role')) that request is requiring any token() ...and... 2) if i dont provide any token (i.e noAuth) from postman it is throwing 500 internal server crash error ( saying keyclock-token is undefined) instead of 401 unauthorised for every request(even though for keyclock.protect('role')),....why should I require token which are public to all? I am not getting ans for this on internet pls help
In your case, I suggest to carve out the token validation part of the code to a middleware and use it only for routes which need to be protected. That way, you don't need to pass the token for public routes.
New video on integrating social logins is up. Link is in the description box.
This video was taken down due to a false copyright strike and was unavailable for the past two weeks. The issue is resolved and TH-cam just restored the video. Thanks for all the support. 🙏
Quality content right here. I was struggling to find a good tutorial on this, but your approach is actually well thought out and very thorough.
I love how you show a hands-on implementation of react using keycloak. Pretty sure no other tutorial on youtube has this so far, and I really appreciate it!
Thank you for taking time to share your feedback.
This is great, man. Thanks for the detailed concise tutorial.
thank you so much for sharing this! they way you explain these concepts is so easy to follow!
thank you :)
Quick, comprehensive and neat!
Thank you
Thank you for this first class tutorial. No time wasting , good organisation and explainations... Just wahoo.
Thank you 🙌
thanks man explained very well and do more videos on keycloak
19:45 thanks that helped a lot!! I had first learnt React over two years ago and didn't know they changed the behavior of useEffect :// I was pulling my hair out over all that refreshing
Most comprehensive video on keycloak. Good work.
Thank you. New keycloak video is coming out this week on integrating social logins.
Eye opener indeed....
Hi,
great video, Thanks a lot for sharing 👌🙏
Very nice and really helpful. Please make more of these
i would love to see more content about keycloak, thanks for the video
You are a life saver! I have struggled with the strict mode for so long I even tried removing it but this solved my issue. I'm using next.js & keycloak implemented in a java backend
Best explaination on youtube, Thank you!
Thank you
Thank you! Very detailed explanation. I’m new to keycloak and this helped.
When you covered the hook running multiple times in newer React versions, and how to solve it with ref, that was golden 👍
awesome, thanks
you're welcome. Thanks for leaving a comment.
you save a lot of time to setup auth thanks
Great one!
Thank you
This is really helpful. Thanks!
Hi! Thanks for this great tutorial. You give me a good knowlage to start with
Thank you for taking time to leave a comment 😄
Great content
Awesome guide. Thanks!
Best content. From Russia with Love. It would be great with hand captioning
Thank you 🤗
Thanks man, this is a gem of tutorial! Please make a video on how to integrate Keycloak with Active Directory such as AzureAD
Great Job Bro! I Had trouble debugging my config, because I had some whitespaces in the Web origins uri😂
Haha, been there. Glad its resolved now🙌
can you please help me out
@@shachimandloi8373 how can I help?
thanks 🤝
Great!
you saved my life
perfect 🙂
Amazing,
Please do a tutorial on Keycloak Admin Rest API
Thank you so much for efforts.
Excellent tutorial! Is there a way to further customize the login page, like custom styles etc?
Excellent video.
Thanks for leaving a comment.
very helpful!
Good job!
Next video about roles etc .. would be greate
Thank you, Sure, I’ll make a video about roles and probably social logins as well.
when are doing video for rols, group & access controls
i am facing in error while configuring keycloak. For once the keycloak login is working but after login it is showing public page only and No 'Access-Control-Allow-Origin' header is present on the requested resource. this error is being displayed in console.
ANYONE PLEASE HELP ME OUT> I M STUCK IN THIS FOR 3 DAYS
even i have ensured that i wrote correct url in all 3 web origin, redirecting uri and post logout redirect
@karthik947 same issue here
Really Good Video, Thank you so much (¬‿¬)
Thanks, that's a great video. Could you also cover SAML?
Why every time when I reload page I need to reauthenticacte, but you in video didn't have to do that?
thank you for this awesome tutorial. is there any keycloak plugin for Strapi CMS?
Perfect session, to the point info, Thank You so much!!!
do you conduct keycloak trainings, I want to take a training ,please share your contact details, Thanks
Great tutorial! I encountered an issue with authentication: even tho the authentication was successful, I was always redirected to the public page. I managed to solve it by putting the character '+' in the web origins, so that it uses the authorised redirect URIs as web origins! Hope this helps!
@guillaume7448 @sadokabdelbasset3226 @vasudev1918 @shachimandloi8373 hope this works for you!
Thanks for sharing 🙏
please sir for some reason, i have followed your content till the end but my browser keeps displaying a blank page.. the public or protected text does not even sure at first ...
i don't know how your is showing but mine is not
niceeeeeeee
Hi ! thanks a lot for this video.
I am stuck @21:30 because after logged in, I access the public page and not the protected page. F12 (in Firefox) reveals this error : "Reason: CORS header 'Access-Control-Allow-Origin' missing". After verification, my code and settings are the same as yours. Have you got an idea to fix this error ? Has it a link with Keycloak settings ?
Could you please share your source code via a Github repo ?
CORS issue occurs when your app url is not listed in the allowable origins, under realm settings.
Sure, I'll share the code soon.
hello, i also got the same problem, did you solve it ?
I had the same error...have you solved it?
@@karthik947 hey have you had a chance to update the code? I got the same issue... thanks for the tutorial tho!
Managed to fix it - instead of putting the client URL into Web Origins just type +
That adds all the valid redirect URIs that you defined to the Web Origins headers. As long as you have the correct Redirect URI as outlined in the video, you’ll get past it.
Hi I want to have the realms dynamically from user input how to do it please help
It would be very nice to cover all topics like a long video. because it is hard to find a good reference on TH-cam about this
Thank you sir. I'm planning to make more extended tutorial videos like these. So stay tuned.
This is a great video, thanks but, I have a problem with 37:09 . Probably the problem in authenticate.js, and this is my problem => "return done(new JsonWebTokenError('jwt malformed'));"
Thanks for the video.
Can you make a video regarding the identity providers.
Thank you. Im working on a few other videos now, but I’ll add it to the list.
Great content but I think that the logic you took to protect the backend route is not good because you just check if the token is provided and then decode it, this way I can use the backend route with a fake jwt and it's gonna work. Correct me if I'm wrong 😅
I explained this point at @27:55. AFAIK, you cannot fake jwt. The JWT token only gets generated by the private key associated with the realm, when the login is successful. So the token itself serves as the auth validator. There is however a risk that someone can steal the token to gain access to the backend system.
rest assure jwt tokens are fully secure because the client doesn't know the secret key that is used to sign tokens you can't really fake a jwt. In this case keycloak is verifying the signature, that's how it knows it hasn't been tampered with. the signature is base64 header + base64 payload, you manually change any of these and it will cause an error. If jwt's were insecure, pretty much 90% of the internet would be vulnerable lol.
@@nobytes2 lol, true.
Helo, please can you help make another installation video on the binance triangular arbitrage scanner
Thanks for this video , its smark work :)
i need small help , how we need validate the token , from backed .
from the video , you did from publick key and decode the token and getting user name .
need to know , the given token is valide for current login user .
please support .
The decode fail if the token expires. So include token validation on every authenticated backend route, and implement front end logic to logout the user when the token expires. You can also call the logout method on keycloak client, if you wish you manually logout user.
hey man, really helpfull video but i have one question. From what i see you didnt surround you app with ReactKeycloakProvider, is it necessary beacuse when I try to do it it just keeps refreshinf the page infinitly
You don't need to wrap your app component with ReactKeycloakProvider. Page reloading could be an issue with allow origin. Ensure your urls are whitelisted at the client level.
it is working old react version.....??
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. how to solve this problem?
Whitelist your apps url in allowable urls, in the client tab.
This video is the best. But how can we logout in react?
Thank you. There is a .logout() method which you can call to trigger logout.
Anyone else getting a cors error at 21:46?
you need to whitelist your servers in keycloak admin panel to prevent CORS issue.
Hi how does one store this configuration for production?
I showed towards the end how you can import export configuration to a json file. That becomes your backup, which you can use to immediately restore.
Where do i get that url for key cloack from in env file ?
The url is the base url of the server where keycloak is running. If you are running on localhost on port 4000, it will be 127.0.0.1:4000/. If you are running on a server, you can replace ip and port number with the domain name. If you have nginx or some kind of load balancer, you may also specify the path (route) that fits your server side config.
12:43 on writing 14th line i get blank on the browser and there is a error in console saying unmatched client I'd even though I have given correct one. Please help me with this
@@redpirates2664 check if you specified the correct realm in environment variables. Also, console log and verify that the variables are passed correctly. They can be undefined if not passed correctly.
Brother nenga tamil'a?
No brother, I don't speak Tamil.
Keycloak used to be good
I am using keycloak in nodeJS, 1)whichever request is below of keycloak.middlwere, whether if it is open(without --> keycloak.protect('role')) that request is requiring any token() ...and... 2) if i dont provide any token (i.e noAuth) from postman it is throwing 500 internal server crash error ( saying keyclock-token is undefined) instead of 401 unauthorised for every request(even though for keyclock.protect('role')),....why should I require token which are public to all? I am not getting ans for this on internet pls help
Is a token public?
In your case, I suggest to carve out the token validation part of the code to a middleware and use it only for routes which need to be protected. That way, you don't need to pass the token for public routes.
@@karthik947 Yes sir, thank you for replying I got the answer and I did the same as you suggested and it's working as per requirement now, thank you.