How to build a Vue + FastAPI application (with JWT authentication)

front end backend authentication how to start how to connect how to be secure pause take a deep breath it may sound hard but it's only hard if you haven't done it before in this video we will build a full stack application using View and fast API and we're going to do this in three steps one we will create a fast API application with a database this will be the back end two we're going to build a dynamic view JavaScript application which is the front end and then three we are going to implement JWT which is Json web token and we're going to be using that for user registration and user login so yeah our application will allow a user to be able to register then log in and then use the functionality of the app so grab your drink I have mine somewhere and I'm going to show you how to build a full stack application starting with the back end all right so let's go over what we already have started we have a main.py file sitting in our fast API directory with a requirements. text file that has all the dependencies that we need for our backend portion of this project so the very first thing we need to do is make sure you're in our fast API directory and let's do a pip install dasr requirements. Tex this will download all the dependencies that we need for our fast API application all right now the very next thing we need to do is add all of our dependencies there's going to be a lot of dependencies so bear with me well really what we're doing is we're adding the dependencies for our authentication and JWT our SQL Alchemy for our database fast API and uvicorn next thing we need to do is add in the dependencies so right here we can see our secret key is going to equal your secret key you can make it whatever you want for GWT we're going to be using the algorithm of hs256 with an access token that expires in 30 minutes so when we create a GWT you only have access to that GWT for 30 minutes and then that jwbt is not valid anymore we're going to be creating a sqlite database which is just a file structure database right here in our application and then all of this stuff is what we need to set up the database and then set up our application next we need to add our cores policy for application by saying app. some type of middleware and we're just going to be adding our Coors middleware which just allows all of our Origins for right now next we want to add our models which is our user which we need to make sure that we see that we're going to be using a hashed password so we're going to be encrypting our password before saving it into the database and then we're going to have our Todo which is going to have ID title description owner ID now we're going to need to be able to authenticate a user and then we're going to be able to create a Todo for that user that's authenticated and then this base. metadata. create all this will create the tables for us within our SQL Alchemy database that we already have so this is perfect stuff if you don't already have a database SQL Alchemy will create it for you we're going to be using dependency injection so let's make sure that we add our G DB dependency which opens up our database and closes it when it's not being used next we're going to add a whole bunch of models now this is for pantic so we can properly do data validation on our request quests and our responses this is a mix between our authenticated user our users and our todos you can see that we have our like Todo get to-do create because we're going to be dynamically creating the IDS and all that kind of stuff so here is really important to make sure that we're using the right models for our pantic and data validation and then lastly we want to add our dependency for our database and then our authentication setup for password contacts and our ooth to schema so now we're ready for our actual code for our authentication before we go into adding the business Logic for being able to create and add to do so this is going to be quite a bit of code that I added we're going to have our G current user what we're going to be using for our user dependency our user dependency is what we are going to be using to make sure that our GWT is good go our users good to go and making sure that we have a valid user before we can accept two do we're going to be adding our user dependency which has to be under our git current user because we are using annotated depends right here our verify password get password hash that's just a simple function that Returns the data that we need we have a create access token we here we're creating the access token and then we are also setting the current date in UTC plus the expires Delta of 30 minutes so if there is an expires Delta it's going to be 30 minutes by default if not we're going to go to 15 minutes and we're going to set that as an exp within our GWT token and then we encode our token using our secret key and algorithm all right and then we have our git user which just Returns the user that we have and then authenticate the user and again if you need this code you can download this entire repository from the link below and then lastly we just want to wait for that user to be able to register and create the token so we have our register which allows a user to be able to register and we go ahead and we'll hash the password before we save it to the database and then we will create a token when the user tries to authenticate and then we can return the user and then we'll have a simple to-do application where we can get our to-dos delete to-dos create to-dos um and that's pretty much all we want to do we don't want to be able to update quite yet so we can create to-dos get all your to-dos and delete to-dos but these are only for a specific user so this is not like everyone shares the same to-dos you have to authenticate yourself and that's what this current user user dependency is doing it's grabbing our get current user function up here um and it's going to validate our user and if it's not validated then we're going to throw a JWT error so our front and will not be able to get authenticated now this is pretty much all we need for our backend application we are able to register sign in and create to-dos based on the registration so to run our app we can just do a uicorn main colon app-- reload we have our application up and running now the next thing we are going to do is create the view front end application now V uee is pronounced vew I've called it Vu multiple times in my life but it is pronounced view um like you're viewing something so make sure you're using the word view and you don't sound like a big dummy like I have for years so make sure you're in view now we need to CD into our view d directory and now we need to install the view CLI so we can do an MPX view/ CLI create view Todo app this will download the CLI for view onto your machine where you have to pick certain things so I'm going to say default right here for the first one if it's your first time ever using view it might ask you if you want to use like node package manager make sure you say yes to npm it's by far the the biggest standard in what we're going to be using in this video now make sure you CD into our new app of view Todo app there's been countless amount of times that I go ahead and I just start doing things inside this view directory and not jumping into the actual project that it just created for us so make sure you're in the right directory or the right child directory after this we need to install axios which is what we're going to be using to call the HTTP and the apis from our fast API application and then we want to do an mpm install for our view router and that's going to allow us to switch screens now the very first thing I'm going to do is I'm going to go into Source assets and I am going to create a new file here called custom CSS and I am just going to dump in a lot of CSS here so we have our container form group form control button button primary if you're used to bootstrap these are very similar to bootstrap they are not bootstrap but it's very similar so make sure you add all those and then I'm going to jump down into our components now inside our components I'm going to create three separate components the first one is going to be Todo list. view see I did it view where we need to add a bunch of code that allows us to be able to see all of the todos that we currently have and be able to delete them so if we kind of look through this we can see there's an unordered list that allows us to be able to see our our to-dos be able to delete the to-dos and then be able to read our current title and description for to-dos or be able to type them in to a form and then submit them and then here if we scroll down we have our async methods which allows us to be able to call the endpoints that we need to call the next component I'm going to create is called user login here we can see that this is just going to be a simple form where a user can type in their username and password and that's all you really need to be able to log in or not and then the last one is going to be user register. viw and here we are also going to just add in some code to be able to create a user based on their username and password all right now next thing we want to do is inside our source directory let's create a new folder called router and now inside our new router let's create a new file called index.js and paste in our routes which is essentially just going to be able to use the routes that we just created to our to-do list user login and user register let's go into our app. viw and replace that with just a simple template that allows us to be able to look at our new routers and lastly let's go into our main.js and replace this to be able to use our new custom CSS to make sure that view knows that this is not a production app and then be able to create our routers from there now we can go ahead and say mpm run serve and when we run our application we're going to see immediately that our app crashes and it's saying it can't read the property of use and that use is the use that we're using use that we're using inside index.js right here so this view. use router and that's because we are using a certain version of view router that we need to actually downgrade and that's because of how the current view router works with nested objects so let's go ahead and just say mpm install at view at 2 and then view- router 3 now once you install that if we go back and do an mpm run serve we can see that our application is loading fine now let's do a slash register because that's where our register is we can see there's a simple registration in here we can type in coding with Roby where I will make the test 1 two 3 4 exclamation mark the password we registered now we are in login if I type in something that doesn't exist like test test we can see that we can't log in but if I go in and I type in my user I click login we have our simple to-do list where we can say yay it worked with our description of I don't know description and we can add a new description we can add a couple more more to-dos here now if you're wondering hey Eric why are you using fast API here well go ahead and check out this video where it's somewhere linked I don't know where it is it's around this area and I will see you in the next video

Channel: Eric Roby

Views: 1,799

Keywords: fastapi, python, python fastapi, fastapi python, jwt, authentication, jwt token, vue, full stack, fullstack

Id: LW-cQN0_1R4

Length: 13min 15sec (795 seconds)

Published: Fri May 24 2024