NWCocoYvSC4

Create an App's Backend with AI

Watch on YouTube ↗

Transcript

[00:00] like this we're redirected to this page so watch this add new account autog generate information sign in with Google we're in the dashboard we're good to go and then comeing over here if I reload this page we will see it right here we have successfully offed using Google let's go ahead and get going here in this video I'm going to show you how to do user authentication for any type of web app that you create SL software let's jump in we're going to go ahead and use this user interface that we did in lesson one here I'm going to have it so in the user I'm going to have to say sign up instead of Watch series the user clicks this we're going to go to a sign up page within that sign up page we're going to have the ability for the user

[00:30] to sign up with email or alternatively Google to do this we're going to use cursor AI then we'll be using Firebase as our backend here for authentication welcome back or alternatively welcome still if you're binge watching this we're going to be setting up off today which is actually highly requested I've seen this a ton of comments about this no good tutorials this is going to be a good tutorial if you want to know how to set up everything that you see up to this point which was hosting and appstack check out the other episodes in this series for now though we're going to set up off let's Jump Right In all right let's come to our terminal here if you go back to your cheat sheet remember

[01:02] it's going to be CD whatever your cheat sheet directory was remember for any command do the CD and then your actual directory name and what we're going to do is this we're going to create a whole separate Branch to this directory get checkout DB the purpose of this branch is going to be authentication so we'll call this off get branch and we're going to do get checkout uh off everything we add from here and out is going to be code that is relevant to authentication and what is amazing about this entire series is that by the end end of it I'm going to have this as completely free all the code you'll see you'll be able

[01:33] to use and past into your own project sound good how do we do o Corbin I don't know I'm joking we're going to do build here and we're going to hit authentication I'm going to go and drag this up and just as a side note real quick for hosting here once you deploy to hosting like you saw in the previous lesson you'll see your commits here when it comes to hosting there'll be previous releases one very valuable thing that you should know about hosting is that if you push to hosting and you screw up tremendously don't worry you go to your previous commit that's maybe more stable hit these three ellipses hit roll back

[02:03] and it's like within 3 seconds 4 seconds it'll roll back to this version something to keep in mind okay let's go to authentication to do authentication this is going to require two major things we're going to do a signup page SL signin page and then we're going to build out a actual function for it to run so the user's information gets pushed and then on top of that we're going to take all that relevant information of that user and save it to our firestore database so we can start doing queries that are specific to that user don't worry AI will help us out and I'll be here let's do it I just realized

[02:34] like everything I just sounded right there sounded super nerdy am I a nerd okay let's get going get started once we're here we're going to have the ability to choose a bunch of different options for this tutorial you'll be able to understand how to do email and Google but basically the skills you learn now you're going to be able to easily apply to the other one such as GitHub or Facebook or I don't know why you would do Facebook who if you plan on having Facebook as a login for your application let me know what you're building all right we're going to go ahead and start with Google actually let's start with email for email we're gonna hit enable here and we're going to do enable here the reason we're doing

[03:06] this is that we are going to create an authentication process that is a password realist signin EG when the user signs up for our account they only provide their email and then they log in by getting an email from us that's like the login link why do we do this Corbin because of the fact that at least how Firebase off currently Works they don't really have good structuring and security around spam emails EG someone goes to your site puts in like 10 different emails and 10 different passwords for those emails those could all be fake accounts using this method though where I sh an email link the

[03:38] account won't actually be created until that link is pressed therefore we circumnavigate spam sound good orless we're cooking with Spam hot Skillet want a crispy get some tobasco sauce black coffee save I have too much fun of this y'all and new provider we're going to do Google why are we doing Google Corbin because it's Google let's go to hit enable here I might blur that out but for now we're going to use our support email here contact a web cafe.com we're actually going to change this public facing name to uh backend Das is real

