How to integrate Keycloak with Angular 10?

[@julienelghadghadi2599]

Agree, he takes the time to make short explanations on each steps in a well executed way, still working today with keycloak 23.0.4 and angular 18 !

[@cypriansniegota3078]

I think this is the best introduction found on the web. Great narration and excelent simple case to start working with Keycloak.

[@KassoumOUATTARA-x9v]

Good lesson, very simple clear to understand

[@abhijit4uguru]

Great narration. Simple and to the point.

[@TechPoint56]

I cannot thank you enough. I was struggling with the keycloak and got the perfect explanation to at least get started with the application. Liked subscribed and going to share my fellow colleagues.

[@katkarsunit]

Good tutorial. Simple and to the point. I liked your tutorial style and have recommended it to my team of junior devs who work on Angular apps for enterprise. Also some topics that would make your video into a series are 1) Authorization Code Flow with PKCE (as now Implicit flow is not recommended) 2) Using other popular npm packages for OAuth2 like angular-oauth2-oidc and for angular - keycloak integration

[@CarbonRiderOnline]

Sure Sunit. Thanks for your message.

[@amrouzamar]

Verry helpful tuto, thank you sir for you efforts and time to make this video

[@suvendujena4014]

Hello, Good explanation. Need more operations like how to get user details, refresh token check and other things. Please make one video for a full application.

[@MrEdusi]

Ótima narração e excelente caso simples para começar a trabalhar com o Keycloak.

[@MohamedAlabbas]

Simple and perfect tutorial, Many thanks :)

[@roiram3286]

Best explanation ever. Thank you so much brother.

[@CarbonRiderOnline]

Glad, I could help. Please let me know, if you are looking for any other technical solution. I will work on it.

[@roiram3286]

@@CarbonRiderOnline Two questions. First, once I login do I need to save a token in the local storage? How do I check if the user is logged in already before loading a page? Second question: what if instead of directing it to the default page I want to redirect it to a different login page? I know I have to change some setting (kc_idp_hint) in the Identity provider but could not figure it out. thanks

[@CarbonRiderOnline]

You don't have to save the token in local storage. Keycloak will send it as a cookie. To check if user is already logged in you can invoke method (isLoggedIn) on adapter. For 2nd question, are you looking to change look and feel of the login page? If that is the case, then you can create your own custom theme. OR you can change the login flow and create your own custom extension to manage the login flow.

[@kendalugurlu]

Great. Thank you for your time and effort.

[@adarshadarshsaxena]

Great Explanation, nice and simple used case,thanks

[@akashkaravale2207]

Very well explained 💯💯👍🏻

[@romanmotovilov129]

God bless you! Thanks for the great lesson!

[@radhasingh8331]

how to show keycloak feature on some button click?

[@arjunanke7043]

Can you please provide a git repository url for this tutorial

[@meryemhami6908]

the best tutorial eveeeeer .Merciiiiiiiiiiiiiiiiiiiiiii

[@joaquindiaz3396]

well done, but in isAccessAllowed you are typing that is a Promise, how doesnt fail if you never return the promise on the function?

[@sarapoli5786]

Thank you for this great tutorial. Is there a way to make the customized login page instead of keycloak login page for our app?

[@CarbonRiderOnline]

yes, thats very much possible. You can create a custom theme and plug that inside Keycloak.

[@sarapoli5786]

@@CarbonRiderOnline Do you have any video on that ;) 😁

[@palmadecoofficielle4161]

simple and clair thank you 🙏

[@liemtrinh9666]

Good tutorial. Hi sir! Can you continue this video to show how to get tokens and then show user information if log in successfully?

[@n0sr3t3p]

Very good, thank you.

[@cleejav5591]

great one, thanks dude

[@CarbonRiderOnline]

Glad you liked it!

[@Preet_1602]

Everything else works for me instead of the logout functionality can you please suggest the logout settings in my keycloak I want to navigate to the login page only but is says Invalid redirect uri « Back to Application please help

[@CarbonRiderOnline]

Check the redirect uri configuration for the web client.

[@Preet_1602]

@@CarbonRiderOnline yes i got the error my url was wrongly added in the administration console can you please suggest how to send authorization header with websocket via sockjs

[@meghnasharma5105]

Great tutorial :) Keep it up !

[@valerioannese4441]

Hi, is it possibile to adapt this project for Saml protocol rather then OpenId? thanks

[@Razvanh29]

What is the timestamp for route guardung?

[@cleidsondiasdonascimentoms5053]

Show!!! is the best video.

[@Kunalranjanzolozo]

when i am trying to run the application , i am getting error:  VM457:6775 crbug/1173575, non-JS module files deprecated.

[@GeorgiosRouvas]

I used geteusername in the same way but it didn't show the name. can you give me a tip?

[@pankhurigupta8623]

Thank you sir for the video. I followed your code, but I am getting a bad request error.

[@CarbonRiderOnline]

Hi Pankhuri, Can you please describe what error are you getting?

[@vishwasreddy7871]

how to add customized header in the keycloak using the library interceptor ?

[@sanjayms00]

how to call other user, permission, policy etc from angular

[@CarbonRiderOnline]

Sanjay your question is not clear. Can you elaborate it?

