React Native Firebase - Google Sign In Tutorial 🔥

Hello friends 👋 Join me in creating a Google Sign In with React Native and Firebase.
🚀 React Native Course 👉🏼 codewithbeto.d...
👨🏻‍💻 For resources go to Code With Beto 👉🏼 codewithbeto.dev
👯 Join the Discord: / discord
👨🏻‍💻 ☕️ 🌟 Would you like to support me? Sponsor me on GitHub🌟 ☕️ 👨🏻‍💻
github.com/bet...
⭐️ If you want to learn more about me, check this links:
Twitter: / betomoedano
Instagram: / betomoedano. .
Github: github.com/bet...
Linkedin: / betomoedano
Discord: / discord
Code With Beto: codewithbeto.dev
Medium: / betomoedano01
Figma: www.figma.com/...
⭐️ My apps & projects:
► Code With Beto: codewithbeto.dev/
► Eco Studios:www.ecostudios...
⭐️ Contact: [e-mail]

[@MrInvers0]

It works as a charm using Firebase as the title says. The best tutorial.

[@good6894]

For anyone getting the 400 invalid_request error. Unfortunately, this error is kind of a generic one and can be caused by a number of different things. One possible cause is if you're using the wrong client id(You need to go to your google dashboard, then credentials on the left, then under oauth2.0 client IDs you need to select the client you made for this project. I'm developing for Android so that the client I selected. If you selected a client of type Web application(or any type other than the one you're developing for) then that would be a cause of this error. The other possibility that I also hit myselft was needing to enable Custom URI Scheme(which is found under Advanced Settings, which is on the client ID screen for your project) I also ended up having to delete the "Scheme" that the tutorial had you put into your App.json. Although I'm not positive this is necessary for everyone. 😀😀😀

[@Ekko-d7o]

so, umm in google cloud , i only need android client . like that ? im getting 400.

[@python8534]

THANK YOU for this! I've spent hours trying to solve the error and now its working

[@oussamakhalfi1751]

THANK YOU SO MUCH!!!!

[@AbdellahDaif-bt2ml]

Thank youu for the 400 error fix

[@egbertludema]

On android when I login I fixed the 400 error because of you, Thank you for this. But now when I login I get the following error: Unmatched Route ------------------------- Page could not be found. Do you know why or how. Or anyone else reading this.

[@felipemelendez5741]

This tutorial is fantastic, you covered topics that I did not expect to see and explained them with the perfect amount of detail and at a perfect pace, thank you! I look forward to more tutorials!

[@codewithbeto]

Glad it was helpful!

[@felipemelendez5741]

@@codewithbeto hi Beto, how about teaching us how to sign up and in with the phone and verifying the phone number with OTP, that would be awesome! You are already showing us how to register with all the different social methods, why stop there?!!😉

[@_dancosta_]

That is amazing. Very clear and easy to follow! Thank you so much!

[@oluadabonyan3876]

Excellent, super. Solves issues I have with google sign in

[@vijaymarka8820]

hi beto, I am getting access blocked: authorization error, error: 400 invali_request, how to solve the issue

[@alimohammad1548]

I have the same error

[@beaboss8235]

Me too

[@ekrema4037]

did you solve it? i get the same error

[@ekrema4037]

did you solve it?@@beaboss8235

[@ekrema4037]

did you solve it?@@alimohammad1548

[@rubenandiapimentel]

I JUST WANT TO GIVE YOU AN IMPORTANT POINT, WHEN YOU HAVE CREATED A NEW PROJECT IN FIREBASE AND HAVE ACTIVATED THE GOOGLE SIGN IN THEN YOU DONT HAVE TO CREATE A NEW PROJECT IN GOOGLE CLOUD, JUST USE THE SAME PROJECT THAT FIRBASE HAS CREATED FOR YOU, THIS IS IMPORTANT BEACAUSE GOOGLE WONT LET YOU A NEW OAUTH WITH THE SAME ID OF FIREBASE ID CLIENT WEB ON DIFERENT PROJECT, IN A NUTSHELL YOU SHOULD NOT CREATE A NEW PROJECT IN GOOGLE CLOUD IF YOU DONT WANT TO DO THE WORK TWICE.

[@facundotorres7690]

Hey bro im having the issue of auth google policies, i understand that if what you are saying is true thats the problem, but if i delete the id clients of google cloud how i get the clients id to make the request, firebase doesnt give me client ids, firebase give me api keys

[@rubenandiapimentel]

@@facundotorres7690 why do you want to delete the googleclientid from google cloud? the project will not work, maybe you want to rstore the slientid, you can do easily from google cloud.

[@danudanu7028]

YES, DO NOT CREATE NEW PROJECT IN GOOGLE CLOUD, I OBSERVED THAT WHEN CREATING FIREBASE THE GOOGLE CLOUD PROJECT IS ALREADY CREATED AND YOU CAN ATTACH TO HIM THE OAUTH CLIENT IDS, THANK YOU FOR CLARIFY

[@Frodonar]

​@@facundotorres7690Hi, was that the problem? I'm on a similar situation. How did you fixed it?

[@quakerparrotandlovebirds1138]

just cant get away from error 400: invalid request when opening on browser. Cant make it open inside app, it always open crome...

[@Frodonar]

Did you fix that? I'm with the same issue

[@felicioeduardo9005]

Brow, you killed it. Thank you so much!

[@devcode9483]

This is by far the best video with clear explanations. How ever i followed the process closely and did exactly what you were doing but still got an error " Access blocked: authorization error - You can't sign in to this app because it doesn't comply with Googles OAuth 2.0 policy for keeping apps secure" I tried all i can but still failed. Could you be able to help me here. Otherwise thanks for this amazing in depth tutorial. Lots of love for your contents from the pearl of Africa - Uganda.

[@good6894]

Thank you very much for this tutorial! It was very helpful. My only suggestion is that you record with a much higher volume. I had my speakers turned all the way up to hear you. :)

