 Hello web developers. My name is Matt Raebel and today I'd like to show you how to add authentication with OpenID Connect to your Angular applications. Let's get it up. So everything I'm going to show you today, the results are contained in this repo at Octadev Auth0 Angular example. And in this repo, there's a demo dot adoc adoc for ASCII doctor that I will use as instructions for everything that we'll do today. So if you're developing a modern Angular app, you might need a way to authenticate your users. And that's where OpenID Connect comes into play. The short name for it is OIDC. And it's a thin layer on top of OAuth 2.0 that adds identity. So in this tutorial, I'll show you how to add OIDC authentication to a new Angular app in just a few steps. So I'm going to put this on the left here. And then we'll open up a terminal on the right. And you can see the first step is to create an Angular app with routing enabled. So you can do that with MPX, Angular CLI, we'll do version 13 and new, we'll call us zero demo, and we'll enable routing. And of course you could install the Angular CLI using MPM install dash G, at sign, Angular slash CLI and then just use ng. But this is kind of cool where MPX will allow you to actually do everything without installing the CLI globally. So as far as the style shoot format you'd like to use, the default is just fine CSS, but you can use another one too, we're just not going to do much CSS in this one. Once it's created your app, you can see it took about a minute there, you can CD into it. And I wrote what's called octadev schematics. And these schematics basically allow you to install octo for authentication in any of the various front end frameworks react Angular view. And I also added support for us zero if you're using Angular. So that's what I'm going to use for this demo. But first, you'll need to actually create an application on off zero. So you can use the off zero CLI for that. If you go to off zero slash off zero CLI as far on GitHub, it'll show you how to install it. And you know, if you want to learn more about it. So I already have it installed. And I can run off zero login to log into my off zero tenant. So it says to press enter to open a browser to log in. It'll do some confirmation. And then it'll prompt me for how do I want to log in. So however you created your off zero count, use that same way to log into it. So if you use social login, use that if you use email password, use that. So I'm going to continue with let's do GitHub here. Oh, and then it wants my GitHub username password. So I got those in one password here. And then it prompts me for my six digit code, which I also have in one password. So it's redirecting me back. And it prompts me for which work I want to use. So I have a j hipster one, I'll go ahead and just use that says congratulations, we're all set. Yes, that's the tenant I want to use. And I can close this window now. And back to our instruction. So I'll do off zero apps create. And I'll just name it angular or DC description, you can leave blank. I'm going to do a single page web application. And the callback URLs is going to be first of all, local host 4200 home. And the rest of them are going to be local host 4200. So I'm just going to go ahead and copy and paste this right here. loud origins and allowed web origins. And then it goes ahead and creates everything for me. The two things that you're going to want to take note of is the issuer or domain name, and the client ID. So now we can use octa dev schematics to add a lot to that Oh, and oh, I DC support to our angular up. And so you can do that with can't type clear today, ng add octa dev schematics and pass in off zero flag. And they'll prompt you for those values. As soon as it installs the octa dev schematics. So press yes to proceed. And then it asks what's your OIDC apps issuer URL. Well, that's what we had earlier. But we close that window. Maybe we can scroll it for there we go. So this can be two things. If you just put in the domain name like that, that'll work. You can also put in the actual issuer, which is HTTPS, and a trailing slash. And that will work as well. The octa dev schematics is smart enough to actually trim those off and just use your domain name. And then we had our client ID right here. And it adds the off zero angular SDK, as well as a number of templates. So now we should be able to see what changed. We have some new files. So if we open this up in my favorite ID, which is IntelliJ, and that's because I kind of have a Java background. So I know you might be using like VS code or something like that. But I really like the GitHub features or the get features in IntelliJ. So I'll just show you what everything looks like here, as far as what it changed. So if we go to the commit window, we can see there's a test that changed, right? So this is a this is all that's needed to mock out the off zero issuer. And then the app module has off routing module, and that off routing modules what has all the logic in it. So it's got the configuration for off zero, it's got the routes for that home by default. And then it initializes the off module from off zero, and provides an off HTTP interceptor also creates this home component, which the most interesting part is just this off service. And the document so it does, when you click login, it logins with redirect. And what log out, it returns to your same location. And if you want to use off zero console instead of the CLI, you can do that as well, you just log into your off zero account, create an account if you don't have one, go to applications, create application, select that single webpage application, and use those same redirect your eyes. And so at this point, we can run ng serve to start up our app. And once it started, we can go to local host 4200, make that a bit bigger. And you'll see down here in the left corner is a login button. So click that redirects us to off zero, the hardest part is remembering your credentials. So I have mine in one password here. And you'll notice it's actually logged me in, right, it's got a log out button. So if I click log out, and then log in again, it prompts me again. So let's put those credentials in there again, I still have my footboard. And then the next thing I wanted to show you is how to actually display the authenticated users name. So you can use the user avert observable from the off service from off zeros SDK, and basically modify your home component to display a welcome message to the user. So let's go in here, and back here, and into this home component dot HTML, you'll see right now it just has, you know, log in and log out buttons. So we're going to replace that with still login and log out buttons. But if the user is authenticated, right, that's what this if statement is, then it goes ahead and displays their name. So it doesn't look like I erased everything, there we go. And then we can go back to our browser. And it should already be rendered there. And there you are. Welcome, Matt Rable. And go ahead and log out if you want. So there you have it. Pretty slick, huh? So you can find the code for this example on GitHub, like I said, octa dev off zero dash angular dash example. And I also want to let you know that I did write an Angular mini book recently. And this book is for someone that's new to Angular, or that's new to web development in general. And you'll basically learn how to develop a bare bones application, test it and deploy it. And you'll move on to adding bootstrap, angular material, continuous integration and authentication. And it shows you how to do it both with OTS zero and octa. And then it builds up a spring boot back in and shows you how to communicate with that and the best practices for security there. So it's a free book from info queue. So you can download the PDF or the E pub. And it'll eventually be available as a print version as well. And the initial edition just released about a month ago uses angular 12 and spring boot 2.5. I do plan on updating it probably in the next month or two. If you like this tutorial, I encourage you to follow me on Twitter. I'm at mrable. And you can follow off zero as well at off zero. And of course you can follow my octa dev team and subscribe to our YouTube channel at octadev on YouTube. Thanks for watching and have a terrific day.