[@gauravverma-xs2sl]

sir, how to customize default keycloak login page, register page and make it more attracrive

[@CarbonRiderOnline]

You can do that easily by copying existing theme. I will soon create video on that.

[@tatahnoellimnyuy4247]

nice and simple thankssss

[@Nanoooonxnc]

Hey Yogesh! Thanks a lot, i really needed a viedeo as simple and informative as yours. Alltough I have a question: What if i dont want to use the keycloak login page. Lets say my spa has its own login and register page. Does the library also support these functions? Thanks in advance and greate video!

[@CarbonRiderOnline]

Hi @NxNc Thats pretty much possible. Keycloak offers a way to customize user as well as admin facing web pages via Themes. You can create your own theme and simply plug that to whitebrand login and register page.

Thank you for this video. Because there is no documentation for angular 12 and below versions. they are not accept angular 12 users. I have to use the angular 12 versions until to upgrading my theme by themeforest developer :D

[@santoshsinghal4595]

Multi tab logout is not working.may I know how can I do that?

[@narasingkokane]

Simple and perfect introduction to keycloak. What if i want to initialize keycloak for multiple client inside single application, I have single tenant and multiple client and want to fetch access token based on application selection. Or is it possible to initialise keycloak twice in one application

[@CarbonRiderOnline]

You can create multiple keycloak clients and have redirect URL configured for eacho one of them. In Angular, you can dynamically decide the clientId based on the subdomain or application selected by your users.

[@gauravverma-xs2sl]

hello sir, awesome video it is necessary to install kecloak as stantalone server , you already installed keycloak angular and keycloak js, why we need to install keycloak as stantalone??

[@CarbonRiderOnline]

Hi Gaurav, If I don't install keycloak server, how the authentication will happen? The keycloak-angular is adapter library between keycloak server and Angular application.

[@rkumar.lnct24]

I am trying to get the jwt token from key cloak and pass it to my api. Is any specific property I need to configure in init file?

[@CarbonRiderOnline]

Can you be more specific, what UI framework are you using? do you have Keycloak Adapter in place? Passing tokens in Angular is taken care by the Adapter itself. If you enable bearer interceptor it should pass the required authentication header with every request.

[@rkumar.lnct24]

@@CarbonRiderOnline I am using angular 11 and keycloak 11 , I will try to put the interceptor and will update you. Thanks for your help.

[@CarbonRiderOnline]

Support for Angular 11 is not yet available, but you can still give it a try. Also check this documentation www.npmjs.com/package/keycloak-angular#httpclient-interceptor

[@youssefmoussaid1558]

Thank you so much 😊

[@MohitKumar-zq3md]

Hi, i've integrated the same way for SSO with two application but logout is not logging out from all web apps. any idea about that?

[@CarbonRiderOnline]

Hi Random Creators Not sure about SSO logout issue. I haven't implemented that. But I came across a URL which describes an approach to invoke tokens logout url to invalidate session lists.jboss.org/pipermail/keycloak-user/2014-August/000705.html

[@MohitKumar-zq3md]

@@CarbonRiderOnline Looks like log out not working properly may be due to some config issue at keycloak. By the way thanks! I was trying this example: medium.com/bb-tutorials-and-thoughts/how-to-integrate-keycloak-with-angular-for-sso-authentication-f68cf584555a

[@dindips]

Hi, I don't want to use Keycloak login page instead I want to use angular login page. How can we achieve that?

[@CarbonRiderOnline]

Sorry, I don't have any idea about that.

[@siminho6929]

Nice video! But unforunately i get an error, while starting the angular app: Refused to frame 'localhost:8080/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'". Can someone help me with this?

[@DoxTorRent]

checkLoginIframe: false,

[@rakeshraki9062]

Hii I need to integrate keycloak with python

[@rakeshraki9062]

Can you please say

[@rakeshraki9062]

It's emergency

[@CarbonRiderOnline]

Hi Rakesh, Sorry, I was occupied with my office work. I don't have experience with Python and keycloak integration. But a search on google brings out following library - pypi.org/project/python-keycloak/ The examples seems to be pretty straight forward.

[@saviocardoso6719]

add token and header router

[@SayeedImtac]

ERROR in node_modules/keycloak-angular/lib/core/services/keycloak.service.d.ts:40:21 - error TS2694: Namespace '"D:/Project/keycloak-integration/CarbonRider/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'. 40 static ɵfac: i0.ɵɵFactoryDeclaration; I am getting this error. Please help.

[@Kunalranjanzolozo]

Warning: /Users/kunal-mac/Desktop/Angular/angular-examples/keycloak-integration/node_modules/keycloak-angular/__ivy_ngcc__/fesm2015/keycloak-angular.js depends on 'keycloak-js'. CommonJS or AMD dependencies can cause optimization bailouts.

[@CarbonRiderOnline]

You can ignore the warning.

[@Kunalranjanzolozo]

@@CarbonRiderOnline but I am unable to run the application

[@CarbonRiderOnline]

@Kunal, I would suggest having a look at the Keycloak log as well as browser dev tools. That will help you to figure out what is going wrong. Definitely, the dependencies have changed compared to when the video was developed or there might be misconfiguration.