Super Easy React Native AUTHENTICATION with Firebase 🔒

Create a Mobile App with Authentication by following this step-by-step guide using React Native & Firebase. By using Reactjs and Firebase you can easily add user authentication to a Mobile App in minutes!
🔥 Learn React Native FAST: galaxies.dev/reactnative
👨‍💻 Want to read instead of watch?
Here's the full tutorial: galaxies.dev/react-native-fir...
#############################
❤️ You can also find me on:
Instagram: / simongrimm_
Twitter: / schlimmson
Facebook: / devdactic
TikTok: / simongrimm_
Or join the Simonics Facebook group:
/ simonics
#############################
00:00 Intro
00:32 Connecting Firebase to React Native
04:59 Creating the Login
14:40 Using Firebase Authentication
21:49 Outro
#reactjs #firebase #reactnative

[@somilgupta3323]

Hey just wanted to say this video was super helpful!!! All around informative and beginner friendly!! Plus the fact that it is up to date and actually works compared to the videos posted 2 years ago has really been a life saver. Thank you, you have my gratitude friend.

[@galaxies_dev]

So happy to hear that - would be awesome if you could share it with others 🙌

[@Petros01]

Out of all the tutorials i've seen this one was the clearest one. You earned a sub!

[@galaxies_dev]

Thanks for the sub!

[@Pusthar]

This is the best. Thank you so much Simon. Explaining well and acurately.

[@tejas5331]

This tutorial was gem. i was so confused about fIREBASE in RN. Thank you so much,mate

[@galaxies_dev]

Will try to create an even more up to date version soon!

[@tejas5331]

@@galaxies_dev that would be great, I had a question, which architecture pattern is good for RN apps

[@salustechnews]

Thanks Simon, this video really helped with my school project 🤗🤗

[@galaxies_dev]

You're welcome 😊

[@MargaritaRadeva]

Thank you! Very easy to follow and insightful video!! :))))

[@megafezchauhan3108]

Just wanted to say thank you! This was extremely helpful.

[@galaxies_dev]

You're very welcome!

[@Ethanjayc]

Brilliant tutorial, using firebase as my backend for my dissertation project and this vid showed me the importance of using typescript over javascript for my dev work.. thanks mate! will look at the courses over the semester :)

[@galaxies_dev]

You're very welcome!

[@HuzaifaUsman313]

*Mr. Simon Grimm* , Thank you for leading audience on the right and simple way .

[@galaxies_dev]

Haha thank you!!

[@Yorsh13]

Thanks for the video, is so helpful!!!! 😁

[@rodrigomesquita9839]

Not gonna lie, you are the GOAT. 10 out of 10 video, thank you!

[@prathampatel6357]

very beginner-friendly, well done

[@galaxies_dev]

Many thanks!

[@afiffahmi1274]

thanks simon, i alredy subs!

[@user-ho7um1or3u]

Good job!you saved my day!thanks!

[@galaxies_dev]

Happy to help!

[@jcmsilv]

Very good tutorial. Thank you for your work

[@galaxies_dev]

Glad it was helpful!

[@neelsoni13062]

Really Amazing😍😍

[@CaioAlmeida91]

It's fantastic! helped me a lot! Tks!! you have video with combination authentication with auth context?

[@LazerMarsupial]

awesome guide thanks mate.

[@galaxies_dev]

Glad you enjoyed it!

[@Andrii_K.2]

I spent 4 days on this and collected a whole ton of bugs. You solved my problem in 5 minutes) Like, subscription)

[@galaxies_dev]

wow so happy to hear!

[@PercyMelody]

Perfect this is the best firebase tutorial I've come cress🎉🎉🎉 is their a possibility that you'll do a Google siginn as well for expo

[@iamthegatsby]

@simon, any chance of getting an updated video of Ionic with Electron? Always found your videos to be incredibly helpful, thanks for always making great content!

[@galaxies_dev]

Will look into that!

[@brenolins9908]

Thanks, works so fine!

[@galaxies_dev]

Great to hear!

[@omol_is_in_the_building]