[@kanishkazoysa7471]

when run the "npx expo prebuild" command only add the android folder .not added the ios folder and update the bundleIdentifier

[@prathveeshbhat4523]

same problem

[@facundotorres7690]

Hey bro, i do everithing and it worked, but when i try to sign in doesnt give me the access and give me this error Error 400: invalid_request. I already put my acount like a user test

[@good6894]

Yeah, I get the same thing! Not sure what to do :/

[@jhonatangiraldo884]

In Android, the deep link seems to not be working, doesn't work in the browser, and also I get a 400 "Custom URI scheme is not enabled for your Android client". Do you know what might be the issue? Thanks in advance 🙏🏼

[@monsieurho]

Let me know if you have found a solution for the error 400.

[@jozefbudzak5065]

@@monsieurho When you got a error 400 , go to google cloud, credentials, oAuth 2.Client IDs, click your Client id, advanced settings and enable custom URI scheme, and wait :)

[@good6894]

I found the solution for this as I was having the same issue(Actually I ran into a couple different "400" invalid request errors) If you go into your google cloud dashboard, then to credentials, and under oauth2.0 client id's select your android client(the one you created earlier in the tutorial for this project) Then under Advanced Settings, there is an Enable custom URI scheme option. Select this :)@@monsieurho

[@calvinssendawula7507]

@@monsieurho @jhonatangiraldo884 you might just have to “scheme” to toy config file

[@Gutss7]

Error: RNGoogleSignin: failed to determine clientID - GoogleService-Info.plist was not found and iosClientId was not provided. To fix this error: if you have GoogleService-Info.plist file (usually downloaded from firebase) place it into the project as seen in the iOS guide. Otherwise pass iosClientId option to configure() Can you help me with this error? :)

[@rahulchowdhury4227]

Can you tell me how can I run this app now on a real device? Sure the QR does not work. Thanks.

