Super Easy React Native AUTHENTICATION with Firebase 🔒
Vložit
- čas přidán 7. 08. 2024
- 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 - Věda a technologie
![React Native CLI Setup for Windows [Created in 2024]](/img/n.gif)
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.
So happy to hear that - would be awesome if you could share it with others 🙌
Out of all the tutorials i've seen this one was the clearest one. You earned a sub!
Thanks for the sub!
This is the best. Thank you so much Simon. Explaining well and acurately.
This tutorial was gem. i was so confused about fIREBASE in RN. Thank you so much,mate
Will try to create an even more up to date version soon!
@@galaxies_dev that would be great, I had a question, which architecture pattern is good for RN apps
Thanks Simon, this video really helped with my school project
🤗🤗
You're welcome 😊
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 :)
You're very welcome!
Thank you! Very easy to follow and insightful video!! :))))
*Mr. Simon Grimm* , Thank you for leading audience on the right and simple way .
Haha thank you!!
Just wanted to say thank you! This was extremely helpful.
You're very welcome!
Thanks for the video, is so helpful!!!! 😁
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
thanks simon, i alredy subs!
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),
});
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."
Let's move this comment to the top! This helped me!
It's fantastic! helped me a lot! Tks!!
you have video with combination authentication with auth context?
Good job!you saved my day!thanks!
Happy to help!
Brilliant tutorial, thanks. Is there any advantage to using 'react-native-firebase' instead if you only need basic authentication and storage?
Not gonna lie, you are the GOAT. 10 out of 10 video, thank you!
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!
very beginner-friendly, well done
Many thanks!
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)
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 ✌️
Thanks, works so fine!
Great to hear!
Very good tutorial. Thank you for your work
Glad it was helpful!
awesome guide thanks mate.
Glad you enjoyed it!
@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!
Will look into that!
I spent 4 days on this and collected a whole ton of bugs. You solved my problem in 5 minutes) Like, subscription)
wow so happy to hear!
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 ^^
Heyyy! What’s the extension are you using in vscode that draws a vertical and horizontal line between the two curly brackets?
Really Amazing😍😍
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?
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!
Good idea - yeah will create some more content about React Native and Firebase!
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?
Thank you man!!!!!
Happy to help!
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
github copilot, i think it costs
Hi
Thank you i did all that and it works 😍😍
Awesome, happy to hear!
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?
Yeah then it was probably obsolete :D
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?
Thank u so much!
You're welcome!
Is it same for other programming language? (Instead of react)
Thank you very much for this video. Very didactic and clear. A new one with a Google/iOS login would be great. 😍🥰😘
Great suggestion!
Super helpful videos!
Thank you so much!
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
Yeah we can do - it's a simple call of the SDK to request a password reset with Firebase!
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?
Great tutorial
Happy to hear - share the video if you enjoyed it ✌️
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!
Hi Simon. Thanks for the video. Can you tell me the name of the autocomplete or auto hint plugin you used in the video?
Most likely Github Copilot!
And how do you hide Firebase config from being exposed to git,for example?
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.
You can check the whether the email is verified from the user object I think - good idea for a future video!
How can I use phone authentication with Firebase using Expo GO? Could you make a video on this?
please tell us the whats you extensions use in your vsCode
Hi, can this be turned into just JS files instead of JSX?
bro when am importing User from firebase it showing error and suggestion also not showing
Why you use firebase web for react native expo
and how to use firebase cloud messaging with firebase web for react native expo
Hey! Great video! What theme are you using on vscode?
I'm using "Shades of Purple"
Had this error -> Can not read properties of undefined (reading '_getRecaptchaConfig'
Very good video but maybe you could go over how to user authentication between reloads!
you mean global state?
Hi simon. The video was awesome but not easy to understand by begginers like me. :D
Sorry to hear - anything I could do better?
Thank you for this video Simon, but quick question, how can one add display name and telephone during registration in firebase?
I'll see if I can do another video on using phone auth!
Can you please make a video about the authentication stuff while using expo-router.. that would of be great help too!!
Good point!
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?
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.
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
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
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
Hey, könntest du ein video machen zu dem Thema mit dem neuen Expo Router und Stack
You didn't use persistent storage?
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?
i get the same error too can't figure out where i messed up
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.👍
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!
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.
@@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
Can you make a video for user persistence?
Become a Stellar React Native dev @ galaxies.dev 🚀
hi, do you have the continuation for this firebase authentication for capacitors, react and ionic ?
I do have a full course about that in the Ionic Academy!
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
You can use what you prefer, but in this video we used the Firebase web SDK, which works just fine for most things!
could you explain where you getting the code snippets from at 10:30?? Github Copilot?
CoPilot but it's probably pulling from somewhere else
i got this problem error (auth/admin-restricted-operation)
Can you please do a Google sign in with react native app. Because i found your tutorials very helpful. Thanks!
Sure thing!
My project is build with react native cli, not the expo one, is there a tutorial for it?
No I mostly use Expo in my tutorials!
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
Usually Firebase should handle that automatically!
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!!
Thank you, glad it all works!
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?
This sounds like a general Firebase error, did you activate email/password as a provider in your project?
@@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..
Why should we customize metro config?
That was required in the past.
ty
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?
Same problem here, did you manage to solve it?
@@Razor255112 Hi I didn't manage to. However I did use the react native firebase hook useAuthState
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
@@luxiir1989 thank you for the help. Fortunately I have already solved the problem but your solution looks right
@@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.
it logout when refresh
Can you do supabase?
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.
AFAIK you don't need to add any special handling anymore? Probably I should do another video with the latest version!
@@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.
I follow all the steps but im getting the following error. TypeError: Cannot read property '_getRecaptchaConfig' of undefined , How do I resolve this?
That sounds weird - to which package or line does it point?
@@galaxies_dev help cannot read property -getRecaptchaConfig of undefined help please!!
You saved my self-esteem..
Not sure how but I am happy to help!
Is there a github repository of this project?, by the way thank you very much for the video
Code is in the Galaxies tutorial for all members: galaxies.dev/react-native-firebase-auth
property 'getReactNativePersistence' doesnt exist, any help?
Yes, with latest FB SDK you don't need that special handling anymore!
can you try to make videos for cli too plssssss....
Is there a way to persist authentication? when the app restarts
Normally Firebase will store the auth token automatically and reuse it!
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?
I'm working on another course. You need to use a specific async storage package to make sure the session is stored.
@@galaxies_dev That would be nice if you are able to make a video about it
@@galaxies_dev can u explain a little how would it be done
finally
If we login and then relaunch we get logout
did you find a way to fix this problem?
Why you are using web package inside react-native ,and not RNFirebase ?
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!
@@galaxies_dev i also use web sdk but i am confusing in how to use FCM with it
The other thing is that persistence in expo react native it's presenting some issues
Is that still an issue?
Yes, still the same thing with persistence in expo firebase
What about Google auth
Will work on something!
Like for the falser jok man! :D
github link please !
Tutorial is on Galaxies: galaxies.dev/react-native-firebase-auth
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.
Thanks, will check it out Andrew!
@@galaxies_dev Thanks! You're a real one haha
I followed all the steps very well but i got an Error that says [FirebaseError: Firebase: Error (auth/network-request-failed).]
The error must be horrible if even google broke on your machine lmao
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.
That sounds like just a TS warning, and if you don't use User you don't need to import it!
!