Super Easy React Native AUTHENTICATION with Firebase 🔒

Рет қаралды 76,398

Күн бұрын

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

Пікірлер: 175

@somilgupta3323 6 ай бұрын

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 6 ай бұрын

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 11 ай бұрын

Thanks for the sub!

@Pusthar 7 ай бұрын

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

@salustechnews 10 ай бұрын

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

@galaxies_dev 10 ай бұрын

You're welcome 😊

@tejas5331 5 ай бұрын

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

@galaxies_dev 5 ай бұрын

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

@tejas5331 5 ай бұрын

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

@Ethanjayc 4 ай бұрын

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 4 ай бұрын

You're very welcome!

@megafezchauhan3108 8 ай бұрын

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

@galaxies_dev 8 ай бұрын

You're very welcome!

@HuzaifaUsman313 Жыл бұрын

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

@galaxies_dev Жыл бұрын

Haha thank you!!

@MargaritaRadeva 6 ай бұрын

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

@Yorsh13 3 ай бұрын

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

@rodrigomesquita9839 29 күн бұрын

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

@prathampatel6357 3 ай бұрын

very beginner-friendly, well done

@galaxies_dev 3 ай бұрын

Many thanks!

@afiffahmi1274 5 ай бұрын

thanks simon, i alredy subs!

@user-ho7um1or3u Жыл бұрын

Good job!you saved my day!thanks!

@galaxies_dev Жыл бұрын

Happy to help!

@PercyMelody 11 ай бұрын

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

@jcmsilv 3 ай бұрын

Very good tutorial. Thank you for your work

@galaxies_dev 3 ай бұрын

Glad it was helpful!

@Andrii_K.2 11 ай бұрын

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

@galaxies_dev 11 ай бұрын

wow so happy to hear!

@CaioAlmeida91 2 ай бұрын

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

@brenolins9908 11 ай бұрын

Thanks, works so fine!

@galaxies_dev 11 ай бұрын

Great to hear!

@neelsoni13062 5 ай бұрын

Really Amazing😍😍

@LazerMarsupial 2 ай бұрын

awesome guide thanks mate.

@galaxies_dev 2 ай бұрын

Glad you enjoyed it!

@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!

@Backgr0undN0is3 5 ай бұрын

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 4 ай бұрын

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 17 күн бұрын

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

@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 ✌️

@Shukie6174 20 күн бұрын

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

@thewoodark 7 ай бұрын

Thank you man!!!!!

@galaxies_dev 7 ай бұрын

Happy to help!

@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!

@vladmehedintu5912 3 ай бұрын

Super helpful videos!

@galaxies_dev 3 ай бұрын

Thank you so much!

@cbn4000 8 ай бұрын

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 8 ай бұрын

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

@AlessandraROlaya 9 ай бұрын

Thank u so much!

@galaxies_dev 9 ай бұрын

You're welcome!

@user-mu7tb6mz8e 10 ай бұрын

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

@galaxies_dev 10 ай бұрын

Awesome, happy to hear!

@SK-fq2yz 5 ай бұрын

Great tutorial

@galaxies_dev 5 ай бұрын

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

@jaimyvangyseghem5328 5 ай бұрын

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?

@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 7 ай бұрын

github copilot, i think it costs

@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!

@cantmember3865 5 ай бұрын

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 5 ай бұрын

Yeah then it was probably obsolete :D

@guillebambo7495 6 ай бұрын

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 ^^

@instantopera 11 ай бұрын

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 10 ай бұрын

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

@Mahmoudery 4 ай бұрын

You saved my self-esteem..

@galaxies_dev 4 ай бұрын

Not sure how but I am happy to help!

@user-mg2to3xx9s 10 ай бұрын

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

@nitsanbh 6 ай бұрын

you mean global state?

@yldrayozturk6276 7 ай бұрын

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 7 ай бұрын

Most likely Github Copilot!

@lorenzzzzz 7 ай бұрын

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

@bilelrahmouni01 11 ай бұрын

@johncarlo4028 2 ай бұрын

Can you make a video for user persistence?

@user-sr4ih1zt5s 6 ай бұрын

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

@motodankz4838 4 ай бұрын

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?

@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?

@epicgameryt4052 10 ай бұрын

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

@guilhermejacobus5118 11 ай бұрын

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

@galaxies_dev 11 ай бұрын

I'm using "Shades of Purple"

@htmoh8115 5 ай бұрын

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

