Lesson 4 - Firebase User Database

Create an App's Backend with AI📅 2024-11-10

Watch on YouTube ↗

Transcript

[00:00] we have successfully made it so when you sign up sign in with Google add a new account generate information make an account this creates a user with unique information such as their email a uniquely selected profile image that is reflected in our fire store here with user unique identifier user profile profile image and user email therefore from start to finish we now have the ability to have users authenticated with account and on top of that create unique specific data associated with that user so if chicken raccoon logs out chicken

[00:31] raccoon logs back in we got the same data welcome back to the series where I'm showing you how to actually build out backends for your applications if you're just joining me now we've already set up our application we already set up hosting for application and we've gone as far as setting up authentication therefore bye-bye off in today's video we're going over fire store and how to set that up in our backend now if you want to watch the first three lessons here check them in the description down below it'll be in a playlist called like let's set up a backend with AI let's jump in here and actually build out a

[01:01] fire store or database for application up to this point in this series we have a react application that connects to a live website link and we have the ability for authentication EG let's sign up a new user I'm signing in through Google add new account autogenerate information sign of Google go to a dashboard off context we've got over this we've done this on to the next therefore before I show you how to do the next step here let me go and just draw on the Whiteboard what we're about to do here so you can conceptually understand what's about to occur so right now now let's just say we got Bob

[01:32] here and Bob's a new user or not a new user but Bob just arrived to the site we have no information on Bob other than Bob is Bob once Bob goes to signin page and either signs up with email or Google this is where we come into play and what we're about to set up today so we got to do two things first thing we got to do is we got to set up a function which sole purpose will be an oncreate EG this function will only fire if Bob hello Bob how you doing today if Bob is a like this is the first time they've ever signed up if Bob logs in again this

[02:04] function won't fire this is a very unique function to authentication when it comes to Firebase it'll make more sense as we get going here we'll have a function that fires off and within this function this function will go ahead and set docs within our database associated with Bob so we're going to have a global doc here this is going to be called users so I'll put you for now every user of our platform is going to be associated with users EG we come in here it's going to be this big collection you'll see here with users here then how do we identify which user is which user

[02:36] so the way we're going to identify who is Bob and how we know who Bob is is what authentication does for us what's super cool about authentication which this is in the prod version so let me go ahead or QA whatever you want to call it let me go and show you in the emulator Local Host 4000 hit enter we set this up in the previous tutorial here if you go to authentication what you'll notice is that each user that signs up gets a user uid this is a unique identification number this is extremely important this is the number or the string that's going to allow us to identify for example this

[03:08] user is grass Olive everything associated with grass Olive subscriptions personal preferences authent like everything y'all so this uid is extremely important therefore when we set up our database we're going to reference that coming back over to our whiteboard here we got users which is a generic text of users users will then lead into the thing I just showed you which is going to be their uid their uid is going to be able to basically identify this is Bob so user user Bob has this uid then from here this is

[03:40] where we set up docs so this could be a doc for settings a doc for preferences a doc for Value points that we provide them a doc for ETC what you'll also notice is that this uid is going to come very fundamental in the sense of further tutorials we do hear when it comes to uh functions storage uh basically everything else right this is this is how we identify who Bob is so let's go ahead and find out who Bob is and begin this tutorial all right so coming back

[04:11] over here we got everything set up here but you notice we're still in the off Branch let me jump back over here y'all and let's begin here and before we jump a little bit further here if anything comes up during this tutorial where you're just like what the heck's going on I don't understand one side thing obviously is that this entire repository at the end of the tutorial will be available in the the description down below for free you can copy and paste my code alternatively you could use a software like bump ups that allows you to input a video like this and actually talk to it and then get the exact terminal commands or different questions you may have during the process and

[04:42] tutorial that you see here today let's go and jump in first off we got to get out of this Branch because we are done with o so I'm going to do get Branch just to confirm we're in O here let's zoom in a little bit so y'all don't have to zoom in and then we're going to do get add because it looks like there's a little bit of stuff going on here because there's a little asteris to the left here get add get commit dasm we'll just say off done for now and then get push origin and then we will push origin to this specific branch which is just off enter oh no fantastic this is why I

