Keycloak - A gentle introduction to Keycloak using Vite+React, NodeJS

[@karthik947]

New video on integrating social logins is up. Link is in the description box.

[@karthik947]

This video was taken down due to a false copyright strike and was unavailable for the past two weeks. The issue is resolved and KZbin just restored the video. Thanks for all the support. 🙏

[@mithogui]

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!

[@karthik947]

Thank you for taking time to share your feedback.

[@miguelperezpalacios]

thank you so much for sharing this! they way you explain these concepts is so easy to follow!

[@karthik947]

thank you :)

[@ammo8600]

Most comprehensive video on keycloak. Good work.

[@karthik947]

Thank you. New keycloak video is coming out this week on integrating social logins.

[@EklakDangaura]

This is great, man. Thanks for the detailed concise tutorial.

[@lorenzmuller5083]

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

[@rosmicknangue9219]

Thank you for this first class tutorial. No time wasting , good organisation and explainations... Just wahoo.

[@karthik947]

Thank you 🙌

[@editinghuman7574]

Very helpful video sir ❤

[@EdouardCarvalho82]

Quick, comprehensive and neat!

[@karthik947]

Thank you

[@andrews13]

Great work!

[@kondraramesh]

thanks man explained very well and do more videos on keycloak

[@davinchocamaron646]

i would love to see more content about keycloak, thanks for the video

[@jamallmahmoudi9481]

Hi, great video, Thanks a lot for sharing 👌🙏

[@manee427]

Very nice and really helpful. Please make more of these

[@ZacharyBetz]

Thank you! Very detailed explanation. I’m new to keycloak and this helped.

[@ZacharyBetz]

When you covered the hook running multiple times in newer React versions, and how to solve it with ref, that was golden 👍

[@samarbid13]

Best explaination on youtube, Thank you!

[@karthik947]

Thank you

[@mbuguathedev]

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

[@centrumsaiyan7623]

Great content

[@adrianorobson6365]

Hi! Thanks for this great tutorial. You give me a good knowlage to start with

[@karthik947]

Thank you for taking time to leave a comment 😄

[@otisrancko]

Eye opener indeed....

[@Ayush-jb1gr]

Great one!

[@karthik947]

Thank you

[@aitt3795]

awesome, thanks

[@karthik947]

you're welcome. Thanks for leaving a comment.

[@nageshsingh5996]

Great work, can you create or provide a link to video on creating an encrypted key?

[@guillaume7558]

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 ?

[@karthik947]

CORS issue occurs when your app url is not listed in the allowable origins, under realm settings. Sure, I'll share the code soon.

[@sadokabdelbasset3226]

hello, i also got the same problem, did you solve it ?

[@vasudev1918]

I had the same error...have you solved it?

[@clarissadesimoni]

@@karthik947 hey have you had a chance to update the code? I got the same issue... thanks for the tutorial tho!

[@Deathborn_]

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.

[@ziggizaggazulu5498]

Great Job Bro! I Had trouble debugging my config, because I had some whitespaces in the Web origins uri😂

[@karthik947]

Haha, been there. Glad its resolved now🙌

[@shachimandloi8373]

can you please help me out

[@ziggizaggazulu5498]

@@shachimandloi8373 how can I help?

[@light.yagami787]

This is really helpful. Thanks!

[@shachimandloi8373]

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

[@shachimandloi8373]

even i have ensured that i wrote correct url in all 3 web origin, redirecting uri and post logout redirect

[@ahmedtawfik4324]

@karthik947 same issue here

[@donottrackmepls]

Awesome guide. Thanks!

[@timur_nurzhanov]

Best content. From Russia with Love. It would be great with hand captioning

[@karthik947]

Thank you 🤗

[@waterfire2640]

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.

[@TimFrischIsHere]

Excellent video.

[@karthik947]

Thanks for leaving a comment.

[@suryapratap3622]

you save a lot of time to setup auth thanks

[@nkwajudetambe5514]

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

[@Tomaszne]

Great!

[@AmanVerma-q9i]

