 Go Well, hello and welcome to another Dev Nation live tech talk We're coming to you from all over the planet like we always do in my case I'm still here in Raleigh, North Carolina, right? But we also have Edzin Inauga who's gonna be a co-host with us today. He's gonna hang it out. Say hi Edson Hello folks. That's good to see you here. And yes, now we have two hosts. It's hard to tell us apart But I don't have a grotesque. Yes. Yeah, I gotta get more facial hair, but you're wearing glasses again Exactly just a confused people. Yeah. Oh, right. Well, we're going live right now. This is a live event We're gonna probably break some things have some fun break the internet But we have a very special guest today. His name is Abashik and he's gonna tell us more about himself I want you to introduce yourself so that people know kind of what your background is and what you do at Red Hat Before we dive into the technical content So I work with the team and R&D section in Red Hat where we focus on contributing to the operator world Mostly middleware operators have been working with various middleware teams who are writing their operator for the one shift and the co-op So middleware technology things in the Java ecosystem like key cloak as well as open shift and Kubernetes So you're one of the few people that have the dual skill set of Java based middleware and open shift Kubernetes Yes All right. Well fantastic. We'll go ahead and screen share Let's see if that comes through the internet connection and let's go ahead and try to run your presentation and your demonstration My name is Abashik Kousarwal today. We are going to see how we can secure your Vue.js application using key cloak Let's see the agenda. So today, we will see a key cloak overview Who concepts integration pattern integration pattern with Vue app and to inflow token refresh and token validation Demo and following with the Q&A session Let's understand what and why of key cloak. So what is key cloak? Key cloak is an open source identity solution for your modern application APIs native applications, texture applications, mobile applications or any Any kind of platform or architecture that you want to secure with a single sign-on mechanism Now see why you need key cloak. So it's a reliable solution as we say red hat is built on red hat products So if you visit any red hat web application, it is secured using key cloak or RHSSO, which is downstream version of key cloak Strong community support and customizable Architecture so you can customize and you can also reach out to community if you are stuck with any of the problem They are very responsive and Third point is portability so you can migrate your application from different different cloud and You can migrate your key cloak architecture as well so it gives you an portable solution you can export that configuration very easily and you can Even do the upgrade very easily Quick recap about OR2 and OpenID connect these are security specification protocols that most of You are familiar with so OpenID connect gives you all three where if you say OR2 You are only getting authorization but in connect in case of OpenID connect you get all three features and You can also say it's a subset of OpenID connect and all these security protocol works on that delegation Basically that you can see in this cute picture. So you are deletionating your security responsibility to key cloak Let's understand the core concepts here So this this architecture diagram will give you and a good understanding of what comes with key cloak So in the key cloak UI dashboard you can configure all those things very easily so mean configuration Goes around this realm configuration. So realm is like a namespace which I should it your configuration and you can configure your client your roles your security defense mechanism and It comes with identity provider like OpenID connect SAML or you can also do social logins with using Identity provider setup and you can also Allow your elder per car bros user to get authenticated using key cloak So realm with realm you can create multiple run it is said that you should use master for administrative purpose and you can use different realms for actual use Let's move up integration So for integrating any application with key cloak, you just need to do simple things one is Have a create a realm if you want to do some separation like for your external External users or internal users you can create two realm and in the external realm You can just need to create a client for any application You need to create a client for the integration When you create a client you need to provide two things one is which protocol you want to use second thing is which resource and what you want to secure and And each application your needs to use this key cloak adapter, which comes with language Specifications like if you want to use JavaScript adapter you can install in the M You can use back-end adapter for Java applications or can also get Android or IS SDK adapters, so these adapter allow you to Do a request response kind of mechanism with a key cloak A big endpoints over the STTPS protocol. So one thing is Important that you should use STTPS when you communicate over your client Let's move to the integration pattern with UJS. So in this demo I have created a damnation realm Which under which I have created a client view app. You can call it any name you want With your view application, you just need to install this key cloak JavaScript adapter You can install from the npm registry or you can download from the key cloak website So when a user wants to access your view application Your application will redirect or delegate your Authentication to the key cloak server. So you will see a key cloak authentication page where user and turn his credentials once user enters credentials You can he gets redirected to the view your view application where he can access the security sources So this is the very simple flow and later on once this process is done your key cloak adapter Is responsible to communicate with a key cloak server to exchange the token. We'll see how that happened So to understand the end to an architecture The I have created one caucus pattern if a for this front end application so same process I've created a caucus BFF client in the key cloak under the same realm and With the caucus you can take caucus key cloak adapter and that you can use to protect your Rest end point. So I have very simple user rest end point Your review just application is getting token from the key server, which token can be passed Using the request header as a viewer token. So with every request you need to pass this token to get a response from the secured endpoint and We'll see how the token validation in the next slide So in this picture, you can see Your key cloak Exposed certain rest end points for every realm So there are many rest end points But I have specifically mentioned two which are important to us one is this serve endpoint and on the ones this token endpoint Your front end application will be requesting token from this endpoint Sending a refresh token. So you can have a loop of Interval where you requested token before your access token gets expired So you can keep getting your token refresh It is important to refresh your token for the security purpose. So if let's say somebody gets access to your token, then it can be Security breach for you. So you need to keep rotating your token. So and expiring your token. So it Becomes a secure environment for you And your caucus back end during the startup will fetch this Jason Web key set So this is done internally and you can also do it by yourself if you are writing a new architecture you or any application application that you don't see a Adapter is provided So you can fetch this Jason Web key set which is used to validate any JWT token pass from your front end application and Token validation comes with three things that you must take one is your algorithm for the header that you have used Second thing you can check the payload in the payload. It comes with certain parameters So you can check the client or you can check the user based on your choice You can check more details and third thing you can verify the signature using this Key set so this is the process of validating a JWT token that you can do by yourself or The caucus adapter do a lot of things for you So let's see the demo here So I'm using key clock version 10 and I'm the bend directory So you can just go to Bend directory and I'm running in the standalone world So I already created a admin user for my key club instance So this is the main dashboard for key clock where I have created already great multiple realms This is the master realm which is used to administrate the your key key club instance so maybe I have created a damnation realm and Under that realm I have created two clients one is you have client and another one is caucus Right, and you can create a client from here. So basically you can give any name and you can create the root URL So let's understand the client little better. So three things are mandatory one is your client ID and This is where you provide the protocol and Access type so for client side application It's similar to a job start application or your boot is application the access type should be public because you you are exposing this configuration to your client side and This will be your root URL of your application. So once the Authentication is done where you want to redirect. So this is this will be same This one is important for Handling the course issue. So cross-origin request issues So if you are like using in dev environment or multiple people are using your application, then you can Do a file category. So those two means one face the Cross-origin issue But if you are running in production, you can use either plus which allow the subdomains or you can only use the actual URL which is much better for the caucus BFF I Have created like the client protocol will be open ID connect and access type will be bearer Because we just wanted to Validate the CHW2 token here. We don't want to be public. We want to just validate the tokens You can also choose confidential So confidential can be choose if if your back end is using the login flow Let's say your view application is running as a embedded within your caucus application in that kind of setup. You should choose a bearer only setup and Here you can see the realm settings. So this is one important place where you can set your token Lifespan. So here it's configured as five minute by default, but you can change according to your need Let's understand the application code. So this is our view application code here and This is very standard application that I have generated using the view CLI command and I have imported the key to the JavaScript adapter using an even strong or yarn add and I'm using a view logger. So this is our Configuration that we will be providing to the adapter that's your realm your client ID your Onload what kind of mechanism you want to do there is another you can do check SSO and And in Onload with login required, you will see the login page. It will always force to see the login page if user is not authenticated Here and is instantiating the key clip instance by providing the unit configuration and With the key clip in it. I'm providing this on load Configuration here. So what action needs to be done after it loads this logic So once the on load happen, it will redirect you to the key clip page once you put your credentials then you get a promise object from the key clip instance and In this response, you can check whether you are authenticated or not if you are authenticated Then you can initialize your view application or you can do the rendering part So here I am passing my key clip Instance as a prop So I can use it further and you can also store your key clip token in the local storage So if you don't want to pass this it as a prop and you want to Use local storage. You can do that as well, but it has some implication from the security standpoint and this is my interval set interval logic where I'm basically doing a clock looping kind of from Check on whether the token is refreshed or not or like what's the time cycle of my token is going to expire So I'm keep updating my token. So this is your refresh token So every time with like every six second percent interval will work and update token also Require a minimum validity second input. So this is how you are rotating your token You can change according to your need. I have a default setup like this, but it's up to you Let's also see your backend little bit So this is the focus if you haven't seen this This is very easy you In the application property, you just need to provide two fails one is your YDC client ID and And this is very simple Java focus rest endpoint where I'm have a user endpoint and I'm using this Annotation which comes with the focus adapter for the key club where you can just annotate and it will be your secured endpoint If I remove that it will be work like And here I'm basically returning this user model and not doing anything fancy here just one thing I'm providing some extra headers for my application for Avoiding any kind of cross-origin issues. So this is I'm allowing any request from my front-end so Let's start this and see in action This front-end my back home And my front-end So let's first hit the back end. So this is a very simple focus application And I have one user gateway endpoint if I try to hit it, I will get four zero one unauthenticated Now, let's try our front-end application So as you can see in the front-end application, you can do your You can user can provide your credentials or if user is not available. You can do a registration or I have also enabled Identity access using GitHub. So we'll see how we can do that So I already created one user first time try to lock in using that So this is our huge is application secured by the key club and here the Jwt token which we received from the key club server and This is the response we received from our focus back in So this is a very simple application and nothing fancy here. I'm just sending a token and getting response from my focus back in And let's see our local storage. So you can see our token store and the refresh token is stored These are stored by the key club adapter where it store the information to a call back to the key club server So you will see many of these configuration and This is where our set interval is working where it's checking when when the token is refreshed or not So let's try to change a bit and update the token by span to one minute Also, let's try to Change this So you can see I'm trying to force my application and the key club to refresh token very quickly So we can understand that And you can do other things as well. You can also see the user session. So you can see with The session details and you can also remove the session if you want to revoke all session from here And I also showed you the GitHub login so you can just add a identity provider So I'm using the GitHub one. I already created. So it's very easy You just need to go to your GitHub account and you create under your personal apps you can create a whole application under the development set settings and When you create a new app, you will see two fields one is client ID one is secret so you can configure it and you can enable it So we can do that So you can see the token is refreshed so your token is refreshed here if you see By refresh the page You can also see that the one is updated here and And Now let's try to log in using the GitHub. So this is the app I have created in the GitHub developer setting and Here I am using the authorization part. We are not authenticating it and once the Authentication is done. I am redirected back to my application and You are seeing that you are getting the response and you are getting the same kind of flow So nothing changed as the user is speaking from my data.com So this is done All right. Thank you for hanging out with me next week Edson may or may not be with us because he's starting to take a little vacation time for the summer But we're gonna have Edson hanging out with us more often And this Thursday session and then you're gonna see more of us also on the Tuesday session once we give birth of that And so thank you guys for your time today You guys have my email address if you need me feel free to email me at burr at reddit.com You guys get the emails and you can set reply on the emails and give us ideas. I did take some ideas from Casio here, you know, so advanced topics on key cloak things like authorization services complex policy permissions I made note of that. We definitely have some key cloak folks who can come talk to us more about those advanced settings All right. Well, thank you so much. You guys have a great day and we'll sign off for now