[05:13] do the fact that I have multiple projects associated with a bunch of different GS bunch of different access let me figure this out I'm going ahead and fix that and just in case you run into that issue because this can be very frustrating you're going to basically put in this line right here and right where it says you know your token you'll put your token and to find that go over to GitHub and obviously make sure that the directory is the correct one so mine's actual backend git yours would be whatever yours is so then you come over to your settings here and then you go over developer settings and then come to personal access tokens find grain tokens

[05:43] go to the specific token associated with the project we set this up in earlier tutorials click it and then here just hit regenerate token copy it pasted it right there and then that should give you access back to your directory I just know I lost access because just trust me I have a lot of different projects in a lot of different areas and and as I referenced before use BUMP ups that can help you out with the directions there as well okay let's actually get going here so now that we have finished that we pushed a here let's go ahead and merge your branch here and then create a new Branch for firestore in this video we're going to be doing a lot when it comes to fir store but also functions so

[06:13] this is kind of like a mesh one in theory the next video is going to be much more focused and dedicated towards functions and specifically functions that we can set up using an AI provider like open AI I'm basically going to show you how to actually call that end point of like chat completion or get an AI output within your software for now though we got to make sure that we have a unique identifier for Bob compare and pull request off done sounds good create pull request I might have to make a whole video of just like how to navigate through GitHub to make all this look a little bit more simple for now though we're good merge Pro request confirm

[06:44] merge this is basically taking the code here and putting it to our main and the reason we do this is because if we really really mess up we want to make sure that we're not messing with the main branch because the main branch in software development is kind of like the don't touch this Branch this Branch breaks everything breaks so now we merged that we can go ahead and delete the off Branch so we're going to do get Branch just to confirm that we're probably not in main there we go get checkout Main and then we're going to go ahead and do git pull origin this is going to grab the code from the cloud or GitHub have it set to our main branch

[07:15] here there we go so what you'll notice is that we're main now I'm going to go ahead and do get checkout or get Branch DD capital D off and over time y'all when you start developing more like you might be like yo how the heck is Corbin typing all this stuff out so so fast off the top of his head it just becomes natural over time because you just remember commands you reference I know when I first started development I was like what the heck what what's going on in terminal don't worry it becomes natural for now though we're going to set a new Branch here this is going to be for we're going to call this branch

[07:47] which is get check out B we'll say uh new user data that's actually a pretty good name okay we get uh wearing new user data always make sure you have the most recent main branch so you don't run into merge conflicts merge conflict is is that basically the branch code comparative to the main code there's a major issue we don't like those so don't do that for now though let's go ahead and set this up yes I'm wearing a new shirt it's a new day basically what just happened right there is right where that just cut off I got a slack message from

[08:17] my team and the software I'm currently developing we're getting extreme momentum right now we just pushed out a new update bump UPS that's beyond the point before we even get further into this video I want to kind of give a pretext of what we're about to do right now two major things I want you to know first major thing the topics I'm about to discuss right now are pretty complex so if you don't understand them right off the bat and you feel a little overwhelmed that's natural there's a lot of new information and we're we're straight up developing software y'all this isn't like we're this isn't like

[08:47] we're creating a pot okay like a little Pottery pot we're creating software so if any of these Concepts seem overwhelming or just like what's going on that's natural the second thing here if you run into errors after after this video and you hit walls it is extremely I've been developing since I was 12 y'all you know what the most common thing for developers is that like is very common it's when you get an error and you will spend hours trying to solve that error that's natural that's common that isn't like maybe coding isn't for me no no no that is natural you spending

[09:20] hours trying to solve an error and then finally solving it that's how it works and what's great is that once you solve that error if it comes up again you know how to solve it future and last little thing on that topic there's a little weird thing in software and coding it must be something to do with the brain who knows you get an air you spend hours on it you still don't solve it you sleep on it and then in the next morning you'll be able to solve it in like 10 20 minutes that's a real thing sometimes you just got to step away okay that's all out of the way let me walk you through this cuz this is going to be a lot let's jump it so the name of the

