Updated OTP Authentication in React Native Expo Using Firebase | Firebase Phone Authentication 2024

Подписаться 10 тыс.

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

50% 1

Source Code: www.patreon.com/bugninza/shop...
🚀 Dive into the world of updated OTP authentication with React Native Expo and Firebase! 🔥 In this video, I guide you through the revamped process, addressing deprecated packages and ensuring a seamless user experience. Watch the demo, learn the steps, and build a robust authentication system for your React Native Expo projects.
📱 What's Covered:
Demo of the Final Output
Setting Up React Native Expo Project
Installing Dependencies for Stack Navigation
Integrating React Native Firebase for Authentication and Firestore
Setting Up Firebase Account
Configuring Firebase for Android
Building and Testing the Expo App
Adding Firebase Plugin and Google Service File
Enabling OTP Authentication and Firestore
Creating Login, Detail, and Dashboard Screens
Explaining App.js Navigation Setup
Testing and Verifying OTP Authentication
👨‍💻 Follow along as we code and debug, ensuring your understanding at every step. Whether you're a beginner or an experienced developer, this video has something for everyone.
🚨 Important Note: Any changes to the app.json file require a rebuild, so stay tuned to avoid hiccups in your project.
👍 If you find this video helpful, don't forget to hit the like button, share it with your fellow developers, and subscribe for more React Native Expo tutorials. Let me know your thoughts in the comments below! Your feedback keeps this community thriving.
🔗 Relevant Links:
React Native Expo Development build:docs.expo.dev/develop/develop...
Firebase Official Documentation: rnfirebase.io/
𝐁𝐨𝐨𝐤 ( 𝐅𝐫𝐨𝐦 𝐂𝐨𝐝𝐞 𝐓𝐨 𝐂𝐨𝐧𝐧𝐞𝐜𝐭𝐢𝐨𝐧𝐬: 𝐀 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫’𝐬 𝐠𝐮𝐢𝐝𝐞 𝐭𝐨 𝐛𝐮𝐢𝐥𝐝𝐢𝐧𝐠 𝐚 𝐬𝐨𝐜𝐢𝐚𝐥 𝐜𝐚𝐫𝐞𝐞𝐫 ) (I'm the Author)
Amazon India: amzn.eu/d/axYh0B4
Amazon Worldwide: a.co/d/acqJOYR
Gumroad (pdf): ninza7.gumroad.com/l/codetoco...
📱 Connect with me:
Instagram: / _ninza7
Discord: / discord
Twitter or X Profile: / _ninza7
Video edited by: / kaushal_2319
Music Source: RU-vid Music Library
Timestamps:
0:00 Introduction and Project Demo
1:35 React Native Expo Project Setup and React Navigation and react native firebase package Installations
5:26 Firebase App Setup for Android
6:39 First Development Build of React Native Expo App
10:27 Connecting Firebase to react native Expo
15:18 Second Development Build of React Native Expo App
18:05 Writing Code of App.js
21:07 Login Screen Code
33:06 Detail Screen Code
40:13 Dashboard Screen Code
44:07 Project Testing And Conclusion
Tags: nreact native, expo, firebase, otp authentication, phone authentication, sms authentication, react native mobile app, react native tutorial, react native firebase, firebase auth, expo firebase, react native login, react native signup
#reactnative #expo #firebase #authentication #otp #programming #coding #developer #developercommunity #javascript #code

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

24 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@1HardInch Месяц назад

do i need to have a development build for code to be sent? since i try on expo go on on web/iphone expo go, or android it says Failed to send verification code. Please try again.

@BatmanBottomG Месяц назад

Doesn't it need google developer account for play i integrity api which is 25$? Or it works without that

@teminoah2960 Месяц назад

what expo SDK and firebase version is this applicable to ?

@priyanshuassudani1276 21 день назад

i am following the exact process but my build fails for android everytime, can anyone help??

@user-tq7sg5or5o 6 месяцев назад

Can you please explain why two different SHA-1 were added? I could not find anything related to this in the docs. How did you get to know about this?

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

A Java dev told me to do so... I hope it helped 😁

@smallradcomp.2534 Месяц назад

How do you add the firebase recaptchaverifier to this? Ive been stuck for a while. I want to decrease the amount of bots using my app

@mominwahid4644 Месяц назад

I'm also stucked in this

@ricardoyanez9464 3 месяца назад

Hi! bro, in DEV mode works prefect, in production i get error of Play integrity, and not work SMS. How can I solve for production mode?.

@realvoices2356 2 месяца назад

me too, Have you solved it?

@renadasiri-qh6jz 4 месяца назад

at 6:23, what if i wanted to build for both android and ios? how do go on about this, isn't react native supposed to be cross platform but with single code? do i have to do all the steps for android twice? or is doing it for android once enough for both platforms?

@BugNinza 4 месяца назад

yes, a single code can be used for both

@032-m.muthuanushya2 5 месяцев назад

Thankyou bro first i choose the mode production in the firebase storage but not change false to true that's why i have the error like Invalid code [Error: [firestore/permission-denied] The caller does not have permission to execute the specified operation.] After the i set that in the firebase storage rules button change to true then active thankyou so much

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

👨‍💻🤜🤛

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

Can I help me with this issue please: Error: You attempted to use a firebase module that's not installed on your Android project by calling firebase.app(). I have done same thing as you mentioned but it's not working

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

Don't use firebase web use it it for android and follow the video carefully

@El_ii Месяц назад

Hey, great tutorial!!! can you provide a tutorial on how to use an Android emulator with expo build development? Idk why I always encounter errors when trying to open my project in Android. Thanks!!! ☺

@imasunflowerlilfunny3353 2 месяца назад

can you upgrade it to autdetect otp

@RushikeshGangapurkar 19 часов назад

An unexpected error has occurred. [Reason: Requested entity already exists] how to fix this i deleted old package from firebase

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

how can i solve this error [auth/missing-client-identifier] This request is missing a valid app identifier, meaning that Play Integrity checks, and reCAPTCHA checks were unsuccessful. Please try again, or check the logcat for more details.

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

don't use expo to scan the builds QR code. follow the video carefully

@hemalathakanagaraj36 4 месяца назад

I also got this error@@BugNinza

@hemalathakanagaraj36 4 месяца назад

@@BugNinzaI too got the same error

@Arterum-MC Месяц назад

Someone get a fix about this error ?

@user-gc8qm6kg9d 3 месяца назад

I got this error, Error sending code: [Error: [auth/missing-client-identifier] This request is missing a valid app identifier, meaning that Play Integrity checks, and reCAPTCHA checks were unsuccessful. Please try again, or check the logcat for more details.]

@BugNinza 3 месяца назад

Check your code

@realvoices2356 2 месяца назад

Anyone have done this for production play console?

@user-fi3xf6cw4w 4 месяца назад

23:19 in "await confirm.confirm(code) " where you get confirm function. explain anyone

@BugNinza 4 месяца назад

In this code, the confirm variable holds an instance of the ConfirmationResult object returned by the signInWithPhoneNumber method of the Firebase Authentication SDK. When the user enters their phone number and the signInWithPhoneNumber function is called, Firebase sends an SMS code to the provided phone number. The returned ConfirmationResult object contains the confirm method, which is used to complete the phone number authentication process by providing the verification code received via SMS.

@dhakshat6030 Месяц назад

When I run the following command: npx eas build --profile development --platform android I get a QR code with some error. Next, I run: npx expo start I get a QR code, but it shows the Expo Home Screen. Why I am not able to see my project in expo Can you tell me ? 8:52

@ravimishra8243 27 дней назад

cause expo app , is not supported., as per expo documentation , read that, you solve your other proebem also

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

I have already done it 🎉🎉🎉🎉🎉🎉; it's working fine. The first time, I encountered an error and demotivated myself, but the issue was that I forgot to add the both SHA1 key. I had only added one. Now it's fine ❤❤❤❤.🎉🎉🎉

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

Senior dev in the house 🤜🤛

@abhishekgawande222 3 месяца назад

hello i am having the error in connecting the expo apk to the app in the local developement, means after updating the app.json i rebuild the app and downloaded the apk but while installing the apk it is saying "app not installed".What to do.

@ricardoyanez9464 3 месяца назад

@@abhishekgawande222 delete de app already installed in the device. Dev apk is not de same that preview apk.

@m-coder2266 4 месяца назад

Sir please help me in this LOG [Error: You attempted to use a firebase module that's not installed on your Android project by calling firebase.app(). Ensure you have: 1) imported the 'io.invertase.firebase.app.ReactNativeFirebaseAppPackage' module in your 'MainApplication.java' file. 2) Added the 'new ReactNativeFirebaseAppPackage()' line inside of the RN 'getPackages()' method list.

@BugNinza 4 месяца назад

use development build to test your app not expo go app. Also use native firebase packages. follow the video carefully

@m-coder2266 4 месяца назад

Thanks fix it @@BugNinza

@m-coder2266 4 месяца назад

Now I am getting this issue after entering otp code [Error: [auth/session-expired] The sms code has expired. Please re-send the verification code to try again.]

@BugNinza 4 месяца назад

check your firebase settings and code. Also firebase limits the verification to 10/day, i guess.

@tusharmangla3323 4 месяца назад

at 10:10 when i open the aplicaiotn in my phone by scanning the QR code, I am getting many errors related to java. please help

@BugNinza 4 месяца назад

What error?? Also for the context, dont scan the builds url with expo go apps scanner.

@tusharmangla3323 4 месяца назад

@@BugNinza please help to solve this issue🙏🙏

@abhishekgawande222 3 месяца назад

@BugNinza 3 месяца назад

check your device permission for the external app installations

@abhishekgawande222 3 месяца назад

@@BugNinza does this will solve the problem

@JohnChavallaro 3 месяца назад

Great video! If you could create a video on IOS part then it will be very helpful.

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

Keep it up 👍

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

Always ❤️

@InDynamics 4 месяца назад

I am getting the following error: Android Build Failed: Gradle Build failed with unknown error. See logs for the " Run gradlew" How to solve this error?

@BugNinza 4 месяца назад

check your app.json and module imports and then rebuild your app again

@SamBIllium 2 месяца назад

Same issue

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

Can you please provide documentation of email authentication using firebase(especially the functions used in login.js) ? I guess the rest of the process of integrating firebase to react native project remains same. Please reply.

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

The video of email auth is already uploaded, check playlist

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

@@BugNinzaI implemented this phone authentication on my project. But somehow could not complete it correctly. [Error: You attempted to use a firebase module that's not installed on your Android project by calling firebase.app(). Ensure you have: 1) imported the 'io.invertase.firebase.app.ReactNativeFirebaseAppPackage' module in your 'MainApplication.java' file. 2) Added the 'new ReactNativeFirebaseAppPackage()' line inside of the RN 'getPackages()' method list.

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

Update : Corrected the error by rebuilding the app using eas build command. Thanks man.

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

What is the meaning of this error code? Please explain LOG Error sending code: [TypeError: _this.native.configureAuthDomain is not a function (it is undefined)]

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

Check your firebase setup

@dangozzz1334 4 месяца назад

@@BugNinza pls help same problem :((

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

I keep getting this error: ERROR Error in sending verification code: [TypeError: Cannot read property 'verify' of undefined] Do you know what causes this error and how i can solve it?

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

check your code, follow the video carefully, don't use firebase for web

@jadnacouzi 4 месяца назад

did you find what was the problem with that error?

@aidan7226 4 месяца назад

nope, are you encountering the same error?@@jadnacouzi

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

I have retried the tutorial but I have an another problem : "Build is waiting to enter the queue. Check your concurrency limit at : link"

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

rebuild your app again after some time

@wendtoinissaka 4 месяца назад

@@BugNinzahello : LOG Erreur lors de l'envoie du code [Error: [auth/too-many-requests] This project's quota for this operation has been exceeded. [ Exceeded quota. ]] LOG Erreur lors de l'envoie du code [Error: [auth/too-many-requests] This project's quota for this operation has been exceeded. [ Exceeded quota. ]] LOG Erreur lors de l'envoie du code [Error: [auth/too-many-requests] This project's quota for this operation has been exceeded. [ Exceeded quota. ]] LOG Erreur lors de l'envoie du code [Error: [auth/too-many-requests] This project's quota for this operation has been exceeded. [ Exceeded quota. ]]

@wendtoinissaka 4 месяца назад

thanks so much it run

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

Thank you so much! but I have the same problem with this command : "eas build --profile development --platform android" if a run the command as simple user I have : "Failed to upload the project tarball to EAS Build Reason: EPERM: operation not permitted, scandir 'C:\Users\ASUS\AppData\Local\ElevatedDiagnostics" if a run the command with adminstrator permission I have : "Failed to upload the project tarball to EAS Build Reason: Cannot copy 'C:\Users\ASUS' to a subdirectory of itself, 'C:\Users\ASUS\AppData\Local\Temp\eas-cli-nodejs\88bebc80-19fc-4c5c-9b98-ed5283c80138-shallow-clone'"

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

As per your error. something is not permitted. review this. Also, add a valid permissions to the app.json file and rebuild your app. docs: docs.expo.dev/guides/permissions/

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

@@BugNinza Try and try again, but not solution for the moment😪😮‍💨

@praveenraj8704 4 месяца назад

Firebase has now limited the number of SMS/day to just 10. Is there a way to increase this number ?

@BugNinza 4 месяца назад

Change the settings to development and set-up billing details

@praveenraj8704 4 месяца назад

@@BugNinza Can you clarify more please ?

@wendtoinissaka 4 месяца назад

thanks so much it run

@BugNinza 4 месяца назад

keep supporting

@abhishekgawande222 3 месяца назад

hello bro,all the component and ui is properly loading but unable to get the OTP for the Initial authentication.Could you help me in this

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

While enabling phone in Sign-in providers i am getting error 'Error updating Phone'

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

Review ur code and firebase app set-up

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

@@BugNinza i followed the tutorial step by step still facing this issue

@realvoices2356 2 месяца назад

Hi thanks for your video. After follow your steps, I use simulator android to test but I encounter this error: Error send code: [Error: [auth/app-not-authorized] This app is not authorized to use Firebase Authentication. Please verify that the correct package name, SHA-1, and SHA-256 are configured in the Firebase Console. [ Invalid app info in play_integrity_token ]]. Could you tell me What I do wrong? Thanks you for your help in advance!

@BugNinza 2 месяца назад

check this: correct package name, SHA-1, and SHA-256

@realvoices2356 2 месяца назад

@@BugNinza I have followed your step-by-steps then there are 2 SHA-1, but no SHA-256, package name is correct. What should I do to fix this? Thanks you for your time!

@Huseyin-re6lv Месяц назад

@@realvoices2356 Hi, Have you been able to solve this problem?

@anon9234 22 дня назад

@@realvoices2356 did u find solution I have same issue

@032-m.muthuanushya2 2 месяца назад

bro can i know its work react bare project as well or not????????

@BugNinza 2 месяца назад

Yes

@nat.serrano 3 месяца назад

good video, I paid 10 usd for the code but still I got this error Error sending code: [Error: [auth/missing-client-identifier] This request is missing a valid app identifier, meaning that Play Integrity checks, and reCAPTCHA checks were unsuccessful. Please try again, or check the logcat for more details.]

@BugNinza 3 месяца назад

please setup your expo app for dev client properly

@nat.serrano 3 месяца назад

@@BugNinza it’s done properly. It’s a firebase auth. It’s a shitty product

@ravimishra8243 28 дней назад

@@nat.serrano hi , can you please tell me in that purchase zip folder ,is any config file of firebase present, not that google.json file ?

@divyendhsuresh434 4 месяца назад

I am getting error bro , auth is not working , could you please help with that

@BugNinza 4 месяца назад

Could you please explain your error a bit more? Also, feel free to DM me on social media for a quicker response.

@user-bv1yx5sj7s 4 месяца назад

Hi, do I need to setup reCAPTCHA verification before implement the OTP authentication?

@BugNinza 4 месяца назад

no, firebase will take care of it

@user-bv1yx5sj7s 4 месяца назад

@@BugNinza I am not sure if I didn't anything wrong. But when I tried to get the code. It shows the following error message. Error: [auth/app-not-authorized] This app is not authorized to use Firebase Authentication. Please verify that the correct package name, SHA-1, and SHA-256 are configured in the Firebase Console. [ Invalid app info in play_integrity_token ]

@srikanthragishetti5370 3 месяца назад

eas login eas is not recognised internal or external command error i got it

@BugNinza 3 месяца назад

Install eas-cli

@srikanthragishetti5370 3 месяца назад

@@BugNinza k

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

@Buz Ninja, bro please make a video of removing recaptcha in phone authentication firebase in reach native expo

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

if you are planning to publish your app to playstore then simply enable google play integrity api in google play console. Recaptcha verification is a firbase policy

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

@@BugNinza bhai enable krke dekha but nhi ho rha , mene expo k through "eas credentials" k through sh1 key or sh256 key ko firebase console m project app k under enter kr diya or app check m enable bhi kr diya play integrity api ko but still no luck bhai, please eska koi solution do bhut dino se espe hi time kharab ho rha h

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

Hello bro, great video. Thank you for unblocking me. However, Im still facing one small problem. I can only send an SMS to the fictional phone numbers that i registered in Firebase authentication page. How can i send an SMS to an actual phone number

@BugNinza 4 месяца назад

You can send otp to the actual phone number. I tested it. And when did i block you? 🤔

@mohamadshekhabed8055 4 месяца назад

Can do for ios

@BugNinza 4 месяца назад

yes, but firebase setting and development build will be slightly different.

@arupde6320 4 месяца назад

github ???

@BugNinza 4 месяца назад

description

@darkwood8938 3 месяца назад

Error sending code: [TypeError: (0, _auth.default)().SignInWithPhoneNumber is not a function (it is undefined)] help plz

@BugNinza 3 месяца назад

Spelling mistake

@Muniyappank-lb6wc 3 месяца назад

[Error: [auth/app-not-authorized] This app is not authorized to use Firebase Authentication. Please verify that the correct package name, SHA-1, and SHA-256 are configured in the Firebase Console. [ Invalid app info in play_integrity_token ]] I got this error

@BugNinza 3 месяца назад

Follow the steps carefully to set up your app.

@Muniyappank-lb6wc 2 месяца назад

@@BugNinza It is working in android device not in emulator

@Huseyin-re6lv Месяц назад

@@Muniyappank-lb6wc Hi, did you solve this problem?