 Hi, I'm Anna Cedri, a senior developer advocate engineer here at OZERO. Today we're going to be looking at how we can implement OZERO into our Angular applications. In the description below, you're going to find some links that will help you along the way. So, let's get started. What we're going to do first is get the starter application. And all we need to do is clone the OZERO Angular sample repository on the started branch. Now you can get the link to the OZERO Angular sample in the description below. Now once that's done, we need to go into that directory. And we need to install all of the product dependencies. Let's speed this up a bit. Great! Now let's go and run the application to have a look. So this is what the application looks like. What we need to do now is connect Angular with OZERO. To do so, we're going to head over to OZERO.com and you can log in or sign up from here. I'm already logged in, so now what we need to do is create an application. To do that, we head over to the applications in the sidebar. We then hit create application. I'm going to call it OZERO Angular sample. Next, we hit single-page web applications because that's what it is. Once any application is created, we can click on the settings tab. This is how we configure how we want our authentication to work in this specific application. Let's copy the URL from our application and we're going to add it into three fields here. So our URL is Locohydus 4040. We're first going to add it to allowed callback URLs, which specifies which URLs you want OZERO to redirect them to after authenticated. Now the same applies for allowed logout URLs, but after the user logs out. And last but not least, we're going to add it to allowed web origins, which handles checking for current sessions when refreshing the page. Now don't forget to save these changes, which you do at the bottom here. In the Angular startup project, we need to create a file which is authconfig.json. Now this is where we're going to populate it with our domain and client ID, so let's go ahead and do just that. So we have our domain and client ID. Now let's go grab those values. The domain is here and the domain is your unique domain for when you signed up to OZERO. The client ID is a unique identifier for our applications, which basically tell OZERO that it is the application that we want to request authentication for. Now these are both public variables, which is why they are available in Angular. Now to use these variables within your Angular application, we are going to leverage the Angular environment module. So let's go to our environment file and configure that. First we can delete all of the boilerplate. Now let's import our domain and client ID from the authconfig.json file. We are going to create a new object with our domain, client ID and redirect URL, which we are going to use the window.location.origin, which will tell OZERO to send the user back to where the current user was. Now you might be asking, now you might be asking how is it possible to import JSON files within an Angular module? Well the starter project has this tsconfig.base.json and we have set the resolve.json module to true, which allows you to import and extract types from .json files. Right, so let's set up the SDK. I'm going to open up a terminal here and I'm going to do ngadd at OZERO, OZERO Angular. Now the OZERO SDK exposes several methods, variables and types that help you integrate OZERO with your Angular application, including an authentication module on service. The SDK exports a module with the components and services you need to perform user authentication. So let's go and import the OZERO module into our app module. So we're going to, like I said, import the OZERO module, the OZERO SDK and now we need to import our environment configuration and we're going to import it as M because environment is actually a reserved word. Right, now to actually use the OZERO module, we add it to the app module import. We use the follow root pattern to configure the OZERO module, which takes an object with the domain and client ID properties. You create that configuration object by spreading the m.auth object. Now that OZERO SDK is ready and available to us, the SDK gives us methods to trigger authentication events with Angular components, log in, log out and sign up. So let's add user authentication. We're going to create a login button. To do so, let's create a login button component. So I'm going to do ngg for generate, c for component and then I want to say where it's going to be located. I'm going to use inline style, which basically means that I don't want an extra CSS file I want to all within the same component and I'm also going to use the skip test flag because I don't want to use tests in this demo. So now that's created for us. We can go to our component. Now we add the all service. So what we do is public, or service. Now if you take a look, my intelligence is picking this up for us. We now need to add our function for logging in and it's going to return void because it's not going to return anything. And we're going to call our all service, which already has a login with redirect. What this method does is it prompts users to authenticate and confirm concern. So let's go ahead and create our login button. We're going to call button. This project is set up with bootstrap. So we can add some classes from there like button, button primary. Now we're going to add a click event with our login with redirect. We'll have login on it. Now what we're going to do is add this login button to our navigation so we can see it in action. Let's take that out and see what it looks like. And there it is. There's the login button. Now if we log in, the first time you do this you're going to have to authorize our application. As you can see the button isn't being updated. It still says login. If we go over to our cookie, you can see that we are actually authenticated. Now let's go and hide this login button if we are authenticated. So what we need to do is go to our navbar component and we need to have access to our all service. So again we're going to add our all service here. Now what we're going to do is call ngif which is going to have all dot is authenticated which is an observable. And it's an observable exposed by the all service that emits a boolean value. We add the async pipe which subscribes to this observable and returns the latest value it has admitted. Then when a new value is admitted the async pipe marks the component to be checked for changes. When the component gets destroyed what the async pipe does is it unsubscribe automatically and that way you can avoid any potential memory leaks. The isauthenticated observable value is true when all server has authenticated the user and false when it hasn't. So what we're saying here is that we want to show the button when we are not authenticated and if we are authenticated then we just don't want to show the button. So now that I've saved this, if we go to our web page the button has disappeared because we are authenticated. But the problem is we don't have a way to log out. The first thing we're going to do is create a log out button. So again we're going to do ng generate component. It's going to be in components. It's going to be called log out button. And again we want that inline styling. We don't need tests for now. So here's our log out button and again we need access to the all service. Again IntelliSense is picking that up. And now we need to create the log out method. And it's going to again return void do this dot auth dot log out. And what we need to do here is we need to pass a destination to return to. So we pass an optional configuration object to tell Osero where to take the users after it logs them up. In this case we're going to use the actual document. However Angular components don't have direct access to the document out object. But we can inject the document constant as a dependency. So what we're going to do is inject that document. And we need to make sure that it has imported both inject from the Angular core and document from the Angular common. Now we can create our button. And it's going to have some classes from our bootstrap like button button danger button block. And it's going to have a click event log out and we'll call this log out. So now let's add this to our nav bar. What we need to do is add the app log out button. So we're going to do just like before. We're going to give it an ngf and we want to pass that is authenticated observable with the async pipe. Now we don't have to say true here because we're already having the false up here. Let's save that out and see if it is working. And there is our log out button. So we can log out and we can log in again. Now here we hit refresh. Take a look at what happens to this log out button. There's a little bit of a UI flash and the user interface flashes because your Angular app is loading up its services. While it's loading, Angular doesn't know if Auth0 has authenticated the user yet. Your app will know the user authentication status after the Auth0 Angular SDK loads. And we can fix that by adding another check. So let's open up the app component TS. And what we need to do here is import the Auth service again. And what we do is we need to show a loading component which we have created for you while it's loading. And otherwise we'll show the rest of the application. So we create a div class container. Again this is all bootstrap. Inside of that div we're going to add the app loading component which is already provided for you. Now what we're going to do is we want to say if the application is loading we want to show this app loading component. And we can do that with an observable that is provided to you through the Auth service. And it's called isLoading. Again we're going to use the Async pipe. And what we're going to say is if it's loading, show the app loading, else load it. We now need to wrap all of this in an ngTemplate so that once it is loaded we want to show the rest of the application. We're going to add this here. And there we go. And that fixes our UI flashing. So let's go and see. Now if I hit refresh you get that loading animation there. I hope you liked the video. And if you did please give us a like. Also if you want to be notified about further content don't forget to hit that subscribe button. And last but not least I'd love to hear where you're watching this video from. So let us know in the comments below where you're based. Right that's all for today folks hope to see you soon.