[04:08] because it's real it exists I know there's not a lot of content around it but it is real I'm going to go ahead and save save once we do that we have our two signin processes obviously if you want to add more providers add more providers here let's go ahead and do the next step Next Step here go to Google Cloud this is going to be part of where we do our function Logic for now just go to Google Cloud you can get free credits $300 for now I'm going to say no select your project select your organization for me it's going to be actual backend app now from here it wants you to set up a foundation which you can do and maybe I'll do a video on that that's not really relevant for what I need to do

[04:39] right now though going hit this navigation menu I'm going to go to API and services so far so good we have a couple different options here but what you'll notice is we're need to go to credentials and what you'll notice in credentials is that we have a couple of things that we just created here together ah I might have to blur this out so if I do I do only reason I say that is cuz it requires editing I don't like editing and no just cuz I say don't like editing videos please don't spam my email saying you would edit my videos okay okay so for all this information though save this in a separate tab here once you're here let's go and proceed to

[05:09] The Next Step as a side note as well this is actually a very relevant page when dealing with external apis through Google's ecosystem EG trying to get Google calendars API if you plan on using that in the software extremely relevant I mean obviously the API Keys is probably where you'll create it I may do some other videos on this in the future keep that in mind for that all set up here though we need actually initialize our functions go to build we're going to do functions okay perfect now in order for us to do functions we need to upgrade to blaze but don't worry this is pay as you go you got all those

[05:40] credits for $300 this is all free upgrade project okay so it looks like I have to actually put this information in so let me do that I backed up a step there because it wasn't in the correct organization right now my organization webcafe ai.com just do put main dilling continue CA fuel card details I'm going to put this information in now with all that connected here let's go ahead and actually enable that $300 cuz I don't have to pay start free oh okay well make sure that you do that before you put your billing in coming back over to Firebase I'm going to hit reload now that we've added our billing account

[06:11] here we're going to choose main billing budget amount we'll just say 50 this is basically giving me a notification of like hey something's happening something's not good you're about to go over your billing budget hit continue then we're going to hit link Cloud billing account and we are officially gone to the blaze plan we're blazing same situation as hosting make sure you install Firebase tools which you already did if you watched the previous episode and then we're going to deploy it specifically we're going to be deploying functions today all right get branch make sure we're in the right Branch here okay everything looks good Firebase in it scroll down here we're going to choose functions enter now what's really

[06:41] cool in this series is that I'm going to show you how to do this in Python and in JavaScript for this specific function though which is going to be an oncreate off this is specific to authentication right now the documentation around a python function in this context is no good so just for this function in our application we're going to be doing JavaScript but but this also gives you the ability to understand how it works in Java Java Java Java hit enter do you want to use es lint to catch probable bugs and en Force Styles no or maybe for yall say yes for me I don't like that

[07:12] you want to install the dependencies yes the reason I say for the ESN L thing is like sometimes you get really dumb errors that aren't actually errors and it's like too strict but that might be good you can use AI to help you out if you need help there we're installing you'll notice that this is going to show up right above here in functions amazing aming amazing amazing we have officially installed functions in our node Jes project let's go ahead and proceed here and because of the fact that we will only be using one function in the context of node.js we'll proceed in the index.js to create this function now that we've installed that let's go ahead

[07:44] and get the front end going here provide this code and then the last step we'll do here is create the backend function that's going to initialize everything and actually before we do that let's go and initialize fir store as well so we can really put a bow on this and have it so when a new user is created we have a global doc users then a specific uid unique identifier and then the relevant docs associated with that if that didn't make sense don't worry we'll jump into it therefore coming over to build here we're going to go ahead and do fir store database let's create a database we're going to do database ID as default

[08:14] choose your location uh if you're in the USA go with N5 this is going to be basically the best performance hit next we're going to go aad and start in test mode here but in theory when we launch the prod we'll go to production mode and we'll have more security around the rules certain files certain paths certain ways basically when users information shouldn't be able to access another user's information for now we're going to hit create perfect with this created here let's begin goinging back over to cursor AI let's create a new file this file is going to be Google off. JS in Google A.J if we come back to our Google Cloud here or actually we

