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
Auf dieser Seite können Sie das Online-Video React-native: Firebase Google Authentication mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Ussama Channel 10 September 2023 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 7,854 Mal angesehen und es wurde von 112 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
