Super Easy React Native AUTHENTICATION with Firebase 🔒

in this video I will show you how to add Firebase authentication to your react native application so you can protect the inside area of your app hey everyone what's up this is Simon from galaxies.dev back with a quick tutorial on using Firebase because Firebase is still the most used back-end as a service for tons of applications and today we're gonna add this to a react native application and I already did the first steps so you don't have to wait for five minutes of npm installation so go ahead and create a new Expo app so I'm using Expo because it's really the best way if you are unsure check out my other video about using Expo or not Expo so create Expo app galaxies fire and I'm of course using the typescript template so we're going to have some fun with typescript within the project the most important part then so probably you already have that project is to install Firebase so we're going to install Firebase from expo Expo Firebase there's actually a package using Firebase uh you can check that out if you want to as well it all begins by adding this however we also need some sort of navigation for our application so I install react navigation native and the native of stack and additionally the react native screens and save area context packages which usually help us to build our app now if you don't have a Firebase project yet no problem hit over to firebase.com create a free account and let's add a project I'm going to call this react native uh video and hit continue it doesn't really matter if you use this or not I don't really want this right now so I'm disabling it uh what we can do in our app is already run npx Expo start which brings up the Expo so I could now install this on my device or I just hit I because I want to see this on my iOS Simulator the first thing we're gonna do is uh we're gonna add Firebase to our app to do this we're gonna have to select one of these if you're using a native iOS or Android app you can add the native ones but usually we're using the web way so I'm going to call this web app it doesn't really matter and then we can add the Firebase as SDK based on a configuration that we get so this block is the important part here now to use that we get back to our react native application and at the we want to build it at the top level I probably think we're gonna just let's just put it here for now so I'm gonna add a Firebase config.ts file and within that Firebase config file we will know pretty much add this configuration block and in effect I think we can we can mostly copy this stuff here I guess copilot would also be able to figure out everything that we want to do so initialize app is required to set up our initial app and I'm actually gonna say export const uh Firebase app so we're going to use this in other places later there are other ways you could also have a context around your react application and provide it but we just need to make sure that this is initialized before we actually use it and otherwise you really get into a lot of trouble and I've seen other people um have problems with this as well so what I want is I want to add get auth as well I don't think or maybe we can also see how the Firebase the firestore database looks but this this is first of all required to use Firebase authentication get off and then we do the same thing we did before we say get off and now we don't pass the configuration but we pass in our Firebase app and we will also say this is Firebase uh Firebase oh so this is everything we would need for authentication we could now use this provider here in all of our pages and we would be fine now if you want to end more if you for example want to use storage if you want to use the database you would just go ahead and add more of these like get firestore from firestore and then you could export another cons like the firestore DB using get firestore and with this configuration in place uh we can just import it whenever we need it now additionally to make this work uh with Expo we need to run one other command which is npx Expo customize our Metro config uh you might notice that we don't even have a metro config yet but now we actually do have one however we still need to update that configuration um so let's do it so we need to change this let me show you how the change version looks we do have the same import and we do have the export but now we're also using a default config and this is how it should look like in the end this is also described in the expert documentation with that in place we can actually Implement our authentication so let's create a new file at app slash screens slash log in the TSX quick little tip if you do it like this in Visual Studio code it actually creates the file right here and you don't need to manually create the folders which also usually never works for me react native functional export component log in and there we go and now we can already tell our app.tsx that we probably want to show this uh login um but the problem right now is that we haven't set up our stack navigation do we want to build the login no we can't build a lock-in without the stick navigation right so let's do this in our app which is the entry point to our application right now we gonna wrap the whole application with the navigation container and within that navigation container we will put a stick Navigator so we haven't actually created that stack so co-pilot are you up to what I want to do I want to create a stack and yes this is uh almost I want to create the create native stack container that's cool because we're building a native app here so now I can say stack dot Navigator and I want to say the initial route name is gonna be login exactly we can close this and we don't really have any kind of logged uh logic yet that's the word I was looking for so we're gonna do it like this um we're gonna say this is our login the component is the login so we need to import that and once we get that uh we're I think we're fine yes we can see our login uh you know like the header you can use the options here so saying something like a header shown uh false falza oh is this a way to make something even faultier I've never seen that before uh that should be enough for now so that we can uh focus on our initial login page so what we want to do on this page is of course we need a bit of State handling uh so let's add email password and set loading using use State and what we also need is our authentication so I'm gonna say cut off equals Firebase um yeah almost so in a lot of examples you're gonna see that it's using the Firebase package directly however we are exporting our instance already from here so we can just use that instance now so we can say Firebase auth in here and we're just reusing that instance that was initialized in the beginning so therefore we don't have to create this again um for our login we probably need a nice view so let's say oh we don't even have the Styles yet right quickly add a few Styles here and style sheet come on couldn't you import that automatically why Always me so I'm just going to give the container a bit of flex and I'm going to put the style here for the container Styles dot container that should Center our login inside of the login I'm gonna add a text input text input I wonder if copilot is able to figure out what I want to do I'm going to give it a style should be not not today Styles dot input come on I can't see my keyboard there we go okay this is our text input for the email um we can of course make this a bit better so we can say placeholder email and auto capitalize none and additionally I need the on change text to update our state so on change text text and then we're gonna use a set email where's copilot today this is like the easiest task I've done for a long time I don't know what's going on I'm gonna set the value also to email okay cool this is our first input uh we need a second of them so let's add a second one I'm going to put this below it this will be a tiny bit different uh since this will be password and then we need to make sure that the placeholder yeah can be password as well Auto capitalize none uh unchanged text set password and of course for passport what we also need to set is right here secure text entry true to make sure it looks like this and not like that okay great um finally we probably need a button which should be dependent on our loading state so if we're loading I of course want to have a little activity indicator um size large style color like this uh copilot you're already doing way too much for me you're doing way too much I don't want this yet in the other case what I want to have is I want two buttons and I want to surround them with a little fragment here because then I can have two buttons um this one uh will be titled login and on press I want to call my login function so I'm going to come up with a function cons to sign in async and of course you want to have a better State handling you could also use react hook forms or something oh that was nice nice code we're going to check out if this this is correct I don't know exactly but it was a nice snippet definitely um we also need cons to sign up equals async function set loading and then come on just to give me the whole block like we had before you you already did a good job yeah we want to catch the error and finally I'm gonna set loading two folds and then I'm gonna close the functions copilot is doing all this stuff for me today however we don't do it like this anymore so you see we got a red line um because we're not using it like this with the latest versions of Firebase anymore how you do it is actually you directly import this function uh we can imp from Firebase auth or add Firebase oh good question uh let's try this one and then we're gonna see that as the first argument we have to pass in odd and this is different to how it used to be in the past and a lot of problems encounter problem uh have problems with this a lot of problems a lot of people um so what we're going to do is we're gonna pass in our own auth instance here as the first parameter and then email and password after that uh we're gonna catch the stuff uh we're probably gonna add a little alert here like check your emails or if we have a problem here we can probably say uh registration failed for some reason um and of course I use the wrong one because this is sign in failed oh what's your problem with the error just make this any for now and for sign in we of course also don't want to check our emails there's pretty much nothing we need to do but for sign up I'm not going to copy this because this looks kind of strange so sign up and then we import the other function which is uh not sign up but create user of course create user with email and password and again as the first parameter we have to pair in the auth instance and then email and password uh in that case we should probably say uh check your emails because that's usually what you want to do here we have an alert and our loading uh why is the page still red okay yeah because I messed up so login will use my assign in cannot find name button come on just edit from react native and there we go nice and then of course I want a second button when the second button will use sign up in fact we could make this a bit shorter sign in we don't need the error function here and then call this create account and there we go we're ready to create our account with Firebase let's give it a try uh sign in field because the auth configuration not found very good problem if you want to use Firebase authentication let's close this you gotta go to build authentication and enable it just like you need to enable this if you want to use the firestore if you want to use file upload or anything like that and we're gonna add the email and password provider I'm not going to use anything else today this should be enough and now let's see Simon and devdactic.com oh I'm using oh I should use my new email Simon galaxies.dev yeah you can reach me at Simon at galaxies because my name is actually Simon not Simon with a name that was a stupid nickname I picked okay create account let's try log in first okay sign in failed views are not found great great account uh check your emails nice at this point you should see a user in your Firebase authentication tab right here but there's one more thing I wanted to tell you and that is if we do this on a device we can sometimes encounter problems with a keyboard so recommendation for these kind of views is to surround this with a keyboard avoiding view I'm going to set the behavior yeah that was the right one ah why did I click this away I want to use padding that should be fine and then I'm going to wrap this all around my stuff in here so um I don't see the problem right now because we've presented quite nicely but now it will move up the input a bit if otherwise we would overlay it cool so that means we do have a user now and the interesting part about authentication is now how how we can use it so we go back to our app.tsx um we now want to have like a little inside page I'm just going to call this um let's call this one list.tsx right native functional export list I'm also going to add another Details page just for the fun uh right native functional export details okay cool cool and back to our navigation so as you know you can have different ways uh different Stacks in your app so I'm just going to create an inside stack and we could do this in another file if you want to split this up as well and we also going to create a new function and call this inside layout so this is what you could probably do in a different file and this inside layout will use our inside stack Navigator it will help the different screens like my to Do's using the list component and then probably also having of course I want to have the details page in here as well so I'm gonna name this one details and using the details page cool and we can now automatically listen to the state changes right here at the top level of our application and we don't need to manually route the user around in case the state changes so what I'm going to do is we're going to add a user uh right like this we can in fact have types in here so there should be um a user that we can import from Firebase authentication um or it is null of course um thanks I hate this sometimes I hate that plugin uh you stayed yes and user um yes add import from Firebase awesome so there is a user object and that user object has some information and we can use that as a type and now the only thing we need to do is we can use use effect uh close this and we don't really want any dependency in here and what we're going to do is we're going to use on off State changed so when the state changes we're passing in as a first argument our Firebase authentication once again and then we get a user at this point so I'm going to add a console lock here uh console Vlog user exactly user and then we can close it so whenever the user changes now in our application this log would be triggered can we see this in our Lux here uh in fact we see already the user was changed right here because if you create a user with create account it is immediately signed in so that means we do have a user at this point and we can now use that user so set user user and in our stack screen we can now check if we do have a user in that case I do something otherwise I do something else so in the case I don't have a user it becomes easy we're reusing the same stuff like we had before um uh what are you mad about right now uh let's probably implement this first part here yeah then it becomes better so what we're going to do here is we of course use our inside layout now that means if we have a user we just show a different kind of stick um here show unfold yeah we can probably keep it like that otherwise we I think get problems and this should be name let's call this inside if I say true I assume that we have yeah we see this inside a header and usually you don't want to have this also I don't want to have all of this in one line I don't know what what kind of syntax highlighting or formatting this is today but this is definitely not right why is everything on one line it usually breaks up after like five characters and today it's everything in one line I don't know but nonetheless we see we do have a user uh right here and it immediately brings us inside actually in fact I think there's a way um are we gonna see the the change probably we're going to see the change animated anyway um let's go to that inside page to that list page because we need a way to sign out so in order to sign out we on this page need access to navigation a navigation from react navigation is usually passed down to the component so I can access it like this navigation and if I'm lazy I could say any and everything would be fine however what I would recommend is you can simply add an interface for the router props and this also makes it easier in case you're actually passing some data to your components later and now you also get the typings right on this page additionally I want to import my Firebase authentication once again and in that view what I'm going to do is I will just have two buttons here one will navigate us to the details page and one will use sign out so let's try this for the details page I can just go to details you can style it page however you want I just want to show that we now have an inside area and in that inside area we have our own stack navigation if I hit log out what happens is that I'm brought back to the login screen can I go back like this no of course I can't and if I now reload the application I will once again be on the login so let's try my login and see if it works the other way around I actually used Simon galaxies.dev login and it's loading and it's bringing me inside why is it bringing me inside well because we initially had no user user was null and then it changed then it changed the email verify and the token and all the information then we locked out here and we don't really want anymore and then it automatically changes to our inside layout and that my friend is how we can Implement authentication with Firebase it really basically comes down to this line so I don't know why this took me like 20 minutes to explain but I wanted to go uh through all the necessary steps of the different layouts and yeah I haven't even defined the right params here so that can be a bit more typescript fun uh defining the param list so we got the screens typed correctly however the most important part is really listening to on off State changed and of course also on the different screens using the functions so also if we now want to work with a database I think I did this in another video or live stream or something check out the videos on the channel how I work with documents inside Firebase these are all Now using the latest version um these functions so it's just sign in with email add document remove document list document and as the first argument you would pass in authentication or just like we already prepared the firestore DB if you want to interact with that database if you enjoyed this video um also check out galaxies.dev with a written version of this post is and if you subscribe you can just create a free account as a member maybe even connect to GitHub so you can access all the source code and if you're interested we got tons of pro courses on very specific topics so feel free to go pro and of course hit that subscribe button hit that like button share it with your friends if it was great and let me know in the comments if you want to see anything else about react native and Firebase and I will make it work so until next time happy coding Simon foreign

Channel: Simon Grimm

Views: 79,770

Keywords: cross platform, hybrid app, javascript, ionic academy, mobile app development, reactjs, reactjs tutorial, firebase tutorial, typescript, flutter firebase, aws lambda, firebase authentication, react firebase authentication, flutter firebase crud, react navbar, react typescript, reactjs firebase authentication, reactjs firebase, firebase crud, react native, native mobile, mobile app, figma, mobile app authentication, authentication app, crud, galaxies, galaxies.dev, simon grimm

Id: ONAVmsGW6-M

Length: 22min 29sec (1349 seconds)

Published: Tue May 09 2023