[08:46] might not need to do that go to Project we go authentication here actually what I was about to show you you can't do so right now the secret you need to actually copy through that Google Cloud that I showed you earlier so go to your Google Cloud this will make more sense we're going to go to credentials here and then in credentials this was automatically created from earlier here's the two variables we need to copy over this will be blurred out but we're going to be copying over the client ID and the client secret so this right here and this right here to make our lives easy let's go ahead and use cursor AI again cursor we want to just import our

[09:17] Google Cloud client ID and Google Cloud client secret in the file paste over this is going to be blurred out but all we need to do now y'all is we're going to hit command L again and we're going to Simply create the EnV version of this we're going to add the file Firebase or envv therefore we're going to say for the client ID in secret let's import from EnV enter perfect go ahead and paste that code over to your DV and then you can reference it here so so far so good give a little bit more context of the client ID and the client secret this is the way we authenticate the

[09:47] authentication process in the sense of like do you actually own the app you actually own the Google Cloud processing like are you the owner this is how we access it this how we tell Google that hey this is the correct app we have access we're going to go therefore coming back over here we're going to set up our o or at least import our o and everything required for o Mandel include Google o as well okay we have Firebase authentication started we need to import Firebase off and Export we are looking to use email P password list signin and Google signin hit enter if you couldn't tell this entire series is on the free

[10:18] cursor AI platform this is all free this code isn't bad but it's trying to do the actual logic of what a sign in and sign out is and stuff like that we just want to export it so we're going to do this logic elsewhere therefore I'm going to say don't want to do the actual logic we just need to Import and Export all this so I can reference in a separate file enter there we go so with this code here we're going to just copy this line and then paste this line right here so what we're doing here is we first off let me get rid of all these comments we don't need comments All right so we are getting the ability to get o Google o

[10:48] provider sign in with link to email nice this is coming from the O of Firebase coming down here we see that we are doing it here so o is get off of app Google provider is new Google provider and then we're exporting this so we can use this in alternative logic as you'll see here pretty soon there we go so with all this information here let's go and just change something about my front end so it says sign in we do a separate page and we're going to have to do some react navigation which will make more sense here but for now we are good on the off and the Imports all right to do so let me come back over here I'm going to say

[11:21] sign up there we go give me a couple seconds I'll come back in 5 10 minutes I'm going to go ahead and just create a real quick react front end for the like the sign up UI you feel like Corbin I want to see that I want to see how you do the front end watch my other playlist it's like 3 hours and 11 minutes long that's for the front end this is for the back end so I've gone ahead and created our signin UI so simply click a button here and we're going to go either put your email there or sign in with Google and what you'll notice is that it actually works right now at least in the emulator side EG in the next couple minutes I'm going to show you how to launch the Firebase emulator which is a mock backend Local Host 4,000 and this

[11:54] allows us to see a bunch of different stuff when it comes to later logic we'll be doing together what you'll notice is that add new account autog generate information sign in with Google and we're at the dashboard let's get going as I mentioned before all this is going to be available in GitHub for you to copy and paste as of now though I'm going to walk you through the chats that I had of cursor AI so you can get a fundamental understanding of how this all works and how it all connects first thing you want to do before we even jump into that is make sure that EnV I accidentally created it within the source file here go ahead and drag it

[12:25] out so it is on the surface level of this entire project Repository I was running into issues where none of this data was being read I was like what's going on here realized that I didn't create it here so make sure you do that you will know whether it's in your source file or not if you close your source file and you see it there second thing I realized is that that logic I referenced earlier in this video which was setting up the functions and Fir store to actually save a doc associated with each user I'm actually going to do that in the next lesson because I got to the point where we have done full-blown authentication therefore if you want to

[12:56] see that logic check out the next lesson where I'm going to show you how to create a doc when a user signs up and that's going to pair with the function logic that will set up with the node.js for now though let's just do authentication first off the files we created we already have firebase.com to good software development you'll make a sign up and a signin page those will be directed to two different URLs sign up sign in obviously what you need to know though is functionally when it comes to code