[09:51] game right now is that in our dashboard I went ahead and set up some like easy front end code and what this is is basically we're going to be loading in two VAR from the back end just to show you how it works with fir store we're going to be loading in a profile image and a user email I'm going to show you how to set up static profile images EG like stock ones um if you ever signed up for a SAS platform like Adobe or something like that sometimes you'll see like a little artwork for your profile I'll show you how to do that this going to show you how to leverage fire store in the front end as well and then we're going to be setting up the function this is going to be the big one right here this is going to be the one that's like

[10:22] if you run into errors it's natural trust me this is a lot let's do it to best showcase how we're approaching this I'm going to show you a complete complete file and then we're going to do an entire file together here we go okay first major thing you need to know right now when it comes to Google Cloud functions there is V1 and V2 typically we want to opt for v2 as it is better for software development EG as you see here with the slv2 and specifically this function here which is an HTTP request basically we're sending data to it and then we'll receive data from it that's

[10:53] fine that's all good there are certain functions that you can only run in version one of Google cloud and one of these functions is going to be our oncreate one which is functions off. user. oncreate this is not negotiable this has to be a V1 and we have to use a very certain version of Firebase why Corbin because it doesn't work in V2 this function is a gen one function only do you don't know what gen one gen two is just put it this way everything past this is going to be gen two we're going to be making a whole separate folder

[11:23] that's going to be python based all Gen 2 we want to go that way but we are obligated to use first gen when it comes to just the function that fires only once when a user signs up there is a ton of implications behind what I just said there so let me just walk you through some steps here I'm going to walk you through some commands that you may need to run or may not need to run just depends I know that sounded a little weird but trust me when you start doing this process you're going to come back to this part of the video and be like okay maybe I should run that one maybe I shouldn't Etc that is why I preferenced a lot of this because don't worry we all

[11:54] run into errors first major thing you need to know when we do a first gen function like this we need to ensure that we're using the correct version of Firebase in our package.json found in our function folder EG your dependencies here which is Firebase admin and Firebase functions we'll zoom in needs to be 5.1.1 for Firebase functions but Corbin this isn't the most upto-date version I want to use 6.0 I want to use 7.0 or whenever you're watching this video maybe 10.0 or maybe by then they actually fix this issue for second gen

[12:25] but beyond that no no no trust me use that one if you don't trust me then go ahead update Firebase functions to the most recent version and then tell me how it goes that's the first major one obviously When approaching this explain this to Chad gbt Claud cursor AI that is what needs to happen so you get the right commands but here is the command you need to use here first off just manually put in 5.1.1 I want you to do CD function this is going to put us in this function folder here I then want you to put the command npm uninstall Firebase functions and then we're going

[12:55] to go ahead and save the new version we're going to do npm and then ignore the 5.01 to make that 5.1.1 where you do npm install Firebase functions that save to verify you did it correctly you're going to do this next command npm list list typically is just like what is the data showing Firebase functions there we go you should see something like that if you see that you're on the right track so now that we're on the right track here we're using the right version of Firebase functions and you just learned something new today using the most upto-date dependency on every single

[13:27] dependency you install when I say dependency see this is like external stuff you us in your application like during payments when we install stripe here it's going to show up as a dependency so realize sometimes in more upto-date versions stuff just doesn't work that is why specifically in the code we're creating today and that is why we're only doing one function within node.js because this doesn't work with python this only works with Gen one if you feel like I'm beating a dead horse here trust me there is a ton of forms on this topic and no one seems to get the answer right on this okay beyond all that though this is how we do it so I

[13:58] put in this like h GTP function second gen just to give you context of how we reference V2 in node.js for us though we're not going to be doing V2s injs we're going to only be doing this one gen one injs don't worry I'm going to show you line by line how we do this but first off let's just deploy it and just read some of the logs here I'm going to give you some troubleshooting abilities so first off let's go back to our head directory here which would be the head of the app now that we're here obviously Firebase log out Firebase login make sure you're using the right project Etc

