The setup of the authentication system was a crucial aspect of building a secure application with React and Flask. The author began by explaining how to add authentication to a React application using the Passage library.

To start, the author created a new file for the authentication variable, which would serve as a kind of "token" for the application. This file was necessary because Passport.js would require this variable in order to authenticate the user. The author noted that this variable should not be used for production code, but rather for development and testing purposes.

Next, the author created an API endpoint using Flask to handle authentication requests. They added a middleware section to their Flask application, which would automatically check for a JWT token in the request headers. This token was generated by Passport.js and stored in local storage and a cookie on the client-side.

The author then explained how to manually access user data from local storage. They created a new component called `Profile` and added code to print out the user's information, including their email address and phone number. The author used Passage's `userinfo` object to retrieve the user's data and then printed it out in a paragraph.

The author also explained how the authentication system worked behind the scenes. When a user signed in, Passport.js created a token that was stored in local storage and a cookie on the client-side. This token was automatically sent with every request to the Flask application, allowing the server to authenticate the user without having to manually verify the token.

To demonstrate this, the author added code to their `Profile` component that printed out the user's token from local storage. They then used Passage's `dog.get.item` function to retrieve the token and display it in a paragraph. The author noted that this was just an example of how to access user data manually, but that in practice, the token would be automatically sent with every request.

Finally, the author reflected on the importance of authentication in building secure applications. They noted that while the code used in this tutorial may seem complex at first, it was actually relatively straightforward once understood. The author also emphasized the flexibility and customizability of Passage's library, which made it easy to integrate with existing applications and databases.

Throughout the video, the author also discussed the importance of disabling host checks for development purposes. They noted that this was a "hilarious" thing to do, but that it allowed them to quickly test their application without worrying about authentication issues. The author then explained how they had reloaded the environment variables and tested their application again once they were satisfied with their changes.

The final section of the article reflected on the completeness of the tutorial. While the author noted that some parts of the code may seem unnecessary or redundant, they emphasized that this was a deliberate design choice to demonstrate the flexibility and customizability of Passage's library. The author concluded by thanking Passage for sponsoring the video and encouraging viewers to like, subscribe, and leave feedback on future videos.

