Made With Matt
Made With Matt
  • 26
  • 1 386 837
React Native Authentication with Firebase and Expo in 27 minutes
Learn to use Firebase with Expo by building a simple authentication flow in 27 minutes. In this tutorial, we’ll be using Expo, Firebase, and React Navigation. The app is kept very simple for the purpose of helping you understand the basics of Firebase, and giving you the ability to use this code in your own projects.
✅ WHAT YOU’LL LEARN
• Using Expo to build a react native app
• Using React Navigation, more specifically a Stack Navigator
• Styling components
• Using Firebase authentication to register, login, and sign out users from your app
💻 CODE
Github: github.com/mattfrances/FirebaseExpoAuthentication
👇 SOCIALS
Twitter: madewithmatt
Discord: discord.gg/EVXqnGdWtz
UA-cam: ua-cam.com/users/MadeWithMatt
💰SUPPORT THE CHANNEL
Donate: www.buymeacoffee.com/madewithmatt
⏱ TIMESTAMPS
00:00 - What we’ll be building
01:03 - Technology used
01:16 - Project setup
03:16 - Stack navigator
05:50 - Login UI
13:46 - Login state
15:00 - Firebase project setup
17:30 - Firebase handle sign up
19:35 - Firebase handle login
20:31 - Firebase user auth listener
22:48 - Home UI
24:14 - Show logged in user’s email
25:00 - Firebase handle sign out
26:44 - DONE 🎉
Переглядів: 262 506

Відео