[14:28] you you want to know you're using the right project Firebase projects semicolon list list again you'll start learning these little terms actual backend app we're using the correct one okay perfect let's keep going here and we'll set up this index.js together here but now that we've done that just to show you some debug logs you know we put on a line here Firebase deploy when I do Firebase deploy by itself this will deploy hosting fire store functions whatever you have in your application will deploy the entire Firebase because we only care about functions right now just do Firebase deploy only function

[14:59] which is self-explanatory hit enter so what this does is this is going to create the two functions you see here in our Firebase we have Hello World on user create if I come over to my Firebase here I go to functions you will see that they exist here there we go and you'll see that they're updating and no. JS second gen first gen Etc if you want to learn more about that just type in firebeast second gen first gen difference or Google Cloud functions difference you'll be able to get a better context on that but like with anything it's like I iPhone 10 iPhone 11

[15:30] or I guess the better way putting is like iPhone 8 iPhone 12 obviously when the number gets higher it's probably better in most context obviously here we have to use first gen when running deployment especially the first time you do this is going to take a little while as it's like a cold start when you build out full-blown software and you have really big applications this is kind of like a runny joke uh when you're pushing to QA QA is like staging environment it's a duplication of your prod environment production is basically production is what the user sees and user plays around with with QA staging is like what you play around with but

[16:01] like as similar to the production environment as possible this will make more sense when I do the other playlist where I actually show you how to build a software from start to finish the idea is that when you deploy like this at very large applications it can take some time it can take 5 minutes 10 minutes I know software Engineers it takes like 30 minutes so keep that in mind I mean early days don't worry it'll be fast so once we do that deployment complete here you'll notice we come over here obviously it will show up right here and we're going to go but you're going to run into some issues trust me uh let me go ahead and give you some troubleshooting ways you can

[16:32] troubleshoot this what this will do is that if you get issues it will throw errors here um some AAS are just like don't even worry about it example like unhandled air cleaning up build images this gets relevant obviously when you start building on an application but this is the early days we just need to get going here right so let me show you the first one that you want to use if you run into an error you'll get an error here but there may not be a lot of context around that error so what we're going to do here is we going to do Firebase functions log semicolon log no not like the ants on a log you know like the celery with the peanut butter and the raisins on it okay maybe not maybe

[17:03] that was just a me thing hit enter and what we'll do here is we're going to get the entire log of that deployment I know this looks like a ton and you're just like Corbin what the heck I'm not going to read all that don't worry I'm not either so we can just go ahead and just drag my cursor here copy this entire thing and then put that into a cursor AI chat put that into a chat DBT chat and then simply ask like what went wrong and how can I fix this a little bit more context I'm using Firebase I'm trying to deploy Firebase functions this is the

[17:33] first time I'm deploying Firebase functions etc etc etc first troubleshoot let me help you out here there is going to be a chance here when you deploy you're going to get an airor message that is relevant to a specific service account so if I come back here to Google Cloud as we set up in the previous tutorial here you're going to come up here to these three hamburgers or hamburger and we're going to go to IM am and admin what you need understand about Google cloud and what's happening in Google cloud is I would say like 80% of

[18:03] what you need to do when it comes to the backend we have a nice little user interface with Firebase it just looks nice but sometimes you do got to come back to Google Cloud here as there will be certain things that need to be set in order for things to work so one of the big ones is I am and admin permissions another thing that you will get very comfortable with is actually I can just show you through here so let's say I'm in a function here running air like yeah what the heck just happened we come up here to these three ellipses we hit view logs you'll get comfortable with this

[18:34] view as well uh what you need to understand about this is think about this as like the debug or the console log on a computer or what am I saying how do I say this so simple okay so basically it's like when you hit expect and then you know for the front end when you uh go over here and you go to console this is like the front end version of that but the back end that didn't make sense watch my front end series but the idea is like we're going to get messages here of everything that's occurring with the function for debugging purposes and also just seeing your function run beond all that though the air you may face so once you put in that terminal command for functions log

