React Native Firebase - Google Sign In Tutorial 🔥
ฝัง
- เผยแพร่เมื่อ 1 ต.ค. 2024
- 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: betomoedano@outlook.com
![ลองสั่งของจากแอพ temu ถูกจริงหรอ?? [โกงไหมครับ ep.88 ] | DOM](http://i.ytimg.com/vi/RTcZSQTiDZw/mqdefault.jpg)
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.
😀😀😀
so, umm in google cloud , i only need android client . like that ? im getting 400.
THANK YOU for this! I've spent hours trying to solve the error and now its working
THANK YOU SO MUCH!!!!
Thank youu for the 400 error fix
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.
hi beto, I am getting access blocked: authorization error, error: 400 invali_request, how to solve the issue
I have the same error
Me too
did you solve it? i get the same error
did you solve it?@@beaboss8235
did you solve it?@@alimohammad1548
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
Yeah, I get the same thing! Not sure what to do :/
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?
me too, same issue!!
@@ulfetalhussaini4481I been waiting for his replies ❤ hopefully we could reach out the answer soon🎉
did you remember to export { auth }; ??@@ulfetalhussaini4481
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
@@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!
just cant get away from error 400: invalid request when opening on browser. Cant make it open inside app, it always open crome...
Did you fix that? I'm with the same issue
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 🙏🏼
Let me know if you have found a solution for the error 400.
@@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 :)
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
@@monsieurho @jhonatangiraldo884 you might just have to “scheme” to toy config file
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.
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
@@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.
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
@@facundotorres7690Hi, was that the problem? I'm on a similar situation. How did you fixed it?
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?
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 😭
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? :)
It works as a charm using Firebase as the title says. The best tutorial.
when run the "npx expo prebuild" command only add the android folder .not added the ios folder and update the bundleIdentifier
same problem
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!
Glad it was helpful!
@@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?!!😉
while signing in using Google, i am facing Access blocked:Authorization Error :400 invalid request what should i do ?
probably youve writen wrong the clientid
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.
enable custom URI in google console
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 =\
You need a Mac for iOS
I had the exact same issue, I wish he would have mentioned that. But glad I'm still on track :)
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
you need mac
@@randomviralshorts1501Could the mac be from 2015? does it require to have a certain macOs version
@@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
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?
have the same problem
can you make a video for phonepay and gpay integration in react native cli
great tutorial. do you have any resources on how to get this to work with state management like useContext or redux?
Can you tell me how can I run this app now on a real device? Sure the QR does not work. Thanks.
does anyone here got response?.type return 'dismiss' ?
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
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
Will take a look :)
please do, thanks for your videos❤️❤️
Bro create one full stack project ❤
Tried all the suggested way to solve the problem of Google sigin but still face that problem
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 ?
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 ? : }
);
}
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?
Do we need to use AsyncStorage to store the user?
const { currentUser }: any = getAuth();
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 };
That is amazing. Very clear and easy to follow! Thank you so much!
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.
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
same errror
tath just happens on expo go
Excellent, super. Solves issues I have with google sign in
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 ? ;)
I'm using expo go in my cellphone why is that it will show error:400 , unauthorized access. ?
hi bro did you fixed the problem?
have you fixed it?
Any new ideas guy?
When your react native course will be available in English language ❤.
Im working on it! Hopefully in the next couple months
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
in my case id_token does not exists in response params :/
Hey Brother i request you to make a second part of the video how we can use those refresh and access tokens please
I’ll look into it 👍
does anybody get "Error: The system cannot find the path specified." when run npx expo run:android
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!!
I believe the SDK works better with expo
How is this different from the one that you made previously?
th-cam.com/video/BDeKTPQzvR4/w-d-xo.html
27:50 there you said to add web client id from firebase in link of google console it not opening whats the solution
Is this deprecated for SDK49 ?
Noup
Please provide timestamps
Can this be done without google cloud?
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
Error 400: invalid request
great! i appreciate...is ti possible do make this without use bare workflow?
Unfortunately not
@@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
@@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"
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. :)
thanks man for details expalin. it is very useful video.
android not work
will it work on expo go cause android sdk not working on my pc
custom scheme urls are not allowed for web client type
thankx for taking my request i really appreciate it man.
My pleasure!
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!
hey, did u find a solution?
@@ledoublez Nope got a new “Developer Error”. I have put the task on hold to work on another one in the meantime.
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 ?
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]);
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?
first problem: not expo go issue, thats google problem
second problem: cba to type a answer its ez fix
use mmkv storage and encrypt it for security concern
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?
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 ? : }
);
}
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?
I have the same problem, did you find a solution?
@codewithbeto Even i am facing the same issue. It would be really helpful, if you could help us here.
Brow, you killed it. Thank you so much!
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.
can't use expo go he explained in video
@@aimeeaidanu254 I missed that part
so...... ejection is mandatory?
Yes, a development build is required
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?
Good job! glad to hear u fixed ur problem
Thanks…. But When using the onAuthStateChanged… It gives an error undefined is not a function
make sure ur not using the firebase admin sdk
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!
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.
is ur ios simulator updated to the latest version
which jdk version are you guys using??
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
whats the error?
I have a question, what's the difference between this video (Firebase) and Google sign in (previous video)
this video uses Firebase, the other video doesn't
cough. dumbo.
Can you provide us the source code
how to do in react native cli
Amazing work!!!
Bro, Can't we do it without using google cloud?
Not possible
bricked my whole expo app... nice.
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?
beto is just built different unlike u peasents 💀
noob coders
Reading a bunch of documentation and implementing Google Sign In like 10 times on web and mobile. Haha that how you learn 😅
excelente contenido,
con que gradle configuras tu expo 49 para que te funcione con run:android?
no hablo espanol
is it works for Android ?
Yes
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
GREAT VIDEO, but Im not geting redirect back to the app. Have any solution?
Thanks Man , Really Useful
Glad it helped
Are you teaching apple token handling inside your course ?
Eita! No que vim aqui para recorrer ao seu canal, subiu o vídeo novo!
Can u do without using Google cloud?
No 👎
It works! Thank you
Great!
Amazing tutorial finally someone uses firebase as intended and not using compact version. ❤❤
@codewithbeto Does this work for web as well?