 Hello developers, my name is Matt Ravel and today I'd like to show you how to build a simple crud application using spring boot 3 and view 3. Let's giddy up. This screencast is based on a blog post that we published back in August of 2022. But you can see it was just updated here in January of 2023. And so if you want to know all the nitty gritty details on how to integrate the two and what each little part is in very in depth explanation, I invite you to read the blog post. But today, we're just here to actually show you how all the code works. And so if you click on code there and go to the GitHub repo, I have a demo dot adoc file in here. So this is ASCII doc. That's what adoc stands for. If I click on the raw version, I can see it with my handy dandy ASCII doctor plug in there. And it looks nice and pretty. So I'm going to go ahead and put that on the left there. And then I'll open up a terminal on the right. Put that more on the left there. There we go. And so you'll see there's a few prerequisites. But first of all, the gist of what I'm going to be doing today is creating a spring boot three back in a view three front end, and then integrating them together with open ID connect and OAuth 2.0. And so we'll use the quasar framework for the view front end. And then the back end is just going to use spring securities OAuth resource server support. So you'll need Java 17 to begin. Let me see if I'm using that. Yep, Java 17. And then the OS zero CLI. I have that installed. And if you don't have the OS zero CLI installed, you can go to its GitHub repo here. And you'll see it there. And it has installation instructions. And right there. Yep, so you can use homebrew if you like. And and all kinds of other things. So that's pretty nice there. Put that back on the left. And you'll also need HTTP IE. So I have that installed 321 and node 16 and above. Yep. And the view CLI. Alright, so it looks good. We got all those installed. And then while I'm going through each one of these steps, you might notice that there's some brackets at the end. And every so often, I'll just type a few characters and spit out a bunch of code. Those are IntelliJ live templates. Oh, and I forgot to mention, if you want the demo script, the GitHub repo, the blog post, all of them are in the description below. So go ahead and check that out. Click on them. And you can get more in depth information there. But my IntelliJ live templates are mrable idea live templates. And you could see I just updated them 26 minutes ago. And so it shows you how to import them. And you can use them as well. It's a really nifty feature of IntelliJ. So that's why I use them there. And of course, if you just want to fast track it, you know, clone the repo from GitHub, and read what's in the read me in order to get started. There's an octa branch, which is the main branch, and then on us zero branch, this is on the read me. And each one contains separate instructions on whether you want to set it up on octa or us zero. And today I'm just going to show us zero, why because it's easier and better, in my opinion. First, we're going to create a spring boot view crud directory. So I like to do this in my downloads directory, make sure nothing's in there, clear it out, and then take spring boot view crud. And if you don't have the take command installed, you can do make dirt and CD into it. And then I'm going to create an awesome zero OIDC application. So off zero apps, create, we're going to name it view, spring boot. And description isn't necessary, we're going to make a single page web application. And then for the callback URL, we're going to use HTTP localhost, 8080. And then copy that because you're going to need it for the next values as well. And once that's created, we have the basic information that we're going to need to do OAuth and open ID connect with us zero. So I'm going to open up a new terminal down here. We'll put that on the right, just because some of these values are right there. So we're going to create a dot env file, just in our main directory here. And put some values into it. So that client ID we're going to need. Grab that from over here. And then the awesome zero domain, that is right up here. And that's good enough for now. Can exit out of that one. And then we'll create a test awesome zero API. So this is what we can use to validate our JWT tokens against. So off zero APIs, create dash and my API dash dash identifier, and we'll give an identifier with HTTP there. So you can just accept the defaults of no scopes, regular default token lifetime, and no offline access for this particular example. And now the next thing is to bootstrap a spring boot app using spring initializer. So you can do that with curl. And we're going to hit start that spring dot IO, we're going to use spring boot version three dot zero dot two, which is the latest as of today. And Java version 17, which is required for spring boot three. And then our dependencies are going to be spring MVC, spring data rest, Lombok, to make just our model classes a little tighter, spring data JPA, H2 for in memory persistence, and an OAuth to resource server. And we're going to use Gradle, we're going to put that on a resource server directory. And then we can start it up right now if we want. But there's not going to be a whole lot going on. So if we were to open up, you know, local host, 8080, you'll see it's just configured with spring securities default configuration. And that's because we haven't configured anything. So if you were to use user, and that password, it could sign in. And it would just show you the spring data rest default endpoint. So that's all working. And now we can create a spring security configuration class to configure spring security. So it doesn't give us this default, you know, user authentication. So open that up an intelligent, and we'll start by creating a spring security configuration class in just the default demo package security configuration. And again, this is where my live templates come into play. SBV is the one I use for this one. And it's just going to create a security configuration class. And you can see it defines a filter security filter chain beam. And it's going to authorize HTTP requests, and basically allow any request. And then we're going to replace the demo application with some initialization information. So this does a few different things. First of all, it's got a to do repository, which we'll create in a minute, that basically initializes and adds some data in there. So you can see there's a stream of to do is here by milk e pizza update tutorial, study view and go kayaking. And then a filter registration beam, which basically allows course to work between the front end with view and the back end and spring boot. So it's just allowing anything from localhost 8080. And then down here, there's rest repository configurator, basically takes the to do class and exposes the IDs to it. So the view client can easily do crud on it makes a little easier to do the whole crud stuff. So that's why we have that there. And so next thing we'll do is create that to do model class. And you can see this is using Lombok. So it's got Jakarta imports for the ID generated value and entity, those are from JPA, not from spring data JPA, but just JPA in general. And then because we're using Lombok, you do have to have a Lombok plugin installed. So if I were to go to, you know, plugins here, and IntelliJ, and look at my plugins, I could see that Lombok is installed. And so if you're using an ID that's not IntelliJ, you'll have to, you know, Google for Lombok, you know, Eclipse or whatnot. If you're using IntelliJ, you will need to install it. But all the commands I'm going to use in this tutorial, I never start it from IntelliJ. So it should work if you don't have the plugin installed, as long as you run the Gradle commands, instead of, you know, starting it up here with your ID. So now we need that to do repository interface. Remember, this is an interface, not a class. So to do repository and select interface. And then we can do extends. And not that one, JPA repository. And to do and long, and then we'll put an annotation on it. So it exposes this repository as a rest endpoint. This is nice for demos, maybe not great in production, but it works pretty well for this. So repository rest resource. And now this can do basically crud, you know, on that to do entity. And so now we can fire up our back end app, Gradle W boot run. And you can go ahead and hit it with the HTTP. So 9,000 slash two dues. Oh, we're still in 8080, we haven't changed it to 9,000 yet. So 8080. And you can see we're getting all those values that we entered in their back. So that looks good. And now we'll secure it. So it's not secure, right, we used HTTP to connect to it and didn't prompt us for anything. So edit this security configuration. And we're going to change any request to any request authenticated. And then we're also going to make it a resource server. So that's going to be dot and what to resource server there. And then we want to use JWT authentication. So you can also use opaque access tokens. There is a nomenclature in the lot to spec where access tokens don't have to be JWTs, they can just be a random string. The cool thing about a JWT is it's also just a random string of characters. So this will allow us to use JWT to authenticate. And then to make things a bit more secure, we're at a JWT decoder beam that does audience validation. So you'll see this takes a couple values in for the audience or the audience and then the issuer. And then it does some work here to validate that. So we've got to do some imports, and value import as well. And then this audience validator, we do have to create what this does, it just takes in the audience and verifies it matches from the JWT what we have actually coded it into our configuration. And so the configuration is in application properties. And we'll go ahead and add server port, we're going to make that 9000. And that so it doesn't conflict with the view application which runs on 8080 by default. And then that zero audience, which is HTTP, my dash API, and then issuer. So spring security. And we'll do that your auto zero domain. So the cool thing is I have a GitHub co pilot enabled. So it actually completed a lot of that for me. But it doesn't match what I needed to match. So zero, I think it's a tenant list. Tenets. So we're using believe this one here. I didn't know I had so many tenants that's awkward. Maybe better to look in that ENV file we created a got this one right here. And this is issuer, you do need that trailing slash. So that's something that comes issuer as a standard part of open ID connect. And this allows you to do discovery on what the token endpoints are with the keys are and all that kind of stuff. So we're actually open that in a browser and put that slash in there and do well known open ID configuration, you can see all those endpoints, right? So when you give an issuer to spring security that has an endpoint like this, it will automatically append the dot well known slash open ID configuration on it, and give you all the information about that issuer. And so now we can start up that server again, it's still going so control C restart it. And then if we try to hit it with 9000 to dues, because we changed the server port, you'll see now we get a 401 access denied. So now let's create the view client that can talk to that back end with an access token and make it work. So we're going to start by I'll close this one out. And go to the main directory there and scroll our instructions up so we can see them a little easier. So we'll do clear it view, create client. That's just the name of the project we're going to create. And it'll prompt you for the defaults, I'm going to do view three, Babel and ES lint. And then you can CD into that created directory. And do view add quasar or the quasar framework. Those prompt you if you want to replace a bunch of files just accept all the defaults, SAS material icons, and in us. And then we'll need to add some additional dependencies for HT to progress logging routing and authentication. So MPMI axios, and view three logger view router, and us zeros view SDK. So we created that dot env file earlier, we'll move that from the root directory into this client directory, just to look at it again, it's got a client ID, right that we registered that OADC app on us zero with the us zero domain, the audience that we created, and then the servers URL for its API. And so I'll open this up and intelligent, now open up the parent directory of both projects, go ahead and load that gradle script. And then in the client, we're going to replace the main.js. It's just pretty simple right now you can see it there. And we have a few more options just for the logging and all that. And we're creating the app with the quasar options, the view logger, the router, and us zero. So the us zero contains a few settings for the domain, the client, authorization parameters for the redirect you are in the audience. And we're getting all that from that dot env file. And then we're creating our API that we can talk to as a global property. And then we'll create an app dot view which already exists, we're just going to replace it our code. And you'll see up here at the top, it's just got some, you know, quasar header toolbar. And then if we're authenticated or not, it will show a login or log out button. And then the router view is right here. And then at the bottom, it's using us zero to set up the things that will be used is authenticated login with redirect, log out, all that kind of stuff. And then the user and their authentication status. And then we can replace or create a new API class in the source API. And this class is just what's used to talk to our back end, using an interceptor to grab that access token from the zero view SDK, set it as an authorization header. And then everything else is just, you know, ways of creating new getting all updating for an ID, and removing for an ID, right? So it's, it's basically doing what's needed to do to send that data to the back end, as well as get it back to do the create, read, update, and delete. And so now we can create a router and source router index. This is pretty simple. It's just got the main path to the home component, which we need to create. And then to do is component, which we need to create as well. And that requires off. Right? That's not something that, you know, is there by default. So this will make it because we configured view to be the SDK, or the OS zero SDK for view. And we set up that plugin, that's why this requires off will work. And so now we can create a home component, home dot view. And to look at the export default settings down here, you have that router it's using. And basically, if you click on login, it'll log in with redirect. And if you log out, it'll return back to where you started. And then if you click on to do, it'll go to that to do so up here, there's just a, you know, simple page that says you're either logged in or logged out, and you can log in or log out. And then if we go to create a to do item, first of all, we can delete this whole old world since it's not used anymore, create a to do item component. And this has got a little more meat to it. And there's an item section up here, which shows, basically, it creates a grid, where it's like, is the to do completed. And then you can add new to do's, and you can edit to do's and all that kind of stuff. And when you click on the certain section, it allows you to edit it or delete it. And then down here, it's a to do item for the component name. And then all these props to enable deleting showing setting completed setting title, the data is basically return there. And then handling, you know, the clicks, the cancels, the guns, the set completed is all done in this view code. And you can see the API is what's calling that update for ID, and basically communicating with the back end. And then we have some styles down at the bottom. And the last one, the biggest one is the to do's component. So it's a little bit longer at almost 200 lines of code. But this is this is basically the, you know, grid screen. So before I talked about the to do item had the ability to, you know, handle itself and manage this data, this is grouping all those to do items, right here together into this main component that allows you to do all the different things that you can do with it to do. And then, you know, here's the section where you can add a new to do item, the input for doing that, you know, allowing you to just hit enter to save it. And then this whole section here, which allows you to filter various to do so you can see the completed ones and completed ones. And then down here at the bottom, it's got the data, right, because it starts with none. And then when it sets up, it basically grabs them all, right from the API, and loads them. So you can say loading is false. And here's all to do is, and then this allows you to filter them. And then the methods for setting the filter, clicking delete, marking them as completed, you know, talking to that API to remove them, or to remove them, you know, locally, remove from the API, remove locally, and then handle, you know, that you've created a new to do and setting all that up. So a lot of methods in there. But, you know, that's how it all works, right, takes a little bit of code. The spring boot side is super easy to do crud, but with the view side, you do have to write code to do it. So that's the nature of HTML and JavaScript. But the cool thing is, now it should all work. So first of all, let's start up the back end, we'll need to go into that resource server directory. So Gradle W, boot run, then the front end, CD and the client, and MPM run surf. That starts up on localhost 8080. Make that a little bigger. Login takes us to zero. And so if you don't have an account, you'll want to sign up. If you create a new user in your on zero tenant, just for this demo, make sure and activate it via email or via the admin console, because it's not activated by default, and I'll give you all kinds of weird errors. So I have my credentials in one password here. So mrable at Gmail, log in, it prompts me to authorize. And I'm logged in. And I can go to that to do app and see that, you know, we might need to add something else. So learn more about zero, for instance, and communicates to the back end. That's all set up. If you want to study view, you could change that to, you know, view three, and toggle off and it updates. And you could even like, you know, say, hey, we've, we've completed that one. And then you'll see the ones that are complete and incomplete. And if you refresh, it doesn't maintain those filters, but you can see and mark that tutorial as updated. So everything's, you know, communicating with the back end, and all that's working as expected. So the next thing is to just test your back end as a resource server, since we did create that API in us zero, and it does allow us to easily create access tokens to test it. So you can do author zero test token dash a for the audience. And that's HTTP, my dash API. And so it'll prompt you to open a browser window. Oh, got to actually say yes, opens a browser window, and login successful. And then you can grab that token and use it accordingly. So set it as a environment variable. And then you can do verify that it requires an access token, right, that's HTTP to do on port 9,000 gives us that 401. And then we can make that a bit bigger and do it with an authorization header. And now we get all that information back. So that's all working. And you can see it even added that new one that we put in there. So hopefully you've enjoyed this quick screencast on creating a spring boot three API with Java 17 and a front end using view three, you can find all the code on GitHub. And there's a link to the blog post if you'd rather read that and peruse that again. But also notice down here, if you'd like to use all zero, this is showing octa. So if you've used octa before, this is a great read, I think that shows you here's how to do it with octa. But then here's how to do it without zero. So you could even compare the branches, right? If you went up here, and did compare, it would prompt you which one. So main is octa, and then also zero here. And you can see all the code that's basically different between them. You don't really care about the read me there. But you know, there's a few different environment variables, if you have different dependencies, the view code looks a bit different. So if you like this screencast, follow me on Twitter for many more. I like to post good ones, and share others that are related to open ID connect. And I'll zero follow my team on Twitter at octa dev. And of course, subscribe to this YouTube channel for more videos like this one. And just good knowledge about identity and code. Have a great day.