Build a Crypto Price Tracker App with REACT NATIVE (API, Axios, Charts) | Part 3
Переглядів 12 тис.3 роки тому
Coinbase Crypto Price Tracker Series - Turning our Figma design into a React Native app! What you’ll learn: using the coin gecko API, adding API data to a FlatList, debugging a react native app, using react-native-animated-charts, and much more! Link to Design video - TO ADD Link to Part 1 - ua-cam.com/video/PJkQIYWxjH4/v-deo.html Link to Part 2 - ua-cam.com/video/IJQow77vvys/v-deo.html Link to...
Build a Crypto Price Tracker App with REACT NATIVE (Bottom Sheet, Charts, Styling) | Part 2
Переглядів 16 тис.3 роки тому
Crypto Price Tracker App - Turning our Figma design into a React Native app! What you’ll learn: using react-native-bottom-sheet to create a Bottom Sheet, using react-native-animated-charts to create a React Native Chart, styling React Native components, and much more! Link to Design video - ua-cam.com/video/PJkQIYWxjH4/v-deo.html Link to Part 1 - ua-cam.com/video/PJkQIYWxjH4/v-deo.html Link to ...
Build a Crypto Price Tracker App with REACT NATIVE (Expo, FlatList, Components) | Part 1
Переглядів 20 тис.3 роки тому
Crypto Price Tracker App - Turning our Figma design into a React Native app! What you’ll learn: using expo to create a react native app, using FlatList to create react native lists, creating reusable components, adding assets to a react native app, and much more! Link to Design video - ua-cam.com/video/PJkQIYWxjH4/v-deo.html Link to Part 2 - ua-cam.com/video/IJQow77vvys/v-deo.html Link to Part ...
Design a Crypto Price Tracker App - Figma Tutorial
Переглядів 6 тис.3 роки тому
Learn to use Figma by building a Cryptocurrency Price Tracker App. What you’ll learn: styling in Figma, creating reusable components in Figma, prototyping Figma designs, and more. Stay tuned to see this design turned into React Native! Link to Figma design - www.figma.com/file/4HGBxAN7ETvEAALTMoULrL/Crypto-price-tracker?node-id=3:6 ❤️ Thanks for watching 👍 If you liked this video, be sure to gi...
Photo Sharing App UI - Part 4 (Bottom Sheet)
Переглядів 3,7 тис.3 роки тому
This is the last video in the Photo Sharing App UI Series - where we turn our Figma design into a React Native app! What you’ll learn: using a FlatList with columns to create an image gallery, passing props to react native components, building reusable components, styling react native Images and more! Link to Design video - ua-cam.com/video/By0ydHGSJ64/v-deo.html Link to Part 1 - ua-cam.com/vid...
Photo Sharing App UI - Part 3 (Shared Album Page)
Переглядів 2,3 тис.3 роки тому
This is the third video in the Photo Sharing App UI Series - where we turn our Figma design into a React Native app! What you’ll learn: using a FlatList with columns to create an image gallery, passing props to react native components, building reusable components, styling react native Images and more! Link to Design video - ua-cam.com/video/By0ydHGSJ64/v-deo.html Link to Part 1 - ua-cam.com/vi...
Photo Sharing App UI - Part 2 (Album Page)
Переглядів 4,1 тис.3 роки тому
This is the second video in the Photo Sharing App UI Series - where we turn our Figma design into a React Native app! What you’ll learn: cloning a project from GitHub, starting an expo project, downloading project dependencies, using a ScrollView, mapping over data with javascript, creating reusable React Native components, styling react native components, navigating between screens using react...
Photo Sharing App UI - Part 1 (Project Setup)
Переглядів 6 тис.3 роки тому
This is the first video in the Photo Sharing App UI Series - where we turn our Figma design into a React Native app! What you’ll learn: using expo to create a react native app, setting up react navigation (native), using a stack navigator and much more! Link to Design video - ua-cam.com/video/By0ydHGSJ64/v-deo.html Link to Part 2 - COMING SOON Link to Part 3 - COMING SOON Link to Part 4 - COMIN...
Photo Sharing App Design - Figma Tutorial
Переглядів 7 тис.3 роки тому
Learn how to use Figma by building a simple Photo Sharing App UI. What you’ll learn: creating reusable components in Figma, using Figma’s Unsplash plugin to add images to shapes effortlessly, prototyping Figma designs, creating avatars in Figma, creating a design system in Figma and more. Stay tuned to see this design turned into React Native! Link to Figma design - www.figma.com/file/jKrTKKXtP...
👉 Build your first React Native app - Todo List Tutorial Part 2
Переглядів 165 тис.3 роки тому
In this second video of the Todo List React Native tutorial series, you’ll learn: state management in react native, adding items to state, removing items from state, dealing with user input, TextInput component, KeyboardAvoidingView component and more! Link to source code - github.com/mattfrances/simpleReactNativeTodoList Link to Figma design - www.figma.com/file/ndTNp9FBR5s2KYsJsKPuyg/React-Na...
👉 Build your first React Native app - Todo List Tutorial Part 1
Переглядів 507 тис.3 роки тому
In this first video of the Todo List React Native tutorial series, you’ll learn: layouts using react native, creating reusable components, passing props to custom components, using Expo to run your react native app, styling react native components and more! Link to source code - github.com/mattfrances/simpleReactNativeTodoList Link to Figma design - www.figma.com/file/ndTNp9FBR5s2KYsJsKPuyg/Rea...
Travel App UI Part 3 - Figma to React Native
Переглядів 10 тис.4 роки тому
This is the third and final video in the Travel App UI Series - where we turn Figma designs into React Native apps! What you’ll learn: Layouts using react native, Navigation between screens in react native, Passing data between screens in react native, Using the ImageBackground component, Flexbox for styling, Styling various react native components and more! Link to source code - github.com/mat...
Travel App UI Part 2 - Figma to React Native
Переглядів 13 тис.4 роки тому
This is the second video in the Travel App UI Series - where we turn Figma designs into React Native apps! What you’ll learn: Creating a header in react native, Using the FlatList component, Using the BackgroundImage component, Adding different sections and titles to a react native page, Styling react native components, Implementing a ScrollView and more! Link to source code - github.com/mattfr...
Travel App UI Part 1 - Figma to React Native
Переглядів 34 тис.4 роки тому
Travel App UI Part 1 - Figma to React Native
Travel App Design - Figma Tutorial
Переглядів 12 тис.4 роки тому
Travel App Design - Figma Tutorial
Onboard App UI Part 3 - Figma to React Native
Переглядів 4,4 тис.4 роки тому
Onboard App UI Part 3 - Figma to React Native
Onboard App UI Part 2 - Figma to React Native
Переглядів 11 тис.4 роки тому
Onboard App UI Part 2 - Figma to React Native
Onboard App UI Part 1 - Figma to React Native
Переглядів 13 тис.4 роки тому
Onboard App UI Part 1 - Figma to React Native
Onboard UI Design - Figma Tutorial
Переглядів 8 тис.4 роки тому
Onboard UI Design - Figma Tutorial
Designing Instagram in 10 Minutes with Figma.. Can it be done??
Переглядів 57 тис.4 роки тому
Designing Instagram in 10 Minutes with Figma.. Can it be done??
Food App UI Part 3 - Figma to React Native
Переглядів 22 тис.4 роки тому
Food App UI Part 3 - Figma to React Native
Food App UI Part 2 - Figma to React Native
Переглядів 57 тис.4 роки тому
Food App UI Part 2 - Figma to React Native
Food App UI Part 1 - Figma to React Native
Переглядів 105 тис.4 роки тому
Food App UI Part 1 - Figma to React Native
Social Travel App Design - Speed Design with Figma
Переглядів 1 тис.4 роки тому
Social Travel App Design - Speed Design with Figma
Food App Design - Figma Tutorial
Переглядів 28 тис.4 роки тому
Food App Design - Figma Tutorial

