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
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'));"
I am using keycloak-js with Vue. When init keycloak, i had this error: Failed to initialize adapter: Error: Web Crypto API is not available. Could you have any idea to resolve it? Thank you.
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
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
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!
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.
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.
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.
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.
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
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.
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
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 :)
Most comprehensive video on keycloak. Good work.
Thank you. New keycloak video is coming out this week on integrating social logins.
thanks man explained very well and do more videos on keycloak
Thank you for this first class tutorial. No time wasting , good organisation and explainations... Just wahoo.
Thank you 🙌
Very helpful video sir ❤
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
Quick, comprehensive and neat!
Thank you
i would love to see more content about keycloak, thanks for the video
Very nice and really helpful. Please make more of these
Hi,
great video, Thanks a lot for sharing 👌🙏
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 👍
Best explaination on youtube, Thank you!
Thank you
Great work!
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.
Best content. From Russia with Love. It would be great with hand captioning
Thank you 🤗
Hi! Thanks for this great tutorial. You give me a good knowlage to start with
Thank you for taking time to leave a comment 😄
Thanks man, this is a gem of tutorial! Please make a video on how to integrate Keycloak with Active Directory such as AzureAD
This is really helpful. Thanks!
Eye opener indeed....
you save a lot of time to setup auth thanks
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?
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?
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'));"
I am using keycloak-js with Vue. When init keycloak, i had this error: Failed to initialize adapter: Error: Web Crypto API is not available.
Could you have any idea to resolve it? Thank you.
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
Great one!
Thank you
from one login screen i want user to redirect to different realm login page how can we do it.
Great content
when are doing video for rols, group & access controls
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
Awesome guide. Thanks!
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?
awesome, thanks
you're welcome. Thanks for leaving a comment.
Hi I want to have the realms dynamically from user input how to do it please help
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 🙏
Thanks, that's a great video. Could you also cover SAML?
Anyone else getting a cors error at 21:46?
you need to whitelist your servers in keycloak admin panel to prevent CORS issue.
Helo, please can you help make another installation video on the binance triangular arbitrage scanner
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.
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.
you saved my life
Next video about roles etc .. would be greate
Thank you, Sure, I’ll make a video about roles and probably social logins as well.
Excellent video.
Thanks for leaving a comment.
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.
it is working old react version.....??
thanks 🤝
Great!
Good job!
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.
perfect 🙂
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.
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.
very helpful!
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.
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.
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
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.
niceeeeeeee
Really Good Video, Thank you so much (¬‿¬)
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.