Authentication with Angular and Okta

[Music] what is popping youtube welcome back to my channel my name is henry and i'm back here again with another video tutorial for you guys so in this tutorial i would like to show you guys how you can create a simple authentication system using angular and otca so otka is an authentication provider that allows you to easily add authentication to your web applications now you can use octa with different programming languages or framework such as angular or react or view js or even java so in this video i'll be showing you how to do that with angular now if you want to learn more about otka you can simply go to their website at octa.com and you can read more about their solution and the products that they provide if you want to create a developer account for otca you simply go to developer.octa.com and as you can see you um they have all the website or all the um programming languages that is um you can use with octa shown here on their page so for the web app for example you have gold java dot net node.js php and python for single page application you have react angular and so on but in this video i'll be showing you how you can create a simple authentication system using angular and otca you're going to see how easy it is um to add authentication to your application using otker so let's take a sneak peek of the application that will be building today so i already have it running on localhost 42 um thousand and by default it goes to my login page right here you see i just have this nice bootstrap navigation bar at the top and i have the odd car signing widget so with otca you can get some components from othka and add to your application this saves you some development time so instead of creating a card and a bootstrap form to create your own sign-in um page you can just take the widget from otker and it also have a lot of features implemented in it for example it has validation so if i decide to take off my username and my password you see i get those error messages that say i should enter a username and a password also if i try to sign in you see i get some error messages coming from the server so let's quickly um create a new user that we can sign in with so i'm going to hit on the sign up button right here and it's going to take me to the create account um form where i can enter our details for my new account so i'm going to enter an email here so um thinking of an email right now i'm just going to say thomas so thomas dot 2 curl at gmail dot com that's our email and for our password let's just use chelsea one two three now for the password you see that there are some validations here that um the password should meet so the characters should be at least eight and it shouldn't contain any part of the username so i'm also going to enter my first name and last name and with othka you can customize um what fields that you want to show up on these um um sign up page but by default you just have your first name and your last name so for the first name i'm going to enter thomas and for the last name i'm going to enter to call spell there right and then i'm going to hit on register so otka is going to register and sign me in to my account so here on the application you see i just have um this um home page that shows a welcome message and says welcome wait my name right here all right that that's just it's um creating a new account so i'm logged in now when you um sign up it logs you in directly so i'm signed in i can log out so i can simply click this button and it's going to take me back to the login page so now that i have an account i can come back here and i can do thomas dot to curl at gmail.com and i enter our password which was it was chelsea one two three and i hit the sign in and you can see i'm signed in again and um also you have um the remember me functionality so you can check that to remember your credentials so let's say i close the application by mistake and i try to open it you see i'm still i'm still logged in which is good so the remember me functionality is implemented for us by default which is which is really cool so i'm going to log out and that's it this is um the application that i would like to show you guys how you can build with angular and octa so i hope you guys um would enjoy this tutorial sit back relax with a drink of popcorn and then follow along and code along and um i hope you enjoy the tutorial all right guys so let's get started with creating our application first we want to make sure that we have created an account with octa so to do that you want to head over to developer.octa.com and when you get here you can click on the sign up button if you don't have an account and then sign up with your email it's very easy and straightforward and if you have done that you can come over here and click on the sign into octa so i already have an account so i'm just going to sign in directly and i'll be signing in with my email you can choose to use any other provider you prefer and i have quite some accounts here at all car so i'm going to pick the first one and here i want to give my email and then i'm going to enter my password all right so it's going to take me to the autocad dashboard as you can see so there are quite a number of things here that you can find but the one that we are interested in is the applications right so we want to create um an application that we would like to integrate with bot car so we want to click on the application or button there and um here you see i've created um some applications here already uh but we want to create a new one so you're going to click on this create app integration so that's the one that you want and you have the sign in method here um there are different options but the one that will be going with is the first one which is the open id connect and you see this is the recommended one if you intend to build a custom app integration with that octa sign-in widget that i showed you so we need that widget so we'll be using the first option and for our application type we are building an angular application so it's a single page application you can use javascript angular reactor view all right so i'll be choosing a single page application and i'm going to hit on next all right so now we have um the general settings where we can provide information about our um application so for the app integration you want to give it um any name that you like i'm just going to call it hot app because it's um just um an application um to add authentication all right you can also um give um a logo for your application so um if you go back to the application i showed at the beginning you see i have this um logo here angular logo so you can use your own logo or a different logo i'm just going to leave it out for now and i'll add it later and for the grand type there are different type of ground type if you are familiar with alt you have authorization code you have implicit flow you have a refresh token and password uh authentication clients credentials and so on but the one we are interested in is authentication code all right so we're going to leave that the default that is selected for us and for our signing um redirect uris um these are optional and otka gives you um default for it so i'm happy with the default the only thing i want to do is i want to change the port to 4200 just because angular is using that port as the default 8080 is the default for spring boot so i'm just going to leave it at four to zero zero all right and for the assignment i'm going to allow everyone so this is where you can limit control to your application who can have access who can login or who can log out all right so this is um the settings that will be sticking to for application so i'm going to hit on save okay and as you can see you already have a sample application that you can download so you can download the sample application with octa and you can make use of that the angular application is available here for download but um we're going to be creating it from scratch so i'm going to leave that out and you can play around that if you are interested but i'm going to create from scratch so we have our client id and authentication is using pc which is the proof of key for code exchange and we have authorization um everything looks good um so i'm going to go to sign on and i can see all the settings right here and here it looks good to me so you can either download the sample application or you want to copy um your client id because um this is what um you would be adding to your angular application for you to recognize the application that you just created so the next thing that we'll be doing is we'll copy over this client id and we'll create a new application from scratch so guys we're going to continue creating our application by creating a new angular application so i'm right here on my terminal and um you want to go to any location on your um computer that you prefer so i'm just going to increase this a bit and here i'm on my documents folder i'm just going to make a new directory i'm going to call it octa all right so i'm going to create that and then i'm going to go to that yeah and now that i'm there i want to create a new application so um i'm going to be using the angular cli and if i just check that real quick oops if i check that real quick i'll be using angular version 12. which is um currently the latest version at the time of recording and um to create a new angular application i'm going to do ng new i'm going to call it auto app then i'm going to hit enter and yes i would like to use angular routine and css and it's going to do the good stuff install all the necessary packages that we need um for our application all right the installation is complete and our application is created so we want to go into our application it's got app and i would open it on visual studio code visual studio code would be the editor that i'll be using for this tutorial so if you have the url studio code feel free to follow along or you can use your favorite editor all right now we have our application we want to go ahead and create um the components that we're going to need um for our application so i'm just going to quickly bring up the terminal inside vs code just going to take it up a little bit all right so we're going to start generating our components so for application we just need two simple components one for welcome a page we're going to call that welcome component so i'm going to do ng g for generate c4 component in our components folder and we're going to call it welcome component we don't want any unit test so i'm going to skip test all right we have that generated and we need one more component um for our login so i'm going to call that login component okay so we have our welcome component we have our um login component in our component um folder that's good so um next thing i would like to do is i would like to configure our route so that um we can route to those pages that we have created so if i go to our application and i go to app.routing.module.ts and here in this array we can configure our routes all right so i'm going to open a brace and i'm going to add the part um for the first route i'm just going to call it welcome that will be for welcome page and the component the component it's going to be the welcome component all right and um we're going to add for the other route which is the login component so i'm going to do part login component login component and let's add one more which is going to be our default route if a user tries to uh redirect um to the default page we're going to redirect them to the welcome component so i'm just going to do redirect to and this would be slash welcome which we have defined here and for the part match we're going to say full all right now we have um our components uh created so the next thing um we would like to do is to create our config file so um with our config file um we can set up all their properties but before i do that i just want to bring in bootstrap because we'll be styling our pages with bootstrap so i'm going to bring back the terminal once again and quickly in install bootstrap so i'm going to say npm install hashtag save bootstrap so they should install the latex version of bootstrap for us all right so we have bootstrap 5.1.0 so i'm going to close that and we can set that up on our on our angular dot um json file right here and um so on our angular.json file um we have this for the viewed yes so right here we want to bring in our bootstrap um class and our bootstrap class will be coming from our node model so if you check the node module folder you should be able to find the part but i'm just going to um bring that in really quick to save time so we're going to find the bootstrap css right here and also i'm going to bring that for the the javascript all right so i'm just going to paste that and save and um haven't done that we need the bootstrap navigation okay i forgot to generate a class for the nav so i'm just going to bring our terminal again now i'm going to do ngg for generate fee for component components folder and i'm going to put this in our nav and then we want to skip the test [Music] okay so that was done for us and we have our navigation bar here so let's quickly grab bootstrap navigation from bootstrap oops i want to open this i have a lot of tabs open i'm just going to close all of them all right and we want to head over to dot getbootstrap.com examples and we want to get enough bar let's go with this number fix i'm going to go to view page source and we can see all the code for the navbar so i'm just going to copy this and now we can go back to you can go back here and then we can paste that one up bar here all right so this is our enough okay and take this back and use ctrl p and then search for whatever um component that i need so i'm going to go to app.component.html so this is the default html file that comes with um angular so i'm going to take that out and i'm going to leave the router outlet because we have some pages that we want to route to i'm going to put everything in a container since we have bootstrap now and um i'm going to move the router outlet in our container and one more thing i would like to add is the navbar so i'm going to do app dash nav and i'm going to save this and i knew that the name for that is app dash nav because if i go to the nav component.ts you see that name right here is appdash now all right so because we added those uh bootstrap or styles we need to um review our application again so every time you make changes to your angular.json file you need to build your application i think we didn't even build serve the application yet so i'm just going to do angie serve and let me just have the browser open right here going to close this close that and it should be running now localhost 4200 not yet all right so it's running now and here is our now we already have it right here so we can take off what we don't need quickly all right so we want to fix our navigation bar so right here i'm going to do command p and i'm going to go to nav component.html [Music] so we're going to take away this form and um i'm going to save that for the fix bar we can just change it to the name of our application which is um what app i'm going to save that and we can add the router link and that would go to let it default to the welcome page and for the links we just need just need one so i'm going to take away this one and i'm going to take away you know what let me just leave the other one so we have two links i have one to home and the other one would go to the login you know what we should take this out instead we can duplicate the ul so that we can push the other log into the right all right so i have home here and i have login so this is going to go to welcome and this is the router link i'm just going to copy this here paste this here and this would go to login i'm going to save that and now we have this meo2 and um the other one should be ms02 so one is at the start and the other one is at the end so i'm going to save that if i look at our application now we have two links if i click on home if i click on login you see i go to login i click on home if i go to welcome but we don't see any messages below so um we should push um the elements down a bit so we can do that from the appcomponent.com html i think so actually we want to go to the style so if i go to the style.css here and here we can add default style so if i go for the body and then i put some padding padding top to be 80 pixels oh that works so now you see i get the login works here and um if i go to the home i get the welcome works all right so we have bootstrap we have our pages um the next thing we want to do is we want to bring our configuration um so we want to bring our configuration from from otca all right guys so the next thing that we need to do with our application is to bring our configuration from odd car to the application but before we do that we need to install the old car dependency um to our application so if i go on back to my browser and i type otka angular let's look for that dependency and see how we can bring it and you come to this link right here that says otka angular npmjs you're going to see what we should install so we should install the library and you can go through all of the documentation right here this is really good stuff um that has been documented out for us so this is what we will be doing um in the application so i'll just go ahead and install otka angular to our application i'll copy this and then i would open another terminal window here and then i'm going to paste um that command right here so this is going to bring the outca angular uh dependency to our application and um with the otca angular another um dependency that we'll be using um in our application that we also need to bring in is the odd car of widget so the other car signing widget so if i just type for otca sign in widget and you put npm at the end so you're going to see it also right here um all the documentation um for the widget and if i scroll down a bit um this is the way we can install the widgets with ian and we are using npm as our dependency manager so we're going to bring it in this way and you can see the documentation also of how to use the widget um on this page so let's also install the widget i'm going to copy and paste that over and hit enter and there we can install our widget um while it's installing let's uh create that um file that will store all the properties um from otka right so we're going to um call it um config you can call it anything you want so i'm just going to create a new folder and then i'm going to call it um config so that's our folder config and let's create a new file in the folder and let's call the file my app dash config dot ts so this is the file where we would put all our configuration or properties and this properties uh remember we can get it from our application so i'm just going to go back to my otca account to copy those properties once again just to be sure that i have the right property so i'm going to sign in again to my account i'm going to choose the right one and um let's keep the door for now oops this is not the one let me just go back and this one right here um let me just sign out here right now i'm assigned in a stomach so i'm just going to sign in with my account because i'm the administrator of the account type in my password all right i'm signed into my account so um on the otgar account on the dashboard what you see as an administrator is different from what a user of the application see so being the administrator i can see all the options to do all the configuration on my account but the user doesn't have um all this uh view when he logs into otka so um to get the properties for application uh we want to go to this application link right here and click on application and this is the app that we created that's our client id that we need to copy over so i'm just going to come to this page right here and here you can see our client id and the octa domain so we're going to put it in this file um let's just uh create a class for this our file so i'm just going to say export default um this is a default class and let's create a property i'm going to call the property oidc [Music] um just to put all the configuration here and in here i want to add um first the client id of the application i'll put this in quote and the next property i want to have there is the issuer so i want to have the issuer which would be my um octa domain with some other parameters added at the end and finally i want to redirect the uri so redirect uri we said this in when we created the application and we also need to add some scopes for this so if i go to scopes and i can put different scopes that i'll use for the application i'm just going to put open id and then i'm going to put profile and lastly i'm going to put email all right so i'm going to save this and then let's copy the client id and copy the client id and then i'll paste it here and um for the issuer i'm going to copy this over i'll paste it here no that's the client id let me just copy that again so i'll copy this copied and just paste it here and then this is the issue let's just make the url in full so i'm just going to do https colon slash slash and whatever we have there and also i want to add a dash um or to or to slash default okay and for the redirect uri um let me make this camera case for the redirect uri um let's copy the one that we set in here right here so the login we have this redirects your eyes so let me just copy this and let me just paste it here now if you want to learn more about um all these properties so right here where we install our car um if you look at the documentation after the installation you see um on the config we have to bring um all those properties right here so instead of doing it uh this way i just created a config file so that i can just uh import the config file and then add it to the um app module um just like this so this is the thing that i'll be doing um next so let me just uh close up the stormy now because uh we are done with it for now and let's go to our app module so this is our app module here um let me just um close that up okay so we are here on the app module so what we we need to bring um bring in some models that we just installed so specifically the octa module so to do that we just add that to our input so that would be octa octa automotive sorry so we bring that and then it's imported for us here from octa or angular also we want to set these values uh for the providers right here so we have our provider array right here and we want to bring in this value so i'm just going to copy this and then i'm going to paste it there and we're going to import this from our car so i'm just going to use the automatic import for this and also for this yeah so you see i haven't created this octa config so i can't import it so the octa config is this constant that is declared here okay so let's just create this uh constant um variable here so the way um that i'm going to do it so we're going to do it at the top before our ng model annotation so i'm just going to say constant and there's a octa config that's the name of our variable right there so we don't need to import it and then i'm going to do use an object assign to assign all the values to that object that i created so i'm going to do it this way and right here i am going to use on i'm going to use on auto required here as my key an alt required and here i'm going to pass some values i'm going to say octa alt and let's give this a type of any and then i'm going to use an injector and we can get this injector from angular so i'm going to get it from angular core that injector and now i'm going to map that and then create the new um router so i'm going to say const router is equal to injector dot then i'm going to use get router okay but then i have to import the router so what this is going to do is that um it's going to make sure that the user always gets redirected um to the custom or login page that we would be adding um with the octa signing widget so for now i'm just going to do router.navigate [Music] and here we want to navigate to the login page so i'm going to do the slash login and i need to bring in my properties uh a variable my config file here what i defined and the way i can do that is i'm just going to um assign all this with that property class that i defined so i'm going to use my app.config dot i called it oidc or you can call it whatever you want so i'm going to do that and then i'm going to i'm going to save it right there all right so our app model looks good another thing that we need to bring in so after we um installed the the module for otka angular which is this we also installed that of the sign-in widget right so for the sign-in widget um what we would need to do is we need to bring in the um css class and then the javascript file um from the website so let's search for it right here um so i don't waste a time going through the documentation if you check the octagon sign in reject um you can see those files that i'm talking about or if you check your node models you can find them so i'm just going to head over to the angular.json uh file here so just like we um installed bootstrap and we have it in the node module we also have the css class um in the node modules as well so you know what let's just check the node module it should be at odd car so here we have at odd car right here so if i open this you have at otka angular what we brought in and you also have an octa sign in widget so this is our sign in widget and if i go into the distributable i see the css so i want to copy the part for the css let's close that and um so we go to our styles and then we can put the part in our style so there's too many spaces there so i'm just going to do this and then paste it okay this is copying the we actually needed the relative part so this is good note models there you go that's the part for the css and let's do the same thing for the javascript file so i'm just going to go back and we have the css we brought that in so we also need to bring in the javascript um class which is this octa sign in the javascript so this time let's copy the relative part and let's close this up and then we go to the scripts and then we want to paste that relative part here so i'm just going to open the code and then i paste it here so now we added octa angular to our application and then we added the octa widget and the um css and the javascript um classes for the css all right so we're going to build um this file um in a minute but before we do that um let's um use our widget another thing we need to configure is the odd guide so we need to protect that route uh when a user try to access the route we need to protect the route so that the user doesn't get access um to the route bobby so the next thing we want to do we want to go into our routing dot model and let's protect that route so to protect the route so this is the resource that we don't want and on its unauthenticated user to access so we're going to use um as usual um in angular can activate a method for that which is our route card so we're going to do that with um octa uh guide so octa has a route guide that you can use to protect your your routes so we're going to add that there and um also we want to um add the callback component so when you um log in the the outcast service first will take you to the callback um component and that's what we created um in our oscar application when we use that redirect uri here so we're going to create a callback component for this okay so let's just do that now i'm going to put it before the login so i'm going to create another route here and for the part we're going to say login slash callback login slash callback and next we want our octa callback component so we add the component and the component that we are using is the octa core bar component so i'm going to save this and next uh let's use the the widget in our component folder so to use the widget we're going to go to our login so this is where we want to use um our login widget so from our login we have our configuration properties right here so we want to bring it because we're going to need that um in our component so i'm going to do an import so i'm going to import my app config right here up and it completed that for me okay that's good and next i want to import the sign in widget so to do that i'm going to say import i'm going to import it as octa octa signing from and here we want to bring this from octa in widget right so we want to import this and now there is an interesting problem right here because um this our sign in widget doesn't provide types so for example when you are installing uh components and in angular such as jquery um you need to use them with what is called a attack so octal widget doesn't provide uh types for us um like we have in typescript so we need to create the type and then um tell the compiler to be able to find this file so to do that um we're going to create a new file at the root of our application or we can actually place it in our source directory so i'm going to close this and right here in the source um directory here we're going to create a new file so i'm going to create a new file there and we want to call it octa okay and what we want to have in this file is um that model that we cannot find which is this so we want to declare this model so that um our typescript or compiler can be able to find it so let me just copy this right here so i'm going to copy it and come here and inside this file i'm going to say declare module and i'm going to paste what we just copied here i'm going to paste that i'm going to save and if we go back to our login component you see the the error is gone but yeah the error is gone okay but we're going to confirm that later because there's something um that you also need to add to your um typescript the compiler just in case um it's not working for you if it doesn't work for you you want to make sure that you set um a parameter called um you have no implicit returns you set this to be true um we just want to add another one let's just add it here just in case we we ran into any issues with this so i'm going to put another parameter here i'm going to call it no implicit any so this is the parameter um you want to set this to false so if you do that here um typescript will be able to find um any file with this and then use um this model and you'll be able to use that model all right so to cut the story shot you just need to add that and um put your settings here into that into that file so that you'll be able to use this um sign in widget all right so let's continue um with that so after we bring on the sign in widget we also want to bring in octa so i'm going to import our octa service octa service not the module octa odd service we're going to bring that from angular and now let's create um our sign in so here we want to declare our octa signing so we're going to say octa sign in and we're going to give it the type of any we want to do this in our constructor so let's inject the octa hot service to our constructor so octa or service so this is a service from octa and now we want to do the signing with our signing widget so to do that i'm just going to simply say this dot sign in um octa sign in this is the one we created here and we're going to create a new instance so i'm going to say new octa there will be a new instance of the octa sign in right here and here i can pass in on all the parameters i want and again you can check this in the documentation to see all the parameters that you can pass so you can pass for example the logo um so what i'm going to do is i'm going to copy an image um from my directory and then i'm going to paste it there you can use any image that you want so i'm going to go to my asset folder right here and just you see i have this um icon.png and this is just uh an angular logo that we can put um in the website so i'm going to do logo call it logo and then i want to go to that directory so i'm going to say asset slash images icon dot png or one easier we would just to be copied the part here so you can leave that blank or you can use um any image that you want to do so another thing you want to set is features now if you set features um if you put registration if you set registration to true then this would uh enable registration in your application and before you set this registration to true you want to also make sure that you enabled it in your octa directory so if you go back to the odd car um instance that you you're logged instance here and then you check cell service registration right here and then you go here you want to make sure that this is enabled so you're just going to click on edit and set this to enable otherwise this would not work for you and this is the place where you can customize um what field that you need for your registration form by default you just have first name and last name but if you want to add other fields here you can put that and what the place um you should go to after you're registered it's your the redirect url so you can um customize that here otherwise going to take you to the dashboard so you just want to put this to the root of your application all right so features registration through we can play with this and turn it on and off so you see the difference another thing we want to set is the base url so this base url will be coming from my um octa config so oidc and issuer and then i just want to uh split it and um remove that uh odd two from it so i'm just going to put or two and um i'm going to take the the first um value when you split it and then i'm going to add a client id and i'm going to do the same thing the app.config or idc and then i'm going to use the client id this is the one coming from otka also i'm going to use the redirect uri that we added to our config file and i'm going to do the same thing in my app dot oh idc the redirect uri also we want to configure all the parameters so i'm going to do all params and here we want to set xe to be true and let's set the issuer to be my app config ydc the issuer and also we want to set scopes we already defined the scope and we go to myapp.config or idc the scopes all right so this is our signing widget right here let's just end that with this semicolon and now we need to uh render the widget and let's do it when the page loads so on our ng on init we're going to do this dot our octa sign in widget and then we want to use render so this is um the method that would render the widget and we also need to pass some parameters um i'm going to pass this l here that's an id and we're going to create an id here and whatever we use here this is what we will be using um in the hd element html element to display the widgets so i'm just going to call it octa sign in widget like this and then i want to close this up and then check for response so i'm going to check response and use the type of any and right here i want to check the status so i'm going to do response dot status and if this is a success then we want to call sign in with redirect so this is where we do our sign in so i'm just going to do this dot octa or service dot sign in with redirect so this is the method that signs us in of the old service to sign in okay everything looks good but here we can also check for errors so we have a response let me just break this up you have this they have so this is the renderer and then a response and if this then this now we need a comma here and then we want to check for errors so i'm going to say errors if there's any error then we're going to draw that error and we want to end this with good and then we want to end this engine only needs method right here all right that looks good and then we want to remove this signing we checked if we are not using it so uh we can also do this like when the page is um destroyed so ng only needs so we can also use the ng on destroy interface for example like this and then we implement the method so let's put it below the engine only needs method here ng destroy and when the method is destroyed uh we want to do the these odd car sign in then we want to remove that widget and finally we want to render this um on the the login.html component so here we have login work uh we want to render our widget here and to do that we simply need to pass in that id um that we created so let's do that in the so i'm going to do hash and the name of the id was octa sign in widget okay and uh let's give it some bootstrap classes so let's give it a class of pt5 and um let's also have it inside div of class pt-5 so so it's going to make the signing widget um to be at the center all right this looks good moment of truth let's see what our signing widget looks like so now we're on the welcome page and on the login page um you see we have our sign-in form here but then we don't see um the css and the javascript files that we've added because we haven't uh built this um file so i'm just going to clear this up and run the build again by doing ng-serve so anytime you make changes to your angular.json you want to rebuild your angular project so that all the changes take effect and we also have our no implicit any here set to false so that's good so now look at what we have we have our login page and we have everything we have the image and we have the sign in and the sign up button so if i click the sign up button it's going to take us here where we create account and we can go back um to the sign in so you can toggle that on and off from this features part that says registration true so if i just change that to registration false for example and i save that now you're going to see that there is no uh sign up or part here so if you want to sign up you just need to add the user um directly from from here from your octa um dashboard so um this is it let's just add the back the registration and try to add a new user so i'm just going to say registration is true and now let's try to add a new user okay for the email for the email um thinking of a player let's just do leonel messi gmail.com i hope this is not their real email by the way and for the password i'm just going to do let's do chelsea one two three and for the first name i'm going to do leonel and for the last name i'm going to do messy all right so let's register and see if it works so we are registered and then you see we get to this uh welcome page a welcome works so our registration is working and it takes us to our home page the next thing um we want to do is uh we want to customize this page a bit right now we just have the home and the login so we need to change this login to logout uh when you're logged in and let's display something else here when a user uh logs in so first of all um let's um take this app um navigation and make it centered and to do that i'm going to go to my nav right here now after html let's just get this out of the way and right here i see they're using container fluid to make it centered i'm going to use a container all right so it's entered and we have the login and um we also have the the logout so um another thing we can do is that we can check if a user is authenticated we want to change this login link to log out so they can be able to log out and um log back in again so to do that we need to uh bring in our alt service so our car has created their um authentication service for you so you don't have to uh reinvent the wheel so create it again you just use their service um to do your login so for example if i go back to my login ts the way we are doing our login is we just call this um otca hot service sign in with redirect and it's using our sign-in widget and for us to use the sign-in widget we just created the sign-in widget in our constructor we imported everything from our config and from we imported the sign-in widget of course so that's just the real uh gist so to use um to display uh the data that we are getting uh we're going to use um the server same thing like we did for the login so let's go back to our nav component so we'll go to the not the html but we want to go to the ts file so navigation.ts all right and here we want to bring in our octa save so i'm going to say private um octa octa alt service so i opted out service so i'll bring the update out service right here and now we're going to um um get access to the outcast state and it's going to return a boolean for us so let's create a variable to hold that value so let's call it something like is authenticated is authenticated and this is a boolean so let's initialize this to be false so the user isn't logged in and now in our um constructor we're going to call that service so we're going to say this the doctor service dot um you see we have this authentication state right here and you can see the octa service interface um you have all the methods right here that you can play around with you even have something with fingerprint forgot password that can reset the password send your an email and all of this good stuff right here but the one that's um interesting for us right now is the authentication state because we want to get the authentication state of the user to know if it's logged in or not and that's an observable as you can see uh most uh variable that are observables in angular stat with the dollar sign that's how you distinguish them between an observable and just a normal variable so when we subscribe to that observable we want to set the value that is returned this dot is authenticated let me just break down this up oops just break it up so we have some space so i'm just going to say is let me just call it is odd for short and i'm going to set that variable which is uh this dot is authenticated i'm going to set it to what we get back which is this is alt all right that looks good all right so we are um setting this value of x authenticated um to check if the um user is authenticated um yeah so we can also um call the um is authenticated method to um to make sure that the user is authenticated so you subscribe to this variable and also you need to call that is authenticated method on the um ng on init so um to do that i'm going to say this dot is authenticated right here and i'm going to await the result because that service returns a nsync and i'm going to do this is authenticated here and for this to work i also need to make this sync and then it doesn't return void anymore all right so this is our it's authenticated method and we need one more method for this um nav component and that's our logout method so to call the logout method we can simply use our service and say this dot autograph service dot sign out so that way we can uh sign out from um our application so now that we've created all these uh methods um let's use them in the html so i'm just going to go back to my nav dot html and uh right here we have the login right here we have the um login a link so let's create one more for the logout so to do that i can simply copy it and paste it right here and i have the login and the logout um won't be a link actually it's going to be a button so instead of having a router link we're going to have a click handler so when that link is clicked we want to make it go to that logout function we created there if i save this we're going to have that logout we have that no it's not called login but we're going to call it logout okay if i check it now we have login and logout and now we're going to use this um is authenticated variable that we are getting right here we are setting it here and we're setting it here so we're going to use that to check if the user is authenticated to be able to um hide those links all right and to do that we can do it here for example and using ng if um let's just there yes so i'm going to say ng if and i want to check if is authenticated yeah that's what we called it so if is authenticated then you want to show that logout so it's still showing but our login is also showing as well and we don't want that to show because we are already logged in so i'm just going to copy this ng if and under login here i'm going to paste it and going to say if we are not authenticated then show that so now we are doing that the login um link is gone and now we are here let's just do it for the home button as well so this home button let's only show that button if we are authenticated so right here we want to paste this and it's still showing that um if we're authenticated we have the home button now when we click on the log out i don't see the castle here and a way i can fix that it's because this is a a link and we want to use it as a button so i can easily add roll here and set it to button and now if i save this and then i try to log out you see i have the link here and i click logout let's see if it works now it locks me out and we are back here to the sign-in page so let's try to sign in again with our account we created leo messi at gmail dot com and our password was chelsea one two three and if i click on signing don't save we're back in and here we see home and log out finally let's just add a jumbotron and put welcome with with our user name there before we end the tutorial so um to do that we need to go back to our welcome page and we can reuse all this um component um that we have here uh we don't need the signing but um we can use that is authenticated method to show the message and if the user is authenticated then we can get um the user you know what let's just go to the welcome page and do that so i'm just going to go to the welcome component.ts right here and then we want to set that is authenticated variable again it's authenticated we're going to set it to boolean and for our um user let's set another variable username so type string let's initialize it to an empty string and for the constructor of course we want to bring in our odd service from otka so i'm just going to call it hot car service actually you can call this anything just to show you that so i'm just going to use auto service but this is actually otka odd car or service and this is going to be an async function like we had before so i'm just going to call this async and first we're going to check our is authenticated and we can get this with a weight like we did before i will say this dot car hot serving oops this is the odd service we call that odd service for short and then we use is authenticated here and now we can check if this is authenticated then we can get the user so i'm just going to create the local variable inside here and get the user claim so the user claims would be equal to the weight and let's use this dot odd service dot we can get can get tokun get access token but we want to get the user right here so this is going to get the email oh the user name first name and last name remember we captured that from our registration so i'm just going to say this dot let's say name because we're getting the name of the user so i'm just going to say this.name would be equal to claim dot name and this is going to get the name of the user or is going to return an empty string if it can't find it all right so we have this right here set to this now the next thing we need to do is we need to display it in our html so let's just go to welcome component.html now welcome component.html let's get rid of this welcome works and let's use a container spell that right and in this container let's add some classes to make it a jumbotron i'm going to do p 5. uh imagine top three and let's do background of light and let's make the edges rounded so these are the bootstrap classes to give you jumbotron and inside of that we want to set the h1 let's set it to welcome and let's also have a paragraph here so i'm going to do a paragraph and let's display the name variable that we saved in the uh ts file so i'm just going to set this to name and um let's give this paragraph a class of lead okay so i'm going to save this now and there we have welcome lionel messi but i don't see the background because i did background light dash rounded so i'm just going to remove this like this and save that again now we have the background and we have leonel messi all right so i'm going to go log out and um let's close this now and this is our application so there you have it guys that's our simple authentication application using angular and othka if you enjoyed this video please give it a thumbs up and also share it with your friends and your family and also if you like content like this please do well to subscribe to my youtube channel and i'll see you later with some more videos bye guys [Music] you

Channel: Henry Codes

Views: 1,031

Keywords:

Id: hYg-qG7IBKc

Length: 85min 41sec (5141 seconds)

Published: Fri Sep 03 2021