React-native: Firebase Google Authentication
This tutorial will show you how to create a simple mobile Android App authentication using firebase (Google - Social authentication) only in 15 minutes!
In this video, you'll learn how you can implement easly a SignIn - Home authentication screens with native-stack navigation menu to navigate between Home and Sign In screens using react-native while the authentication task is done using Google Firebase.
You can use the raw App.js file:
https://github.com/UssamaDev/
react-native-tutorials/blob/main/
reactNativeFirebase/emailPassword/App-raw.js
Or the final complete one:
https://github.com/UssamaDev/
react-native-tutorials/blob/main/
reactNativeFirebase/GoogleSignIn/App.js
#react #reactnative #reactnavigation #android #mobile #app #firebase
#google #googleplay
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:
https://github.com/UssamaDev/
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 Navigation In 3 minutes
3- Visit the firebase documentation website and do the following: https://rnfirebase.io/
4- Go to the website of google firebase console and create a new project: https://console.firebase.google.com/
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. 'SHA1' is mandatory, you'll get it by executing: "./gradlew signingReport" on "YOURPROJECT/android" dir
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 Google 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 - Go to react-native google authentication reposity : https://github.com/react-native-google-sig...
16 - Install Google sign in package (Using yarn instead of expo): yarn add @react-native-google-signin/google-signin
17 - Import all necessary functions from "react-native-google-signin/google-signin"
17 - Add your client Id to GoogleSignIn configuration. Make sure to pick the client Id from client type 3.
18 - Modify all app.js functions as shown in the video, or you can use the complete app.js file: https://github.com/UssamaDev/
react-native-tutorials/blob/main/
reactNativeFirebase/GoogleSignIn/App.js
19 - Build your app on an Android device. Note that Google authentication is not supported on an emulator, you should use a physical device.
20 - The app should work well.
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 Navigation In 3 minutes
React-Native Navigation: Drawer • React-Native Navigation Drawer In 6 minutes
React-native: Email-Password Firebase Authentication: • React-native: Email-Password Firebase Auth...
Firebase Console: https://console.firebase.google.com/
React-native firebase Docs : https://rnfirebase.io/
React Native Docs: https://reactnative.dev
React navigation Docs : https://reactnavigation.org/docs/getting-s...
React-native google authentication reposity :
https://github.com/react-native-google-sig...
google-signin#project-setup-and-initialization
En esta página del sitio puede ver el video en línea React-native: Firebase Google Authentication de Duración hora minuto segunda en buena calidad , que subió el usuario Ussama Channel 10 septiembre 2023, comparta el enlace con amigos y conocidos, en youtube este video ya ha sido visto 7,854 veces y le gustó 112 a los espectadores. Disfruta viendo!
