 Hello, developers. My name is Matt Raebel, and today I'd like to show you how to create a CRUD application that's create, read, update, delete application with Spring Boot and Angular 9. Let's get started. This screencast is based off a blog post that I published back in early January of this year, and I wanted to capture the newness of Angular 9. So I actually wrote this post before Angular 9 was released, but I've been updating it as release candidates have come out and then finally for the general available to release that just came out a couple weeks ago. So Angular 9 brings one cool new thing to the table, and that's Ivy. So your bundle should be much smaller. There's a bunch of other features, but that's the main prominent one. There's also Spring Boot 2.2 that we'll be using in this tutorial, and Spring Boot really is the de facto standard for doing Java applications nowadays. It's just so popular. Most developers know how to use it. Of course, there's other options, but I'd like to show you Spring Boot. First of all, I want to recognize Reverend Geek, David Neal for his beautiful artwork here. Beautiful Angular. Love that. So there is a GitHub repo. If you go all the way down to the bottom of this post, if you want to go and find it on GitHub, here it is. And if you like other versions of Angular, there's links to previous ones that have screencasts and betters as well. And you'll see there's a change log of what I updated between releases. So if we click on this GitHub repo, you'll notice there is a pull request. I haven't merged yet, so I'll merge it now. I had a demo script today that will follow everything that we're doing in this tutorial. And so it's just a condensed version of the actual blog post. So if we refresh, you'll see it's demo.adoch written in ASCII doc. I love ASCII doc and ASCII doctor. Markdown is great, but ASCII doctor is even better. So if we click raw, we can see the raw version here. And you'll notice, if you scroll down, that we need some prerequisites. Node 12, Java 11, and an Okta developer account. So if you go to developer.okta.com, this is where you'll create an Okta developer account. You can see the create free account button. Prompt you for your first name, your last name, your company, your email, and that's about it. So no credit card required. You get up to 1,000 monthly active users for free. And if you want more, you can pay for more. So we'll go ahead and close that down since I already have a developer account. And we'll start by installing Angular CLI. So I'm going to put this on the left and then I'll go ahead and open up a terminal on the right. And I already have Angular CLI installed. So if I do ngversion, you'll see I'm using 9.0.3. So I'll create a directory called Angular Spring Boot and cdintuit. And then I'll create ngnew, a notes application. And I'll say routing is true and we'll just use plain old CSS. You can see that took just about 30 seconds to run. That will depend on your CPU power and your internet connection mostly. So if we go into that directory, cdnotes, we can do ngserve and dasho will open it in your default browser. So you can see that open it up in Firefox. That's my default browser. And that's what a basic brand new application looks like. So now we can go ahead and register our application on Octa. I have an account at dev13320. I'll log into that. And I'll go to applications, add application, single page application. And then I'll just call Angular 9 and set the base URI to 4200 as well as the login redirect URI and the logout. And then click done. You'll notice this is using authorization code flow, not implicit. So it's the more secure version of browser based OAuth. And we're also using Pixie. That's proof key for code exchange. And that generates a code before you send your request to Octa or any OAuth provider. And then it also validates that code when you go ahead and exchange the code for a token. So we have that created. And then one thing you want to check is if you created your application and you did not set 4200 initially, you might want to check your trusted origins to make sure 4200's in there. Now you notice I have Angular 9, 4200 in there. You can get a core there if you don't have it in there. Now we'll go to authorization service because we're going to need this issuer, URI. So back to Angular, we can cancel that. And we're going to add Octa for authentication. Use an ng add octa dev schematics. This is a schematic that we wrote to make it very easy to add authentication to an Angular application. So this will install our Angular SDK. It'll also install a number of files, a module, and an authorization interceptor that adds the access token to any outbound requests. So it prompts us for our issuer URL. We'll put that in there. And then our client ID is part of our application. So you see it there. Okay, so that only took 30 seconds to run. And now what we can do is open up our application. We'll just do this in code so I can show you what it created. So it went ahead and created an auth routing module. So this has your octa config in it. So if you messed up anything that you typed in, you could just go change it here. That's the only place it's at. And a couple of routes. And the HTTP interceptor. So if you went to shared and then auth interceptor, you can see this is what adds the request with that access token to any outbound requests. If you go to production, you're going to want to add another origin there. We just have localhost right now. And then also a home component that is very simple. It just has login and logout buttons. So if we were to look at homecomponent.ts, you would see it uses the octa auth service to determine if you're authenticated and then subscribe to any authentication changes. So now if we were to run ng serve, now we can go to localhost 4200. And I'm actually going to open this in a private window. So localhost 4200. And down at the bottom, there's a login button. That takes us to octa. Login with your credentials. And now you'll notice it's a logout button. So if I were to go back to this window where I'm already logged in to octa, you'll see it automatically logs me in. Changes it to logout. So that's all working. Now let's create a Spring Boot 2.2 app. So back in our Angular Spring Boot directory. I'm gonna go ahead and execute this alias that I have. Boot kickoff. And so you can see what it's going to install is a Gradle project that uses Java 11 and Kotlin. So those are specified right here. And then dependencies are H2, JPA, Spring Data Rest, octa, and web. So we can just run boot kickoff. Or if you're doing this, you could just copy and paste this and that's also in the tutorial. The HTTP command is HTTP, HTT PI. So I always have a hard time saying. So if you go to HTTPIEOT.org, there it is. So you can install that. And we can go ahead and unzip this. NotesAPI.zip into a NotesAPI directory. And then we'll need to register our Spring Boot app on octa. The new app and web app. And we can use this redirect code. So this is from Spring Security. If you're using any OAuth or OIDC integration from Spring Security, you will likely have login OAuth2 code and then whatever the name of your provider is. So we can say Spring Boot 2.2 here. And we'll put in this login redirect right there. And authorization code and click done. So if you weren't setting up the Angular app and you didn't actually start everything in Spring Boot, there's a cool Maven plugin rewrote. So this uses Gradle, right? But if you use Maven and you haven't installed, you can do com.octa maven plugin setup. And this will create an account and configure a Spring Boot app if you're in a Spring Boot app for you. So I just wanna show you how this worked since it's pretty slick. Now I have it running in demo mode. So if you were running it on your machine and you've already run it once, it wouldn't prompt you for these. So I can do maven.rable.octa in my company. And this goes and creates an account, creates an app and registers your app. And so it also goes ahead and puts all that information in source main, resources, application, app property. So it's already configured our app to use OCTA. And if we were to go back and look at our applications, you can see that it created one here. The reason it says no palm is just because it's Gradle and I didn't recognize that, but it configured everything just like we did. So I'm gonna go ahead and create this or delete this one. Just wanted to show you how that Maven plugin works in case you wanna use it for your own demos. And now what I can do is, first of all, open this up in IntelliJ. So I mentioned that there was an application that properties file that had the OCTA properties in it. This is actually not a great pattern because you'll be checking in a client secret into source control. So if you have a private repo, maybe it's not a big deal, but for here it is a big deal. So I'm gonna delete it there. And then I'll go ahead and create a OCTA.env file. So this will just be an environment file that sits on my local hard drive. And then I can specify the variables that Spring Security uses as environment variables. So I'll start with this one. So if we were to go back to our OCTA console and go to dashboard, you can see where your org URL is. So I'm just gonna grab that part and put it in here. We don't need dashboard in there. Come on, baby. And then our application. And we need the client ID and the secret. So scroll down to the bottom, grab the client ID and the secret. And now we can source those before you run it. So the terminal, you can do source OCTA.env. And the other thing you'll wanna do is in your getignore, you'll wanna ignore.env file. So you don't accidentally check it in. And then we can run Gradle Boot Run. And once that starts up, we can go to localhost8080 and we're logged in. We don't have any actual data yet, but if we were to open in a private window, localhost8080, you can see we're prompted to log in. So let's add some more information. Let's add a Spring REST API or just a regular REST API that was Spring. So I'm gonna start, we're using Kotlin here. So I'm gonna create an entity. We're just gonna create a notes API that allows you to basically take notes in the Angular app, save them in the Spring Boot app and might be a nice feature for you to have because they're secure and they're tied to your user. So we'll start by creating an entity. We'll call it notes or just note. And you might wonder, how did I do that so fast? So that is IntelliJ's live template. And I do need to import everything here. So there's some ambiguity, that's why it's prompting me for those. So that's all the imports. You can see them there. And if we were to go back to the top of this instructions, you'll see the brackets that they in the some steps indicate the IntelliJ live templates I'm using. So my live templates are MRABLE idea live templates and you can install them in your IntelliJ instance if you want to do a similar demo. So I added the Kotlin for Spring Boot Shortcuts a few hours ago. So you can see here I've credit any credit repo, credit event, those are the live templates I created. So we have our entity. Now let's create a repository to persist it. So this is a notes repository. It uses repository REST resource. So that will actually create a CRUD API for you. CRUD REST API that you can put, post, delete, and get from. And then we'll also create a repository event handler that whenever we add a new note it automatically adds a user that's currently logged in. So you can see here this is a repository event handler. Do have to add some imports there. And all the imports are up at the top here if you want to see them. And you'll notice before it creates it it goes ahead and grabs a username from the security context holder that's a Spring Security class. And then it prints out that it's creating a note for that user and it sets the user on the actual note. So it's just a string, makes things easier. And now we'll create a data initializer. And this will put some default data in our project. So we're using H2 initializer. And H2 will automatically delete the data each time we reload. So it's nice to have basic data in here. So you can see here it imports notes repository as a dependency. It implements application runner and it overrides this run method. And then it just takes notes one, two, and three and saves them in the repository for a generic user. And so the next thing I want to do is create a user control that allows you to get the notes just for your user. So this takes the notes repository as well and it's mapped to user slash notes, takes in the principle, so you can grab that from the request. Spring Security provides that for you and then it finds all by the user. And if it's empty, it just returns an empty list. Otherwise, returns the notes and there's also an endpoint for the user. So you can see all their information that comes back from OIDC user. So this authentication principle annotation from Spring Security makes all that possible and boy, it's really nice to use. So now we're gonna go ahead and create this method on our notes repository. So if we go back to demo application, we could just add it. So we'll have to add some curly braces and then that's there and then if we go back, we'll see that that's resolved. And then I also want to set a base path. Since we're using user and having these end points notes at the same endpoint might be a little weird. So I'm gonna set a different base path just for Spring Data REST and you can do that with this property. So Spring Data REST dot base dash path API. So it'll be API notes now. And now we can restart and we'll see our notes API. So now if we open up localhost 8080 and go to user, we'll see all the information about our currently logged in user. So you can see all the different roles that I have as well as attributes and preferred username, all kinds of stuff. So that's all from my open ID connect provider. In this case, that's Octa. And then I can look at API notes and see the notes. So if we look at the raw data, you'll see that it just has notes, note one, note two, note text and just links to itself. So no IDs in here either. The last thing I'm gonna do is add a course filter. So in demo application here, just gonna add it to the main Spring Boot application. And this is because Spring Security doesn't really honor the cross origin annotation. I could add that, but once Spring Security is involved, it doesn't seem to work with it. So this course filter is my solution. You'll see it's from Spring. And what it'll allow us to do is talk to this application from Angular. So just get those imports right. The last one here. There we are. And so now we can restart our backend and we should be able to talk to it from Angular. So remember how I added Octa authentication using a schematic? What is another schematic that I helped write for Angular CRUD? So if you were to search for Angular CRUD, scroll down a bit, you'll see Angular CRUD on MPM. And if you were to go to its GitHub repo, then you can read more about it there. But basically, you'll create a new directory, put a model object in it and then run a command. So we'll close that and go ahead and start by MPMI-D Angular CRUD 1.0.0. And then we'll make their dash p source app note and we'll CD into there and create a model.json file. This defines our fields. And you'll see our fields are ID, title and text and the ID is ID equals true and it's read only so we can't edit it or the UI won't make it editable. So now we can CD back to our root directory. Make sure we're in the right spot. And then we can run this command right here. And you'll notice it create a number of files for us. So we can go ahead and open this up in IntelliJ. And so under app note is all the new files. It created a note module that pulls in the various components and the routes. So if we were to go to the note routes, you can see it has notes and notes ID to edit it, a note service as well as the entity itself. But let's add a link to the notes list from our home component. So we'll do this between the login and the log out buttons. Let me format that. And then we'll change our app component to be much simpler. So get rid of all that default information. And now if we were to run ng serve, we can go to localhost 4200 and we're logged in. So we can see our notes, but there aren't any in there. Well, that's because we haven't created any there associated with this user. So we can create your first note and save it and you'll see it doesn't actually show any notes. Why is that? Well, that's because the service by default doesn't call the user notes. So if we go down to find, first of all, fix that error. And then we can add const user notes equals HTTP, localhost 8080, user notes. And then we can replace this API with user notes. Now we will get our notes. But you'll notice if we go in and edit a note and we add a two on it, for instance, it actually creates two of them. So the reason for that is because we aren't pulling back the IDs and expects the IDs. So it's not sending an ID back to the end point, it's just sending a blank one. Switching projects and we'll create a rest configuration class. So this sets that base path, just like we did in application properties. So we can remove that and it exposes IDs for the note class. So this is configuring the repository rest annotation that Spring Data Rest has. So now we'll start this since that should all be working now. So we have no notes since we restarted our backend. First note, now you can see there's only one. If we edit it, there's still only one. So now those IDs are working correctly. And the last thing I wanted to show you is I did write a blog post on 10 excellent ways to secure your Spring Boot application. So there's tender for things in here like use HTTPS in production, check your dependencies with SNCC and a bunch of other ones. But the four that I wanted to point out is enabling CSRF protection, using a content security policy and using OpenID Connect. So if I were to go into the Spring Boot project, we can create a security configuration class and you'll see this is enabling web security. And this is what's already happening. It's already preconfigured by the Octa Spring Boot Starter, uses OAuth2 and sets up an OAuth2 resource server. And then to add those other things, all you have to do is use this code here. So requires channel and it looks for an X forwarded proto. So if it sees that, it's probably behind some sort of front end load balancer. So in this case, it came in as HTTP and you wanna switch it to HTTPS with requires secure. So this works on Heroku and Cloud Foundry. I've tried it there, I know it works. As far as CSRF, this is how you take it and turn it so it's not an HTTP only cookie and it's a regular cookie that Angular could read and as well as a content security policy. So both of these will make it so your Spring Boot application has a content security policy and it sends a CSRF cookie. Now the issue is that we're not bundling our apps together on the same port. So this CSRF cookie will be sent but you can't read that from a different port on Angular so it won't actually do that. Same thing with this CSP. So we're making Spring Boot secure but we're not really securing anything between Angular and Spring Boot. To do that, you can actually combine them and just have Angular in your Spring Boot app and if you want a way to do that, I recommend jhipster.tech. It does that by default and works really nicely. Let's make sure everything works after we add those. So we can try this browser since we haven't logged in yet. We'll click Login, it'll take us to Octa and we can sign in. Now we have our notes. We can add a new one. Say something like, hello world. Save is successful. We can change that to like howdy. All right, and that's all working. So thank you for watching this screencast. The blog post, the link's right here so to that Angular 9 blog post as well as the GitHub repo. And you can follow my whole team on OctaDev on Twitter. You can follow me on Twitter as well at mrable. And if you like this video, you'll probably like some other ones on our OctaDev YouTube channel. So watch them, subscribe and enjoy your day.