React Native Authentication with Firebase and Expo in 10 minutes

in this tutorial I will show you how to sign in and sign up using Firebase in react native first before developing I want to show you the application how it works so we will click on need an account or sign up by the way this is my real device I connected with air AirPlay so here let's sign up with an email to check how it works this will be Gmail and write a random password like this and click on sign up after you signed up you see there's a welcome and writing my email also you can use log out and this information saves on Firebase authenication so let's make a real project and also you can find the codes in description from my GitHub repository first of all I will open new project to showing you everything from scratch all right so let's make app project write npx create Expo app and write your project name Firebase all tutorial and I will use Expo to run on my iPhone and now let's close the Expo because we will run another application all right so after you installed all your projects and don't forget to navigate your folder so now open new terminal and run npx X so start actually before starting our project Also let's install Firebase packages so I will do copy paste from my other project and you can stop the video and write this package's name npm install Firebase and react native Firebase app and also react native Firebase o and after you write this in terminal click enter to install this libraries let's go to to set up our Firebase in firebase.com actually I made this project but I will delete it and I will show you everything from scratch Okay click on ADD project and enter your project name here Firebase I tutorial and click continue again and select your default account for Firebase and create project and wait to install your Firebase project all right so click on continue first of all you see there is multiple platforms we will use web for this tutorial and here just write any app name here if you want and click on register app all right so we installed Firebase we just need here a Firebase configuration and go to your project go to your app.js and paste it here so later we will use this configuration and click on next and again and click on continue so go to build an authentication and get started for this video I will just show you how to log in with email and password so click on email and password and enable it and click save okay so we are ready to code our project so first of all I will do copy paste for Styles also you can do copy paste from my GitHub repository you can find in description for Styles we don't need to write all these Styles let's import Firebase libraries and all all the react native libraries so also I will do copy paste here I just imported react and use State use effect and import text import buttons and other UI things and also initialize app from Firebase and get authorization create user with email and password also sign in on out stays changed and also sign out so also you import this packages so let's first of all initialize our Firebase with Ring const app initialize app Firebase config Also let's add these parameters to function to use it in our project email set email password and set password is login also set is login and handle authentication so we will use it in our app so first let's change my view style to make it same as mine and also I will write a text here and also let's run application to see the results with npx Expo start and go to Expo Go app in your phone if you're running on real device and sign in with your same Expo account and run your project all right so let's start with updating first text here I will show sign in or sign up if user wants sign in or not so first you see there sign up text and I will add a text input here to show email and your set email and you can add a placeholder with email and make it auto capitalize none so add another text input again for password so that's why I don't write here I don't want to make the video longer and also you can find these codes in my GitHub repository so now let's also add a button to say the user want login or sign up and lastly I will add a text if user want to sign in user will click on this button to switch between sign in and sign up all right so I will change this app function to all screen I will delete this to cons all screen equal like this and now let's add another function for authenticated screen use user and handle authentication and we will return if user authenticated we will return welcome and user email and also sign out button so lastly let's open const app function to run our application so first of all I will call my US state variables email password and user and is login also called authorize get authorized app this app is coming from this initialize app con variable we will use and use effect set authorized changed or not and getting user information and also we will use this handle authentication for sign out or for login and for sign up so we will check if user exists like if it's already authenticated then log out and console like user log out successfully but else if it's not signed in so check out is it logining or sign up if it's logining so log to his exist account or if it's not it's sign up so create user email and password using Firebase so if there is an error return it uh error message so that's it and let's display the UI own application so I will paste my code also returning scroll view for or if its user exist show the user authenticated screen and also if it's not we will display authorized screen like login or sign up and we will display email password and login buttons so that was uh login code so let's check out how it's working now so stop your project if it's running and run again with npx exposed start so also I will close this app and run again so you see it's farest authorized tutorial yeah we have uh error 19 so let's check it out what is that yeah we have a error here yeah actually we forgot to add equal like this and now it should work so stop your project it's not updating so run again sometimes this happening close your app and run it again okay click on app and also run cons export delete cons text here all right so now it works so we see our sign in and sign up screens so let's make a new account so I will sign up on my phone here so I will use a new email so this is just an example email and write a password and click on sign up all right so it says welcome cod. gmail.com and reload your page to see the user all right it's made our account so also I will try to sign in with my exist account so it's not changed so let's click on sign in and you'll see it's returning our name so and let's check if it's sign out works I will close my app and run Expo go it should not shows our application in signed in mode yeah it works so that was the tutorial and you will find these codes in my GitHub repository link it will be in the description below

Channel: Cebrail

Views: 18,619

Keywords: react, react native, react native firebase, react native login, react native firebase tutorial, react native firebase auth, react native firebase login

Id: MGBfr3WwIyw

Length: 10min 18sec (618 seconds)

Published: Wed Jan 17 2024