@kushaldas5313 5 ай бұрын

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

@galaxies_dev 5 ай бұрын

Good point!

@hamzamanzoor8239 7 ай бұрын

please tell us the whats you extensions use in your vsCode

@user-oj4de7to8w 6 ай бұрын

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!

@fahadahmed4694 11 ай бұрын

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

@galaxies_dev 11 ай бұрын

Sorry to hear - anything I could do better?

@asharalikhan5162 2 ай бұрын

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

@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?

@gasperkosenina7818 4 ай бұрын

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

@galaxies_dev 4 ай бұрын

Sure thing!

@galaxies_dev 11 ай бұрын

Become a Stellar React Native dev @ galaxies.dev 🚀

@zainshahzad8870 2 ай бұрын

You didn't use persistent storage?

@desmondawere3409 11 ай бұрын

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

@galaxies_dev 11 ай бұрын

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

@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 11 ай бұрын

@@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

@arturmrozinski7536 28 күн бұрын

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

@dustincintron1682 4 ай бұрын

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 19 күн бұрын

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

@banurajayawardhane7581 6 ай бұрын

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 5 ай бұрын

Usually Firebase should handle that automatically!

@manukrishnan4318 6 ай бұрын

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

@bongkumtim420 11 ай бұрын

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

@galaxies_dev 11 ай бұрын

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

@user-vz7pl3ph1z 8 ай бұрын

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

@jasim17 Ай бұрын

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

@SeanCTTR Ай бұрын

Can you do supabase?

@offornna 4 ай бұрын

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

@virtrula 2 ай бұрын

finally

@08_mehuljadhav18 22 күн бұрын

If we login and then relaunch we get logout

@bluishfox6211 9 ай бұрын

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 9 ай бұрын

Thank you, glad it all works!

@moemia902 Жыл бұрын

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

@Kyle-zn2yc 3 ай бұрын

CoPilot but it's probably pulling from somewhere else

@36547 7 ай бұрын

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 6 ай бұрын

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

@devShahriar 8 ай бұрын

it logout when refresh

@brigadut 5 ай бұрын

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

@Darkar9545 10 ай бұрын

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

@galaxies_dev 10 ай бұрын

No I mostly use Expo in my tutorials!

@OXYGENGFX 6 ай бұрын

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 4 ай бұрын

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.

@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

@volftsun 11 ай бұрын

Like for the falser jok man! :D

@JuanRodriguez-jw5ix 2 ай бұрын

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

@galaxies_dev 2 ай бұрын

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

@alexreyes-cn9ru 7 ай бұрын

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

@galaxies_dev 7 ай бұрын

Is that still an issue?

@alexreyes-cn9ru 7 ай бұрын

Yes, still the same thing with persistence in expo firebase

@adheeshburthia3584 3 ай бұрын

Why should we customize metro config?

@galaxies_dev 3 ай бұрын

That was required in the past.

@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..

@japhethhirpa 10 ай бұрын

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 10 ай бұрын

Same problem here, did you manage to solve it?

@japhethhirpa 10 ай бұрын

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

@luxiir1989 10 ай бұрын

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 10 ай бұрын

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

@Razor255112 10 ай бұрын

@@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.

@abdul.rehman.ikram1458 10 ай бұрын

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 10 ай бұрын

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

@slavamangiafico5230 6 ай бұрын

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

@PercyMelody 8 ай бұрын

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

@galaxies_dev 8 ай бұрын

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

@marcelosoaresdeoliveirajun1790 7 ай бұрын

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 7 ай бұрын

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

@marcelosoaresdeoliveirajun1790 7 ай бұрын

@@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.

@maximcoding2667 9 ай бұрын

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

@galaxies_dev 9 ай бұрын

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 2 ай бұрын

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

@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 11 ай бұрын

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

@elgalanazo1662 7 ай бұрын

property 'getReactNativePersistence' doesnt exist, any help?

@galaxies_dev 7 ай бұрын

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

@hujake5406 9 ай бұрын

What about Google auth

@galaxies_dev 9 ай бұрын

Will work on something!

@gamingWithBhemu 7 ай бұрын

github link please !

@galaxies_dev 7 ай бұрын

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

@Rionji01 10 ай бұрын

@andresfelipecastroguevara1506 7 ай бұрын

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

@danieltoth714 6 ай бұрын

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

@getuliosouza5512 7 ай бұрын

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 6 ай бұрын

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