React Native, Firebase v9, authentication and firestore

hey what's going on everyone welcome to another video in today's video we'll be going over firebase version 9 and react native i'll be putting out this video in two parts in this first part of the video we'll be covering firebase authentication and firestore and then in the second video we'll be taking a look at storage so i've got the default react native app running here in my android emulator if you're working on a m1 machine and you need to set up an android emulator you can check out a recent video i did where i go through how to set up a android emulator on the new android studio arm preview so let's start off by cleaning this up so we'll remove all of this do and we'll clean up the styling as well so we'll leave a basic page name so let's start off by setting up our firebase uh project so i'll head over to firebase and then i'll create a new project let's call it firebase version nine then click continue we don't need google analytics we'll go ahead and create the project now when using firebase in react native there are two ways of going about it you can install the official firebase package directly from uh this npm site here or you could go about it using the react native firebase package so those are the two ways of going about it in this video i'll be using this uh firebase package here from npm i normally use this uh firebase uh react native firebase when i'm building like social authentication so if i need like facebook authentication or apple authentication like i did in the previous video i would probably go with react native firebase so then click continue and then we'll set up a web app i will just call it react native app then we'll just install the firebase package so this will install the updates at firebase version 9 in our application and then in vs code i'll create a new folder where i'll store my firebase config file so i'll create a folder called firebase and then in there i'll create a new file call it firebase config yes if you checked out my previous react native videos i also went through how to set up firebase in a previous video uh it's more or less the same process here and then we'll just copy this well let's just remove these comments here so in the previous firebase and react native video that i did the setup was quite different so if we just go back to that video which would be this one here we just scroll forward so here as you can see when we wanted to export firebase we'll just call export firebase so now with version 9 it's a bit different so if we go to the documentation so the initialization as you can see is a bit different you have to import initialize app instead where previously you would import firebase and then call firebase dot initialize app and then would pass our firebase config now here you just call initialize app from firebase forward slash firebase app which is what we have there and then you initialize your app by just simply calling initialize app and then you pass along firebase config now to set up authentication if we scroll down here you'll see that we need to for example with get firestore uh this is something i highlighted in a previous video that i did for react as well if you wanna set up firestore you need to import get firestore and then here at the bottom you create a new variable and then you'll pass uh your app in get firestore so same process with the authentication you'd call get oauth and then here you'll create another variable let's say authentication which would be equal to get auth and then you'd pass your app in the so if you want to set up authentication we'll just say firebase and then just google firebase authentication then just click view docs here and then we'll go on the web and just click on get started so here as i said we'll first need to import get oauth so let's go ahead and import this entire line here so we'll paste this in here in our firebase config whereas previously you would have this like in our main application but instead here we'll put it in get in our firebase config file and then i don't think we need this for now let's remove that so under get auth what we need to do now is create a new variable called uh alts in this case or we'll call it authentication so we'll say authentication and then inside this bracket so just as i mentioned here where we have uh get fire store we need to pass our app that we just created which will be this line here so we just need to pass that in our get oauth and then we can export our authentication so call export there we go and then we can import authentication uh in our application here in our main app file now let me just run metro once more npm start and then from here we can uh import our authentication from firebase so let's say import authentication from firebase then let's just add two uh text inputs here uh let's remove these for now which we're not using so i'll import text input and i also need a button so we'll have two text inputs the first one will be for our username so we'll let it place all the text there say username and password let's just reload this so we have username and password and they now add a button here at the bottom and we'll just have a title that says sign in right so there we go and then also creates a state let me first remove this and then also import use date and then i'll create a state called is signed in and we'll set this to false and we'll create two new states as well for our text inputs so the first one will be user name and set user name and then we'll have one for password as well we'll set our values for this text input so for the first value it will be our username and then for our password we'll set our value to password basically referencing the two states that we created here now for our password as you can see when i try to type it in it's basically showing the text before we fix that let's first add our own on change events so this will be your unchanged text so we'll get the text that the user has typed in and then we'll set that as our new updated state so we'll call set user name and then we'll pass on the text then we'll do the same for our password then instead of set user name we'll call set password so now if i type it in as you can see things are working fine but we want to hide the password so to do that we'll just add another value here called secure text entry and set that to true now our password is headed and then for our button lastly we will need to add our own click event so when the user is done setting their username and password uh we'll want to sign in and to do that we'll just call onpress and we'll create a function here saying sign in so sign in user and then now we imported authentication here so what we're going to have to do let's just head back to the documentation so here we'll have to just import create user with email and password so this is what we need to import in our app file here so let's import that and then when we create a user now uh actually let's change this to register we just uh so it's register user and then we'll call create user with email and password and then if we just head back to the documentation first thing we need to pass is authentication or oauth which we imported from our firebase config so we'll first pass that and then the next thing we need to pass is an email along with the password so our email let's change username instead to email so there we go so we'll pass along our email and then for password it'll be password then we'll get a result back which will console log and we'll also catch any errors okay so if we head back to our firebase console under authentication let's go ahead and just enable this before we continue say email and password enable click save and then under users we don't have any users at the moment so let me try and uh create a new user so channel gmail.com and then i'll enter a password one two three four five six and then click register obviously we don't have any uh loading indicator at the moment uh let's see if that was successful okay so user has been created with getting the result back here now if i head back to my uh console here and just click reload here we have the new user created so there we go so a new user has been created so ideally you would have some sort of response back uh from the from the application once you've created the user so you'd have a loading indicator and then after that you display the message once the user has been created and for that you can check out my other react native series where i go over building all of that from start to finish and then once the user is actually signed in we can set the signed in state to true so since we've already created the user let's change this method to sign in so let's call sign in user then let's remove that and then we'll change our button to sign in now let's see what's required now here to sign in the user so signing in existing users uh instead of create user with email and password we'll need to import sign in with email and password so let's go ahead and do that so we'll replace create user with email and password with sign in with email and password instead and i think the process is pretty much the same we'll then call sign in with email and password and then the first thing we need to pass is again authentication which we imported from our firebase config file and then from there we need to pass our email and then pass along our password and then we'll call then this will bring back a result if it's successful and then if it is successful let's set the signed in state to true so set signed in to true or catch for any errors and then down here on our button so if the user is signed in we want to display a sign out button uh to do that we'll just add a condition here so we'll say if user is signed in right instead of the sign in button will display a sign out button and we'll add a function for that just now so it'll be sign out if the user is signed in and then we'll create a method called sign out user and then to sign out a user i think that's also different this time around so if we just go on to google here let's see if we have sign out here let's see so let's just google that so it'll be firebase sign out web okay so we'll need to import sign out uh from firebase auth and then once again we'll call sign out and then we'll need to pass authentication again which we imported from firebase config so we'll pass that there and then if the user is signed out if that is successful then we set our state signed into false then we can also add a cache there so now let's try signing in and signing out let me just put my terminal next to me there so we have a user created already you this is the email address the password was one two three four five six and then if i click sign in now the user is signed in as you can see the button date says sign out this time around so as you can see we edit this code if the user is signed in it will say sign out and then if the user signs out it will change the state again to sign in so if i click sign out the button then changes to sign in so obviously in the night in a real application you basically have several pages navigating so once the user is signed in you then navigate the user to the other pages where they can view all the other content sign-in user would view and then if they signed out you just bring them back to the sign in screen so this is just the basic run-through of the some of the changes in firebase version nine and then next up let's take a look at firestore so let's just head back to our console here and then create a new database so let's create a database then click enable and then while that is being set up we need to import get firestore collection and get docs so we'll copy this line here this time around we can get rid of uh sign in with uh email and password we'll keep authentication uh let's remove these states we'll also remove all these two functions that we have here i will just keep one button then the rest can go we'll just call it get data and then we'll have a function that's called getdata as well let's just send our button style equals styles dot main container okay justify content we'll center that and then yeah there we go so we'll just have our button centered then let's head back to our console so our collection has been created so let's have a look at the docs here so to get a database we'll need to call get file store first and then pass along our app so let's get firestore needs to be imported in our firebase config so let's have that there then we can remove it from here and then we'll export say db db is equal to get firestore and then we'll pass along app then let's go ahead and input db in our app.js file so there we go then what next we have so let's create a collection here we have cities so let's create a collection called cities then next now we'll create the default one and then say city underscore name johannesburg okay so that will be our first city then we'll add another one i'll just have an auto id city name cape town and save so we've added a list of cities so our function here needs to be an async function so let's go ahead and add that and then we'll call city's collection and then we'll pass db which we just imported and then the collection name in this case our collection name is also cities and then from here we have a city snapshot so let's import that as well so basically our city snapshot is getting all the docks from our city's collection so as you can see in our firestore we have a collection here called cities with two documents so this should return back to documents so then from this city snapshot let's just head back to the documentation what we get so to get the list of all the cities we'll need to create a new variable so it's city list and then this will basically call the city snapshot and then we'll get all the docs and create a list of them let's print this out console.log city list so let's see what happens when we click get data let's just restart metro here so npm start then reload our application we go and then get data so it says permission denied let's see whatever we're facing here let's just check our rules here okay let's just fix our rules here so updates our rules and we'll just say allow read and write and then remove this if false then let's just publish that okay now let's just give this one more call so get data and there we go so we're getting a list of all the cities so we have city name johannesburg and city name cape town then let's try and maybe add another city to our list so let's go to firebase cloud firestore and see how we go about doing that so under add and manage data let's click on add data so i guess uh all we need is this line here so we need to basically import and it seems like you can import from two uh locations so there's a light version of firebase this time around so you can import firebase uh firestore light or you can simply import firebase firestore so we need to import dark and then set dock from firebase so i think this should also be in the light version as well let's see if we have it there so we can import dock there and also set dock then we can remove this line instead and then let's remove this bit we'll just create a new variable here called city and then so this would maybe be a state that the user would type in so it would be an input that you set as a state that the user types in we'll just uh encode this i will create a new city called pretoria so our new city will be pretoria and then we'll call let's copy this entire line here so add a new document and collection cities then let's paste it there so to go about adding a dark we'll just call await set dock and then we'll pass along our db which we imported from firebase config and then the collection we're looking for is cities and then let's see what this is this third parameter that we're passing here okay so i think this is the uh id or something so here we generated let's just go back to firestore data okay so i think that would be the document so this would be the document name let's just give it a random name so we'll say random doc and then we only have one attribute which is city name then our city name will be the one we set up there then we'll just change this to set data instead of get data then let's see confined variable set data let's just change our function names so set data as well okay there we go and then let's try and see if this works so if i click set data and there we go so we have random doc and our ct has been added so that's pretty much the basics with the new uh firebase version 9. so it's slight different from the previous version but uh more or less the functionality is all the same so in the next video i'll be taking a look at firebase storage with react native and uh perhaps later on will also tackle machine learning as well yeah but for now that's it be sure to check out my react native augmented reality series if you're interested in that cheers

Channel: Born To Code

Views: 1,087

Keywords: react native firebase, react native firebase version 9, react native firebase authentication, react native firebase push notification, react native firebase tutorial, react native firebase firestore, react native, firebase version, firebase version 9, firebase version 9 tutorial, firebase version ios, firebase version 9 android

Id: 20TSEoJkg5k

Length: 30min 1sec (1801 seconds)

Published: Wed Dec 01 2021