Phone Authentication Using Firebase and Expo | OTP Login | React Native Tutorial | JavaScript Code
HTML-код
- Опубликовано: 26 сен 2024
- Updated Video Link: • Updated OTP Authentica...
Source Code & more: / bugninza
Hello guys, My name is Rohit Kumar Thakur. In this video, I am gonna show you, how to authenticate to your react native expo mobile device using One time password. In the project, I am using the latest version of firebase sdk, which is version 9. React Native Expo is a cross platform framework, which gonna helps you to build mobile apps for both Android & iOS devices. The code part is not that much tough. You just have to follow the video to get the desired output. Happy Hacking
𝐁𝐨𝐨𝐤 ( 𝐅𝐫𝐨𝐦 𝐂𝐨𝐝𝐞 𝐓𝐨 𝐂𝐨𝐧𝐧𝐞𝐜𝐭𝐢𝐨𝐧𝐬: 𝐀 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫’𝐬 𝐠𝐮𝐢𝐝𝐞 𝐭𝐨 𝐛𝐮𝐢𝐥𝐝𝐢𝐧𝐠 𝐚 𝐬𝐨𝐜𝐢𝐚𝐥 𝐜𝐚𝐫𝐞𝐞𝐫 )
Amazon India: amzn.eu/d/axYh0B4
Amazon Worldwide: a.co/d/acqJOYR
Gumroad (pdf): ninza7.gumroad...
Topics covered:
✅ Full Setup of Firebase Application
✅ Start a React Native Expo Application
✅ Installation of Firebase SDK in react native expo app
✅ Use of useState hook to add the data to database
✅ Minimal UI-UX
✅ Otp login in mobile device
✅Otp login code tutorial with UI-UX
✅ What is firebase
My social Links:
Instagram: / _ninza7
Twitter: / _ninza7
Website: ninza7.me
Video widgets edited by: / kaushal_2319
Music Source: NCS
Tags: firebase, firebase tutorial, what is firebase, firebase tutorial in hindi, firestore, firebase database, react firebase, firebase react, firebase realtime database, react native, react native tutorial, react native tutorial in hindi, react native project, react native tutorial for beginners, react native app, react native full course, react native navigation, native react, react native course, react native projects, what is react native, react native app development, react native firebase, react native crash course, react native ui, learn react native, flatlist react native, react native in hindi, react native tutorial for beginners, react native app development, react native project from scratch, react js. expo react native, react native tutorial for beginners, phone authentication in react native, otp login using react native and firebase, Firebase, firebase console, google firebase, react native firebase, firebase database, firebase pricing, firebase auth, firebase analytics, firebase authentication, firebase login, firebase cloud messaging, firebase storage, react firebase, npm firebase, firebase tutorial, firebase app, firebase sdk, google firebase console, firebase crashlytics, react native firebase auth, firebase fcm, reactfire, firebase web, firebase android, firebase ios, firebase backend, firebase cloud, firebase cloud storage,
#reactjs #javascript #reactnative #ios #android #react #firebase
Updatd Video Tutorial Link: ruclips.net/video/CzjHl9uo8tY/видео.html
Do Subscribe and keep supporting❤️
Is there any problem with expo-firebase-recaptcha. Mine is encountering errors. Please help me
Tell me more about your error. DM me incase
@@BugNinza Actually problem is in documentations of google, idk why they did not provide a good documentation for latest version. I managed it and it worked after a long time of hussle. ChatGPT was also unable to solve the error, but it finally worked tho. Only have a warning in my app now. I will also a write a blog on it, because many people may face the same problem in future.
bahot bahot thank you bhai ho gaya aaj me 10 din se paresan tha par aaj hua
thank you
Keep supporting 🙌
Thank you so much!!!!! I is amazing! it works well!!!
Keep supporting 🙌
How to remove recaptcha ??
Deprecated now. Can't use expo-firebase-recaptcha anymore :(
I'll update it soon. Stay tuned
@@BugNinza haha do you have some hints pls, of where I can find a working tutorial. I'm kinda blocked rn and I have a deadline. The solutions I have don't really work with Node.js I guess :/
II came across this error message; new PhoneAuthProvider()` is not supported on the native Firebase SDK. How do I resolve this?
i'll update the otp app with native sdk soon
does this phone auth works for web??
Hey do you by any chance know why I'm getting this error when it calls the sendVerification function:
TypeError: null is not an object (evaluating 'verifier.verify')
It's a type error. Check your code
@@BugNinza but i have the exact same code you have in your sendVerification function and usestate variables
Nevermind. For some reason I dont get that error anymore. But now my error says:
Error: Missing "authDomain" in firebase web configuration.
Its fixed now. Sorry
@@iVigilxnte how you fix this error "Error: Missing "authDomain" in firebase web configuration." in your code ? please help me I get same error
firebase.auth().signInWithCredential not working
I followed the instructions but this didnt work. First error with auth property firebase core. property verify. A lot of trouble. Why you said not to test with expo go when you did at the end of the video
No, it's not like that, this code is fully tested and it's working. You can test your code in the expo go app. because we are not using any native code here
Hey bud, could you share the source code? thanks
Nice tutorial, please can you do a tutorial on how to register using Name, Email, Password and Add the otp function to it
Thanks
Yes, soon
Hi sir! Can you please make extra video since a lot of packages is deprecated now😅
It would be great to see a video with the new implementation from you
Soon.. buddy.. stay tuned 🤜🤛
I did all step by step and I getting 'WARN No native ExpoFirebaseCore module found, are you sure the expo-firebase-core module is linked properly?'
and the verification message does not sent.
if someone here can help me, please replay
check your config.js file
dude your video helped me alot, you are amazing.
Glad I could help! Keep supporting
Thank you, this video is helpful
Keep supporting 🙌
I have successfully implemented it but how do I remove the reCAPTCHA window? The client doesn't want that.
i think there is a invisible recaptcha option too
@@ayeshaarshad3403 there is an “attemptInvisibleVerification” prop on “FirebaseRecaptchaVerifierModal” but when set to true, it still doesn’t behave as expected
I am getting No Firebase App[Default] has been created-call firebase App.initialzeApp()(app-compat/no-app) error bro how to get off from these error
Please check your initialization for firebase instance
In sdk 48 version, the expo firebase core warning window appears. Phone number authentication works fine. Doesn't it matter?
how did u got it working with sdk 48 version?
Nice tutorial ,very clear explanation, please can you do a tutorial on how to register using Name, Email, Password
It's already there: ruclips.net/video/lBUjggiWQ1U/видео.html
Keep supporting❤️
how fix in expo No native ExpoFirebaseCore module found, are you sure the expo-firebase-core module is linked properly?
There might be some issues with the project set-up.
And don't test your code using the expo go app. It won't work
why you did?
but in the video you're using expo go app, no?@@BugNinza
I got the error: Couldn't resolve ExpoFirebaseCore.
Please help me
Check ypur package and installations. Follow the tutorial carefully
Nice job sir. please tell us about if idon't use recapcha method in this project then what can I do 💖💖
Recaptcha is used by Firebase to prevent automated systems from accessing the authentication process, but there are alternative methods available. Some options include using API keys with limited access or implementing your own authentication system that doesn't rely on Recaptcha. However, it is important to ensure that your authentication system is secure and not vulnerable to attack.
@@BugNinza thank you so much sir 🙏🙏
Can u plz tell , how do you get all those app details to add in config.js ??
It's the firebase config keys. You can watch the video to know how to get those keys.
I have no idea why sometimes, the verificationid is empty
Firebase glitch
Hi sir. How to use it with Vietnam phone number. Please help me
Use the vietnam country code(+84). For example, if your phone number is 111111. Then in the phone number input section. Enter: +84111111 keep supporting❤️
thanku sir thanku so much upload this video
glad! it helped.
Hi. why you did not run "npm install firebase"?
0:54 Don't skip the video bro
@@BugNinza thank you.. +1 subscriber here.
can you help me how to remove or hide recapcha?
Great
thank you Kumar 🙏
Anytime
Hey Bug Ninza, Iam stuck at this error can you help me with it, error says
Android Bundling failed 1122ms
Unable to resolve "react-native-webview" from "node_modules/expo-firebase-recaptcha/build/WebView.js"
Install this package.
npm i react-native-webview
Official documentations says the expo-firebase-recaptcha is going to be deprecated
ll improvise
@@BugNinza how
@@BugNinza how will you improvise? Give us at least a small idea
Hi can you tell us how to remove recaptcha
enable SafetyNet for Firebase Authentication or add SHA-256 fingerprint in your firebase project settings
Thanks Buddy..
Welcome!
And is it firebase v9?
Yes, firebase version 9.6.11
Can we hide the recaptcha?
yes, then you have to enable SafetyNet for Firebase Authentication
@@BugNinza Hi, Can you share how to do that. In this tutorial we have created a web app in firebase , so i am not able to add SHA256 fingerprint. Can you help please?
its better not to because they may be bots
Thanks
Welcome
It was not work for me, but anyways thank you😢 for sharing this tutorial for us
Hey! Feel free to share your errors. If you are not comfortable enough here then you can DM me on my social media handle
@@BugNinza Do you think the method provider in the Firebase such as facebook, google and PhoneNumber authentication are be able to work with expo or not, I mean I have been struggling with authentication for long and some of those method in expo has shown that there are already deprecated… so could you pls confirm that the entire of the provider are be able to work perfectly fine as you experience so I could move on from firebase-authentication, anyways thank you for replying my comments🫡🫡🫡
@@voldemore6300 I am facing the same issues. Actually, this video works well for Expo SDK 46 and below. Recaptcha Verifier is now deprecated and this method together with my app are no more working. I'm also searching for how to make it work again
Hey, Voldemore!! Expo is trying to closing the gap between bare react native packges and expo packages. That's why few of the expo packages like google sign in, facebook sign in, etc. are depracted. You can't test the native packages using the expo application. You have use either development build method or prebuild method to test your application or you can use Android studio as well.
I'll look into it (recaptcha verifier).
Hi i make the same code and he give me this error
WARN Possible Unhandled Promise Rejection (id: 0):
FirebaseError: Firebase: Error (auth/error-code:-39).
@BugNinza
Check your firebase app rules and review your code
TypeError: undefined is not an object (evaluating 'new _app.firebase.auth') Please reply
It's a type error. check your code
@Bug Ninza please assist I am getting this error Possible Unhandled Promise Rejection (id: 3):
FirebaseError: Firebase: Invalid format. (auth/invalid-phone-number).
construct@[native code]
construct@[native code]
Enter your country code before entering the phone number. Follow the video carefully..
the same for me. and I added the country code (+972XXXXXXX).@@BugNinza
I wish you did it using Firebase9 modules instead of the /compat version which uses the old firebase8 modules. The code video is kind of useless now and lost. Thank you anyway.
The firebase version is 9.6.11. Code video is important for step by step tutorial
@@BugNinza Yeah the version is 9.6.11 but the code used is for the oldest module of version Firebase 8.x, thats why you have added the firebase/compat, not used only 'firebase' this code or any similar codes will no longer work in version 10 or 11 of firebase. Also, most new projects are using Firebase 9 with its new modules, which will be a conflict to integrate this code. Anywho thank you really. But just keep this in mind. It took me all day yesterday to figure it out, and today after a while it finally worked.
@@anazi Hey, so did you figure it out? Could you somehow share the code since I face the same issues when trying to set it up, and all code I find is for sdk 8
@@ilyadynin Yup but im out of town now. Please re-send this message again as a reminder when I get back to the office to share the code here. after 24 hours
@@anazi Could you please send to me?
Is it possible to make the recaptcha invisible? Only required for spam
Check the firebase docs
Nice tutorial ...helped us a lot
Happy coding
Is there any other way to use sdk49?I have try it, it is working in expogo, but when I do eas build , i got a error because of config.plugin 5.0.4..
follow the video. I didn't use the expo go app
Nice tutorial ...helped us a lot
I'm glad it helped
I'm Korean I've been looking for phone number auth and thank you so much. I respect you
I'm glad it helped
May God bless you more and more , i wasted my last 2 days trying to figure this out and your video finally helped me
Glad I could help! Thank you so much. You just made my day.
Hi is it possible to change the name of the sender in the message to my app name?
I'm not getting you. Feel free to DM me on Twitter or Instagram and discuss more
@@BugNinza Hi what i mean is the OTP code received as a text message is from a number, can i change it to for example MYAPP
Yes, I guess. I am not sure that firebase provides this feature in the free version.
@@BugNinza After researching, i think it gets automatically updated after i load app to stores.