Thanks, Simon! This was insanely helpful. Are you thinking of also showing how to do firebase authentication using the phone option or google/apple sign in? I'm trying to get it to work with Expo but I'm struggling a lot. Last thing but not as important; how can I make my VS code colors match yours? I also want to have those cool icons next to the file names. (I have prettier installed and I suspect we just have different themes)

[@galaxies_dev]

Thank you - and yes that might be a good idea for a future video. I am using "Shades of Purple" as my theme :) If you enjoyed it, maybe you can share the channel with your RN colleagues ✌️

[@emilheg8673]

This is amazing! Your React natives videos are really good and up to date with the recent documentation. New subscriber here! How would we go about showing a list unique to the logged in user? I have watched your "Todo app" video and want to chain it together with this auth App. My thoughts are to create a "todos" collection under each user document - please let me know if I am on the right track here? Thanks a lot!

[@Shukie6174]

Brilliant tutorial, thanks. Is there any advantage to using 'react-native-firebase' instead if you only need basic authentication and storage?

[@Backgr0undN0is3]

Thanks for sharing Simon. I had to change the firebase auth config to this: import { initializeAuth, getReactNativePersistence } from 'firebase/auth'; import ReactNativeAsyncStorage from "@react-native-async-storage/async-storage"; export const FIREBASE_AUTH = initializeAuth(FIREBASE_APP, { persistence: getReactNativePersistence(ReactNativeAsyncStorage), });

[@dustincintron1682]

I think I needed that as well.. but my app is breaking when I import FIREBASE_AUTH into my login screen. "TypeError: undefined is not a function, js engine: hermes" "Invariant Violation: "main" has not been registered."

[@pseudonim510]

Let's move this comment to the top! This helped me!

[@vladmehedintu5912]

Super helpful videos!

[@galaxies_dev]

Thank you so much!

[@thewoodark]

Thank you man!!!!!

[@galaxies_dev]

Happy to help!

[@jaimyvangyseghem5328]

Very good video! One question, i'm kinda stuck with this line: const [user, setUser] = useState (null); My editor changes it automaticly to const [user, setUser] = (useState < User) | (null > null); I can not change it since i'm not sure what syntax you are using here? I never saw it used that way so how is this differend than how we normally would use the usestate?

[@user-mu7tb6mz8e]

Hi Thank you i did all that and it works 😍😍

[@galaxies_dev]

Awesome, happy to hear!

[@AlessandraROlaya]

Thank u so much!

[@galaxies_dev]

You're welcome!

[@cassianopeteck195]

Simon thank you for your video. Helped me a lot! But, I want to know why my code isn't correct, on the app screen, I copy from you "const [ user, setUser] = useState(null);" and my prompt tells me an error. That this statement is "Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method". How can I fix it?

[@guillebambo7495]

Hello Simon, first of all thank you for this video it helps me a loot. In this video you are creating users without role, how do I integrate role in this? Is there a method that allow me to select if i want an admin or a normal user? Do i need a firestore? Again, thank you for your video ^^

[@sm1le231]

Hello Simon! I would like to say a big thank you to you, as I am learning thanks to your videos. You are doing a great job! Also, you explain things really well. If it's not too much trouble, could you please make a video on how to set up mobile phone number authentication on the new version? Good luck!

[@galaxies_dev]

Good idea - yeah will create some more content about React Native and Firebase!

[@danieruandres1378]

thank you so much, seriously, I had been trying for a long time and finally I could with your help. pd: what is the autocomplete extension you use? gracias

[@geronimosotelo1137]

github copilot, i think it costs

[@SK-fq2yz]

Great tutorial

[@galaxies_dev]

Happy to hear - share the video if you enjoyed it ✌️

[@instantopera]

Hi thanks for this introduction to firebase! I come from Amplify and they handle password reset and confirmation, as well as providing some customable Ui. Do you consider to cover those topic in the future ? Cheers Etienne

[@galaxies_dev]

Yeah we can do - it's a simple call of the SDK to request a password reset with Firebase!

[@user-sr4ih1zt5s]

Heyyy! What’s the extension are you using in vscode that draws a vertical and horizontal line between the two curly brackets?

[@cantmember3865]

Thank you so much for this, it really helped with the app I am working on right now! Just one question though, what does the const loading represent? I don't think it was accessed in the video after?

[@galaxies_dev]

Yeah then it was probably obsolete :D