[19:05] if it says something around the realm of let me go Zoom down y'all you're like Corin you're what are you doing you're too big my bad I scroll down here so if it says something it may not and that's kind of the beauty of software right but basically there is going to be a high probability chance here that it's going to say something along the lines of this is going to be your project number and compute and then developer. G service.com if it says that doesn't have access to XYZ thing you're going to come to this Google Cloud you're going to go I am I can't say that I am am an admin you're going to do Grant access and then

[19:37] you're going to paste that line I'll just go and do it with you all real quick so for example copy this this would be showing up in your logs you wouldn't just have it here or if you do have it here then just add these roles right so you get Grant access here there we go and then the two roles that you are going to need to give access to is going to be editor editor and then the log one I'll be honest with you I've done software development for different applications in the past I know and I'm aware that the editor role is relevant here but I was getting one that was

[20:07] requesting me to put the logs riter as well so I went ahead and just did it this is hit or miss you may need to do it you may not proceed once you've confirmed that you've done both things here I'm going to give you some general ways of approaching this so you don't get stuck in Loops of AI get frustrated and you're like you know what I'm done first thing this line right here functions. off. user.on create async user you may get an error that throws can't read user don't understand what user is what does this mean uh let me see if I can get the exact error message cannot read properties of undefined

[20:39] reading user oh no that has to do with the fact that right now in your package.json and the way you're approaching this there's two things that may be incurring cure one you're not using node 18 alternatively you haven't actually done Firebase functions at that version if either of those two are not correct and you're going to run into that air I'm realizing in this series probably the more valuable stuff is going to be me telling you how to troubleshoot errors rather than just giving you the code right like in a lot of tutorials like this would be like oh

[21:09] yeah here's the code have fun no no no no that's definitely not the way you want to get taught on this topic especially when it comes to coding because it can get very frustrating we are going to go and what you want to do is what I suggest you to do is I wouldn't even run this on your first go I would oh yeah to comment out it'd be either control actually I don't know what I'm want so if you know on Windows let me know in the comments down below but at least on Mac it's command and then you hit a little slash here this will comment out all the code and we're good to go uh EG as in this won't actually be run and we'll only run hello

[21:40] world if I were you and I'm just approaching this I would just start with this hello world function V2 import this like start with this why just get one function deployed correctly how do you know if it's deployed come to your functions here if you see it there there's no red okay you're good you got one now comes the next one which is the en crate which is the actual one we care about then try that one another little pointer here when it comes to deploying is that when you do deployments uh

[22:12] especially if you do Firebase deploy basically the way that it works uh in order to ensure that uh when the application gets bigger you will deploy faster is that if there is no changes associated with the function itself it's going to skip it so I believe they showed in this example so it it Should Skip hello world here but because I add you know like an S to the comment it's going to redeploy that one so this is very useful in the sense of like maybe you want to redeploy it but you don't want to change any of the relevant code just add a comment add an S just do

[22:44] something and then what you'll see here is that it Should Skip hello world but then redeploy uh generate or create new user so I guess it didn't Skip hello world the point being is that if you see that little there's like a little purple text where it say it skip the function you want it make sure it doesn't skip the function and actually redeploys it just add a comment comments in this context when you do two slashes here this is stuff that the program doesn't actually read this is for you to read perfect let's go and do it then so all we really need to do what we need to do is we're going to command L here and I'll be honest with y'all cursor AI

[23:14] might not give us the correct code because what happens here these AI models will opt for the most upgraded version of these dependencies EG 6.0 here because they're just assuming that the most upgraded version is the best way to go therefore you're going to run into issues where you run into loops and that's kind of some of the pitfalls of AI when it comes to more tricky situations we're going to go ahead and try this together if it's bad code I'll tell you how to fix it we are doing a gen one function here we want to do a oncreate function that when fires when a user new user is created and we set the

[23:46] database their email I know my English is not perfect in this context but AI understands so here we go I'm going to going to copy this paste it over and then let's play around with it this code isn't horrible but there's a couple things missing first thing that's Miss missing is an async this allows us to make sure we set all the docs within our on create function so when the user loads in it isn't like bad EG no data but this code for the most part gets you where you want to be right so we're using the right Firebase functions we're using admin here uh this is always important typically in code we're going to do an admin. initialize app this is