[@Joseph-oz7tx]

thanks man for details expalin. it is very useful video.

[@armyofda12monkeys]

I thought Firebase JS sdk means it can use pure Expo Go (and even web if doing web+ios+android together in 1 codebase) vs 'React Native Firebase' library which needs the expo dev client? Why need to use dev client here?

[@aimeeaidanu254]

bro are you stupid did you not hear ma'boi beto explain the reason in the video like seriously tho do people have rocks in their brains 😭

[@voldemore6300]

Google oAuth from the last video I did follow all procedure which were shown on your video I did about to get all done but something occurred was Google requires policy 2.0 from my screen along with 400 invalid request could you explain why is all this message pop up instead of my account info😢, and the message even show me because of my //exp//192.16… not allow as redirect url?

[@ulfetalhussaini4481]

me too, same issue!!

[@voldemore6300]

@@ulfetalhussaini4481I been waiting for his replies ❤ hopefully we could reach out the answer soon🎉

[@sigururjonsson7691]

did you remember to export { auth }; ??@@ulfetalhussaini4481

[@alimohammad1548]

from expo doc "The @react-native-google-signin/google-signin library can't be used in the Expo Go app because it requires custom native code" run the app on device or emulator the solve it

[@daribeksarsenbayev489]

@@alimohammad1548 I am not sure what you are referring to, since the code doesn't use this library. It doesn't solve the issue when I try to launch the app from the device. If you want to help, please extend your answer and attach some links. Thanks!

[@eliezgheib9526]

Hey man, first of all I've been searching for google signin with expo for a long time and stumbled on your video. This tutorial is amazing!! Finally something clear and detailed! Second, I am having trouble after the browser popup happens. It says "You can't sign in because this app sent an invalid request. Error 400: redirect_uri_mismatch". I tried every solution and checked everything. All seems legit but the signin just won't work. I appreciate your work!! Thanks!

[@ledoublez]

hey, did u find a solution?

[@eliezgheib9526]

@@ledoublez Nope got a new “Developer Error”. I have put the task on hold to work on another one in the meantime.

[@siddharthverma1159]

while signing in using Google, i am facing Access blocked:Authorization Error :400 invalid request what should i do ?

[@rubenandiapimentel]

probably youve writen wrong the clientid

[@good6894]

This 400 invalid_request can be a bunch of different issues. @rubenandiapimentel pointed out one of them, that you're using the wrong client id(You need to go to your google dashboard, then credentials on the left, then under oauth2.0 client IDs you need to select the client you made for this project. I'm developing for Android so that the client I selected. If you selected a client of type Web application(or any type other than the one you're developing for) then that would be a cause of this error. The other possibility that I also hit myselft was needing to enable Custom URI Scheme(which is found under Advanced Settings, which is on the client ID screen for your project) I also ended up having to delete the "Scheme" that the tutorial had you put into your App.json. Although I'm not positive this is necessary for everyone.

[@WG26Gaming]

enable custom URI in google console

[@jasim17]

can you make a video for phonepay and gpay integration in react native cli

[@davidjadu893]

in my case id_token does not exists in response params :/

[@victorflorez5476]

Really nice tutorial, thank you!👍 I have an issue where I get an invalid request error on andriod but not on ios, I have double checked the client id's, but it seems to fail every time after rebuilding and remaking the android client id. Does anyone know why this could be?

[@Dg2020]

have the same problem

[@furrekarasu1667]

Im using windows, when I do npx expo prebuild It doesnt generate IOS folder, only android and if I run npx expo prebuild --platform ios it says => "skipped generating" bla bla bla Help please

[@randomviralshorts1501]

you need mac

[@furrekarasu1667]

​@@randomviralshorts1501​Could the mac be from 2015? does it require to have a certain macOs version

[@furrekarasu1667]

@@randomviralshorts1501 Because if thats not the case then I can actually use my schools macbooks. (I do not need a paid developer right?) I have a macbook per say

[@amur_]

Beto, can you make a new video for this? According to the documentation, expo-auth-session is being deprecated soon and they ask us to use the @react-native-google-signin/google-signin package

[@codewithbeto]

Will take a look :)