[@cbn4000]

Good starter vid for react native logins. Would like to see a video on how to prevent the automatic login when registering. Many apps would like you to verify your email before letting you "inside" and unfortunately, firebase auth auto logs you in when registering.

[@galaxies_dev]

You can check the whether the email is verified from the user object I think - good idea for a future video!

[@motodankz4838]

Quick question. Does this have token expiry, and if user access app with expired token does it redirect to the login page and clears the user from storage? Does this also happen independently on what stack he's in?

[@yldrayozturk6276]

Hi Simon. Thanks for the video. Can you tell me the name of the autocomplete or auto hint plugin you used in the video?

[@galaxies_dev]

Most likely Github Copilot!

[@epicgameryt4052]

How can I use phone authentication with Firebase using Expo GO? Could you make a video on this?

[@user-oj4de7to8w]

Very helpful video, thank you! I am experiencing an error on signup: 'Cannot Read property _getRecaptchaConfig of Undefined. Any help on this would be greatly appreciated cheers!

[@johncarlo4028]

Can you make a video for user persistence?

[@hamzamanzoor8239]

please tell us the whats you extensions use in your vsCode

[@htmoh8115]

Is it same for other programming language? (Instead of react)

[@user-mg2to3xx9s]

Very good video but maybe you could go over how to user authentication between reloads!

[@nitsanbh]

you mean global state?

[@lorenzzzzz]

Hey, könntest du ein video machen zu dem Thema mit dem neuen Expo Router und Stack

[@kushaldas5313]

Can you please make a video about the authentication stuff while using expo-router.. that would of be great help too!!

[@galaxies_dev]

Good point!

[@nosrehcorporation]

How can I keep the "user" as session, so when I open up the app again it keep the user as logged in? on your galaxies series sounds like you used AsyncStorage with initializeAuth but that is not longer used, it got replace for this new getAuth way, so could you help me on that? or my user needs to login every time they open the app?

[@asharalikhan5162]

Why you use firebase web for react native expo and how to use firebase cloud messaging with firebase web for react native expo

[@Mahmoudery]

You saved my self-esteem..

[@galaxies_dev]

Not sure how but I am happy to help!

[@guilhermejacobus5118]

Hey! Great video! What theme are you using on vscode?

[@galaxies_dev]

I'm using "Shades of Purple"

[@arturmrozinski7536]

this exlained an easy part of logging in, but how do I reauthenticate? This seems to be extremely difficult - yet all apps have it and no one talks about it :D Reauthenticate as in - automatically relogging user after app restart

[@bilelrahmouni01]

ty

[@desmondawere3409]

Thank you for this video Simon, but quick question, how can one add display name and telephone during registration in firebase?

[@galaxies_dev]

I'll see if I can do another video on using phone auth!

[@dustincintron1682]

Hello. Great tutorial. Question though, When I get to the Login screen creation, my app breaks when I import FIREBASE_AUTH from FirebaseConfig.js. The error is: "TypeError: undefined is not a function" Anyone run into this?

[@ivanivan3900]

And how do you hide Firebase config from being exposed to git,for example?

[@fahadahmed4694]

Hi simon. The video was awesome but not easy to understand by begginers like me. :D

[@galaxies_dev]

Sorry to hear - anything I could do better?

[@user-vz7pl3ph1z]

Hi, can this be turned into just JS files instead of JSX?

[@zainshahzad8870]

You didn't use persistent storage?

[@manukrishnan4318]

bro when am importing User from firebase it showing error and suggestion also not showing

[@bongkumtim420]

hi, do you have the continuation for this firebase authentication for capacitors, react and ionic ?

[@galaxies_dev]

I do have a full course about that in the Ionic Academy!

[@jasim17]

can you try to make videos for cli too plssssss....

[@SeanCTTR]

Can you do supabase?

[@gasperkosenina7818]

Can you please do a Google sign in with react native app. Because i found your tutorials very helpful. Thanks!

[@galaxies_dev]

Sure thing!

[@reshmahegde2702]

Hi @Simon.. Can you please guide, which is the best local data base which can be used for an offline application in react native? Also what is the best strategy which can be used for saving/storing attachment in db? The attachments needs to be stored in offline mode as well.. Your videos are best.👍

