Authentication in Angular App with Auth0

hey guys hope you're all doing well so in today's video we will be going to talk about how to add authentication in your angular application so uh you don't have to bother about creating your own authentication mechanisms on your backend side while working with your angular applications so authentication is being the major part of every application we are working on So currently as you are working on any applications or if you are if you are using Facebook Twitter or any other application so hopefully you have seen the authentication mechanisms authentication mechanisms consist of three kind of services for every authentication mechanism we have so we have login we have uh register like a sign up method and we also have a log out mechanism for that so in the newer traditional applications we also have passwordless login mechanisms like when we when we when you log into a Stratton applications so it will it will fire a notification on your cell phone which you are on and which you are trusted so on that if you accept that so you are successfully logged in so that's kind of a very detailed uh video so we will be covering up those things in the future so for today's video we will be going to talk about enabling the authentication mechanisms in your angular applications so you don't have to worry about enabling your mechanisms authentication mechanisms so we have odd zero odd zero is a secure access for everyone so it's it's kind of a single sign-on application so it's it's a generalized service which has actually been uh acquired by OCTA so odd0 is kind of a very uh amazing authentication mechanism service so you can enable uh authentication in your angular react or any kind of application you have so you don't have to create your authentication Services by your own so in today's video we will be going to talk about how we can create this authentication authentication enable the authentication in our angular applications so today's video is about that so yeah let's dig into this so we have a certain uh we have we have some certain steps we have to focus about so the first thing is to configure your authentication application and the second part is to install your angular SDK authentication SDK in your angular replication then we have to create three things to add login to ad log out and to show user profile which is successfully logged in right so let's let's start with the very first thing so that's kind of enabling your like configuring or zero so in odd zero when you when you open this website so you have a login button here at the top bar so you have to click on that once you will be click on that login button so it will redirect you to the authentication or zero dashboard r0 is uh or zero is a service which you can create for your application so this supports multiple kind of brandings you can change the branding as your own like I'm clicking on this Universal login so you can go and you can click the button color you can click the primary color assume that I have set it out these colors so it will generate those things as well so this is kind of a very amazing service if you will be going to work on that right so in authentication so we have multiple uh kind of things here so in applications we have this one so in applications if we can go in application inside here so you can go into your applications and in applications it will show you your current running applications when you clicked on that successful login so it will you will be you will be landed you will be you will be landed on this screen so in this screen you can create your uh your new application from here you can also create the success add social login provider for your authentication mechanisms as well so let's talk about those in D right so after login you can you can easily go to Applications from here from the side menu on the left you are looking into so here I have already created this new application which is angular auth right so here in angular auth when you create application successfully it will it will ask for your name right so you can add the name here whatever your applications name and also these domain client ID and client secret right these things are generated from authentication or zero so those will be those will be used when once you will be creating your application on angular or react here is the application logo so whatever the application logo you are you want to refer here so you can by default logo is from authentication or zero and if you have any logo so you can just uh post that logo in any S3 CDN bucket and you can pass the url url here so it will it will it will show that logo on a universal login pop-up right so I have an application type so if you are working on Native application so you have to select native So currently I am working on angular so angular is a spa single page application so that's what I have selected this one here in application URLs so it will ask for three things three things those are more necessary to provide right the ones is allowed callback URLs so that allowed callback URL should be your root URL So currently my angular whatever angular applications you are working on so angular by default Port is localhost for 200 like for local local Dev environment so I have pasted this URL here in my application URLs right and this this same URL is passed here in allowed allowed log out URLs and same URL is being passed here allowed web or regions right so if you are working on like assume that you have break down this application and you have deployed this application to the uh like uat environment staging or production environment so you can you can you have to add those by separated commas here assume that I have my own domain so you have to give them I have to provide that hair because this will also redirect those things so we have to provide those URLs here this is my local Dev environment this is my production URL so this is the way you can provide other Mecha other URLs the application in which the application will be hosted on right so currently I am testing for my local application so I have to provide those because authentication once you will click on this login so the login popup will be going to open so once that login popup opens when you provide the certain credentials to that pop-up authentication model so when it will be successfully logged in so you will be again redirected to your main application from where you have initiated the login call right so these three points you have to add these three uh URLs here then after like these things are by default created idea token expiration rotation and all so other special thing which I did here is that was let me show you there was for the uh that's not showing up here so that was actually for enabling the passwordless so I will show you how that in the separate chunk no worries right so this is what our first part was so and here in connection sorry in connections tab in connection step I have uh created those I have enabled the social authentication so social authentication is like kind of I have enabled Google Earth and in passwordless I have also enabled the email one so yeah these three methods are being enabled on my login authentication mechanism right so this is the very first thing we have to do now the second thing is to install the arc0 angular SDK right so the odd zero angular SDK is being installed here in my application let me show you out here so in the readme file let me check it out okay so here in the readme file of my repository I have added that on in my readme file on line number nine you can check it out this URL npm install or 0 or 0 angular so this is this odd zero angular is an open source uh open source package which you can install in like start consuming the authentication mechanisms freely in your angular applications don't you you don't have to bother about how I have to create the authentication because in certain in in certain cases you have to develop your own authentication mechanisms for that you have to hire a backend developer to do that task so back-end developers should have to create the authentication mechanism like login register a sign up or like forget passwords profile pages so this is the whole authentication module in every backend application we have so the good thing about odd zero is you just have to like click this like either you are working on angular or react or view JS so odd zero has those packages open source created open shortly so you can just uh click that out and it will install that package in your application and then after you can uh you can use those apis which I was uh showing you so this is the domain this is client ID this is client secret so you have to just copy copy it out and like start sharing in your application module and it will start working on so let me show you how it's working on right so this is my code base so I have I have already ran this command which is npm install or 0 or 0 angular so after that uh after that it it is actually been showing up here let me show you out so here odd 0 or 0 angular so on line number 21 so this is showing like uh which authentication version has been installed in my angular application right so this was actually the very first part I did so after that after installing that one so I have configured the I have configured the authentication apis authentication apis which was created like authentication API key and client secret so here in environments folder if you can go in the environments.ts file so here I have shared that out so here in the client ID place you have to create your own client ID and domain so that domain is also being provided here on the screen which I had showed you so domain and client ID right so you have shown both of them here you have to place it here right in environments file so after that in environments file after this chunk you have your application module so here in application module you have to import you have to import your authentication 0 or 0 SDK which we have installed by this command which I have shown you from readme this one npm install or zero or zero so after installing that SDK what you have to do is creating your domain in client ID object here in environment.ts or rather less like it's a good practice you don't have to create it you can directly paste it here as well here environment.auth right so I am using this environment Dot auth from my environment file right so I am what I have did is like I have created uh in in my application module in my app module file on line number nine I have imported that SDK that authentic auth module SDK from r0 angular right so after that I am using and initiating this module in my imports array so this is how angular applications are breaking so whatever open source third party modules you are using and installing so you have to register those modules in F dot module file so in my app dot module I have imported this SDK and I have registered that one here in authmodule dot root for root and I'm providing this authentication one this object from my environment.ts like okay this is my domain and this is my client ID you can register my application here right so in this manner the application we have configured on browser on here the application we have configured on browser so that's been attached and registered uh that's been attached and registered with your angular application here in the code base right so this is how the magic is so now successfully by these three things so that authentication is being successfully added in your application right so now let's uh let me show you out from where I have initiated the login call so how it's been opening that one so after doing those things I have created a layout I have created a layout folder in application folder and here I have header dot component.ts right and also I have this one so what I have did is now the third thing we have to do is the fourth thing sorry so the third and fourth thing is we we're gonna do is after initiating and registering your authentication module here in F dot module the component from where your login button will be going to initiate a login call so in that mod in that component you have to use this odd service right so now the the second task is to import your auth service from r0 SDK so I have imported this r0 service earlier we have created r0 auth module right so now we are registering now we are importing auth service right so after importing this auth service I have created a Constructor here right so now I will inject this auth to open my login popup and up and initiate the log out call from my component so this is how it's been a magic so we don't have to worry about creating apis and initiating the methods so initiating the API methods for login logout and all kind of things so it will redirect you to that login mechanism automatically so after registering this in my header dot component I have created a simple div with HTML right and in HTML I have created uh this auth the Constructor which I have been created here with the name of auth so here I am using like if auth dot is authenticated so this is observable which is provided by this class so it will going to check like either your application either your user either the user is authenticated or not so if it's authenticated so only then log out button will be going to show right and from here on the log out button I have I have added a click method so in that click method this same Constructor which I have been created here on line number 14 so I am saying this click method like initiate a logout call when that logout button will be going to click authentication this auth is a Constructor which I have created here on line number 14. so I'm saying it here like auth dot logout so it will be going to log out what it will be going to log out the authenticated user so now on the other case here if you are looking into if and else so if you probably know about little bit of a little bit about programming so you will you will you will know like what NG if is sorry not ngf if and else conditions so in angular applications we have these structural directives so with those actually we are doing this NG if and else so if users authenticated so it will be it will be looking into this log out button right the user will be going to look that logout button will be appeared there on the main screen so if the user is not so I actually did else logout so this is a log out from line number nine to line number 11. so this is uh this is actually a NG template which I have created so if the login is if if user is not authenticated so the login button will be going to show on the user screen so in this button in this login button I have also added a click method and inside that click method I am again using this auth Constructor which I have been used here I have created this auth from authent auth service from odd zero uh SDK so I've created a Constructor here right which which we are using here in logout case as well so here in login case we have a method to open that login mechanism popup which will be going to which will be help you to log in right so I have I have sent to my I have actually I am saying to my application like auth if user is clicking on this login button please initiate the login pop-up so authentication r0 had provided this amazing method which is going to open authentication mechanism for you so on the click of this login button auth Constructor is being initiated with this login with redirect so what this will be going to do is it will open a pop-up from where you can insert your email and password if you have if you have r0 account so if you provide those authentication email and password so it will magically open an authenticated you to that application and all doors are open for you so this is how this is how the magic thing is going to do so and other thing now now this third and fourth thing we have did this now the fifth task is to uh like show user profile information if users successfully login so user will going to uh you you user will have their uh his or her successful uh information about his profile or her profile on the main screen right so in the components I have a home page component dot HTML file so here in the component HTML file home page same I did what I have initiated the authentication Service from r0 SDK and I have created The Constructor here The Constructor which I have created here so this this Constructor is from uh this Constructor is same created in the header file I have created right so the same Constructor is being created here in home page component as well why because I am using this authentication Service for performing some operations in the header case I was using this Constructor same for performing the login and logout activities right now I am using this authentication Service here in home page component to show the successful user data so I'm saying it here like authentication Constructor dot user so it's it will going to create you an observable a stream of user which is successfully logged in so that stream head contained the user information right so authentication so here is an again an NG if condition so it will only going to render the user informations if user is successfully logged in otherwise you will not going to uh see this information right so once user is clicked on login user has provided his or her credentials once it will be successfully logged in then on the home page user will going to see his or her information right so here I am saying if auth Constructor is a user like a user exists in the authentication Constructor variable so then it will show you a welcome in h2 tag and also it will show you the proper email address right so this user observable will contain as authenticated user information in every case whenever the user is successfully logged in so these are the five steps we gonna have to perform to enable your authentication mechanism in your angular applications so now let me let me Demo you out like after this coding exercise after this coding mechanism after this coding enablement so how application gonna work so I have angular application which I have shown you the code base so here it's been running so here this is a default port for angular application for 200 so if I'm clicking on this login button so it will be it will be going to redirect and it will going to open this what it will going to open this uh and this login pop-up right so when you click on continue so it says no your password is correct wrong so I am I also uh I've also enabled the Google authentication mechanism here so let me go you out so I have also enabled the Google authentication here so if I am clicking on continue with Google so it will show my Google profiles here which are successfully logged in when I clicked on this profile which I have been logged in so it says authorize your application so if I said accept so now here you can see successful successful is being shown here now my header has been showing with logout button so if I click on logged log out so again it will be the user is logged out so this is how uh magically things are going on so all credit goes to uh or zero so odd zero has a powerful authentication mechanism we have so as I'm Pakistan's first or zero Ambassador so my task like this is my it's my pleasure to uh share the information like how we have how we have to create this uh enable authentication mechanism in our angular applications so with that actually uh this is actually kind of a secure access for uh like users either we are employers somewhere High therapy have a shopping information either we have a credit card information on our website so authentication which is being enabled by a developer in a single day or in a month it's it's easily uh hackable right so authentication or zero is a it's kind of a team so the whole team is working so it's kind of a very powerful authentication mechanism we have companies are using it like billion dollar startups are using it so yeah we also have to use it rather than creating our own apis for the backend right so once authentication r0 has been successful you can perform certain operations it will create it will send you out multiple keys if you want to so you you can also use this JWT token initiator so once you will have a success from authentication mechanism or zero so then you can like you can also create your JWT and like pass those JWT token to your consecutive remaining apis to open your uh to create your communication between to create the communication between your apis so login is actually kind of a very first thing uh we have to do like either we are using Amazon we are using AliExpress so that authentication mechanism is kind of very important uh it plays a very key role in application development so this is all about uh authentication enabling authentication in your angular application so I will cover more information in my next video so yeah this is how let me let me show you out how uh how this branding works so if I'm clicking on this Universal login so here it will show you the background color for your application so if I if I'm saying like Okay my background color should be white and my primary color should be uh my primary color should be this one right and I'm saying it save so that magic automatically enabled here let me show you out here in my application if I am clicking on this r0 and if I'm clicking on this login so that login is now successfully been enabled so let me show you if I am clicking out that application because it's actually been used so now now you can see my background color is white rather than black and this continue button color is being changed like so right so this is actually the magic of using this uh so they provide the automatic branding here as well so if I change logo if I if I provide any URL of logo here so it will automatically being changed so this is how powerful it is so yeah it's it's all about uh this is all about the enablement of uh authentication in your angular application so see you guys in the next uh video so I will be covering up more other informations and I will cover the passwordless integration So yeah thank you

Channel: Developerorium

Views: 9,709

Keywords:

Id: TDaxfqcSroM

Length: 26min 21sec (1581 seconds)

Published: Sat Dec 31 2022