[13:28] whether the user sign signs up with that Google button or signs in with that Google button it's the same code same thing with the email password relist sign in therefore purely just to show you how to do off I'm going to do this all as one page here but you can easily do separate coming into o just to show you what it will look like and what does the O experience feel like I just real quickly made a dashboard. JS and. CSS to confirm that we are in the off version and all it says right now is welcome to dashboard don't worry I'm going to show you all the chats of how we got to this point so don't feel overwhelmed I'm just trying to give you like a review this

[13:59] like an umbrella when it comes to authentication the major thing you need to understand is how we render the application therefore when we render the app which incurs here we need to have paths that are available for unoff users such as sign up and dashboard or not dashboard homepage and then we need to have off paths that are only available for users that are currently logged in such as SL dasboard which what you'll identify is a private route first thing you may be asking is Corbin how do we know whether a user is actually off or

[14:30] not that's why we're going to be creating a separate file here called off. context or off context. JS the only purpose this file serves is to confirm whether or not the user is logged in we then use this context import into our app.js to then do this logic what you'll notice is that the entire thing is wrapped in O provider which comes from our o context basically the purpose of off context is like are you logged in no then you can't access dashboard Etc okay with that all out of the way before we

[15:01] jump into the code you need to install two things the first line make sure you install Firebase so no issues incur there npm install Firebase the second one is going to be the browser router notice that comes from react router Dom therefore we need to do npm install react router Dom a lot of the times when you get air codes you'll be able to ask cursor AI like what's going on and it will tell you this anyways but keep in mind anything you import you need to make sure you install npm like another example of this is link which is still from the same depend which is react rather Dum but keep this in mind as for

[15:31] example for a lot of the UI I've done on the front end I've installed font awesome if you don't know what that is really cool way to get free icons for your software for now though kind of understand what you need to install to do the logic you're about to see also for anyone wondering what link even means and how that's used what that does is that if it's like I'm on the homepage I want to go to SL sign up I click this notice it's not a Reload rather it's just a redirect EG like there is no loading it just goes directly to it it's very fast component loading all right that's a brief overview I know this sounds confusing so let's walk through this step by step and how you can do it

[16:02] in cursor AI hit command L control L I'm going to explain the best I can I'm going to walk you through stepbystep my thought process when creating this let's go and proceed first prompt I did now what you need to understand is the files to add to these chats so you get the best answers at firebase. Json add your homepage. Js firebase.com Js sign up. JS you might be like Corbin I don't have an off context. GS to add well guess what go and create one then and yeah just to create one new file type in a

[16:32] namejs you successfully created a JS file the first piece of logic I wanted just to touch up on real quick is to make it so that the CTA buttons actually worked so for this example this was like the let's get started I want to make sure it work because before it just like you hit sign up and it went to a different part of the page to do so I wanted to use Link because I'm well aware of what link means in this context okay we need it so that the Uno people also when I say uno that means they're not logged in can go to sign up and sign in page also make it so the button does the link to sign up B I click it it has a sign up in the URL make it so the

[17:03] navigation exists and also set up the relevant port code for the emulator in fire base. Json you might be like what the heck did you just say Corbin basically for us to run the emulator like you saw earlier this is the sign up we need to actually reference the ports this is going to allow us to run this backend locally on our machine and what you'll notice is that we'll get our emulators here we'll get our off Port 9099 functions Port 500 one don't worry we're in the same exact logic here reference the Firebase Json and then

[17:34] reference that you want to basically have an emulator for off functions fire store hosting Pub sub Etc you'll see this in the UI when we run the emulator later on next we need to have it so when we run our off it actually shows an emulation like you saw earlier when I hit sign up with Google and we're able to put in our information therefore in our firebase.com it gives us a line right here so typically the the way it seems like cursor AI gives its outputs is it doesn't give the entire file you can obviously request the entire file here

