Email Authentication With Verification In React Native and Firebase App | React Native Tutorial

Поделиться
HTML-код
  • Опубликовано: 26 сен 2024
  • 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 email id and 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
    Part 2 Video Link: • Email Authentication W...
    Part 3 video link: • Forget Password? Set N...
    Topics covered:
    ✅ Full Setup of Firebase Application
    ✅ Start a React Native Expo Application
    ✅ Installation of Firebase SDK in react native expo app
    ✅ Login With Email using firebase and react native app
    ✅ Beautiful UI-UX
    ✅ What is firebase
    ✅ Custom stack header with react navigation 6
    ✅ Register user with email in react native app and firebase
    ✅ User dashboard
    ✅ Fetch user data from firestore database
    ✅ Logout feature
    ✅ Email verification using firebase and react native expo
    ✅ React native and firebase tutorial
    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, 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, email authentication tutorial of react native expo and firebase, login and register a user 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 #reactnavigation

Комментарии • 128

  • @BugNinza
    @BugNinza  2 года назад +1

    Part 2: ruclips.net/video/-PEODg5Xr9Q/видео.html
    Part 3: ruclips.net/video/onW84a_p4VA/видео.html
    Do Subscribe and keep supporting

  • @super8bp785
    @super8bp785 2 года назад +2

    Keep going dude.. and also do one video on forgot password and also nested n nested data with flatlist with navigation. Plz

  • @jefferydeme3676
    @jefferydeme3676 2 года назад +1

    Pls how can I add buttom navigation tabs to the dashboard section instead??

    • @BugNinza
      @BugNinza  2 года назад

      You have to nest the stack screen inside the bottom tab nav

  • @neelnsoni1313
    @neelnsoni1313 9 месяцев назад +2

    Really Helpful this video - i watch too many videoes but not work even chatgpt not correctly work but this way work ,
    Thank You so much ,pls make more videoes on tech.

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

      Check out my channel 😉 keep supporting 🙌

  • @reynoldnangawe4332
    @reynoldnangawe4332 4 месяца назад

    I had to go through over 20 videos to find out react native needs a web app and not android. you people should explain simple things like this, each video that put a web app I skipped. Until one long video which explained why to use web app.

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

    it not wowrk it say: undefined. I dont see the problem

  • @monica.b4974
    @monica.b4974 6 месяцев назад

    An error is coming
    Unable to resolve "..config" from "scr\Login.js"
    Could you plse help 😢

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

      check your Login and config files path

    • @monica.b4974
      @monica.b4974 6 месяцев назад

      @@BugNinza The Login file path is correct sir .Yet it shows the same error😐 .

  • @bansiparmar3879
    @bansiparmar3879 2 года назад +1

    please help.. can not navigate to dashboard screen

    • @BugNinza
      @BugNinza  2 года назад

      Recheck your code. Might be committing some mistakes in state changes.

    • @bansiparmar3879
      @bansiparmar3879 2 года назад

      @@BugNinza I have check 5 times but i dont know where my mistake
      Please help me

    • @youcefben_tech
      @youcefben_tech Год назад

      Me too please help

  • @RiyaSharma-bu7yv
    @RiyaSharma-bu7yv 6 месяцев назад

    Hi, actually am getting error in importing the firebase in login.js file how it will get resolve
    kindly help I have stucked with this error

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

      What's the error???

    • @RiyaSharma-bu7yv
      @RiyaSharma-bu7yv 6 месяцев назад

      @@BugNinza firebase file is not getting imported in the login.js file {"unable to resolve the issue"} is occurring on running the application

  • @fatimaperezlara8817
    @fatimaperezlara8817 Год назад

    Thank you, your video really helped me a lot. 😀

    • @BugNinza
      @BugNinza  Год назад +1

      Glad it helped! Keep supporting 🤜🤛

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

    thank you. it worked.

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

      Happy Coding

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

    sir why the alertbox said _config.firebase.simple is not a function ?

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

      where is _config.firebase.simple. Check your code

  • @CS21B003ANNABATTULAPARDHIV
    @CS21B003ANNABATTULAPARDHIV Год назад

    @Bug Ninja, bro after successfully signing in, my app goes to dashboard screen but when I press back button its going to login page again. I put gestureenabled as false for the dashboard screen yet it doesn't work. Any solutions for this problem ?

    • @BugNinza
      @BugNinza  Год назад

      You need a way to manage the user's authentication state. You could use a state management library like Redux, React Context, or even the built-in useState hook. Store the user's authentication status (logged in or not) in this state.

  • @jondygonzales4997
    @jondygonzales4997 4 месяца назад

    Thank you for your help!

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

      Happy coding 😁

  • @Tobi1200
    @Tobi1200 Год назад

    It Worked. Thank you!

  • @noora1536
    @noora1536 Год назад

    I followed the exact steps yet im getting this error 😢 Cannot read properties of undefined (reading 'auth') plz help me

    • @BugNinza
      @BugNinza  Год назад

      Might be commiting some kinda spelling mistakes. Check your code.

    • @goushikm4307
      @goushikm4307 Год назад

      same error for me too , have u got the output?

  • @pablopablo7115
    @pablopablo7115 2 года назад

    It worked. Thanks man

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

    hi thank you for sharing , i wonder how do have the code appearing without typing

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

      Github co-pilot

  • @chaudhrysamtech7269
    @chaudhrysamtech7269 Год назад

    this errror appear
    error while updating property fontsize in shadow node of type RXTTEX

  • @CS21B003ANNABATTULAPARDHIV
    @CS21B003ANNABATTULAPARDHIV Год назад

    @Bug Ninja, bro if I want to select make an android app (not a web app) then would it matter to select Firebase auth option as a web app, or is it compulsory to choose android app config after creating a project in Firebase? Thanks in advance

    • @BugNinza
      @BugNinza  Год назад

      When creating an Android app with Firebase, it's recommended to select the Android app configuration option after creating a project. While you can use Firebase Auth with a web app configuration, it's better to choose the Android app option because it tailors the setup specifically for Android development. This ensures that your authentication flows, security settings, and integration are optimized for the Android platform. It's not compulsory, but selecting the Android app configuration enhances compatibility and offers a smoother user experience for your Android app users.

    • @CS21B003ANNABATTULAPARDHIV
      @CS21B003ANNABATTULAPARDHIV Год назад

      @@BugNinza thanks for the immediate and informative response

  • @TheMasterPhilipp
    @TheMasterPhilipp Год назад

    Hey, which extension do i need for VS Code to actually use that rnfe snippet?
    Thank you so much for the vieo Mate :)

    • @BugNinza
      @BugNinza  Год назад

      JavaScript (ES6) code snippets, ES7+ React/Redux/React-Native snippets

  • @pakbeech6188
    @pakbeech6188 Год назад

    how to fix Firebase: A network AuthError (such as timeout, interrupted connection, or unreachable host) has occured. (auth/network-request-failed)

    • @BugNinza
      @BugNinza  Год назад

      Check your firebase set-up. You can show me your error on my social media handle for more details

    • @pakbeech6188
      @pakbeech6188 Год назад

      @@BugNinza I sent you a dm on your instagram

    • @theodorstrm-thrane8275
      @theodorstrm-thrane8275 Год назад

      I have the same problem, what's the fix?

  • @tusharjain1932
    @tusharjain1932 Год назад

    Error shown: cannot read property of auth of undefined ...

    • @BugNinza
      @BugNinza  Год назад

      check your config.js file and import the right components. Follow the video carefully

  • @AreeshaFatima-m6k
    @AreeshaFatima-m6k Год назад

    plzzz can you tell how you make folder from initially beacause i don't know to make folder plzzz help me

    • @BugNinza
      @BugNinza  Год назад

      expo automatically creates a folder. for eg: if you execute the command 'npx create-expo-app Auth" then expo creates a folder "Auth". Follow the video carefully

  • @Verum_Rex
    @Verum_Rex Год назад

    This video doesn't show if user enters a incorrect email/password. Could you provide a video that shows validating email/password?

  • @nave3n612
    @nave3n612 Год назад

    Can we use navigation.navigate{ } for inside navigations after successfully login?

    • @BugNinza
      @BugNinza  Год назад +1

      Yes! But you have to define it in the App.js ( or any other preferred location). That we are in the logged in state of the application. Like, I defined the dashboard in the App.js

    • @nave3n612
      @nave3n612 Год назад

      @@BugNinza Okay bro thank you ❤

  • @SuperMagnet
    @SuperMagnet Год назад

    bro can you tell me where did you define loginuser in login page?

  • @henrique9009
    @henrique9009 Год назад

    Thank you for this content! Success

    • @BugNinza
      @BugNinza  Год назад +1

      Glad you enjoyed it!

  • @thuanthanh8392
    @thuanthanh8392 Год назад

    WARN Possible Unhandled Promise Rejection (id: 0):
    ReferenceError: Property 'indexedDB' doesn't exist

    • @BugNinza
      @BugNinza  Год назад

      Where is indexedDB? Follow the video carefully

  • @vantzy7724
    @vantzy7724 Год назад

    undefined is not a function how to fix it?

    • @BugNinza
      @BugNinza  Год назад

      Might be some kinda type error. Check your code

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

    my code dosent work

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

      what's the error?

  • @theintyadanarlwin9829
    @theintyadanarlwin9829 2 года назад +1

    Thanks for uploading videos. How can I update auth users?

  • @udaniamarasinghe24
    @udaniamarasinghe24 Год назад

    Can I get the github link

  • @thuanthanh8392
    @thuanthanh8392 Год назад

    ERROR FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app-compat/no-app).

    • @BugNinza
      @BugNinza  Год назад

      Check your config.js file. Follow the video carefully

    • @thuanthanh8392
      @thuanthanh8392 Год назад

      @@BugNinza WARN Possible Unhandled Promise Rejection (id: 0):
      ReferenceError: Property 'indexedDB' doesn't exist

  • @jefferydeme3676
    @jefferydeme3676 2 года назад +2

    Great
    Please the source code

  • @anaz9399
    @anaz9399 Год назад

    I have already started project without expo. Can i use this?

    • @BugNinza
      @BugNinza  Год назад

      yes, you can use javascript anywhere

    • @anaz9399
      @anaz9399 Год назад

      @@BugNinza the same code in the vedio?

  • @veto8172
    @veto8172 Год назад

    Very good music!

  • @AreeshaFatima-m6k
    @AreeshaFatima-m6k Год назад

    after run first command expo init Auth on cmd there is statement show that exo is not internal or external command

    • @BugNinza
      @BugNinza  Год назад

      It's not exo... it's expo

  • @bikeshbolivian8002
    @bikeshbolivian8002 Год назад

    your are awesome bro😘😘😘

    • @BugNinza
      @BugNinza  Год назад

      Thank you so much 😀

  • @thanhtaiphan2651
    @thanhtaiphan2651 2 года назад

    Can you make a video on forgot password and update it in firestore? plz

    • @BugNinza
      @BugNinza  2 года назад

      Sure. Stay tuned

  • @uzairdown
    @uzairdown Год назад

    github link ?

  • @mageshwars5191
    @mageshwars5191 2 года назад

    Itachi Uchiha🤩

    • @BugNinza
      @BugNinza  2 года назад

      Indeed. Keep Supporting

  • @karabomaloka8306
    @karabomaloka8306 Год назад

    Can you do a video on Sign in with Google and Facebook with the same Firebase code?

    • @BugNinza
      @BugNinza  Год назад +2

      Yes, why not. I'll upload it soon. 🤞

    • @himanshutank1356
      @himanshutank1356 11 месяцев назад

      @@BugNinza have you done with that tutorial ? please share link

  • @WizzyAlex
    @WizzyAlex Год назад

    Please what android emulator are you using

    • @BugNinza
      @BugNinza  Год назад

      I'm not using any emulator. I am using expo app (as proviced by the expo officials). After that, I mirror my device screen for recording

    • @WizzyAlex
      @WizzyAlex Год назад

      @@BugNinza Thank you very much
      I have subscribed

  • @san.v715
    @san.v715 Год назад

    showing network auth error

    • @BugNinza
      @BugNinza  Год назад

      Make sure that your device and laptop has the same internet connectivity

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

    it could be better without music

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

      Sorry!!! old video. I'm open for suggestion😉

  • @sharjeelansari-rj2rr
    @sharjeelansari-rj2rr 9 месяцев назад

    please give me source code

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

      check description

  • @Itachii-lord
    @Itachii-lord Год назад

    itachi ❤❤

  • @goncalocorreia1464
    @goncalocorreia1464 Год назад

    can you show how to handle email verification, to not let the user log in without verifying the email?

    • @BugNinza
      @BugNinza  Год назад

      You can handle it in the following way:
      useEffect(() => {
      if (user && !user.emailVerified) {
      setError('Please verify your email address first.');
      }
      }, [user]);
      Note: You have to modify your code, according to your project

  • @willyhorizont8672
    @willyhorizont8672 Год назад

    what is that theme name? i like it

  • @khatariinsaan5284
    @khatariinsaan5284 2 года назад

    Bro is It working in APK as Well ?
    If not Then Plz make a Seperate video On it!

    • @BugNinza
      @BugNinza  2 года назад

      It gonna work. Add the permissions and go for eas build

    • @khatariinsaan5284
      @khatariinsaan5284 2 года назад

      @@BugNinza Thanks bro You are doing Great Work ☺☺

  • @bilelrahmouni01
    @bilelrahmouni01 Год назад

    🤓

  • @fadilarfat4974
    @fadilarfat4974 2 года назад

    i got an error that said 'undefined is not an object (evaluating ''_firestore.default.app.length')'

    • @BugNinza
      @BugNinza  2 года назад

      check your config.js

    • @zeeshanjamil3212
      @zeeshanjamil3212 2 года назад

      Dear bug Ninza,
      I am facing the same error. Kindly explain which line of code should be changed in config.js file.
      Thanks.

    • @charounkaratsompanimpram8361
      @charounkaratsompanimpram8361 Год назад +1

      If you used import like this: import firebase from '../config'; change it like this: import { firebase } from '../config';

    • @syedali8440
      @syedali8440 10 месяцев назад

      Do u have any idea about this error :
      Requiring unknown module "1". If you are sure the module exists, try restarting Metro. You may also want to run yarn or `npm install'.

  • @studentimantha5345
    @studentimantha5345 Год назад

    awesome

    • @BugNinza
      @BugNinza  Год назад

      Thanks. Keep supporting 🙌

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

    i got an error "cannot read property 'auth' of undefined" how can I solve this error

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

      In which part you got this error? Can you revise your code once again?

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

      @@BugNinza when I tried to login in but code has no error

  • @webwork6193
    @webwork6193 2 года назад

    Continue this video with Forgot Password 🙂?

    • @BugNinza
      @BugNinza  2 года назад

      Sure, stay tuned. keep supporting