[24:18] relevant you're going to need this line this isn't just me playing around 100% need that line and then from there what you'll notice is that in the test file here everything set up perfectly and we'll just bring it over but this is just so I can write it out for yall make sure you do you know cross your te's do your eyes everything is set perfectly except the fact that we don't have an async here so make sure to add that async here this is very relevant for the other parts though seem to be pretty solid here now if you're wondering uh basically you know how the heck does it know what the uid is or the email the way this works is since it's natively

[24:48] integrated with Firebase off what we did in the previous tutorial here user. uid is a specific variable that's able to grab during the creation of that user process same with user. email that exist uh this isn't like a you know where is it coming from Corbin it's just coming through the authentication and because it's natively integrated makes our lives a lot easier to do this kind of function so now that that's done and as I said at the end of this tutorial or end of this series you have all my code in that little git repository in the description down below it's not there yet okay I

[25:18] haven't finished yet uh from here though let's do it I'm going to go and delete this second gen function here actually you know what I'm going to keep it so that when I do share this code y'all can play around with V2 here here in the context of no. JS I'm just going to comment it out cuz I don't need it for now though we have a couple things so console log obviously is going to show us consoles within the Google Cloud console sler emulator and then obviously we're going to have to have an error which is a catch error so if anything goes bad we know what's up now that we've done this though let me go and describe this this right here will make a lot more sense once I do one test run

[25:49] with you but for now all you need to understand is that there's going to be a global doc like I described earlier users then we're going to do specifying it by the users uid this allows us to give very specific data to that user and then we're going to set a doc called user profile and then within user profile we'll do profile image user email I'm going to show you a little bit of storage play here from here though this is where we can set up other docs maybe there is a doc you want other than user profile user settings other than user settings uh XYZ whatever is relevant these are the docs that we initialize on user creation these are

[26:21] docs that are relevant to our program basically if a new user signs up to your software and you're only setting the user email and the and the user's profile image there's a chance that you're not optimizing the way you approach fire store in the context of obviously if you're providing value as a software you need to provide value points data uh stuff that the user cares about okay let's just goad and run through this so this makes a little bit more sense let's start the emulator as we saw in previous tutorials it's going to be Firebase emulator start enter emulator is running we're going to go anyone that's facing issues with that go

[26:51] to your Firebase Json here scroll down make sure you have emulator ports identified now that we've done that though we're officially launched you should see fir store emulator on you should see functions emulator on okay let's get started sign in with Google add an account sign in with Google right now it's going to be an error because we haven't set up the logic past this but what you'll notice is that as we did in the previous tutorial we have off then on top of that in our fir Store look at that this is pretty cool y'all so we have the global doc of users all users

[27:23] will go here then we have the unique identifier for that user Bob I remember Bob and then we have a doc that is created through that function right off the bat user profile profile image user email now in theory you probably would to want to do this as a map you'd want to do this as an additional dock uh in order for storage reasons but for now I'm just trying to show you what's going on here so now that we've set up this and basically how this works is that in theory if I sign up again we can either sign up as orange or a new account here

[27:54] watch this boom there we go new account New U ID now let's make this work yeah everything looks good here we're going to close this and what you'll see in the next tutorial here is we're going to create a whole separate backend folder but it's going to be in Python it's going to be for the purpose of functions we actually run throughout our application and that is also why I said earlier of like well if you're going to do an on Create and create documents for a user on a first time you'll probably have more than just user profile depending on your application and your use case maybe not coming over to our firebase.com

[28:28] fir store for now just go to import these get fir store doc get doc connect fir store emulator once you have those we're going to initialize them for the entire project so we're going to come down here do K DB get fir Store app then we'll make sure that we reference this this Line's extremely important if you don't put this line nothing's going to work connect fire store emulator at least nothing's going to work in the emulator DB Local Host 8080 once you have all that set up remember the rule of thumb when it comes to this fire base.js file is that whatever you import up there

[28:58] make sure you export down there so we can use it throughout our application other than like connect to fir store emulator and connect to off emulator don't need to do that okay Step One is down that also means that if for example we do another piece of logic here in the future such as on Snapshot or do on Snapshot here comma I would export on Snapshot here as well so we can use our application for now Step One is done step two we need to make sure that we have fir store rules that are within our project right now they exist in Firebase if I to my fire store database here and

