This tutorial will show you how to create a simple mobile app authentication using firebase only in 15 minutes!
In this video, you'll learn how you can implement easly a SignIn - SignUp authentication screens with native-stack navigation menu to navigate between Home, Sign In and Sign Up screens using react-native while the authentication task is done using Google Firebase.
You can use the raw App.js file:
github.com/Uss...
react-native-tutorials/blob/main/
reactNativeFirebase/emailPassword/App-raw.js
Or the final complete one:
github.com/Uss...
react-native-tutorials/blob/main/
reactNativeFirebase/emailPassword/App.js
#react #reactnative #reactnavigation #android #mobile #app #firebase
This is all the tutorial instructions to build your mobile android App:
(All react-native packages are installed using Yarn)
1- Create a react-native project and replace your app.js by:
github.com/Uss...
react-native-tutorials/blob/main/
reactNativeFirebase/emailPassword/App-raw.js
2- Insure to install native-stack navigation and its dependences, then run the app on an Android mobile or emulator. You can follow this tutorial: • Native-Stack Navigatio...
3- Visit the firebase documentation website and do the following: rnfirebase.io/
4- Go to the website of google firebase console and create a new project: console.fireba...
5- On your project root Terminal, install the React Native Firebase "app" module: yarn add @react-native-firebase/app
6- Return to firebase console and create a new Android application. Insure that the package name match your local package name.
7- Download the google-services.json file and place it inside of your project at the following location: YOURPROJECT/android/app/
8- Don't follow the other instructions on this website. Just his next then continue to console.
9- Add this line to your YOURPROJECT/android/build.gradle file as a dependency : classpath 'com.google.gms:google-services:4.3.15'
10 - Add this line at the top of your YOURPROJECT/android/build.gradle file : apply plugin: 'com.google.gms.google-services'
11 - Install & setup the app module: yarn add @react-native-firebase/app
12 - Install the authentication module: yarn add @react-native-firebase/auth
13 - Enable Email-password sign in provider on the firebase console website.
14 - Import the Authentication package on the top of your App.js file: import auth from '@react-native-firebase/auth';
15 - Modify the onPress code of Log In, Log Out, Submit buttons as in:
github.com/Uss...
react-native-tutorials/blob/main/
reactNativeFirebase/emailPassword/App.js
16 - Rebuild the app using: npx react-native start
Then hit "a" button
17 - If the local package name doesn't match the name passed to firebase console, you'll get an error. Copy the write package name from your console and recreate a new android provider on the firebase console.
18 - Make sure to reload the google-services.json file and replace the old one.
19 - Hit "a" button to run the app on your device or emulator.
20 - The app should work well.
21 - To insure that the authentication module is working well, let's get the email of the loged user and replace "user email" by the loged e-mail.
22 - Enjoy your authentication screens!!!
23 - Visit the firebase website and go to the authentication page to see all the e-mail logged to your app.
Enjoy!
If you enjoyed this content, Like - Share and Subscribe.
If you have any issue, question or suggestion leave it on the commants!!!
If you want a tutorial about any react-native featue, leave a commant!!!
🔥 Get More Content:
Native-Stack Navigation • Native-Stack Navigatio...
React-Native Navigation Drawer • React-Native Navigatio...
Firebase Console: console.fireba...
React-native firebase Docs : rnfirebase.io/
React Native Docs: reactnative.dev
React navigation Docs : reactnavigatio...
29 сен 2024