"WEBVTTKind: captionsLanguage: enif you're watching this video then chances are you've worked with authentication before maybe you've tried to add it to an api to a website to some other type of app and you've probably seen how time consuming and difficult it can be to do that not to mention you can introduce a ton of security vulnerabilities into your application if you try to do this say on your own from scratch where you're storing passwords hashing passwords and all of that mess that you really don't want to have to do in this video though i'm going to show you the easiest authentication i've ever used which is called passage now passage provides biometric authentication so you can do face id you can do it with your finger if you have windows hello face you can use that or if none of those work then you can get an email sent to you and click on that now this video is sponsored by passage however they are super simple to use and this is probably the authentication i'm going to use going forward considering it takes literally a few lines of code to add this to an app now of course passage is free you do not have to pay to use this and you can create an account at the link in the description and then actually start building your applications now in this video specifically i'm going to show you how you build a react front-end that's authenticated with passage and a flask back-end so we'll have the front-end authenticated you'll sign in on the front-end and then you can send proxy requests to the back-end and those will be authenticated as well of course if you want to use a different text stacks or you can do that as well they have pretty good documentation that shows you how to do this for pretty much any language and framework that you can think of but again here we're going to do react and flask for now though let me give you a quick demo of how this works and you will see well how it works so in this case we have passage demo i have a login form i can also click here for register now i didn't build these passage provides these and you can customize these if you want for now though let's log into an account that i already have so check with tim gmail.com let's click continue and then notice what it says here it says okay it's making sure it's you you're going to log in with biometrics so log into your account with the method you already used to unlock your device now i don't have windows hello face on here which is like face id for windows if i had that it would have popped up my camera instead though it's asking me for the pin for my computer so let me type that in and then it should sign me in i'm now brought to this page you can see my email is here and i can test my back end authentication by clicking this button and seeing if i send an authorized request now i'll play a demo on my phone while i continue to go through this so that you can see that it works a bit different on the phone and it will bring up my face id it automatically detects the device and then it shows the correct authentication method based on that device and again if that doesn't work then it will send you an email and you can sign in with a magic link all right so that is it for the demo this is really cool again this is super simple to do you're going to see how easy it is in a second so now let me hop over to vs code and we'll start building out this project where we have an authenticated front end and back end using biometric data all right so i'm here in vs code which is the editor i'm going to use for this video feel free to use whatever you want but just open up some folder or directory in this case i have one called passage tutorial it's on my desktop and this is where we'll start creating our different apps we're going to start with the react front end then we'll go to the python back end this is not a tutorial for complete beginners but you can watch it and you can see how i add the authentication then that will help you if you're adding it to your own app or you can do you know every single step that i do in this video it's up to you but i'm not going to explain all the react basics like what a hook is what a component is i have a whole react series on my channel so i'll leave that in the description in case you want to watch it and then same thing for python and flask i'm just going to go through building the app i'm not going to explain all like the flask concepts and that stuff i have a flash tutorial on my channel as well that you could watch if you want to learn that anyways we need to install a few things here before we get started so we need node.js i assume most of you already have that i'll leave a link in the description though and then we're going to use something called ngrok now when we're using passage if we want to get access to the full suite of biometric features that it has in authentication we need to have ssl and https secure connection so in order to do that we're going to use this tool called ngrok which allows us to create kind of a tunnel or a proxy from a temporary public address or public domain to our local host machine so this will allow you to use this from well any computer that you want and it will forward the requests from that temporary public url to your localhost machine server or whatever you want to call it it's quite cool but you do need to download this so link in the description it's also just ngoc.com download it and then what you're going to have to do after you download this is you're going to have to extract it from a zip folder so i've just placed it right inside of where i'm going to be doing this so inside a passive tutorial i have the exe and then what you can do is in when you're in the same directory as this file you can type ngrok and then whatever the command is that you want to run however you do need to create an account on ngrok and get an authorization token so just scroll down on this page where the download is and if you don't have an auth token then sign up since i'm already signed up it's going to bring me to the dashboard and then here you'll see a command where it says ngrok auth token and then whatever the token is copy that paste that in your terminal wherever the ngrok.exe file is and then you'll be good to go and you can start using and okay so now that we have that installed and i'm assuming you have node.js installed we're going to create our react frontend using an npx command so i'm going to type mpx create and then react app and then the name of my app i want to be frontend it will make a frontend directory for me inside of here so let's hit enter okay that's going to take a second while that happens let's run the ngrok command so you can see how this works and then we'll set up our passage account so i'm going to say ngrok http and then 3000 now ngrok obviously is the name of the command http is what type of request we want to be forward and then 3000 is the port that our react application is going to be running on this is just the default port so when i do this let's make this a bit larger we can close that here you're going to see that it opens up this page here and we get these urls and these urls are forwarding to http localhost colon 3000. so if i send a request to this url right here it will send it to localhost 3000 get the result and then send it back so very cool again this is temporary so if you restart ngrok this url will change and this url will not exist forever uh you have to like i guess it'll give you a new url after a certain period of time i think you can pay and have it stay for longer but we're just going to use the free version we don't need to pay for them for now though we want to copy this https url because that's what we're going to use for our app and just have that on your clipboard for the next step here so now we're going to go back to the passage website we need to make an account here for our auth so sign up if you don't already have an account i'll leave this link in the description i have one so i'm going to log in and then what you can do is create a new application so for our application i'll just call this tutorial call yours whatever you want the authentication origin this is where we're going to paste that ngrok url because that's how we're going to access our website from now on and just note that if this changes you're going to have to change the authentication origin and i'll show you how you do that in a second and then the redirect url this is what page you want to go to based off this base url when you sign in so in our case we want to have a profile page and the profile will just show us if the user is signed in what their email is so for now we'll just put slash profile we can change that later too and then we can choose our text stack i'm just going to go with react in python because that's what we're using okay create new application and then it actually tells us how we can do this right so you can see how simple this is we install with one command and then we add a passage element to our react front end that then gives us the login form the sign up form all that kind of stuff and then for python if we want we can have a look at the documentation here or the github example i will link some of this stuff in the description or at least the link to the documentation so you can read about other tech stacks and a bunch of features because i'm not going to show you everything in this video for now though let's just go to our dashboard and what we want to look for right now is the application id so let's copy that application id because we're going to need that and now what we want to do is go back here and our front end has been created so inside of our front end directory i'm going to make a new file called dot env and i just need to put this app id inside of here so i'm going to say react app underscore passage underscore and we'll say app underscore id is equal to and then we'll paste our application id inside of here and this is an environment variable that we're going to use to actually we'll connect to passage right okay so now that we have that uh what we can do for now is just clean up this directory a bit because we don't need everything inside of here so for now i'm going to delete a few files specifically all of these ones so app.css app.test.js logo report web vitals and setup tests we don't need any of those so let's delete those now let's go to index.js let's get rid of the import of web vitals let's get rid of that let's go to app.js let's get rid of those imports and let's clear everything inside of here and for now let's just put a p tag and say hello world exclamation point okay nice we've cleaned all of that up now what we're gonna do is run our react front-end so let's go npm start and we got an issue it says package.json uh a complete log this is related to npm not being able to find oh it's because i did not go into the front end directory so let's go cd front end where our app actually is and then mpm start okay so it's going to take a second to run but now we should be able to access the react front end from this ngrok url because it's forwarding the request to there so let me just copy this url here okay let's grab all of that let's go here and let's paste that and then notice it's going to show me hello world okay awesome so ngrok url is working react app is running passage account is created now let's start actually setting up the react application that's going to allow us to log in and use that authentication so we're going to create two pages one that's going to be the login page another that's going to be the profile page so we need some way to route between those so the first thing i'm going to do here is i'm just going to stop this application and i'm going to import a few packages that we need so the first one is going to be react router dom so we're going to install react router dom like that let's see if i can make this a bit easier to read okay npm install react router dom uh it'd be helpful if i typed npm correctly okay once that's done i'll be right back okay that is finished then we are going to install the package for passage so i'm going to type npm install at and then this is passage identity i think i spelt that correctly slash passage off and then this is going to be at and we want a specific version here 0.1.0 and then this is going to be the beta dot and then 2 7. okay so that's the specific one we want it's just the most up-to-date one that's why i'm installing it okay again pause the video if you need to type in that command once that's done i will be right back okay so that is finished now that we have done that we want to set up two pages as i was saying the login page and the profile page so i'm gonna make a new folder here called components and inside of the component i'm going to put a profile.js and i'm also going to put a login.js and for now let's just put some kind of boilerplate components here so i'm going to say export default and then this will be login and this needs to be a function okay and let's simply return from here a p tag that just says login let's copy that let's put the same in profile except we're of course going to change login to b profile okay now let's go to app.js and let's set up the router so that we can go between the different pages so i'm going to say import and let's import a link actually not a link let's import a route our routes and then our browser router like that if we could type this properly of course from and then this is going to be react router hyphen dom okay now that we have that we want to import our two components i'm going to import profile from and then this is going to be dot slash components slash profile and then same for login import login from component slash login okay now that we have that let's set up the different routes so we're going to have our browser router like that should have just typed it properly and then inside of here let's do the tag properly this time we want to have our different routes so we'll have our roots like that okay and then we need our individual roots so i'll put them in here and these can be i guess self-ending tags whatever you call those okay so we're gonna have two roots the first root is gonna have an element which is equal to and then this is going to be the login element okay and again we can just close the tag in itself and the path for this is going to be slash so when you go to slash it'll just bring you to the login page that's fine and we'll make that an exact path okay then we're going to have an element this is going to be equal to profile and then the path is going to be equal to not slash we also don't need exact it'll just be slash profile okay so now that should be the routing for our application so we can get to the different components so let's test that out let's just rerun our application here so npm start okay and i hope my url didn't change actually it looked like my url might have changed so i might have to fix something here in a second uh let's see if i refresh this okay no looks like we're all good so url did not change for some reason i thought it did but if i go to slash and then profile brings me to profile and if i just go to slash brings me to the login page nice so that is working now let's code the login page so for login you're going to see how extremely simple this is but i'm just going to say import and then this is at passage identity passage auth now that we've done that what we can do is just use a component from that module package library whatever you want to call it first though let's just make the page look a little bit nicer so let's say div let's put an h1 tag okay slash h1 let's just say passage demo and then let's put the component i was talking about this component i believe is just passage actually i don't think it's login i think it's auth i need to have a look here though and see yeah it's going to be passage off so a few other components you can use as well but for now we're just going to use the auth component and then we need to put here the app id now the app id is stored in our env file so the way that we access that is we say process dot env dot and then let's just copy this here so we don't mistype it okay let's go to log in and let's paste it and that is literally all we need for the component now this is going to show a login form and a register form and allow us to create new users again you can customize that if you want if you wanted to add more fields like when you're signing up you want to collect a first name a last name a profile photo that type of stuff there is a way to do that with passage you also can connect all of your users from passage to a local database by just associating the passage user id in your local database i assume you guys can figure that out i'll show you like all the users in passion passage in a few minutes but i just wanted to mention that if you want to customize this more you totally can do that i'm just showing you kind of the most basic option here anyways we have our passage demo we have this let me just add a class here just so that we center everything so i'm going to call this container and let's go to index.css and let's just write the container class here before i forget so container i just want the what do you call this the display to be flex i want the flex direction to be column and i want to align the items in the center and i think that should be good okay so now that we have that let's have a look at our login page so let's refresh and notice we get our passage demo we have login email address and then if want to we can register so let's just try registering for now let's type in email tech with tim gmail.com okay you have to actually have access to the email so make sure you type in the correct email okay sign in with biometrics let's just zoom in here let's register and then again if you're on your phone or something it show your face id but since i don't have that it's just showing me the regular pin okay then it redirected me to profile because i signed in now if we go to passage we can refresh the dashboard here and notice that i was signed in i just created a new account so we have one user a hundred percent with biometrics zero percent magic links if you're signing in with email i'm like you know clicking the link in your email that'll go up obviously and if we want we could change this so if i go to branding maybe i want to change the color can i click on this ah nice let's make it like a red or something and then that's how the email will look as well as actually i don't know if this is just the email yeah okay customize email sent by passage with your company's branding okay so that's just gonna change the email but that's fine let's change it anyways okay going back here i actually wanted to show you users so here we have users i have the user id i have the sign update last login all of that and all of this information you can get access to in the front end or in the back end and i'll show you briefly how to do that anyways there you go that is what i want to show you we just implemented authentication now though let's try to sign in so let's go back to just slash and let's sign in so tech with dim gmail.com continue okay let's type in our pin boom brings me back to profile and signs me in now of course we're not verifying if we're actually authenticated that's what we're going to do now but that was the basics on actually creating and signing up for accounts and having those all stored in the cloud you don't have to store those yourself okay so now that we've made login what we want to do is for the profile page we want to verify if the user is signed in or not if they're not signed in i don't want to show them the page if they are signed in then of course i'll show it to them so i'm going to make a hook here and this hook is just going to be a flexible way that allows me from anywhere in my app to grab information about a user and see if they're logged in now there's a few other ways to do this again i'm just showing you some basics here but for now let's make a hook the hook's going to be called use current user okay and then inside of here we're going to say export and this is going to be function and then use current user okay and inside of here we're just going to write something that will give us the information about the current user so we're going to say const and then this is going to be is equal to use state so let's just import use state and then i'll write the variables so let's go from let's go import use state while we're at it we need use effect as well from and then react okay we're going to say const and then what do we want to call this i guess it's going to be result and then set result that will be equal to use state and then the default state we want here is three piece of information we want is loading so are we loading or not so by default that will be true okay we also want to have is authorized okay by default that's going to be false and then we want the username of the user which for now is going to be username so whenever we call this hook here what i'm going to do is have a use effect and the use effect is just going to get the current user and essentially check if they're signed in from passage so let me just look at my other screen here we need to import something so we're going to say import and then this is going to be passage user like that from and then this will be at passage identity passage auth slash passage user okay so the passage user class allows us to get access to the user's information like their email or their phone number or whatever they signed up with as well as get their user id and a bunch of other stuff for now we'll just get the username and check if they're signed in but just keep in mind you can use the class for a lot more so inside of here we want to do the following we're going to say let and then this is going to be passage user and just empty parentheses like this dot get user like that or not get user that's going to be user info like that and then this will be a promise we're going to say dot then we're going to say user info and then inside of here we'll process the user info now first i'm just going to make a variable here say const cancel request is equal to false okay and inside of here we want to handle this data so i'm going to say if we have cancelled the request by the time that this promise is occurring then let's just return or this is resolving sorry otherwise though we're going to check if we have some user data so we're going to say if user info is equal to undefined then that means that we are not signed in so if it's equal to undefined then what we want to do is say set result and the result that we want to set is actually going to be this except is loading is going to be false so here make that false okay so if we have no user info that means no user is currently signed in and so we set the result say okay we're no longer loading you are not authorized and you don't have a username otherwise though so let's make sure we return here then what we'll do is say set result in a similar way we're going to now set the result but we're going to say true this is going to be false and then we're going to grab the user's information so let me uh why is this okay so let me now grab the username so the way i do that is i say user info dot username but the thing is users can sign up with their username or phone number show that to you in a second so i'm going to check if it has a username if it does i'll use the username otherwise i will use the phone and sorry is it username or is it email i think it's email so let's change that to email yes it is indeed you know okay so we'll go through this hook in a second i think it's fairly straightforward but let me just show you something here if you go to passage and you go to authentication you can change this so that you can have email or phone number only email or only phone so that's what i'm talking about and why we're checking for a phone number anyways that's that a few more things we need to do here is inside of the use effect so i think these effect ends right here let's add our square brackets let's also have a return and then a clean up operation and for the cleanup operation here what we're going to do is cancel request is equal to trip okay and then lastly here we're going to return whatever the result is here that is stored inside of our state from the hook so now use this hook inside of any component and you can check if the user is authorized all right so let's close the hook now let's go to profile and let's use the hook so i'm going to say import use current like this user from and then it's going to be dot dot slash component slash and then use current user believe are not components sorry it's going to be hooks okay now that we have that let's use the hook so i'm going to say const we have three pieces of information that we want we want to get the is loading the is authorized and then the username and this will be equal to and then the use current user okay now that we have that what i can do is the following i can say well if we are loading so if is loading then just return null because we don't want to show anything if we're loading then we're going to say well if you're not authorized so if not is authorized then let's just return something that says hey you need to sign in to view this page so let's go with a p tag which is very basic let's say you must sign in to view this page exclamation point and then we can just make this a link so let's change this to login and let's import a link here so let's say import link from react router dom okay and then this will be link spelt correctly let's place login inside of here and then let's say this is going to and then just slash because that's our login page okay so that's what happens if we're not authorized otherwise let's just say you are signed in as and let's do a strong tag and let's put username inside of there my autocomplete knows exactly what i want okay uh let's end the p tag and looks like we are good for now for the profile page so hopefully what will happen now is if we go to the profile page and we are not signed in it will show us hey you must sign in you are unauthorized but if we are signed in then it will just show us whatever our username is so let's test this out now uh compiled with one error what is the error it says hooks i use current user does not exist all right the issue is that i called this hook instead of hooks so let's rename that directory and now i think we should be good and awesome okay uh oh so sorry this is const i need to just change this to be let because we actually changed that variable so let's change that okay now that we've done that let's go here and let's refresh okay and what's the problem now okay it says you are signed in as tech with tim gmail.com now the reason it's showing me that is because my sign-in data is stored in a session or at least the fact that i'm signed in is stored in a session now if you want to change when that expires you can go here to session management and change this to say like 5 minutes instead of 60 minutes so then every five minutes you would have to sign in again in this case that's fine but there you go you can see that it's showing me my data and again we're getting that from the hook that i created so now let's go back to login let's go back to slash okay and everything seems to be working nice so there we go that is all functioning the profile page is working and really that's all you need for front-end authentication right if you want to check if someone's authenticated then you can just look at the is authorized right here then render something or not render something now there's a few other ways that you can handle this again i'm not showing you everything here but now what i want to do is build out the back end and show you how we send an authenticated request to a flask back end so if you want to create maybe an api or you maybe want to do what i'm doing sending an authenticated request and make sure the user is signed in before they get access to say user data then you can do that so this will be a little bit less time consuming but will still take us a few minutes let's make a new terminal here so let's go here for a new one and let's make a new directory here and let's call this backend and we're going to start setting up a flask project okay so we need to install a few things here with pip let me just throw them up on the screen you guys can pause and install them one by one if you want we need passage identity greater than or equal to 1.2.3 flask request and then python.env now all of these will be available from the link in description so all the code i write will be on github so you guys can just grab this requirements.txt file and install it directly or copy line by line if you want i want to install this you type pip install and then you know name of requirement here i won't go through because i already have them installed if pip doesn't work for you try pip 3 and if that doesn't work for you try python 3 hyphen m and then pip install name requirement or you can try python hyphen m pip install one of those hopefully should work for you for installing those modules anyways i'm assuming you have those installed at this point now we're going to go inside a back end i'm going to create another directory here called app and i'm going to start coding a few things out so inside of back end i'm going to create a dot env file and inside of here we need to have a few pieces of data for our what do you call a passage app so the first thing we want is the app id which i can just grab from right here so let's just paste that in here we're going to call it passage app id and then we also want to get the passage api token which is something that we need to create so let me just see what i called this variable here i think it's just passage underscore api underscore key and that's going to be equal to and then we're going to have to grab that from the console so to do that let's go here to our dashboard let's go to api keys it's fine we don't need to save that and let's create a new api key here i'll just give its name first let's copy the key make sure you copy it now you can't view it after and i'm going to paste it here now of course you don't want to share this with people i'm just showing you because after this video is gone i'm going to delete this application okay so we have our dot env file next what we're going to do is make a new file here called run dot py now inside of run.py we'll write some code that will run our flask app but before we can do that we need to create our flask app so inside of app i'm going to make a folder called init.pi or not a folder sorry a file called init.pi i'm going to make another folder here or another another file called main.pi and i think that's all i need yeah that looks good to me okay so inside of a nit.pi we're going to set up our flask app so i'm going to say from flask import and then that's going to be flask and then i'm going to say define create underscore app this will be a function that we call to make an app i'm going to say app is equal to flask we need to pass underscore underscore name underscore underscore and then i'm going to import something from my main file that we've yet to create i'm going to say from dot main import auth as and then this will be auth underscore blueprint we're going to use flask blueprints just a way to separate out our application and i'm going to say app dot register underscore blueprint and i'm going to pass the auth underscore blueprint uh my autocomplete did not want to help me there okay then we're going to return the app nice so i understand this might be confusing because we haven't yet code out this file but you'll see very quickly why we're doing that inside of our main.pi file now we're going to say from flask import we're going to import request we're going to import blueprint we're going to import something called g and we're going to import actually i think that's all uh one more we need jsonify okay then we're going to import os and we're going to import something from passage so we're going to say from passage and then identity i believe is what it's called we're going to import passage as well as passage error now i'll go through all this in a second i just need to get our imports down we're now going to create our blueprint so i'm going to say auth is equal to and this is going to be a blueprint and it will be called off and it will have name so just to slow down here we did our different imports so we need create our auth blueprint if we go to init.pi that's exactly what we're importing here right and then registering that as a blueprint so now we can write views inside of this file okay now we're going to go to run.pi and do a few things in run.pi this is going to be the entry point of our flask app i'm going to say import app or from app which is the name of this directory we're going to say import and then create underscore app this is how we're going to create our flask application i'm going to say from env import and this is going to be load.env and find.env now this is how we're going to load this dot env file that you can see so we get the environment variables you should have installed this as python.env before we started here and i'm going to say load.env and i'm going to put find.env and this will load that environment variable file for us i'm going to make my flask app and say flask app is equal to create app and i'm going to say if underscore underscore name underscore underscore is equal to main then flask app dot run and we'll run this in debug equals true mode now if you want to change the port of the host you can do that i don't care i'll just leave it the same okay so we have run we have a nit.pi now all we have to do is code out main.pi so what we can do here is we can write kind of a standard view and then we can have a passage authenticate all of the requests to the views or to the endpoints that we set up so let's handle kind of the passage middleware that's what you could call it here and then once that's done all of the requests that we send to anything decorated with this auth decorator will be authenticated automatically by passage so the first thing we're going to do is say passage underscore api underscore key is equal to os don viron.get passage api key and then we want the app id so the passage let's just go app underscore id is equal to passage app underscore id and let's space those out and just verify that we name these correctly wrong env file passage api key passage app id okay it looks good so now that we have our environment variables we're going to have a try except so i'm going to say try and psg standing for passage is going to be equal to passage like that and i'm going to initialize this with the app id and the api key and then i think that is fine for now okay so now that we've initialized passage we're going to accept a and then this is going to be a passage exception or passage error as e and i'm just going to print out whatever e is and then i'm going to exit meaning we're just going to quit the application if for some reason we could not load passage and we'll just print out the air first okay now we're going to set up kind of the middleware here we've connected to passage assuming that our information is correct i'm going to say auth.before request now if you haven't seen this before in flask this is a decorator you can use that will run a function before all of your requests so you can do stuff like authentication so here i'm going to say define before request we don't need to take in a request and what we're going to do is try to authenticate the request using passage and if we can't do that then we're going to return some json that says you are unauthorized you cannot view this page or you cannot view this root whatever so i'm going to say try and this is going to be g.user is equal to psg dot and then it's going to be authenticate and then request like that and we're gonna pass in the request object that we imported right here okay and i'm gonna say accept and we can accept a passage error again all right not pass not password reset error this is passage error as e and then what we're going to do is return jsonify and then we can return the error and we can return e or we can return our own custom message in this case we'll just return e okay so this is going to run before every single request to any of our authentication endpoints so now lastly we can do something like dot auth or auth dot and then whatever we want this root to be so we'll say root and this could be like slash get user info okay and the methods we'll accept here will just be get and i'm going to say define and we'll go get user info and now inside of here we can get the current user by doing the following let's say psg underscore user is equal to and then it's going to be psg.getuser and we're going to say g.user okay and then i can say identifier is equal to an empty string and we're almost done here don't worry i know i've gone through a lot i'm going to say if psg underscore user dot email so if they signed in with their email essentially then we're going to say the identifier is equal to psg.email l if and then this will be psg user dot and this will be phone so if they signed in with their phone number instead then the identifier will be psg.phone and then lastly we can return jsonify identifier identifier and just tell uh you know what the identifier is for the current user that's signed in just a test route again there's a lot more stuff you can do here with the user and more information that you can get okay i know i just went through a lot quick recap here we get the information from our environment variables we then set up the passage object okay if there's an error then we're going to exit and print it out we set up our authentication middleware if you want to call it that this is going to happen before all of the requests so we're going to try to get the current user by authenticating the requests using authenticate request from passage if we were able to do that we'll store it in g and then if we can't we're going to return whatever the error was because the user is unauthorized then we set up this needs to be a root not router the get user info root now here we're going to get the user find their identifier and then simply return it to whoever called this okay there you go that is all we need for our back end so let's now run this let's go python we need to cd into back-end so cd into back-end and then python run.pi fingers crossed everything will work and there we go okay so it is now running so let's go ngrok split terminal okay that's all working let's go here and refresh and now what we need to do is we need to send a request to the backend and then get that information so to do that we're going to go to our package.json we're going to add something in here called proxy and what this allows us to do is proxy a request to a backend so for the url that we want here we're going to say http localhost colon and then it's going to be port 5000 that's the port that we're running flask on so now any request that's not handled by a frontend will be proxied to this url right here our back end and then we'll be able to get the result so now if i do something like go to profile let's make a function that's going to send a request to the back end so i'm going to say function and then this will be you know send request okay and what we can do is say fetch we can fetch slash get user info i know we already have the info but we're just doing a test here right and then i can say dot and then then okay and we can say response and say res.json okay and then dot then we can get our data and we can say data like that and we can just print it out and have a look at it for now so console.log and then data and then let's just add a button that will allow us to actually do that so let's add a button i guess we'll make this a div now or actually that could be a p and then this will be a div okay let's go button and inside of here we'll just say send quest to backend and this will be on click equal to send request all right let's try this now so let's go here let's refresh let's go to our profile we are signed in let's send a request to the back end let's look in the console and it says uncaught token expected json okay let me have a quick look here and i'll be right back all right so i actually just loaded the application here again after that error was occurring and i got this invalid host header so what i did was i just re-ran the npm command just because i thought it wasn't actually reading the proxy and then i got this issue now the fix to this issue is a little bit weird but essentially since we're using ngrok we're getting kind of this weird host error where it's not allowing us to connect to the react app so what i need to do is add something here in my environment variable file for the react application not for for the back end now this is a kind of a hilarious thing that i have to add but i'm just going to paste it in here it's dangerously disable host check so obviously you don't want to do this in production but for now this is fine and it just disables checking the host so that hopefully now we're not going to get this error now i need to reload this so we reload the environment variable so let's do that and then when i go back here hopefully all should be good okay so everything is working fine now so let's go back to slash profile and let's try to send a request to the back end and then notice i get my identifier here as tech with tim right so that's pretty much all i need to show you now i will quickly mention kind of how this is working a little bit more on the back end so if we go to our flask application which is running here and let's just have a look at flasks let's go to maine.pi uh really what this actually does when when you add this kind of middleware section here and you're authenticating the request is it looks for a cookie or it looks for a header that contains a jwt token which is kind of your authentication token now that will automatically be proxied to the back end based on the way that we've done this we don't have to manually send it but what happens is when you sign in here so let's just go back to log in there's a cookie and there's like a token that's stored in local storage and that's kind of like your session data right that's telling passage that you're signed in you're authenticated and that's how use current user here is able to get your data by using the token that's stored in local storage in the session data whatever so if you want to manually access that data what you can do is the following so let's go to profile here and let's just print it out i guess i can just print it out like actually where would it make sense to show it maybe i could show it here so let's just put it in a p tag and i can do something like local storage and then dog get item and i believe the name of this is gonna be passage off token or something along those lines i might be wrong but let's see if that's what it is so let's go to slash profile okay and there you go so it's going to show the token so obviously you don't want to show this token to people but this token is being sent automatically to the back end and that's how it's authenticating us if you don't have this token or if i like change the token then it's not going to work and you'll see that we won't be able to access that page sorry for the abrupt cut there my cat was going crazy had to take her out of the room anyways point is uh you have this in local storage you also have this stored in a cookie and that data is going to be forwarded again to the back end that's how it's authenticated so i just want to show you can get access to that manually if you're sending you know you want to send it as a header or however you're going to you know verify it or check it just wanted to mention that so you have that information with that said i think i'm going to wrap up the video here it's a little bit longer than i was expecting it to be but obviously want to build up kind of an entire project and show you how we set up everything from the back end to the front end and link them together but when you really look at what's going on for the authentication here again it's only a few lines of code like if we go to login here we go we have you know you could call this one line of code three lines of code whatever we have an app id and then we wrote this hook which you know is more complicated than it needs to be it's good it's flexible you can use in your app but really all you need is this passageuser.userinfo.then grab the info look and see if you have it undefined or not grab the email grab the phone number there's some other data you can get to and there you go you have pretty much everything that you need for user authentication all of your users users will be stored by passage you can go and have a look at the dashboard you can change the emails you can change the form you can customize as you please you can link this with a database that you have in your application for storing user data all kinds of stuff you can do with passage so that said i will end it here thanks again to passage for sponsoring this video if you guys enjoyed make sure to leave a like subscribe to the channel and i will see you in another one\n"