 Do you want to take authentication to the next level in your Angular applications? Well, you've come to the right place, because today we're going to take a look at how to display user profile information, how to protect that profile with a guard, and we're also going to take a look at setting up an API in All-Zero. Now, I'm Anna Seadry, and I'm a senior developer advocate here at All-Zero. And today we're going to be taking a look at just that and a few things extra. So, let's get started. To follow along this video, I really recommend that you go check out part one, and you can find part one in the description below. However, in this part of the video, we will be displaying profile information, protecting the profile and external API routes with a guard, setting up an API in All-Zero, and last but not least, we will call a protected endpoint using an HTTP interceptor. So as you can see, we've got a lot to cover. So let's get started. So once you have your app functioning like this, I've already logged in. And again, just a quick reminder, if you need to get this function and if you need to log in and log out, which is what we cover in part one, please find the link to that in the description below. So after a user successfully logs in, All-Zero sends an ID token to your Angular application. You can use the data from the ID token to personalize the user interface of your application. In this sample, we already have the basics for our profile component. So let's go to our profile component.ts file. Right now, it's an empty component. So let's start populating. First, we import our service. So what we need to do is call that on our constructor and here, my intelligence is picking this up for me, but please make sure that you have actually imported that. Now in our ngonint, where we initialize data for an Angular component, we're going to subscribe to this.auth.userObservable and like I said, we're going to subscribe. In our subscribe here for our callback function, we're going to get the profile. Now, before we continue is we need to set up a variable to our class. We'll add a public member up here called profile. JSON, it's going to be a string and it's going to default to null. So now when we subscribe to the observable, we are going to say this.profile JSON and as it's a JSON, we can stringify it. We're going to pass in that profile, null, because we want all properties of the object to be included in the results in JSON string and we'll indent by two spaces. So let's just go over what we did here. What we did is we subscribed to this.auth.userObservable and as userObservable is coming from the Auth0 SDK and we're doing this within the profile component. Now, once this.auth.userObservable emits the user profile object, we use the JSON stringify here to format the object and assign it to this.profile JSON. So behind the scenes, after a user successfully logs in Auth0 sends an ID token to your Angular application. Authentication systems such as Auth0 use ID tokens in token-based authentication to cache user profile information and provide it to a client application. Now the caching of ID tokens can contribute to improvements in performance and responsiveness for your Angular application. Now let's go over to our HTML file and display the user information. So what we're going to do is we're just going to maintain this up here. So what we're going to do is create a div and it's going to have an ngf and we're going to use the async pipe here for the user. So we do auth.user and the async pipe, say async.user. So we're waiting until the user is available to us. Now let's add a bit of styling here. So we're going to add another div and we're going to use the class. Now these classes are bootstrap classes. Again, just like in the previous video, we do have some custom classes, which you can see here. We need another div and this time it's going to be a corium and in here what we're going to do is we're going to have our image. For our profile image, what we're going to do is we're going to add source as an input because we're basically getting this from our user and we're going to say user.picture. We'll give it an alt of, for example, users profile picture and a class rounded circle image fluid file picture. Now let's go and check out to see if this is actually working. And there it is, there's my profile picture. Cool. Let's add some more information to this page. For this part, what we're going to do is add another div. This time it's also going to have some classes, going to be a corium, as it's going to be text, we're going to center that text. Let's give this a H2 with a user.name then in here, we can have, for example, AP, we'll give that some classes and we have the user email here. Let me save that out. And again, I just want to go and check and here was my name and here is my email. Now this is basically being pulled out from all zero. Now just to get an idea of what we're going to do, now just to get an idea of what is actually in the profile JSON that we created, let's go and check for that. Let's go and print that out. So what I'm going to do is do this in a div type row and I'm just going to put an NGF because if it doesn't exist, then it's not going to show it. Proof of JSON, do pre-class and here we'll just pass in the profile. JSON, here we go. And here you can see all of the information that's available to us and this is all coming from all zero, like I said. So if I were to put up my profile in all zero, well, this is basically what you would see. Now if I were to log out of the app, nothing actually shows on the profile. But there's no reason for a logged out user to be able to get to this profile page. So what we're going to do now is we're going to prevent logged out users from accessing the profile or the external API pages. And thanks to SDK, this is one of the easiest steps to implement. You don't have to write the guards yourself. So let's go to our app router module because we can then add those guards that the SDK provides for us. So inside our app routing module, we just need to import the OS guard. So let's do that up here. Import OS guard. And we need to import this from at all zero. There we go. Now we're going to add to both the profile and the external API routes that can activate. Can activate basically tells Angular whether or not a route can be activated and it takes an array of route guards. So we're going to add the OS guard from the OS zero Angular SDK. And we'll do the same in our external API. Going to save that out. And let's see this in action. So if we go back to the application, we can see that it's prompting me to log in. Now there are other ways you can configure this if you want, but for the sake of this video, we'll leave it to the default. And it works just like that, just like magic. Like there's nothing else we have to do. I'm going to log in just to show you how this works. I'm going to log in with my OS zero account. And as you can see, I have access to these two now. I'm going to log out. And if I log out, you can, if I go to the profile page again, it's prompt me to log in. So let's now move on and call an API. And we're going to focus on seeing how to get an access token in our Angular application and how to use it to make API calls to protected API endpoints. So when you use OS zero, you delegate the authentication process to a centralized service. Or zero provides you with the functionality to log in and log out users, which we saw in the first video. However, your application may need to access protected resources from an API. You can also protect an API with OS zero. OS zero offers multiple OS zero API quick starts to help you integrate OS zero with your backend platform. When you use OS zero to protect your API, you also delegate the authorization process to a centralized service that ensures only approved clients applications can access protected resources on behalf of the user. So what we need to do is open a new terminal and we need to clone the OS zero express JS sample. I just want to mention that you need to make sure that this is outside of your Angular repo. Now, once you've claimed this repo, make the OS zero express JS sample director at your current directory. So we're going to CD into that. And we need to install the project dependencies. Okay, so what we need to do now is connect the express API here with all zero. So let's go over to all zero. And we need to basically create that communication bridge. So if we head over to the API section, click on this create API button. What we need to do is then add a name to our API. So it'll be also express sample. We need to set its identifier value. This bit is a teeny, teeny bit confusing because it looks like a URL, but it's just an identifier. And we're going to leave this signing algorithm as RS 256 as it's the best option from a security standpoint. Okay, now we're going to keep this page open because we're going to need some of the values in the next section. Now let's go to our express server. Let's open this up to see what's in here. So what we need to do here is we need to create an M file. And we need to populate this as follows. So we need to have a server port, we're just going to read 60, 60. Client origin URL is going to be HTTP localhost 40, 40. Authera audience. We will get that in a minute. And the Authera domain. So we get our Authera audience from here. So if you click on the Node.js tab, which I have already done, you can see here we have our audience and issuer. So we're going to get our audience and the issuer. Now that we've added these here, what we can do is run MP, start to get that server running. Now what we need to do is we need to configure Angular to connect with the express API. So if we head back to the Authera Angular sample project directly, that stores your Angular application, we need to now locate the AuthConfig.Chasing, which is down here. And we need to add an audience and a server URL to value it. So let's go ahead and do that. We're going to add our audience. We'll leave that for now. And our server URL. So our audience is the one that we put here. So it's our HTTP express sample, which I'm just going to copy over, paste it here. And our server URL is the port that we're like serving on. So it's 60, 60. I'm going to save that out. So now what this is doing is it is establishing a connection between the front end and the back end. What happens in Auth0 is it uses this information to create the correct token because the token is only going to allow access to this protected API. That way when the API gets the token, it's going to verify it and see if it's receiving a request from the correct audience to determine whether it's okay to send this protected data. Now let's go to our environment file and update it. So in our Auth, we're going to add our audience, which we need to import from here. And we also are going to put dev and say server URL, which we also need to import from our JSON. Okay. So let's go ahead and call our public endpoint. To do that, we head over to our external API page. We are now being prompted to authorize again because we have just updated this. Let's head over to our external API page and this is basically what we're going to be working on. It's getting the public message. Now if we go to our external API component, we need to bring in our HTTP client. So we do that in the constructor called private HTTP. And again, in terms of this, we're putting that up for me here and we also need our environment. So let's import that. What we need to do is import environment as m and we're going to do this from our environment. Environment. Now we can make a function that will call our endpoint. So let's go do that. We'll call it call API void and we're going to have this dopped HTTP get and what we're going to get is the server URL and API messages public message. We're going to subscribe to that and we're going to get an object with a string in it. So we do result message. Let's add a type for this message up here. So we're going to call interface message and it's going to have a property message of type strings. And now we're going to set this dot message is going to result message. And now if we go to our HTML you can see that we are already set it up to display the message here. So I'm going to add a click handler which is going to call our API. So let's do click and we're going to say call API. Now let's see this in action. Make sure you're logged in and you're on the external API. You might get prompted to authorize again like I did earlier because we have added our audience so things have kind of changed. Now once we're logged in we can go to our external API like I said and we can click on get public message. Now this isn't using ulcera it's just like a regular API but our protected endpoint does require our token. So let's see how that works. If we go to our server and we go to messages and messages dot router you can see that in our get request from the server we have that check dropped or check jwt. And it's a middleware for express which is going to check to see if we have that token but as you can see here our public endpoint doesn't have that. So what we're going to do is a tactile token to our outgoing request. That way the server can pull that token off the request headers and then check to see if it's there. The first thing we need to do to make this happen is we need to import an HTTP interceptor. So let's go to our Angular application and just note that in Angular a HTTP interceptor lets you intercept a request and then do something to it and then send it along the way. So in our app module what we need to do is we need to import the HTTP interceptors. We also need the 0th HTTP interceptor which will be coming from the SDK. Now to actually use our interceptor in our application we need to create a new array which some of you might be familiar with. It's the providers array and it lets us tell Angular what other services and providers to use. Inside of that array what we're going to do is we're going to create a object. This object is going to have a key called and it's going to be for the HTTP interceptors. We're going to say use class and tell it to use the auth interceptor. And lastly we're going to set its multi property to true. As HTTP interceptors is a multi provider token that represents the array of registered HTTP interceptor objects. So we set that to true. Now we need to configure the auth HTTP interceptor. In our configuration object there's actually a property called HTTP interceptor that takes its own options object. And we're going to give it an allowed list of URLs that we want to work with. So we're going to say m.dev server URL for slash API messages protected message. So we can use our environment and basically match it with this. Now what we're doing is we're telling Auth0 to only add the token when it matches this specific URL. Now let's go to our external API component to add this functionality. We are going to just duplicate this call API and we're going to call it call secure API and change the URL to protected message. And if we go to our HTML we're going to do the same thing as before. We're going to add a click handler but this time we are going to call our secure API. Now let's see how this works. To get a better understanding let's open the network tab here and I'm going to click on first the get public message. Now if I click on here you can see that there is well there's no token added here, there's no authorization. However if I click on the get protected message and we scroll down here you can see our token. If we copy this and go to JWT.io we're going to paste this here. It actually shows us the payload. Here you can see my issuer and audience and this sub here is basically like a user ID. That's all for today folks. Now if you'd like to see any other Angular related content from me please let me know in the comments below and well bye until next time.