[18:05] but what you will typically do in this context up to this point is you'll simply like copy this import line because this all for off and then paste it here and then for this line right here we need it so that when we're in the DV it realizes that we're in the development and we're connecting to Local Host 9099 connect off emulator this gives us the ability to make fake email accounts and a fake backend which will make more sense later on also one major fundamental thing for you to understand is that when you import Here sign in link to email you export there so we can

[18:35] use that throughout our other logic once we have all that information connected in the sense of being able to have the correct ports associated with our emulator Corbin why is it 9099 why is it Local Host 3000 these are just ports Associated for the local machine what you need to understand is this is going to be the meta promp this is a prompt you want to use for initially creating the relevant code for authentication so open up a new cursor AI chat here we're going to do app.js firebase.com b. Json O.C context the one you created it it could be empty it's all good sign up. JS how we're signing up you know if you

[19:06] really don't know what to add it's better to add more than less but the idea here is add any relevant piece of information that has to do with off package.json just everything right from here put in this command now of course you can look at my repository for free in the description down below to check out how I did my code if you want to copy and paste it so here's how we do it and just for reference when you write out these prompts it doesn't have to be perfect English or perfect grammar at all you'll notice that's kind of jumbled but the AI gets it create new files sign up. CSS sign up. JS make a simple sign in page for now add the functionality of

[19:37] email password list signin and Google sign in with redirect have it so I can enter an email and hit next and hit the button to sign up for Google import here. app.js therefore we need to create a new file. off context. JS so we can tell navigation wise whether we are off or not and let's go to dashboard therefore dashboard. JS dashboard. CSS if logged in that might sound jumbled but the idea here is simple within our app I'm going hit enter here while that is generating let me explain we need to set up this private route and what we know is that with off context which the AI is smart enough to understand what

[20:08] that even means we know that we can tell whether a user is offed or not logged in or not so what this will start doing and the way you know whether your code is structured correctly is that you should have three fundamental Parts first one should be private route it's going to tell us whether or not the component dashboard. JS is offed or not logged in or not once we do that make sure you import all the areas of your application the homepage the signup page the dashboard those are being imported from here right so we got the homepage we got the signin page and then the off we have

[20:39] the dashboard naming wise notice how it says export default dashboard which means that here is dashboard and then the file path is SLO SLO which is the folder name slash dashboard which is the file name so from that code output you see here just copy paste copy paste copy copy paste which gets us to the point that we see here so right now we have the ability to render the SL dashboard only if we're logged in so let's walk through this little sandwich here auth provider router routes what are routes

[21:12] routes are going to be the slash on the actual domain slash represents just the URL itself so it's apples.com it be apples.com apples.com signup that's going to be the component of the signup page and then obviously within the private route this is what we can see once a user is off so let's go ahead and launch our emulator here to ensure that you can launch an emulator you're going to come down to firebase. Json you should see some new code here like this if you don't simply go to cursor Ai and be like hey I need to do Firebase emulator and then it'll give you all this code open up a new terminal window

[21:42] put in your CD CD actual back in app as me and then we just do Firebase emulator start now if you want to make sure we're running this to the right project and the right directory first do Firebase project list this is for people that may have created multiple Firebase projects so let's make sure we're running it on the right application and I guess I spelled that wrong oh it needs an S once we do that notice how the current project ID we're using is the correct one actual backend app if it's not the correct one simply copy the one you want to do and do Firebase use the application name actual backend app

[22:14] whatever your name is the reason I bring this up is that sometimes you'll run into errors that make no sense entirely there is a possibility you need to rerun that command line there for Firebase to actually realize that you're using the correct app Etc just little glitches here and there so do that before you do Firebase emulator start which is this command line right here you will run this every single time you want to laun your pseudo backend click once you successfully run you'll get this kind of end message here and this is where we can see all the back end logs for a local environment in order for us to see