how keycloak create a token for us can you give me a bit of idea about it? as i want a access token which i can pass it in my api .

[@emirsalihovic6616]

Excellent tutorial! Is there a way to further customize the login page, like custom styles etc?

[@xmax77]

thanks 🤝

[@martinsteve4174]

from one login screen i want user to redirect to different realm login page how can we do it.

[@premierde]

when are doing video for rols, group & access controls

[@arturzhukovets7951]

Why every time when I reload page I need to reauthenticacte, but you in video didn't have to do that?

[@shubhamtarade]

Thanks man, this is a gem of tutorial! Please make a video on how to integrate Keycloak with Active Directory such as AzureAD

[@madpassager607]

perfect 🙂

[@kamil8263]

you saved my life

[@dipalikumari7777]

Hi I want to have the realms dynamically from user input how to do it please help

[@maximlopin]

very helpful!

[@ИщенкоАндрей-и9й]

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. how to solve this problem?

[@karthik947]

Whitelist your apps url in allowable urls, in the client tab.

[@sve_ful3101]

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

[@karthik947]

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.

[@quasicode6954]

Anyone else getting a cors error at 21:46?

[@karthik947]

you need to whitelist your servers in keycloak admin panel to prevent CORS issue.

[@raselhossain8855]

thank you for this awesome tutorial. is there any keycloak plugin for Strapi CMS?

[@Pythonmaster-n4d]

Thank you for the video. How has error with CORS just remove last slash from the Web Origin. If after that you have infinite loop of reloading, check your keycloak-js version. The version of keycloak and kecloak-js should be the same. Good luck!

[@abessesmahi4888]

Amazing, Please do a tutorial on Keycloak Admin Rest API Thank you so much for efforts.

[@onajobigideon5277]

Helo, please can you help make another installation video on the binance triangular arbitrage scanner

[@VizivikRu]

Good job!

[@burakdemir9060]

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'));"

[@rakeshpuli1560]

it is working old react version.....??

[@clarissadesimoni]

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!

[@clarissadesimoni]

@guillaume7448 ​@sadokabdelbasset3226 @vasudev1918 ​@shachimandloi8373 hope this works for you!

[@karthik947]

Thanks for sharing 🙏

[@ПавелКривальцевич-ь1р]

This video is the best. But how can we logout in react?

[@karthik947]

Thank you. There is a .logout() method which you can call to trigger logout.

[@manee427]

Next video about roles etc .. would be greate

[@karthik947]

Thank you, Sure, I’ll make a video about roles and probably social logins as well.

[@balasubramani9310]

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 .

[@karthik947]

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.

[@v13-dd1nz]

Hi how does one store this configuration for production?

[@karthik947]

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.

[@cloccawoerc]

Thanks, that's a great video. Could you also cover SAML?

[@redpirates2664]

Where do i get that url for key cloack from in env file ?

[@karthik947]

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.

[@redpirates2664]

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

[@karthik947]

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

[@MedElMobarik]

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 😅

[@karthik947]

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.

[@nobytes2]

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.

[@karthik947]

@@nobytes2 lol, true.

[@japan9169]

Thanks for the video. Can you make a video regarding the identity providers.

[@karthik947]

Thank you. Im working on a few other videos now, but I’ll add it to the list.

[@СамадбекЮлдашев]

niceeeeeeee

[@c1i2s3c4o5]

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

[@JoyKarmakar-zo7im]

Really Good Video, Thank you so much (¬‿¬)

[@manee427]

It would be very nice to cover all topics like a long video. because it is hard to find a good reference on KZbin about this

[@karthik947]

Thank you sir. I'm planning to make more extended tutorial videos like these. So stay tuned.

[@sujan.t3241]

Brother nenga tamil'a?

[@karthik947]

No brother, I don't speak Tamil.

[@tvpi-z1v]

Keycloak used to be good

[@omkarkadam3334]

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

[@JaneDoe-od4ep]

Is a token public?

[@karthik947]

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.

[@omkarkadam3334]

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