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: www.youtube.com/watch?v=EM_j6-plCr8

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-signin/google-signin#project-setup-and-initialization

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: https://www.youtube.com/watch?v=EM_j6-plCr8
React-Native Navigation: Drawer https://www.youtube.com/watch?v=5fFU0B-xvJw
React-native: Email-Password Firebase Authentication: https://www.youtube.com/watch?v=YprcMeNXTqo

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-started/
React-native google authentication reposity :
https://github.com/react-native-google-signin/
google-signin#project-setup-and-initialization