[@jeremywm4782]

please do, thanks for your videos❤️❤️

[@AnuragMishra-ws4zc]

Bro create one full stack project ❤

[@pawekozowski6128]

bricked my whole expo app... nice.

[@PrayersHolders]

Tried all the suggested way to solve the problem of Google sigin but still face that problem

[@harry4088]

Hey Brother i request you to make a second part of the video how we can use those refresh and access tokens please

[@codewithbeto]

I’ll look into it 👍

[@NoorMuhammad-f8v]

27:50 there you said to add web client id from firebase in link of google console it not opening whats the solution

[@thedemonlord9232]

custom scheme urls are not allowed for web client type

[@renanuggioni7466]

Awesome tutorial! Thank you! For some reason I'm not able to pre build the iOS bundle, is it because I'm on windows? It does build the Android just fine =\

[@codewithbeto]

You need a Mac for iOS

[@good6894]

I had the exact same issue, I wish he would have mentioned that. But glad I'm still on track :)

[@Cappell7]

Amazing video! Thank you! Was there any reason you choose to use firebase SDK rather than the react-native-firebase package? Also, if you would maybe do this video for apple login, you would be a life saver!!

[@codewithbeto]

I believe the SDK works better with expo

[@sigururjonsson7691]

Hey, Thanks for an awesome video, everything works, but when i signout it will not redirect to the signInScreen again, how can i achieve that ?

[@aimeeaidanu254]

