React-native: Firebase Google Authentication

Подписаться 69

Просмотров 6 тыс.

50% 1

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:
github.com/UssamaDev/
react-native-tutorials/blob/main/
reactNativeFirebase/emailPassword/App-raw.js
Or the final complete one:
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:
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 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.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 : github.com/react-native-googl...
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: 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 Navigatio...
React-Native Navigation: Drawer • React-Native Navigatio...
React-native: Email-Password Firebase Authentication: • React-native: Email-Pa...
Firebase Console: console.firebase.google.com/
React-native firebase Docs : rnfirebase.io/
React Native Docs: reactnative.dev
React navigation Docs : reactnavigation.org/docs/gett...
React-native google authentication reposity :
github.com/react-native-googl...
google-signin#project-setup-and-initialization

Опубликовано:

9 сен 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 32

@user-uk9yx1tj6f 8 месяцев назад

Thank you, it helpful 👏🏻👏🏻👏🏻

@UssamaChannel 8 месяцев назад

Glad it was helpful!

@tk_1809 5 месяцев назад

Im using email password authentication, as well as google authentication in my react native app so how shall I check the logged in status of the app

@UssamaChannel 5 месяцев назад

try { const currentUser = auth().currentUser; // Check if the user is signed in with Google if (currentUser && currentUser.providerData.some(provider => provider.providerId === 'google.com')) { console.log('User signed in with Google'); } // Check if the user is signed in with Facebook if (currentUser && currentUser.providerData.some(provider => provider.providerId === 'facebook.com')) { console.log('User signed in with Facebook'); } // Check other providers, // Else, your're signed in with email } catch (error) { console.error(error.message); }

@awais882s 9 месяцев назад

Thank you bro

@UssamaChannel 9 месяцев назад

Welcome

@user-mh5hy9id8s 8 месяцев назад

Good work

@UssamaChannel 8 месяцев назад

Thank you so much 😀

@rubenandiapimentel 7 месяцев назад

why is necesary use yarn to install google sign in instead of npx expo? are ther any diference? thank you

@UssamaChannel 7 месяцев назад

Hi dear, it's not necessary. However, you should follow sign in expo installation wich can be slightly different. Additionally, don't mix packages managers; use only one manager for all. Npm, yarn or expo.

@user-ps9dd4rz9b 9 месяцев назад

the release mode is not working, debug mode is working so good, where can be the problem ?

@UssamaChannel 9 месяцев назад

I'll check the issue!

@CodeEight 8 месяцев назад

does this work on ios also?

@dedexo6968 6 месяцев назад

I found this video helpful, thanks. And I have a doubt, does it work for iOS ?

@UssamaChannel 6 месяцев назад

With some adjustments

@UssamaChannel 6 месяцев назад

See please the included documentation web site

@rubenandiapimentel 7 месяцев назад

HELLO, CAN YOU DO A SAME TUTORIAL BUT WHIT EXPO? THANK YOU!!

@UssamaChannel 7 месяцев назад

@rubenandiapimentel 7 месяцев назад

thank youuu@@UssamaChannel

@user-bs1ft5sd3b 8 месяцев назад

I am facing the issue , Developer error ,please provide me solution

@rafaelgunit100 8 месяцев назад

i too

@speckygaming8499 8 месяцев назад

I also faced the same error fixed using SHA1 key using ./grdlew signing-report then implementing it in firebase also make sure that project name e.g com.yourpackage name is correct in firebase

@wishawan1868 9 месяцев назад

client id ap ny kesy get ki...?

@UssamaChannel 9 месяцев назад

I didn't understand your comment!!!

@programmingfolks 8 месяцев назад

he tell you! how to you get Client Id? @@UssamaChannel

@sehrishmunir3379 9 месяцев назад

having this "DEVELOPER ERROR for Android login React Native Google sign in" I have Followed your tutorial but getting this issue

@UssamaChannel 9 месяцев назад

Hi @sehrishmunir3379, Thank you for watching my tutorial. On the one hand, you have to believe that if you follow all the steps, your app will work, so try to re-watch the video and correct if there is a step missing. On the other hand, you have to describe your mistake clearly, so that I can help you.

@rafaelgunit100 8 месяцев назад

Hi,@@UssamaChannel i'm the same problem, when i try make the sign, i have as response "Access Blocked: autorization error, you can't sign in to this app because it doens't comply with Googles Auth 2.0 policy for keeping apps secure"

@speckygaming8499 8 месяцев назад

I also faced the same error fixed using SHA1 key using ./grdlew signing-report then implementing it in firebase also make sure that project name e.g com.yourpackage name is correct in firebase