КОМЕНТАРІ

  • @Alex-qv6ln
    @Alex-qv6ln День тому

    I challenge you to design Adobe Photoshop in 15mins

  • @Alex-qv6ln
    @Alex-qv6ln День тому

    You forgot the status bar

  • @abdurrahman8388
    @abdurrahman8388 16 днів тому

    Why u r using the web app config? Cant u add android or ios app and use google signin ?

  • @DANNY-BOAKYESTYL
    @DANNY-BOAKYESTYL 16 днів тому

    Pls how can i download this app on my phone to use

  • @TheMinh-3081
    @TheMinh-3081 Місяць тому

    Thank you so much Matt

  • @justforfun9369
    @justforfun9369 Місяць тому

    It was just what I needed ! Best tutorial to get started in React-Native... Thank you Soo much .... Keep them coming ....

  • @turkish2992
    @turkish2992 2 місяці тому

    Hi i have a question. Can we use the template to your other projects also? Like the Food app

  • @saralagab4036
    @saralagab4036 2 місяці тому

    thank you so much matt u got a new subsciber !

  • @ShauryaSingh-h5j
    @ShauryaSingh-h5j 2 місяці тому

    The best one so far. I struggled so much. Its 21-Oct-2024. Just change the import statement in firebase.js to import * as firebase from "firebase/compat"; and it will work perfectly. My node version is 20.18 and firebase version is 10.14.1, expo is 51.0.8, react is 18.2.0

  • @guccigreatness4925
    @guccigreatness4925 2 місяці тому

    This was a easy to follow tutorial. Bro you're doing a great job! :)

  • @harshsawant
    @harshsawant 3 місяці тому

    great stuff!

  • @maleeshaliyanage9561
    @maleeshaliyanage9561 3 місяці тому

    highly appreciate your attempt.your explanation is so smoothy. therefore we can get points so easily. thank you so much and need more videos about figma user interfaces creation.

  • @Eric-Studies
    @Eric-Studies 3 місяці тому

    Matt, I noticed that when I used npx react-native link, the files did not link. I also tried npx react-native-assets and npx react-native-assets link but none of them worked. I used React Native for my project, not Expo, so I'm not sure what's going on. Could you help? Thanks for your time and the video (it was great!)

  • @Eric-Studies
    @Eric-Studies 3 місяці тому

    What extensions do you use for that beautiful folder hover animation? Would love to have that in VS Code myself!

  • @adamwistoft1657
    @adamwistoft1657 4 місяці тому

    Amazing content! I ran into an 'uncaught error' a mismatch between JavaScript part and native part of Reanimated (3.15.0 vs 3.10.1) and I am currently stuck in the tutorial.

  • @dhruvsolanki4473
    @dhruvsolanki4473 4 місяці тому

    Really easy-to-follow tutorial, enjoyed learning.

  • @Antassium
    @Antassium 4 місяці тому

    This is i credible!

  • @justin7532
    @justin7532 4 місяці тому

    I had to make a few changes due to updates for firebase but otherwise this was the catalyst that got me through a 3day headache of establishing auth. Thanks!

    • @justin7532
      @justin7532 4 місяці тому

      i changed the import * as firebase from firebase to get the specific packages I needed: auth, app, firestore

  • @matart7199
    @matart7199 4 місяці тому

    I'm pleased to have found this tutorial after a month of searching-it's concise, clear, and straightforward, with no unnecessary jargon or complexity. ❤❤❤❤❤

  • @simasjanusas1766
    @simasjanusas1766 4 місяці тому

    Great tutorial, thank you! Make it really easy to follow and implement. Especially, having unsplash and iconify plugins. Would ask for an implementation of a marketplace screens for some services.

  • @shortv1dsreact
    @shortv1dsreact 4 місяці тому

    Hello guys, if you are watching this video in 2024 and version of your firebase is 10+ you may have encountered errors such as "unable to resolve firebase" or "cannot read length" you should change your import in firebase.js to import * as firebase from "firebase/compat"; No need to change anything else in the code. This worked for me so I hope it helps you as well.

  • @GenjisaburoArashikage
    @GenjisaburoArashikage 4 місяці тому

    i just started developping damn! this is good

  • @dev_insights783
    @dev_insights783 5 місяців тому

    Thanks mat this tutorial is very helpfull

  • @qhaleedk1842
    @qhaleedk1842 5 місяців тому

    Thanks matt

  • @stasvic
    @stasvic 5 місяців тому

    Wait, now I’m really confused lol your videos great, but ru basically using figma for a template? Or is it easier to integrate in vs?

  • @stasvic
    @stasvic 5 місяців тому

    I’m confused with one thing, do you set each layer for each hour/day/and month seperate?

  • @maksss7728
    @maksss7728 5 місяців тому

    Your tutorials are super helpful, probably most helpful among every other UI/React native tutorial playlist on YT

  • @AliBongo-h3o
    @AliBongo-h3o 5 місяців тому

    How can i launch the application

  • @c4custom490
    @c4custom490 5 місяців тому

    it is not scrollable ? how can i do it should i use scrollView or flatList

  • @uttamtiwari1009
    @uttamtiwari1009 5 місяців тому

    How to add video in figma

  • @lessonsinreels
    @lessonsinreels 5 місяців тому

    what a video

  • @obochafrancis4475
    @obochafrancis4475 6 місяців тому

    How to post your design on Instagram

  • @vothaihung6872
    @vothaihung6872 6 місяців тому

    I did the instructions step by step, currently firebase version "firebase": "^10.12.3", something has changed leading to the above error The error is that it cannot be used directly .auth.createUserWithEmailAndPassword(email, password)

  • @chick_thoughts
    @chick_thoughts 6 місяців тому

    How can I get that icons?

  • @code_bro6144
    @code_bro6144 6 місяців тому

    thank you very much dude

  • @aanyc.6198
    @aanyc.6198 7 місяців тому

    Thank you so much for this beginner way like really appreciate it.

  • @08_mehuljadhav18
    @08_mehuljadhav18 7 місяців тому

    if i relaunch the app i get logout please fix

  • @prodesigntz7776
    @prodesigntz7776 8 місяців тому

    i suggest also you start using nativewind css library for the css

  • @santiagourzua2420
    @santiagourzua2420 8 місяців тому

    I LOVE YOU

  • @simasjanusas1766
    @simasjanusas1766 8 місяців тому

    Nice, short and straight to the point video. Thank you. No bs, no explanation, straight diving into the code and the design, - as it should be! Also kudos for showing how to use Figma tool. Efficient Figma use + React Native = turbo speed in development! Thanks

  • @mounirben9370
    @mounirben9370 8 місяців тому

    very clear tutorial, thanks

  • @RaksRhythm
    @RaksRhythm 8 місяців тому

    I did all the steps that you mentioned but I'm getting an error 'Unable to resolve "firebase" from "firebase.js"' when I try to test the sign up functionality. I'm using the firebase version 10.11.1, can you please suggest how I can fix this?

  • @humbertoventura1344
    @humbertoventura1344 8 місяців тому

    you need to download and apply react native first

    • @Eric-Studies
      @Eric-Studies 4 місяці тому

      Can you please tell me how? I'm not really sure. It throws an error when I apply the CLI commands he says to use. But that's probably because I haven't installed React Native yet.

  • @techmus4060
    @techmus4060 9 місяців тому

    tnx

  • @ChandrasekarBharathi
    @ChandrasekarBharathi 9 місяців тому

    What is the name of the icon plugin?

  • @mixx-n-match
    @mixx-n-match 9 місяців тому

    clear and concise. thanks! will be checking out more of your videos! subscribed :)

  • @albertoderio2370
    @albertoderio2370 9 місяців тому

    On "Get started", can i click "Web" for a database in my app? Or i need first iOS and Android?

  • @williamkakooza4603
    @williamkakooza4603 10 місяців тому

    Well done, Professor

  • @carlmascarenhas4124
    @carlmascarenhas4124 10 місяців тому

    Clean video

  • @RahulRahul-pj1fo
    @RahulRahul-pj1fo 10 місяців тому

    hi. for some reason, the big image doesn't display when using on an android emulator