[29:29] I go to rules they exist here they don't exist in our project yet so let's make sure we do that in order to do that we're going to do the lines of Firebase init fir store Firebase init fir store hit enter now I don't have to do this completely but you will need to do this all you need to do is hit enter enter and then all that is going to do is create a file down here called firest store. rules so enter this is asking me if I want to overwrite the file that currently exists I would say no here but for you you just H enter enter you're going to go once you have fir store

[30:00] rules here here are some of the example rules you can copy if you want to do so basically what I'm doing here is just basically giving the user the ability to access their documents if they choose to do so so we're doing users their uid allow to read write Etc more context here just simply highlight command L control L back to CH gbt CLA so once we do that though we need to make sure I'm going to go ahead and just control C I'm going get out of that real quick what I suggest you to do just for good practice is go and deploy these fir store rules so do Firebase deploy only fire store rules just get them deployed for now

[30:32] though they should be showing up in our emulator what we can do to test that is if I come over here I'm going to hit control C I'm going to hit Firebase emulator start and then in order to ensure that they are working in our emulator here if I come down to firestore rules uh right here let's just say uh let's go and do this real quick y'all say we got this right here let's get it fully loaded up real quick what we should see here is that when I make a change here and hit save we should see like fir St rolles updated so if I do this add s here there we go rules

[31:03] updated if you see that you're on the right track perfect so with all that set now let's go and jump over to dashboard JJs explain a little bit of this code referencing the ability to get data from fire store and the database itself we're doing Doc and get doc this is going to allow us to reference the doc itself when I say Doc this is like little data points get Doc is actually trying to grab the data from set doc we can also set docs we can also have it so it's an on listener so if there's a change in the document then we do something different in the UI sign out self-explanatory we're going to have an entire button that is purpose out of off

[31:35] is to sign out the user so to show you what this looks like I'm going to come over here to the emulator and then I'm going to Simply come over to let's get started here sign in with Google add account and here we go so once we log in welcome to dashboard we have the specific users email from the database and then right now I just have like 10 random quotes that just cycle through every time you log in and then if you hit log out here logged out hit it again sign in remember this is specific to the user therefore we should see auto raccoon really random Google I know Auto

[32:07] raccoon's email show up again click pretty good now let's go Ahad and set it up so we get an image here and let me explain a little bit more here so if I didn't inspect here me console before we do that what you'll notice is that I have this entire console log associated with the user's data so I'm going to make this make sense a little bit to you as well so where this is coming from is if I come over to our code here scroll scroll up I'm doing a console log of current user user this is all the data associated with the user so we can grab everything we'd want from that user but

[32:37] all we're grabbing in this context all we care about is our ability to reference the users doc users Global users I'm going to be saying users a lot in this video fire store that's that doc right there okay so Global users oh uid so what is the specific uid user uid okay so we're in this path now we're in the specific user ID path okay what do we want from the specific user then oh we want the profile image and the email

[33:07] so we're going to reference this doc now that we just outlined here we're going to get it like this from here we're going to go ahead and say user data how do we know if the data exists we're going to say data off the user profile referencing that data point and then when we reflect it in the front end of the UI we reflect it with the actual data points names EG user profile profile. profile image user profile profile image user profile. user email user profile. useremail aor raccoon two

[33:38] major things you need to know about that first major thing this is not optimized logic optimize logic in this context is that we would use some form of a local storage where EG we store data on the user's browser so that every single time a user loads in we're not doing fir store reads which can burn cost at scale basically you want your application to communicate with the backend in any context as limited as possible because this is what causes cost when you have a lot of users imagine you load in a user profile fire store reads 20 different data points scale that up to a thousand

[34:08] different users loading in their user profile 20,000 data points being read scale that up 10,000 of those users or 500 of those users reload their page gets read again local storage is key I'll have to do some videos on that let's put a bow on this video though by showing you how to get a profile image which will kind of allude to our tutorial here when it comes to storage and what storage means so goinging over to index.js we going to set up some logic here where we're going to randomly select different images this is a little fun let's go ahead and get some images all right to get these play around