[22:45] this simply go to Local Host 4000 you go to overview here you'll see every single one that's on and how do you turn one on as you saw earlier we are referencing these port numbers found here that we showed in the Firebase Json so coming over to the authentication tab right now no one's off no one's signed in yet so let's walk through this code together first off you'll notice running in emulator mode that means that we are currently in the correct area let's get started let me walk you through this code here for sign in as I said earlier the logic for signing in or signing up with an email whether it's Google or email password sign list passwordless if

[23:17] I can speak same exact logic so first thing you'll notice is that we're importing all of this information here from firebeast this is where we set up all our logic here for giving us the ability to actually do something so once we can actually do something coming back over to sign up here we're going to import it because then we're going to use it so scrolling down here let's understand what is going on so obviously in our return statement we have the enter email which you'll see in the UI here and then we have the sign in of Google so once they enter in the email here if they choose to go this route they're going to do the button of sign

[23:48] in with email and then obviously coming down here we have the signin of Google which is going to do the handle Google signin so let's do Google first Google's easier command F coming up here handle Google sign in now what's great with AI is that you don't have to understand everything to a you just have to understand logically what's incurring here so what you'll notice is that we are referencing off that we imported up here in our Firebase and we're referencing Google provider which we imported here as well now you have two ways of signing up with Google or signing in with Google it's either sign in with redirect or sign in with popup now what I've noticed with code outputs

[24:19] is that for some reason it likes putting in sign in sign in with popup which obviously means that if I click sign in with Google it's going to give me a popup I'd encourage against this is because some browsers you have security measures where pop-ups are blocked so I would opt for sign in with redirect which means that when I click sign in like this we're redirected to this page so watch this add new account autog generate information sign in with Google we're in the dashboard we're good to go and then come in over here if I reload this page we will see it right here we have successfully offed using Google you'll see the provider here as well now

[24:50] let's say we want to do the same thing with email all we need to do is obviously send link to email if you come up here we are doing all the email logic here when doing password list sign in that is why there is no password here so we'll just do apples gmail.com and as I said before let's say someone put a BS email there if you do password you enable password it will go through the system and you will get dead records you don't want that so do pass through this sign up therefore if a user does this and the email is not real they're not going to be able to click that link

[25:21] therefore they're not going to be able to actually create an account eg it doesn't exist yet there is no apples at gmail.com because it's passw passwordless sign in therefore once the user does have an account though in our emulator here what you'll notice is that we can go ahead and test it so this would be the email sent in the users's email whatever they put in there would be an email sent with the link testing it in Firebase emulator we actually just copy it from our terminal so copy the link paste it up there hit enter and we're logged in apples gmail.com has been identified as a real email now that

[25:52] that is all done I encourage you to check out my frontend playlist if none of this like react components kind of stuff made sense I go way more in depth about importing pages and understanding what every component even means but as a brief overview of what we covered right now here's the tldr app.js is where everything in your application will be rendered in app.js we have two options First Option what will show users that are not logged in second option what will show users that are logged in to identify whether or not a user is logged in we use o context. JS then we take off

[26:23] context. JS and we import it to app.js here is where we set up the logic of private route with the logic of private route we're able to basically put in relevant components that will only show and display the users that are/ dashboard and then we'll do other Pages as well but for now that is all we have that's the structuring of an O application coming over to firebase.com

[26:58] do two separate types sign up sign in but all you need to know fundamentally is the actual logic to sign in and sign up are the same what do you mean by that Corbin I mean that the sign in with redirect that's used for a sign in or a sign up the codee's smart enough to know whether it's a first- time user a or a second time user or a login user and then finally the dashboard. JS was purely just to show you an off logged in view I know that's probably a lot but now you know the fundamental logic associated with o use cursor AI to help you out actually one last thing

[27:28] extremely important fundamentally important don't forget about that firebaseauth thetic and in the next video here I'm going to go over authentication and specifically when a user is created we're going to be able to create a specific uid so we can associate all further data with that user in any context sound good I'll see you the next video we can log in now log in Google email those are two random videos that's my face I'll see you in the next video