React Native Authentication with Firebase and Expo in 27 minutes

what's up everyone this is matt from made with matt and today we're back with another video where we're gonna be building out an authentication flow with firebase if this your first time using firebase this is a great video for you as we're gonna be keeping it very very simple and building out just a two-page react native app with basic authentication using firebase so that you can quickly get it up and running and quickly understand how to use the service so as you can see here a quick demo we're going to have one page where you can enter an email and a password you could click login or register if you click register it'll create a new user on firebase and if you click login it's going to log in as an existing user once we're logged in we'll get to the home screen where here we could see some user information such as their email and in this case that's all we've passed in so that's all we're gonna show now if you click the button at the bottom there sign out we can sign out and we could log in or register as a new user let's jump into the code in this video we'll be using expo and we'll also be using react navigation we'll be using the stack navigator so that we can have our login screen and our home screen and so we can jump between the two so we can jump into vs code and say expo init firebase off now we'll be using the blank temp template so just hit enter on that once that's done you can copy this command over here to jump into your newly created directory we could then run expo start and that's going to open up the expo localhost in our browser now if you don't have any simulators set up so ios or android you could scan this qr code on your phone and it's going to open up the expo go app and you could run the app there so that's really really easy to use and simple to set up but for the sake of this video i'll be opening up the ios simulator once that's done we'll see our app open over here on the right and we could get started by splitting this terminal which you could also do by just clicking the plus up here and we'll start adding some packages so the first thing we'll need is react navigation so if we jump into the documentation and we scroll down a little bit we can copy over their installation steps and paste them into our terminal to install the packages we need for navigation we can jump back scroll down and make sure that we install the dependencies for an expo manage project as that's what we're using so we'll copy those over paste them in hit enter lastly for the navigation packages we can scroll down go to the next page and in here we can install the native stack navigator library as that's what we'll use to navigate or to jump between the login screen and the home screen awesome now the next package we'll need is for firebase so we can go ahead and type in expo install firebase and it's important here that you do it using expo and not npm or yarn as that might cause some issues once that's done we could close off this terminal we're no longer going to need it and we could jump into our app.js file so this is where we'll set up the navigation so if we jump back to the documentation for react navigation we can see that this is a sample stack navigator with one screen so we could copy some of this code to get started so the first thing we'll need is the navigation container and the create native stack navigator so go ahead copy and paste those into the top here next thing we'll need is the create stack navigator uh method where we say const stack equals create stack native stack navigator that creates the stack and then we can also copy this over here and replace our return with that for now we're just going to comment out the first screen as we'll go ahead and create those files right now so you can save that and we'll get an error because we don't have any screens in here so let's go ahead and make those so you create a new folder called screens in here we'll create two files first one called login screen dot js and the second called homescreen dot js in here i'm going to type in rnfes which is react native functional export component with a style sheet and i'm able to do that because i have this extension installed so if you want to install this as well it's really great to speed up your workflow with react native so go ahead and type that and that creates this boilerplate code for us and in here we could say home screen save that and for the login screen we could do the same thing and we could say login screen save that and jump back to app.js where we can uncomment this stack dot screen name this one login and change the component to the login screen and we just need to make sure that it gets imported we can copy and paste that line and change the next one to the home screen and once again just make sure that it gets imported if we save that we're going to see the login screen show up so this is going to be the login screen we can just change some of the options in here so that we don't see the header so header shown is false just like that so that we could have everything centered and clean so we'll get started with our login screen by jumping into the file and changing this topmost view to a keyboard avoiding view so make sure that gets imported from react native like that and in here we can add a style which is going to be styles.container and we can also set the behavior equal to padding and what this is going to do is when we have some text input elements over here when we click them the keyboard is going to come up and sometimes with react native the keyboard ends up covering the input fields by doing this we're making sure that that won't happen you can save that and you'll see nothing actually changes but let's get started with building out the ui so in here we could have a view we'll give this one a style of styles.input container and this is the one that's going to hold our text inputs so we could say text input and in here we could pass in a couple parameters or props so first one is going to be email we'll give it a value which right now we're not going to set as anything we'll say on change text and here we get the text every time the text changes in our input it spits out this text variable which we could then use in a function afterwards to change the value of this text input for now we'll leave that blank as well and we could give it a style of styles.input so let's comment out these two lines just for now so we keep it simple at the beginning you could copy and paste this text input and the second one is going to be password and what we'll want to add for the password is secure text entry what that's going to do is we could see it up here okay so it's too high to click let's go ahead and create the style for the container just so that we could center everything and so that we could see it so we'll say justify content will be center and align items will also be center now we can also add a flex of one and we'll see both the fields show up in the middle here so here we could say test we can see that it's working and if we type in a password here you'll see that it shows up dotted like that and that's because of the secure text entry now that we've got that set up we could create a new view and this one's going to have a style of styles dot button container and this one's going to contain our buttons so we could say touchable opacity the touchable opacity is going to have an on press handler which right now we're just going to leave as blank so an empty anonymous function and it's also going to have a style so styles dot button in here the button's just going to contain some text and for this one we could say login and give it a style of styles dot button and we could copy paste all of this and for this one we can say register so in here styles.button we can actually change this to an array where we're going to have style style button and styles dot button outline and that gives us the ability to inherit all the styles from button and all of them from button outline so we we're basically putting two styles on our button and for this one we'll change it to button outline text just like that so if we save that we could see we have our two input fields and then we have our two buttons so let's get started with styling everything and to do that i'm going to double click on all our styles and hold down the option key and i'm on mac and what that's going to do is it's going to let me multi-select that way i could select all of them at once in a really easy way perfect and i'm also just going to edit one style which is the one over here for login we'll change that to button text and we'll go add that in right over here we could get started with the input container where we're going to change the width to 80 like that and then in the input itself we'll change the background color to white so that we could see what's going on awesome we can also set a padding so padding horizontal we'll set it to 15 and padding vertical we'll set it to 10. now that's going to give us a little bit more space to play around with now we could also change the border radius to 10 like that and give them a margin top of 5. now that's going to space them out a little bit we can move down to the button container for these we'll give them a width of 60 percent so they're going to be just a little bit smaller justify the content in the center and align the items in the center as well so that we can make sure that they're centered on the screen and we'll give the container a margin top of 40. just to space it out a little bit now for the buttons we'll have two different types so the first one is going to have a background color of this hex value over here so if we save that we can see that it's this blue we'll give it a width of 100 percent so that it takes up full 100 of that 60 in the container we'll also give it some padding so padding horizontal we'll say 15 and actually we could set this as padding as a whole save that border radius we'll set that to 10 and now we can move on to the button outline so for the button outline we'll give it a background color of white just like that we're going to give it a margin top of 5 just to space it out from the button above give it a border color of this nice blue that we have above and we'll give it a border width of two oops i have two there we go now jumping back to the button we're also going to say align items center that way the text gets centered now for the button text we'll set the color to white we'll set the font weight to 700 and we'll set the font size to 16. now for the button outline text we can copy that over and instead of having the color as white we'll set it to that blue once again cool so the next thing we'll do is set up our states so that we can uncomment these so at the top here we can say const and open and close an array this one's going to be email set email is going to be equal to use state and right now it's just going to be an empty string and we can copy that over and do the same thing for the password so set password and it's going to be an empty string if this your first time using state i definitely recommend you check out my video on building out a to-do list it's a great way to learn how to use state and some other basic concepts with react native now we could go uncomment the first text input over here so the value is going to be email and every time the text changes we can set the email to that text now we can do something very similar for password so password and in here we'll say set password to be password and we could save that now we could start playing around with it and we could see that password isn't working and that's because i put password instead of text save that try it out again oops awesome now that we've got our ui set up we can jump over to firebase and create a new project so we'll give this one a name of firebase auth click continue remove the google analytics we won't need it for this project once we're into the project we'll click this little web icon over here to add our app so we'll call it the same thing firebase auth register our app and it's going to give us the firebase sdk which we can copy paste into our app so we can copy all of this we can go open up a new file called firebase.js and we can paste it in and save now in here we're going to change this import to import star as firebase from firebase and down here we're going to change this to say let app if firebase dot apps dot length is equal to zero then we'll say app is equal to and we'll copy this over to the top here we'll say firebase dot initialize app with this firebase config if the app has not has already been initialized which would mean the length is greater than zero then we'll say app is equal to firebase.app like that we're also going to want auth so we'll say const auth is equal to firebase dot off like that and we can also export auth from this file and save it's important to note here that i'm using firebase version 8.2.3 if you're using a different version especially version 9 you're going to have different syntax so make sure you double check that now jumping back to our firebase console we could say continue to console click authentication either over here or up here and we'll click the get started button from here we'll go to the first one email and password edit the configuration and click enable so that we can start using this now we can go to the users tab and we can see that it's empty so this is what we're going to be using for this tutorial to create our users so under the login screen we could create a new funk new function called handle signup and here we'll say auth which we'll need to import from our firebase file that we just created auth dot create user with email and password and in here we'll pass in the email and the password that we have stored in state that's going to go ahead and create the user with the email and the password that we've provided and once that's done we'll say dot then we'll get the user credentials and in here we could say const user is equal to user credential dot user and we could just console log that and we could console.log the email just to be sure that it's working we'll also want to say dot catch error and in here we'll have an alert that spits out the error message just in case this didn't work so we could save that and now we can copy our handle signup method name and move down to our second touchable opacity so this is the register one and replace the anonymous function with our handle sign up so jumping back to our users over here we could see that it's empty if we add a new one so whoops if i go ahead and at add matt test.com with a password of password and click register we can open up our terminal and see that we've successfully created our user since a console logged user.email now in here you're gonna have to refresh to see it but there we go we have our user so that's how simple it is to create a new user now if we want to go login we could say const handle login once again create a function for it and we could do something very similar so here we'll say auth dot sign in with email and password and we'll pass in the email we'll pass in the password and this will do the exact same thing that we've done up here so we could actually copy this code paste it and instead of just logging the user we could say logged in with user.email and we can actually copy this over up here and say registered now we'll go connect this handle login to the on press of the first touchable opacity just like that the next thing we'll want to do is whenever a user is logged in and they're on the screen right now the way we have it configured is they're kind of stuck on the screen they don't get navigated to a new screen and if we were to quit and reopen the app it would just kind of stay here even though they're logged in so what we could do is add what's called an a listener and what that listener is going to do is listen to firebase listen to the users to see if any of them are logged in and then we can do something if the user is actually logged in so we can create a use effect over here so that it runs when the component mounts and just pass in an empty array so it only runs once at the beginning i will say const or actually we could start by saying auth dot on auth state changed here we'll get a user and we could say if user we can say navigation dot navigate to home so what this is going to do is if we have a user then we're going to use our navigation to navigate to our home screen now we'll need to import something to get this navigation variable so we could say const navigation is equal to use navigation and just make sure that imports properly from react navigation core so we can do it like that and this is going to work but if we want to optimize this a little bit more something that's really good practice to do is saying unsubscribe is equal to that and over here returning unsubscribe now what this is going to do is when we leave this leave this screen it's going to unsubscribe from this listener so it doesn't keep pinging it when it shouldn't so we can save that and see what happens now here i'm getting a little warning and that's because over here and use navigation i forgot my brackets so i could save that and there we go now we see that we've logged in to our app and it automatically redirects us to the home screen so now we could jump into our home screen and start building this one out so we'll delete this text we'll give this view a style of container and in here we'll have a text which is going to contain the email and we'll have a touchable opacity which will also have a text inside and this one's going to say sign out so let's give this some styling so this is going to have styles or sorry style is equal to styles dot button and this one's going to be styles dot button text now in here we can start building out the style so we'll give it a flex of one a justify content of center align items of center as well save that next for the button and the button text we could actually go copy over the styles from the login screen just to save a little bit of time just like that and save and we could just change the button width down to 60 like that we'll also add a little bit of margin top on the button there we go so now what we want is we want the email of the user we're currently logged in as to show up over here so to do that it's actually really really simple we'll just need auth and make sure once again that it imports it properly you could say current user dot email if we save that we could see the email show up and the reason we put a question mark here is that this could sometimes be undefined and if we don't put the question mark then no matter what it's always going to look for this email and then it's going to crash our app but if we have the question mark it kind of tells javascript this might be undefined if it's undefined don't check for the email just leave it as undefined and that's okay the next thing we'll want to do is create a function so that when we click sign out it actually signs the user out so let's go ahead and create that up here const handle sign out and for this one we'll say auth dot sign out and that's it it's that easy so here we could have a dot then which will go navigation oops navigation dot replace and we could say login now as always we want to catch any errors catch error alert error dot message just like that now if we run this we'll get an error that navigation is not defined so like we did previously we could say const navigation is equal to use navigation make sure it imports properly from react navigation core and we could go attach this to the touchable opacity and the on press and save that now if we click sign out there we go it automatically brings us back to this screen so if we jump back to the login screen over here in the use effect instead of navigating to home we're actually going to replace it now what that's going to do if we try it out again is when we click login it should remove this login back button over here so that we can't actually go back like that let's try that again there we go awesome so just to summarize we created this login screen where we can either log in or register so if we create a new account over here we'll create elon test.com we can register that's going to bring us to the home screen and show us elon test.com as the sign in user and if we go refresh our users tab in our firebase console we could see our new user show up over here now we can also sign out from the home screen and that's going to bring us back here and then we could go back and log in as that user so if you enjoyed this walkthrough this tutorial with firebase and simple authentication hit that thumbs up button leave a comment down below telling me what you liked about it and what you'd like to see next and definitely hit that subscribe [Music]

Channel: Made With Matt

Views: 3,958

Rating: 4.9319148 out of 5

Keywords: react native, firebase, authentication, expo, react native firebase, react native firebase authentication, react native tutorial, react native app, react native tutorial for beginners, expo firebase, expo firebase authentication, react native login, react native ui, react native ui design, made with matt, react, app development, build an app, javascript, react native project, react native code, react native project setup, learn react native, figma react native

Id: ql4J6SpLXZA

Length: 27min 48sec (1668 seconds)

Published: Sat Sep 25 2021