Super Easy React Native AUTHENTICATION with Firebase 🔒

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

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

50% 1

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

Наука

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

13 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@somilgupta3323 7 месяцев назад

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 7 месяцев назад

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

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

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

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

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

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

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

You're welcome 😊

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

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

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

You're very welcome!

@MargaritaRadeva 7 месяцев назад

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

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

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 5 месяцев назад

You're very welcome!

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

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

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

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

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

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

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

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

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

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 5 месяцев назад

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!

@HuzaifaUsman313 Год назад

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

@galaxies_dev Год назад

Haha thank you!!

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

very beginner-friendly, well done

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

Many thanks!

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

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

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

Very good tutorial. Thank you for your work

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

Glad it was helpful!

@user-ho7um1or3u Год назад

Good job!you saved my day!thanks!

@galaxies_dev Год назад

Happy to help!

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

thanks simon, i alredy subs!

@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

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

awesome guide thanks mate.

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

Glad you enjoyed it!

@brenolins9908 Год назад

Thanks, works so fine!

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

Great to hear!

@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 11 месяцев назад

wow so happy to hear!

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

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

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

Really Amazing😍😍

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

@user-mu7tb6mz8e 11 месяцев назад

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

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

Awesome, happy 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 ✌️

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

Thank you man!!!!!

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

Happy to help!

@mauriciobertolucci 16 дней назад

Thank you very much for this video. Very didactic and clear. A new one with a Google/iOS login would be great. 😍🥰😘

@galaxies_dev 10 дней назад

Great suggestion!

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

Thank u so much!

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

You're welcome!

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

Super helpful videos!

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

Thank you so much!

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

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 9 месяцев назад

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

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

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

@SK-fq2yz 6 месяцев назад

Great tutorial

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

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

@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 11 месяцев назад

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

@user-mg2to3xx9s 11 месяцев назад

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

@nitsanbh 7 месяцев назад

you mean global state?

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

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

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

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?

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

You saved my self-esteem..

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

Not sure how but I am happy to help!

@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

@user-sr4ih1zt5s 7 месяцев назад

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

@fahadahmed4694 Год назад

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?

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

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 6 месяцев назад

Yeah then it was probably obsolete :D

@guillebambo7495 7 месяцев назад

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

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

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

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 8 месяцев назад

Most likely Github Copilot!

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

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

@bilelrahmouni01 Год назад

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

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

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

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

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

Can you make a video for user persistence?

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

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!

@user-oj4de7to8w 7 месяцев назад

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!

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

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

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

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 5 месяцев назад

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

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

Sure thing!

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

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

please tell us the whats you extensions use in your vsCode

@malayali1305 7 месяцев назад

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

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

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

@guilhermejacobus5118 Год назад

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

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

I'm using "Shades of Purple"

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

@user-vz7pl3ph1z 9 месяцев назад

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

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

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

@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

@banurajayawardhane7581 7 месяцев назад

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 6 месяцев назад

Usually Firebase should handle that automatically!

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

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

You didn't use persistent storage?

@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

@zqgAFf Год назад

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

@OXYGENGFX 7 месяцев назад

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 5 месяцев назад

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.

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

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 10 месяцев назад

Thank you, glad it all works!

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

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

@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 7 месяцев назад

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

@moemia902 Год назад

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

@Kyle-zn2yc 4 месяца назад

CoPilot but it's probably pulling from somewhere else

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

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

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

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?

@youssefelammari5515 2 дня назад

i get the same error too can't figure out where i messed up

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

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

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

No I mostly use Expo in my tutorials!

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

finally

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

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 11 месяцев назад

Same problem here, did you manage to solve it?

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

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

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

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 11 месяцев назад

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

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

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

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

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

Can you do supabase?

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

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 8 месяцев назад

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

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

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

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

it logout when refresh

@abdul.rehman.ikram1458 11 месяцев назад

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 11 месяцев назад

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

@slavamangiafico5230 7 месяцев назад

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

@volftsun Год назад

Like for the falser jok man! :D

@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

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

Why should we customize metro config?

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

That was required in the past.

@alexreyes-cn9ru 8 месяцев назад

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

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

Is that still an issue?

@alexreyes-cn9ru 8 месяцев назад

Yes, still the same thing with persistence in expo firebase

@galaxies_dev Год назад

Become a Stellar React Native dev @ galaxies.dev 🚀

@JuanRodriguez-jw5ix 3 месяца назад

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

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

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

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

property 'getReactNativePersistence' doesnt exist, any help?

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

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

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

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!

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

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

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

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 3 месяца назад

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

@andrewheimdev 3 дня назад

Thanks for the video! Helped me get started with React Native Firebase Auth. Low-key would have been lost without this one. I just made a video on my channel that also explains firebase firestore, storage, and functions. If anyone is interested.

@galaxies_dev 2 дня назад

Thanks, will check it out Andrew!

@andrewheimdev 2 дня назад

@@galaxies_dev Thanks! You're a real one haha

@08_mehuljadhav18 Месяц назад

If we login and then relaunch we get logout

@ninys 16 дней назад

did you find a way to fix this problem?

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

What about Google auth

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

Will work on something!

@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 7 месяцев назад

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