make sure you have an onAuthStateChanged listener import { onAuthStateChanged } from 'firebase/auth'; export default function Navigation() { const [user, setUser] = useState(null); useEffect(() => { onAuthStateChanged(auth, (user) => { console.log("user", user); setUser(user); }); }, []); return ( // AppStack = user logged in component, AuthStack = no user component {user ? : } ); }

[@Niletixofficial]

this is an error im recieving, very frustrating. Error message "You can't sign in to this app because it doesn't comply with Google's OAuth 2.0 policy for keeping apps secure" anyone with answers?

[@vitorpeixoto2324]

Eita! No que vim aqui para recorrer ao seu canal, subiu o vídeo novo!

[@evanahouse]

Do we need to use AsyncStorage to store the user? const { currentUser }: any = getAuth();

[@aimeeaidanu254]

yes, example implementation inside firebaseConfig.js: import { initializeApp } from "firebase/app"; import { initializeAuth, getReactNativePersistence } from 'firebase/auth'; import AsyncStorage from '@react-native-async-storage/async-storage'; const firebaseConfig = { //ur firebase config etc. }; const app = initializeApp(firebaseConfig); const auth = initializeAuth(app, { persistence: getReactNativePersistence(AsyncStorage), }); export { auth };

[@corderoearljason6676]

I'm using expo go in my cellphone why is that it will show error:400 , unauthorized access. ?

[@zrgaming9378]

hi bro did you fixed the problem?

[@nwjnsshorts]

have you fixed it?

[@calvinssendawula7507]

Any new ideas guy?

[@mickaellutin2591]

Hello, i have this error "Something went wrong running `pod install` in the `ios` directory." when i run "npx expo prebuild" on my mac M2, can you help me please ? ;)

[@LochanaOrg]

Thanks Man , Really Useful

[@codewithbeto]

Glad it helped

[@hamzaahmad6620]

use mmkv storage and encrypt it for security concern

[@PowerProd]

Is this deprecated for SDK49 ?

[@codewithbeto]

Noup

[@azimwarsii]

which jdk version are you guys using??

[@EducationFire-n3d]

Error: Client Id property `expoClientId` must be defined to use Google auth on this platform. This error is located at: in App (created by withDevTools(App)) in withDevTools(App) in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in main(RootComponent), js engine: hermes

[@mehmoodahmad6078]

same errror

[@rubenandiapimentel]

tath just happens on expo go

[@misterjs023]

great! i appreciate...is ti possible do make this without use bare workflow?

[@codewithbeto]

Unfortunately not

[@misterjs023]

@@codewithbeto What a shame, it would be cool if it worked...well, all I can do is use what we have at the moment, thanks man, I appreciate

[@misterjs023]

@@codewithbeto Dude, it's really possible, I used the "development build" and I didn't need to expose the "ios" and "android" folders, which means I continued in the "managed workflow", for that I also used "React Native Firebase" and of course "React Native Google Sign In"

[@andreiarsenal]

will it work on expo go cause android sdk not working on my pc

[@thulo5204]

Please provide timestamps

[@i5news919]

how to do in react native cli

[@ricandybeejay737]

Thanks…. But When using the onAuthStateChanged… It gives an error undefined is not a function

[@aimeeaidanu254]

make sure ur not using the firebase admin sdk

[@EstebanDinamarcaM]

I have a question, what's the difference between this video (Firebase) and Google sign in (previous video)

[@aimeeaidanu254]

this video uses Firebase, the other video doesn't cough. dumbo.

[@sangameshwarpuramwar943]

Hi @Beto and Others I am getting "Client Id property expoClientId must be defined to use Google auth on this Platform" when I run the project Can anyone helo me on this

[@LotfiORouis]

so...... ejection is mandatory?

[@codewithbeto]

Yes, a development build is required

[@griseldabalmaceda4943]

Thank you so much for this tutorial! Also idk who else has gotten this error but if you get the "expoClientId required" issue i went ahead and did a dev client build and it worked! I think its to do with the proxy?

[@aimeeaidanu254]

Good job! glad to hear u fixed ur problem

[@muhammed030]

Amazing work!!! Bro, Can't we do it without using google cloud?

[@codewithbeto]

Not possible

[@GoGoJoeShow]

Hey Beto, this is working great. I am curious how you discovered the steps for this. The back and forth credentials, domains, etc. between the google console and firebase I don't see covered anywhere. How did you figure this out?

[@aimeeaidanu254]

beto is just built different unlike u peasents 💀 noob coders

[@codewithbeto]

Reading a bunch of documentation and implementing Google Sign In like 10 times on web and mobile. Haha that how you learn 😅

[@mauriciobarca1630]

Hi there. I followed your tutorial twice, but when i get to the part on min 29 to add the client ids to firebase, i get an error from firebase and i cant add the ids

[@aimeeaidanu254]

whats the error?

[@dancristian3673]

thanks for sharing!. i follow your videos.. one question please.. why logout() method does not work once i click on this button to sign out it does anything . it should return to login windows right?

[@aimeeaidanu254]

make sure you have **onAuthStateChanged** event listener. example implementation below: export default function Navigation() { const [user, setUser] = useState(null); useEffect(() => { onAuthStateChanged(auth, (user) => { console.log("user", user); setUser(user); }); }, []); return ( // {user ? : } {user ? : } ); }

[@tuhablasingles]

excelente contenido, con que gradle configuras tu expo 49 para que te funcione con run:android?

[@aimeeaidanu254]

no hablo espanol

[@jumanafathima8853]

Hello! Wondering if you did any xcode setup before you started this video. I'm running into an issue when I run yarn ios which tells me "CommandError: Failed to build iOS project. "xcodebuild" exited with error code 65." This seems to be because of some steps in xcode. Any guidance would be much appreciated, thanks!

[@good6894]

Hmm, there should be more logs presented before the "xcodebuild" error. If you could post those that would be very helpful. Otherwise I'd say just make sure you have the latest builds/versions of everything.

[@hamzahamza-vd7cj]

is ur ios simulator updated to the latest version

[@irfantaylan1590]

Hello Beto, can you help me with this problem please ? TypeError: Cannot read property 'createNode' of null, js engine: hermes ERROR Invariant Violation: "main" has not been registered. This can happen if: .... What should I do ?

[@auronvila1069]

update the useEffect to this useEffect(() => { if (response && response.type === 'success') { const { id_token } = response.params const credential = GoogleAuthProvider.credential(id_token) signInWithCredential(auth, credential).then() } }, [response]);

[@polentaibife]

Hi beto, im running this with expo go, the problem is after i selected my google account, every time i use sign in with google it automatically selects that account and i cant select another one. Is this a expo go issue? Another issue that i have is that my response doesnt have a idToken that is used to create the user at firebase, how can i fix that?

[@aimeeaidanu254]

first problem: not expo go issue, thats google problem second problem: cba to type a answer its ez fix

[@tharushakudagala3321]

It works! Thank you

[@codewithbeto]

Great!

[@adagostino94]

at the 46:10 mark when I try to sign in, I am able to choose my google account but afterwords on my app I get a Render Error stating Firebase: Error (auth/argument-error). I have been scouring the web trying to figure out what caused this but can't. Any ideas?

[@polentaibife]

I have the same problem, did you find a solution?

[@hai001ful]

@codewithbeto Even i am facing the same issue. It would be really helpful, if you could help us here.

[@priyanshisoni982]

Can you provide us the source code

[@yurkenowl]

Thanks for the video. When I try to use my phone with the expo go application I can't log in with Google it says access denied or something like that. Why is that happening and is there any way to fix it? In the emulator android and ios work perfectly.

[@aimeeaidanu254]

can't use expo go he explained in video

[@yurkenowl]

@@aimeeaidanu254 I missed that part

[@augustop6319]

wow, that's the only tutorial that worked for me... graciasss!!! I have a question... how would I be able to keep the session even when the app is closed? I tried: auth.setPersistence(auth.Auth.Persistence.LOCAL) but got the error: TypeError: Cannot read property 'Persistence' of undefined

[@yashjadhav6838]

Are you teaching apple token handling inside your course ?

[@kasteh]

GREAT VIDEO, but Im not geting redirect back to the app. Have any solution?

[@TheSldsnake]

is it works for Android ?

[@MansaJamie]

Yes

[@machlinjeyasekhar267]

Can u do without using Google cloud?

[@codewithbeto]

No 👎

[@5464654135756]

How is this different from the one that you made previously? kzbin.info/www/bejne/eHXIfIeGht-piJY

[@StephenWahid-b9y]

@codewithbeto Does this work for web as well?

[@Licensed_Bot]

Bro please could you help me with a personal email or phone number, am alwy3havung problems with react native and in the whole Of our university am the one who uses it and a also tea h people but if I have an error I have one to turn to

[@thedungnguyen4440]

does anyone here got response?.type return 'dismiss' ?

[@WG26Gaming]

yes i am keep on getting it it's been 2 months of your this comment i assume you have fixedx that issue, can you share how you did that cause i can't find any solutions please, it keeps on giving me dissmiss after getting back to the app everything working fine but that's the only problem i am facing with google signin

[@andresmalagon1]

great tutorial. do you have any resources on how to get this to work with state management like useContext or redux?

[@ericyan05]

Error 400: invalid request

[@AnuragMishra-ws4zc]

When your react native course will be available in English language ❤.

[@codewithbeto]

Im working on it! Hopefully in the next couple months

[@ВукашинПоповић-ш6ч]

Can this be done without google cloud?

[@vicbradley9728]

does anybody get "Error: The system cannot find the path specified." when run npx expo run:android

[@sahilverma_dev]

thankx for taking my request i really appreciate it man.

[@codewithbeto]

My pleasure!

[@李隆熙]

android not work

[@anazi]

Amazing tutorial finally someone uses firebase as intended and not using compact version. ❤❤