[@galaxies_dev]

Thank you mate! Usually SQLite is a great choice, but I would store files in the FileSystem instead and not the DB. What is your use case? Might be a cool topic for a tutorial!

[@reshmahegde2702]

Requirement: Form with attachments(images, videos) This form should be stored in local db including attachments, when the device is in offline state( no internet). When the device is online, then local db data including attachments should be pushed to the server.

[@emperoroverlords1045]

@@galaxies_dev How can I store some data for offline mode in the filesystem? It would be great if you will have a tutorial for this one. Thank you for this. very helpful

[@offornna]

Had this error -> Can not read properties of undefined (reading '_getRecaptchaConfig'

[@08_mehuljadhav18]

If we login and then relaunch we get logout

[@banurajayawardhane7581]

Hey! This code is really helpful. Can you please please do a video of how to keep the user logged in using Async storage. Thank you

[@galaxies_dev]

Usually Firebase should handle that automatically!

[@bluishfox6211]

do you know how to fix the auth/network-request-failed? Edit: it was either my input not being given correctly or using assetExts instead of sourceExts in metro.config. Stuff seems to work now tho. Really good explanation!!

[@galaxies_dev]

Thank you, glad it all works!

[@virtrula]

finally

[@moemia902]

could you explain where you getting the code snippets from at 10:30?? Github Copilot?

[@Kyle-zn2yc]

CoPilot but it's probably pulling from somewhere else

[@OXYGENGFX]

Hey, i get the error message: "sign in failles: Cannot read property '_getRecapatchaConfig' of undefined, on both "sign in" and "create account" i have enabled email/password in firebase, and to my knowledge our codes are same. Do you have any tips on what might be the issue?

[@erenyeager588]

I had the same issue, make sure your both text inputs have an onchangetext which is changing the state of email and password in the login component. And in your metro.config.js file, make sure you are using ES6 js, if you are in vs code hover on the require keyword and you will get an option of 'quick fix' click on that and you're good to go.

[@brigadut]

i got this problem error (auth/admin-restricted-operation)

[@36547]

So since I’m using expo go. In the beginning to firebase to app do I use the native ios or the web app? Please explain this man

[@galaxies_dev]

You can use what you prefer, but in this video we used the Firebase web SDK, which works just fine for most things!

[@Darkar9545]

My project is build with react native cli, not the expo one, is there a tutorial for it?

[@galaxies_dev]

No I mostly use Expo in my tutorials!

[@qigongzhu2733]

Hi may I know why on authstatechage didn’t work? Using expo and press R to reload,then failed to get to the page and be forced to go to login I page again

[@galaxies_dev]

You can/should set the persistence to getReactNativePersistence and then use async storage, that usually works better. I covered the full process on my detailed Firebase course here: galaxies.dev/course/react-native-firebase/1-1

[@devShahriar]

it logout when refresh

[@galaxies_dev]

Become a Stellar React Native dev @ galaxies.dev 🚀

[@user-ug3fx1kx5l]

hey Simon, i had a console warning that said: Possible Unhandled Promise Rejection FirebaseError:auth/admin-restricted-operation. Any solution, im new to react native. I followed your steps but one on here 10:13, i think i haven't use async or react hook u mentioned, but i still have no idea how to use what. Any solution that might help me out?

[@galaxies_dev]

This sounds like a general Firebase error, did you activate email/password as a provider in your project?

[@user-ug3fx1kx5l]

@@galaxies_dev Apologize for the late reply, i found a way to solve it, it's just a wrong typing on my code thank you tho great video..

[@volftsun]

Like for the falser jok man! :D

[@japhethhirpa]

16:09 When I type "const [user, setUser] = useState(null);" it gives me an error saying: TypeError: Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method. Any help?

[@Razor255112]

Same problem here, did you manage to solve it?

[@japhethhirpa]

@@Razor255112 Hi I didn't manage to. However I did use the react native firebase hook useAuthState

[@luxiir1989]

If you haven't fixed this by now, are you using Javascript? Because if you are you can't check the type, this is the issue I was having as I didn't realise Javascript can't check types, so the line should just look like const [user, setUser] = useState(null); or that's what worked for me anyway

[@japhethhirpa]

@@luxiir1989 thank you for the help. Fortunately I have already solved the problem but your solution looks right

[@Razor255112]

@@luxiir1989 Thank you so much! I've been struggling with this all day lol Couldn't for the life of me figure it out, thought it was my setup initially.

[@JuanRodriguez-jw5ix]

Is there a github repository of this project?, by the way thank you very much for the video

[@galaxies_dev]

Code is in the Galaxies tutorial for all members: galaxies.dev/react-native-firebase-auth

[@alexreyes-cn9ru]

The other thing is that persistence in expo react native it's presenting some issues

[@galaxies_dev]

Is that still an issue?

[@alexreyes-cn9ru]

Yes, still the same thing with persistence in expo firebase

[@marcelosoaresdeoliveirajun1790]

is anyone experiencing the problem of login permanence after firebase 10.x? I've been struggling for a few days to persist the login with AsyncStorage but I always get redirected to the login screen because it's not persisting the user session.

[@galaxies_dev]

AFAIK you don't need to add any special handling anymore? Probably I should do another video with the latest version!

[@marcelosoaresdeoliveirajun1790]

​@@galaxies_dev i solved my problem. actually i think instance of authentication isnt global anymore. i solved by => const defaultApp = initializeApp(firebaseConfig); initializeAuth(defaultApp, { persistence: getReactNativePersistence(AsyncStorage) }); export { defaultApp } then on my index.app(default screen) import { defaultApp } from 'firebaseConfig'; defaultApp const auth = getAuth(defaultApp) useEffect(() => { onAuthStateChanged(auth, (user) => { setUser(user) }) }, []) it works, but coast me a few days to knowing whats happen lmao.

[@abdul.rehman.ikram1458]

I follow all the steps but im getting the following error. TypeError: Cannot read property '_getRecaptchaConfig' of undefined , How do I resolve this?

[@galaxies_dev]

That sounds weird - to which package or line does it point?

[@slavamangiafico5230]

@@galaxies_dev help cannot read property -getRecaptchaConfig of undefined help please!!

[@adheeshburthia3584]

Why should we customize metro config?

[@galaxies_dev]

That was required in the past.

[@jisuxk5208]

Why does authentication persistence doesn't work? If I close my expo app and open it again it does not save the users authentication state?

[@galaxies_dev]

I'm working on another course. You need to use a specific async storage package to make sure the session is stored.

[@MsDreamzHD]

​@@galaxies_dev That would be nice if you are able to make a video about it

[@KnockoutRam]

@@galaxies_dev can u explain a little how would it be done

[@maximcoding2667]

Why you are using web package inside react-native ,and not RNFirebase ?

[@galaxies_dev]

Because that setup is a bit more complicated and the web SDK was all we needed in here! But will do another FB video soon, might use it then!

[@asharalikhan5162]

@@galaxies_dev i also use web sdk but i am confusing in how to use FCM with it

[@PercyMelody]

Is there a way to persist authentication? when the app restarts

[@galaxies_dev]

Normally Firebase will store the auth token automatically and reuse it!

[@elgalanazo1662]

property 'getReactNativePersistence' doesnt exist, any help?

[@galaxies_dev]

Yes, with latest FB SDK you don't need that special handling anymore!

[@hujake5406]

What about Google auth

[@galaxies_dev]

Will work on something!

[@gamingWithBhemu]

github link please !

[@galaxies_dev]

Tutorial is on Galaxies: galaxies.dev/react-native-firebase-auth

[@andresfelipecastroguevara1506]

I followed all the steps very well but i got an Error that says [FirebaseError: Firebase: Error (auth/network-request-failed).]

[@danieltoth714]

The error must be horrible if even google broke on your machine lmao

[@getuliosouza5512]

my import { User } from 'firebase/auth'; is not working. Someone got the same problem? How can I fix it? 'User' is declared but its value is never read.

[@galaxies_dev]

That sounds like just a TS warning, and if you don't use User you don't need to import it!

[@Rionji01]

!

[@user-kh5mc8lo8r]

App/screens/Login.tsx tips not work for me, Login.tsx created as folder

[@slavamangiafico5230]

@galaxies_dev you can't answer a question to a question, it means you deleted the previous comment