[34:39] images here let's just create two profile picks cat or dog going say give me a goofy looking dog I'm going do Square enter need to add it again enter okay I guess that's against their policy guidelines I'm not too sure why okay give me a dog on a surfboard let's try on a surfboard like a profile so we're going to go ahead and go with square aspect ratio give me a dog on a surfboard like a profile picture sand idea here is that obviously we can give the user the ability to upload their own

[35:10] profile photo but any good SAS product typically has a like a filler profile photo that is on brand uh let's go with this one and then from here we're going to do the same thing we'll do it for the cats hey Cat Cat all right we're defin go with this one got a profile PX let's rename them come back over here we're going to go to build we're going to go to storage here in storage we need to get started so we're going to go ahead and just say starting test mode next done typically if you're in the USA you

[35:42] want to use N5 because it's the central of the USA so we give the most optimized way of accessing functions to the nation once we do that let's go ah and just create a folder here we'll say default profile and if you feel like you've learned something up to this point make sure to leave a like it's completely free and we'll keep going here default profile I'm going to go ahead and add both those images so once we have these uploaded here you'll notice that I called one the cat profile and then one the dog profile let's go ahead and set up some logic here so we automatically choose one for a new user now storage has security around it as well if who

[36:13] can access what this is relevant for SAS development but for now just to show you logically how it's done simply click this little URL right here for both okay so now we have both here you'll notice It's associated with our actual application let's jump back over to the code here we go so in order to do that all we need to do is simply provide a variable that's going to be choosing between these two different images so the entire URL here and then we're going to use a con here that's going to identify which one we choose So Random profile image which we'll then put here and this will set the users profile

[36:43] image let's see if it works and also logically all you need to do is this command L I guess I could just selected the file so let's just select the file simply provide both URL of images here and then just say have it so for profile image we randomly select between these two images and then you should get very similar code to what I just received here let's see if it works it's very simple are we a dog or are we a cat let's get started send in of Google new account we're a cat all right just to show you how this works here though is so we have cat

[37:14] panda panda therefore if I log out that is unique data to Panda panda what you'll notice is that it isn't going to switch to dog right this is data that's already set with that oneof go to Panda panda there we go cat email let's go and see if we can can find a dog one though we'll sign up of a new account here new account sign up Google and we got a dog one off rip on the second one perfect life is what happens when you're busy making other plans John Lennon okay cool let's see this in its completion quick side note for Firebase emulator here you'll notice that console logs that we

[37:45] put in our code EG new user created uid right there show up here as well useful to use if needed last thing when testing and developing sometimes you can get too much data get a little overwhelmed what I suggest you to do is go to your emulator here hit contrl C and then just simply restart it this is going to refresh all this data here start on ground zero this video is going to be long I can already tell from how many segments I've recorded this might be over an hour I doubt it probably like 50 minutes 40 minutes maybe all right let's connect the dots we have successfully

[38:15] made it so when you sign up sign in with Google add a new account generate information make an account this creates a user with unique information such as their email a uniquely selected profile image that is reflected in our fire store here with user unique identifier user profile profile image and user email therefore from start to finish we now have the ability to have users authenticated with accounts and on top of that create unique specific data associated with that user so if chicken raccoon logs out chicken raccoon logs

[38:47] back in we got the same data that completes this lesson this was a long one I know there's a lot of stuff going on here but this gets you pretty far into creating a software application at least in the sense of authentication which is very important in the context of software as giving unique information to each user is kind of the whole point unless you're building something else entirely different for a entire different process make sure you leave a like it's completely free I'll leave more information down below and as I said at the beginning of the video as well jbmp ups.com if you run into issues as well you can put in this entire video

[39:18] and you can get like step-by-step directions on how to solve issues what I went over in today's video Etc sound good next video will be going over functions leveraging a API specifically artificial intelligence API to get some AI outputs let's jump into the next video I'll see you there we have a unique user uid off. current user those are two random videos that's my face I'll see you in the next video