42:48 for anyone stuck with the private route on v6, routes and route components have since changed so this won't work. Also the "Redirect" component will not work. Instead use this for your private route: import React from "react"; import { Navigate } from "react-router-dom"; import { useAuth } from "../contexts/AuthContext"; export default function PrivateRoute({ children }) { const { currentUser } = useAuth(); return currentUser ? children : ; } Then this for the dashboard element in your app.js:
Due to some updates on firebase you can't import firebase like this (import firebase from 'firebase/app') anymore, rather use this ( import firebase from 'firebase/compat/app' ). Same for auth ( import 'firebase/compat/auth' )
I'm still getting an error in the console saying "app.auth()" is not a function. Any chance you could help me with what i'm doing wrong? import { initializeApp } from "firebase/app"; import 'firebase/compat/auth'; const app = initializeApp({ apiKey: process.env.REACT_APP_FIRBASE_API_KEY, authDomain: process.env.REACT_APP_FIRBASE_AUTH_DOMAIN, projectId: process.env.REACT_APP_FIRBASE_PROJECT_ID, storageBucket: process.env.REACT_APP_FIRBASE_STORAGE_BUCKET, messagingSenderId: process.env.REACT_APP_FIRBASE_MESSAGING_SENDER_ID, appId: process.env.REACT_APP_FIRBASE_APP_ID, }); export const auth = app.auth(); export default app;
If you are getting 'Firebase: Error (auth/invalid-api-key)', this is caused by your react app not detecting your '.env.local' file. For some reason, this file needs to be placed in the root directory of your app instead of the '.src' folder. Also, in the latest version of react, 'Switch' has been replaced by 'Routes' and you can not use the 'component' prop anymore. It must replaced with 'element' as such:
Also, 'useHistory()' is replaced by 'useNavigate()'. Use 'const navigate=useNavigate()' and 'navigate('/')' instead of 'const history=useHistory()' and 'history.push('/')'. 'Redirect' has been replaced by 'Navigate'.
If you have a error with the Switch Module you need to rename it. In the newer react-router-dom versions it was renamed from "Switch" to "Routes" and you have to declare the Route differently now. Instead of " you have to write: "
@@muhammadaqlan1649 I had the same issue. My resolution had something to do with the env.local file. I hard-coded the values to authenticate with Firebase config and it fixed the issue.
My God! I went through multiple resources online this morning to lookup how to set up firebase with react and now Kyle post a vid on this topic. God is amazing.
After struggling and constantly adding my own style and reading docs to do even the most basic thing, I have come to the conclusion that writing css myself is far more better and under my control.
That was an extraordinary performance! I have rarely ever had any instructor get through so much material in such a condensed manner and still remain coherent.
Hello, I'm a Brazilian programmer, I'm 14 years old and you're helping me a lot, your speech is clean and clear, this is helping me to learn English :) I just got to know your channel and I'm loving it, continue with your great work, which helps thousands of people like me. One day I intend to meet you!
If you make a fortune because of Kyle's tutorials, make sure wire part of it to Kyle's bank accout to support Kyle continuing making awesome tutorial videos !!!
Man this is so helpful, i was stuck for routes and context API for auth, this video uses previous version of reacter router dom, now it is updated, useHistory->useNavigate, Switch->Routes.
For anyone having troubles with getting the database url, just leave it blank if it isn't provided by firebase on setup. I'm not entirely sure how it works, but it think it's for the real-time database or something but if you don't have one setup you can just leave the field blank like this: REACT_APP_FIREBASE_DATABASE_URL= with no quotations for a string or anything. Please lmk if this doesn't work or if you have a better understanding, I would love to hear.
just create a realtime database in firebase and after creating the database reload the page where you see the config. The link will appear. It worked for me.
Great so far. I struggled at 24:45 with my apiKey not being set. Please note that whenever you change any of the .env files, you have to stop and restart your "yarn start" process.
I tried this but it still says that my api key is not valid. I plug in the api key directly instead of the "process.env..." and it works. Not sure what is up there.
@@Darclay24 I'd try console.logging the process.env.REACT... to see if that is working. I think the variables must start with REACT_APP_ or they will not work.
I spent way too long on error debugging at 24:35 until I found out that the error I was getting was caused by the fact that Firebase has built in password requirements (at least 6 characters long and so forth). Hope someone finds this helpful ;)
Yea its easy to see if inside catch you do catch(error) { console.log(error) } then google says if email already exists or if password to weak and other problems :)
For anyone who is having issues with the submitting a signup request, if your API key is coming back invalid and your screen is completely blank, even when you restart the service, directly copy and paste your apiKey into the firebase.js file instead of using the "process.env.-" as a string " ". I haven't don't much research on this issue, but it helps to move on with the tutorial.
I know I'm late to the party but this was a really good video! Can't say I understood everything perfectly but I typed every single line of code along with the video (pausing to keep up with Kyle) and it all works great! Definitely going to take your full courses. All of them. Would love to know more about react and more advanced things like how to switch from dev to prod, using this routing for sites that have a lot of pages (I hope it doesn't get too ugly!), etc.
Hi, i'm korean, I don't know other description for me.. Your Help is very important for my entire life. I am making a website similar to a bulletin board using React and Firebase, and I needed the authentication function. Thanks to uploading the latest data, I also saved a lot of my time.
It's mostly the same, the biggest change is way you create protected routes in React Router v6. Dennis Ivy made a great video about how to make it in v6: ruclips.net/video/2k8NleFjG7I/видео.html
some updates to the video (and Im sure Im missing more): 1. Instead of import firebase from 'firebase/app' use import firebase from firebase/compat/app (use same 'firebase/compat' structure for other configuration variables from firebase) 2. In App.js code, switch component has been replaced by Routes within react-router-dom. 3. Similarly, use instead of 4. The hook useHistory is no longer supported by react-router-dom, instead, it is usenavigate. (also, no need to use the .push() function. You can use it directly). I will keep adding more as I find/remember.
your short and sweet section @ 25:28 on Auth State Loading solved a major headache I was having with my app attempting to load before checking for the user (on page refresh)...the set loading onAuthStateChanged in useEffect....massive help, before it would just redirect but now it checks for the session...SOOOooOOOooOOoo many thanks, Subbed!
Protip: Instead of creating a separate development project, use Firebase Emulators to run firebase SDK locally in your machine. It will also save unnecessary bills if you are testing with big data and large no of users.
Wow, Kyle! Thank you very much! I learnt two things in this video. 1. How to use Firebase in an app. 2. Private Route thing. This video is a poor gold!
At 6:50 If anyone is getting an error saying "export 'default' (imported as 'firebase') was not found in 'firebase/app" in your project, make sure sure you have the updated import methods for the new firebase release. New way of importing firebase: import firebase from "firebase/compat/app" import 'firebase/compat/auth'; import 'firebase/compat/firestore';
This is really a CRASH course. Just got back on Firebase for a new project, need to brush up and it is perfect all-in-one-place video. Big thanks for doing it.
Great tutorial, just starting a new project, and wanted to make sure I'll be able to handle the backend of the auth part. Now I know I have my reference. One thing I guess I missed, since I am new to Firebase, is once I build in development mode how do I seamlessly switch to production.
unfortunately, you might wanna not use this video as reference anymore. The version of firebase used in this video is different and firebase v9 was released on sep 1 2021. the syntax, the functions, etc have all changed and its a waste of time trying to troubleshoot. Use the tutorial docs provided by firebase for a more up to date reference.
For anyone getting the error: "Your API key is invalid, please check you have copied it correctly." You have to restart the development server if you changed any .env variables. Just run "npm start" again in the console.
Same issue here, has anyone figured this out? In development everything works fine, but when i try to deploy, it deploys as a blank page and the console says "Your API key is invalid, please check you have copied it correctly."
Thank you, Kyle - I was struggling with auth process and wanted to find something that's easy to implement high-quality content, nice and clean code - right on point just what I need :) love the way you implement bootstrap in react
instead of not knowing if the account was created or checking firebase, here is the code to get a green box to let you know the account creation is successful for your app.js. Hope this helps. function notifyAccountCreated() { setNotification('Account created'); setTimeout(() => { navigate('/signin'); }, 2000); // Redirect after 2 seconds } this will redirect you to the sign in page after 2 seconds. :)
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in Signup (created by Context.Consumer) Guys even tho this works but im getting this warning
Here's the solution if anyone is still looking for it. It was provided by someone called Lavinia Ţole in this comment section: "I think it is because in the try {} block you have "history.push('/')" that redirects you to Dashboard component and then you try to set "setLoading state" to the Login component that now is unmounted. I moved setLoading(false) after the await function and before the history.push('/') and the error is now gone."
If anybody gets a memory leak from trying to set a state on an unmounted component in Signup or Login, its because of the setLoading(false) being at the bottom handleSubmit functions which is after you are pushing to a new page. Just move the setLoading(false) be before the history.push.
Man this channel is the best. Not only the content is awesome but you also find solutions to problems you might run into in the comments. Thanks a lot y'all!
Just ported all of this to Nextjs for a starter template. Thank you for the content and keep it up! Your calm demeanor makes it really easy keep coding
anyone stuck in 35:00 In react-router-dom v6 useHistory() is replaced by useNavigate(). use below import { useNavigate } from 'react-router-dom'; const navigate = useNavigate(); navigate('/home'); Hope help any one😁😁
This was excellent tutorial. I had an error with my Login with the async function handleSubmit. (Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.) Particularly the setLoading(false). If I comment that out I don't receive the error. Can't really figure out why but I left a note to try to figure out why the error happens later. Thanks for the great video.
3 года назад
I think it is because in the try {} block you have "history.push('/')" that redirects you to Dashboard component and then you try to set "setLoading state" to the Login component that now is unmounted.
Hey Jeremy, were you able to figure out why this happens? I have the same error and commenting out the loading seems to work for me too. Would like to find out how to fix it permanently though...
@@kjro23 Hey so I was still receiving the error. I took what Lavinia stated and just moved the history push outside of the try{} and after the setloading(false). That resolved the error and the history.push still works. :D. Hope that helps setLoading(false) history.push('/profile')
@@jeremydiaz6494 i dont think you can put history.push(" outside the try block, if there is error on your login, the the catch block will not work properly
I kept getting an error when setting up my routes "Attempted import error: 'Switch' is not exported from 'react-router-dom'." In react-router-dom v6, "Switch" is replaced by "Routes" Update the Route declaration from to useHistory() is replaced by useNavigate() Great tutorial and hope this helps!
🎯 Key Takeaways for quick navigation: 00:00 🚀 *Setting up Firebase Project and Authentication Basics* - Overview of Firebase as a backend service backed by Google. - Creating and registering a project on Firebase. - Enabling email and password authentication in Firebase console. 03:38 📝 *User Registration and Authentication Flow* - Demonstrating user registration and account creation. - Explaining the Firebase response containing user metadata and access token. - Usage of local storage for simple front-end state management. 07:29 💻 *Setting up Firebase in React App and Routing Basics* - Adding Firebase to a React project using Firebase config. - Initializing Firebase authentication in the front-end. - Implementing basic routing using react-router-dom. 11:55 🔒 *Implementing Protected Routes and Logout Functionality* - Creating a protected component to manage access based on authentication token. - Implementing a logout function using Firebase sign-out. - Securing routes to redirect users based on authentication status. 16:28 🖥️ *Displaying User Information and Finalizing Authentication* - Displaying user email on the home page upon successful login. - Handling conditional rendering based on user authentication status. - Verifying the overall authentication flow with Firebase. Made with HARPA AI
In case your react app logs out every time you refresh the page, useffect in authcontext should look like that useEffect(() => { const unsubscribe = onAuthStateChanged(auth, (user) => { if (user) { setCurrentUser(user); setLoading(false); } else { setCurrentUser(null); setLoading(false); } }); return () => { unsubscribe(); }; }, []);
Excellent course! I got stuck for an hour at the end because my password placeholder was not working. Finally realized that the code was correct; the issue was from Firefox using my saved login info.
Hi, just a small question. When using react-router-dom, you have 2 options in regards to "history". You can get access to it and use it using the "useHistory" hook like Kyle does in the video. However, you can also just pass it down as a component prop: const Signup = ({history}) => {etc ...} My question is if there's any substantial difference between the two or if it's just a matter of preference. I'd be grateful if anyone could share their knowledge/thoughts on this.
@@stephanieraymos4675 yes you must follow lots of videos, this one and a few more about sending the user a email Verificacion and after add Google sign in etc etc
It feels really complicated as I am a newbie with firebase authentication, But really I'm getting here something that any other youtube channel can't pay!
if I'm not doing something wrong: using setLoading(false) in finally gives warning on console. because we try to update state after using history.push. - after unmounting instead of doing setLoading(false) in finally (also at the end of an async function) we can do it inside .then before history.push and .catch (also for async functions int try-catch blocks in try before history.push and in catch)
Hi, I'm trying to understand why it happens.. I tried what you suggested and I still get this error in the console. Could you please explain again? Thank you!
@@nivmonovich7976 I don't know how i can explain better, not that my explanation was perceft just i don't know how to do it. if you don't know about mounting/unmounting components you should look them up, it might help you understand better. it is not exactly same but we can think like we are trying to edit something that no longer exists.
Great tutorial. But we get this one error just after signing up. I think it has to do with history.push moving to a new page without updating state. "Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function." Can you help suggest a fix?
Thank you for the video! I tried learning it and I just can't. I don't know if it's the way you explain or if authentication is just a difficult topic for me. Everything else in react I've learn really fast but authentication is giving me problems. I'll read the firebase docs. Again, thank you for the content!
This was extremely helpful. May I ask, what’s the best way to create different user roles with react/firebase? Like an admin should be able to see different info on their dashboard. Or if I wanted to distinguish between paid and free users? Thank you.
I would add those roles as any user extra information, in the firestore (another service firebase has). And link with a key each document with the corresponding user.
Thank you for the Tutorial. Loved it. In addition to below mentioned improvements, there is also one related to history.push From all the files where it is history.push change it to history("/") and this will work.
Thank you, great tutorial! But there's a "Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function." How to fix this? I modified "AuthContext.js" file a little bit. I added in useEffect "unsubscribe" function this: return function cleanup() { AbortController.abort()} - it didn't help. This warning appears after you press Log in.
I got the same error, I cloned the repo in the description and got the same error. It happens because in Login.js there is setLoading(false) which updates the component AFTER the history.push('/'). This updates the Login component after it is unmounted. I'm guessing Kyle probably forgot to delete it :P there is no need for it as when the component mounts again, the inital loading state is set to false again.
Hey guys, make sure you put 'email' as a parameter of the resetPassword(email) function within the AuthContext.js since we're passing in 'emailRef.current.value' as an argument within the ForgotPassword.js component. I also had this error and that was my issue which solved it.
Great crash course and intro to react with firebase integration. Is there a specific reason why you used useRef instead of useState for the email and password? I think the same can be achieved with useState and in a much cleaner way or did I miss something
Kyle has a video about useRef. Basically, it's very similar to useState. But when the value store in useRef, the component will not re-render if the value has changed. And it's popular to use it to reference a HTML element.
I'm at 27:23 and when I enter in a email + 2 correct passwords and then press the "Sign Up" button, I get the error failed to create account. When seeing you do it in the video you get no error. Does this have to do something with database in firebase or do I need to continue a few steps for this to be fixed?
@@rtcodes4618 I think I did yeah, it's a pretty strange one. I figured it out today actually haha. You need at least 6 characters for your password to be successful. That's why you keep getting an error, even if the passwords match. Very strange and will see if I can add an message for this or find a solution.
When logging in for the first time, I get the following error in the console: (any ideas why?) Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function
I've read elsewhere that it might have to do with setLoading(false) in Login.js taking place AFTER the history.push('/') so I'm commenting that here for anyone in the future. Not sure though.
Perfect I didn't know how to use firebase neither js like 7 day ago I started project and stuck in back end cause I dont know how to I tried many video but not useful but thanks to you got it under my sleev now thanks saved my time and me also😊
Hi, when login i have this warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. Can you help me please?.
It has to do with the Signup component. In the handleSubmit function, when you call the history.push() method your Signup component gets unmounted, and the one that your'e pushing to gets mounted. After unmounting, your'e trying to modify the state of the Signup component with the method setLoading, that's why you're getting the error. To solve it, you just have to set the loading state before using history.push() method
@@DarwinAristaArevalo You're welcome! But tbh I was about to come back and fix my comment cause I thought I got it wrong... maybe it was not about the Signup component but the Login one... But anywayssss, I'm glad it helped
@@josevillar5508 You’re a lifesaver. I spent 2 hrs. trying to fix this problem. I thought the onAuthStateChanged listener was not executing the unsubscribe call. Also, I was wrong about how a try/catch block works. I thought that the try/.catch block had an implicit return statement and that it stopped any further execution within the handleSubmit function. I didn't think the setLoading(false) would run. Putting the setLoading(false) inside the catch block fixed my problem. Thank you, José!
Everything works, though I get a warning when logging in. Even when using the cloned repo. "Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function."
I have to do a project which require Firebase and React which I was gonna start this Monday.. Since I was busy with some other stuff I was pushing it.. Now it all makes sense why God didn't want me to start it earlier.. 🔥
If you're having problems with importing the keys configuration when compiling your app, do like this the firebase.js file import firebase from "firebase/compat/app" import "firebase/compat/auth" const firebaseConfig = { apiKey: "xxxxxx", authDomain: "xxxxx", projectId: "xxxxxx", storageBucket: "xxxxxx", messagingSenderId: "xxxxxx", appId: "xxxxxx" } const app = firebase.initializeApp(firebaseConfig) export const auth = app.auth() export default app
![Twenty One Pilots - “The Line” (from Arcane Season 2) [Official Music Video]](http://i.ytimg.com/vi/E2Rj2gQAyPA/mqdefault.jpg)
42:48 for anyone stuck with the private route on v6, routes and route components have since changed so this won't work. Also the "Redirect" component will not work. Instead use this for your private route:
import React from "react";
import { Navigate } from "react-router-dom";
import { useAuth } from "../contexts/AuthContext";
export default function PrivateRoute({ children }) {
const { currentUser } = useAuth();
return currentUser ? children : ;
}
Then this for the dashboard element in your app.js:
Thanks! I was getting stuck on this for sure. btw Are you sure that this is the correct way to do things now?
@@MiikaKontio No worries, not sure if it's the "correct" way to do things but it's how I was able to get it to work
@@GrayFox391 i mean is it safe? I dont want people to see Pages they are not supposed To see
@@MiikaKontio If a user isn't logged in then they won't be able to access the routes
Thank man. I was stuck here for hours. Tried React Router Dom documents and all, but none of them worked. Thank you so much again.
Due to some updates on firebase you can't import firebase like this (import firebase from 'firebase/app') anymore,
rather use this ( import firebase from 'firebase/compat/app' ).
Same for auth ( import 'firebase/compat/auth' )
thanks for commenting with that solution i would of prob given up lol
bro 🔥🔥🔥
Ty!
I'm still getting an error in the console saying "app.auth()" is not a function. Any chance you could help me with what i'm doing wrong?
import { initializeApp } from "firebase/app";
import 'firebase/compat/auth';
const app = initializeApp({
apiKey: process.env.REACT_APP_FIRBASE_API_KEY,
authDomain: process.env.REACT_APP_FIRBASE_AUTH_DOMAIN,
projectId: process.env.REACT_APP_FIRBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIRBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIRBASE_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_FIRBASE_APP_ID,
});
export const auth = app.auth();
export default app;
Legend
If you are getting 'Firebase: Error (auth/invalid-api-key)', this is caused by your react app not detecting your '.env.local' file. For some reason, this file needs to be placed in the root directory of your app instead of the '.src' folder.
Also, in the latest version of react, 'Switch' has been replaced by 'Routes' and you can not use the 'component' prop anymore. It must replaced with 'element' as such:
Also, 'useHistory()' is replaced by 'useNavigate()'. Use 'const navigate=useNavigate()' and 'navigate('/')' instead of 'const history=useHistory()' and 'history.push('/')'.
'Redirect' has been replaced by 'Navigate'.
You are a life-saver
life saver, thanks for sharing
Thank you so much
Every time I need something, kyle just uploads a video about that, its crazy.
I’m so glad I found this video I was trying to build the user login feature using Firebase for a project.
ass kisser
In my case it's reverse...when I watch something ...that exact thing I have to apply next day to solve issues🤣🤣
If you have a error with the Switch Module you need to rename it. In the newer react-router-dom versions it was renamed from "Switch" to "Routes" and you have to declare the Route differently now. Instead of " you have to write:
"
came here to say the same thing. thanks man!
react-router-dom's documentation is pretty good too, everyone should check it out for more details
m stuck at 24:35 saying that 'Failed to create an account' eventho the password is same and more than 6 characters. Any idea?
Assalamu alaykum @@muhammadaqlan1649 I had the same error and it was because i imported the signup method as { signup } instead of { signUp }
@@muhammadaqlan1649 I had the same issue. My resolution had something to do with the env.local file. I hard-coded the values to authenticate with Firebase config and it fixed the issue.
Thank you for sharing! I had this same problem too!
My God! I went through multiple resources online this morning to lookup how to set up firebase with react and now Kyle post a vid on this topic.
God is amazing.
Keep in mind that if you're using Material UI, you'll have to use inputRef={whateverRef} instead of ref={whateverRef} as the TextField attribute.
Thanks man! Killer hint!
After struggling and constantly adding my own style and reading docs to do even the most basic thing, I have come to the conclusion that writing css myself is far more better and under my control.
OH GOD THANK YOU
YES! THANK YOU!
I didn't know about inputRef so I used the e.currentTarget.elements in handleSubmit 🥲
That was an extraordinary performance!
I have rarely ever had any instructor get through so much material in such a condensed manner and still remain coherent.
do all the functions still work? or is it outdated? thinking of coding along
Hello, I'm a Brazilian programmer, I'm 14 years old and you're helping me a lot, your speech is clean and clear, this is helping me to learn English :)
I just got to know your channel and I'm loving it, continue with your great work, which helps thousands of people like me.
One day I intend to meet you!
If you make a fortune because of Kyle's tutorials, make sure wire part of it to Kyle's bank accout to support Kyle continuing making awesome tutorial videos !!!
sure you can support him on Patreon.... the link is in the video description
@@amankaushik5833 yep, but i dont have money now...
@@maskman4821 Its a good idea
@@amankaushik5833 Obs: 1 Dollar in Brazil is 5.75 Reais
Man this is so helpful, i was stuck for routes and context API for auth, this video uses previous version of reacter router dom, now it is updated, useHistory->useNavigate, Switch->Routes.
For anyone having troubles with getting the database url, just leave it blank if it isn't provided by firebase on setup. I'm not entirely sure how it works, but it think it's for the real-time database or something but if you don't have one setup you can just leave the field blank like this:
REACT_APP_FIREBASE_DATABASE_URL= with no quotations for a string or anything. Please lmk if this doesn't work or if you have a better understanding, I would love to hear.
what should i do in the config?
same problem
just create a realtime database in firebase and after creating the database reload the page where you see the config. The link will appear. It worked for me.
Great so far. I struggled at 24:45 with my apiKey not being set. Please note that whenever you change any of the .env files, you have to stop and restart your "yarn start" process.
Upvote! This solved my problem. I had to close and npm start again. Many thanks, Tom.
3 months later and this solved my problem as well. Thank you!
Hmmmm! Will give it a try
I tried this but it still says that my api key is not valid. I plug in the api key directly instead of the "process.env..." and it works. Not sure what is up there.
@@Darclay24 I'd try console.logging the process.env.REACT... to see if that is working. I think the variables must start with REACT_APP_ or they will not work.
This is everything about authentication and that too in just 56 minutes ,, that's amazing.
bro. Im at Purdue in CS307 - Software Engineering. You're saving my life with this I got so much done today. bless up
I spent way too long on error debugging at 24:35 until I found out that the error I was getting was caused by the fact that Firebase has built in password requirements (at least 6 characters long and so forth).
Hope someone finds this helpful ;)
Yea its easy to see if inside catch you do catch(error) { console.log(error) } then google says if email already exists or if password to weak and other problems :)
Thank you! I was wondering what I was doing wrong until I read your comment!
@@TheLigitaksas thank you very much I was looking for this
Legend! Thanks king
Thanks, this is exactly what I was missing!
For anyone who is having issues with the submitting a signup request, if your API key is coming back invalid and your screen is completely blank, even when you restart the service, directly copy and paste your apiKey into the firebase.js file instead of using the "process.env.-" as a string " ". I haven't don't much research on this issue, but it helps to move on with the tutorial.
I know I'm late to the party but this was a really good video! Can't say I understood everything perfectly but I typed every single line of code along with the video (pausing to keep up with Kyle) and it all works great!
Definitely going to take your full courses. All of them. Would love to know more about react and more advanced things like how to switch from dev to prod, using this routing for sites that have a lot of pages (I hope it doesn't get too ugly!), etc.
My man is such an ace that he built an authentication project frankly while talking, like a boss !!!
My favourite react teacher! Im a junior developer and I've struggled finding good content for firebase :)
Hi, i'm korean, I don't know other description for me..
Your Help is very important for my entire life.
I am making a website similar to a bulletin board using React and Firebase, and I needed the authentication function.
Thanks to uploading the latest data, I also saved a lot of my time.
We need an updated version for this soooo bad
Best I can say is: Firebase docs, or Fireship io next Firebase course.
yes very much wrong with context and in app.js with router-dom dont work
yea i know i want say dont try make project with old video only 2022-23)
Can we please get this updated with NextJS
It's mostly the same, the biggest change is way you create protected routes in React Router v6. Dennis Ivy made a great video about how to make it in v6: ruclips.net/video/2k8NleFjG7I/видео.html
This guys is legit.
I am rebuilding my niche website with react.
Your course is legit
I took it
Thanks for hard work
Thank you so much!
I got failed to create an account at 24:35 please address this issue... :(
some updates to the video (and Im sure Im missing more):
1. Instead of import firebase from 'firebase/app' use import firebase from firebase/compat/app (use same 'firebase/compat' structure for other configuration variables from firebase)
2. In App.js code, switch component has been replaced by Routes within react-router-dom.
3. Similarly, use instead of
4. The hook useHistory is no longer supported by react-router-dom, instead, it is usenavigate. (also, no need to use the .push() function. You can use it directly).
I will keep adding more as I find/remember.
your short and sweet section @ 25:28 on Auth State Loading solved a major headache I was having with my app attempting to load before checking for the user (on page refresh)...the set loading onAuthStateChanged in useEffect....massive help, before it would just redirect but now it checks for the session...SOOOooOOOooOOoo many thanks, Subbed!
Protip: Instead of creating a separate development project, use Firebase Emulators to run firebase SDK locally in your machine. It will also save unnecessary bills if you are testing with big data and large no of users.
Wow, Kyle! Thank you very much! I learnt two things in this video.
1. How to use Firebase in an app. 2. Private Route thing. This video is a poor gold!
At 6:50 If anyone is getting an error saying "export 'default' (imported as 'firebase') was not found in 'firebase/app" in your project, make sure sure you have the updated import methods for the new firebase release.
New way of importing firebase:
import firebase from "firebase/compat/app"
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
Then i have app.getAuth is not a function T.T
same thing here stuck for couple hours on this error @@oxpey4473
Just got through the intro and love the way you're straight to the point while still sharing some information.
I've learned so much from you dude. More valuable than all of Udemy. Thank you
This is really a CRASH course. Just got back on Firebase for a new project, need to brush up and it is perfect all-in-one-place video. Big thanks for doing it.
Thank you so much for this Kyle you're an amazing teacher! can you please create an updated tutorial with version 9?
For other firebase newbies you might find this video helpful for working with version 9 : ruclips.net/video/vcqnyqwPH3Q/видео.html
I follow every tutorial on your channel without missing it. You have simplified web development. I was waiting for this video. Thank you..!!!!
I just implemented this in a recent app, but it's really cool to see how you approach it. I may need to do some refactoring now
from other youtuber tutorials i have to do x1.25 and in your tutorial i have to pause to catchup.... your tutorials are crisp and to the point
Crash course, felt like a full one if you ask me...writing your own back-end is tiresome... Great video dude, thank you!
I tried to use react-firebase-hooks before but soooo darn hard to debug, then I tried your code, OMG it works!!! Thank you 3000!!
Great tutorial, just starting a new project, and wanted to make sure I'll be able to handle the backend of the auth part. Now I know I have my reference. One thing I guess I missed, since I am new to Firebase, is once I build in development mode how do I seamlessly switch to production.
unfortunately, you might wanna not use this video as reference anymore. The version of firebase used in this video is different and firebase v9 was released on sep 1 2021. the syntax, the functions, etc have all changed and its a waste of time trying to troubleshoot. Use the tutorial docs provided by firebase for a more up to date reference.
Even in 2024 this is still a great video, something are changed or are completely different but this video explains still everything in a clear way
For anyone getting the error: "Your API key is invalid, please check you have copied it correctly." You have to restart the development server if you changed any .env variables. Just run "npm start" again in the console.
Thanks for your kind comment you save my time to traveling with errors
@@jonghyeonko3275 happy to help!🙂
I keep getting the error in my console: "Your API key is invalid, please check you have copied it correctly." @Web Dev Simplified
@@fauxeditor6663 When I use the API key string directly in firebase file it works but not when it is used as my env variables..
Same issue here, has anyone figured this out? In development everything works fine, but when i try to deploy, it deploys as a blank page and the console says "Your API key is invalid, please check you have copied it correctly."
The fellow coders in the comment section passed the vibe. Thank you all for the updates and solutions.
Thank you, Kyle - I was struggling with auth process and wanted to find something that's easy to implement
high-quality content, nice and clean code - right on point just what I need :)
love the way you implement bootstrap in react
Bro just changed my life with this tutorial
seriously everything went over my head right now maybe i will come back after a while and try again
instead of not knowing if the account was created or checking firebase, here is the code to get a green box to let you know the account creation is successful for your app.js. Hope this helps. function notifyAccountCreated() {
setNotification('Account created');
setTimeout(() => {
navigate('/signin');
}, 2000); // Redirect after 2 seconds
}
this will redirect you to the sign in page after 2 seconds. :)
Could you please share with me your updated version of this code? i've been strugling for weeks and almost gave up on firebase auth
@@abdulazizaljaadi5579 function notifyAccountCreated() {
setNotification('Account created');
setTimeout(() => {
navigate('/signin');
}, 2000); // Redirect after 2 seconds
}
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
in Signup (created by Context.Consumer)
Guys even tho this works but im getting this warning
Here's the solution if anyone is still looking for it. It was provided by someone called Lavinia Ţole in this comment section:
"I think it is because in the try {} block you have "history.push('/')" that redirects you to Dashboard component and then you try to set "setLoading state" to the Login component that now is unmounted. I moved setLoading(false) after the await function and before the history.push('/') and the error is now gone."
@@somkl7617 Thx! :)
@@somkl7617 but if the login error, that will never loading set to false! you have to put that after setError in the catch block as well!
I used to dread setting up authentication on react applications, but seeing your nice patterns has made it a lot easier.
If anybody gets a memory leak from trying to set a state on an unmounted component in Signup or Login, its because of the setLoading(false) being at the bottom handleSubmit functions which is after you are pushing to a new page. Just move the setLoading(false) be before the history.push.
HUGE thanks for this. :)
Man this channel is the best. Not only the content is awesome but you also find solutions to problems you might run into in the comments. Thanks a lot y'all!
Perfect timing this is exactly what i needed today. Much love.
Amazing work! I followed after making some minor changes and everything worked properly!
50 minutes but it actually takes 3+ hours to do because I needed to figure out how to configure everything with the latest firebase 9.
Not to mention React Router v6
You figured it out in 3? Lucky… 🥲
Just ported all of this to Nextjs for a starter template. Thank you for the content and keep it up! Your calm demeanor makes it really easy keep coding
anyone stuck in 35:00
In react-router-dom v6 useHistory() is replaced by useNavigate().
use below
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/home');
Hope help any one😁😁
god bless you
first video to actually help me register and login ....every other video ...I get stuck in the middle....thank you so much!!!!
This was excellent tutorial. I had an error with my Login with the async function handleSubmit. (Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.) Particularly the setLoading(false). If I comment that out I don't receive the error. Can't really figure out why but I left a note to try to figure out why the error happens later. Thanks for the great video.
I think it is because in the try {} block you have "history.push('/')" that redirects you to Dashboard component and then you try to set "setLoading state" to the Login component that now is unmounted.
Hey Jeremy, were you able to figure out why this happens? I have the same error and commenting out the loading seems to work for me too. Would like to find out how to fix it permanently though...
@@kjro23 Hey so I was still receiving the error. I took what Lavinia stated and just moved the history push outside of the try{} and after the setloading(false). That resolved the error and the history.push still works. :D. Hope that helps
setLoading(false)
history.push('/profile')
@@jeremydiaz6494 i dont think you can put history.push(" outside the try block, if there is error on your login, the the catch block will not work properly
If you are wondering where Firebase caches information, it's under DevTools->Application->IndexedDB->firebaseLocalStorageDB, not under Local Storage.
I kept getting an error when setting up my routes "Attempted import error: 'Switch' is not exported from 'react-router-dom'."
In react-router-dom v6, "Switch" is replaced by "Routes"
Update the Route declaration from
to
useHistory() is replaced by useNavigate()
Great tutorial and hope this helps!
Huge help, Thank you!
🎯 Key Takeaways for quick navigation:
00:00 🚀 *Setting up Firebase Project and Authentication Basics*
- Overview of Firebase as a backend service backed by Google.
- Creating and registering a project on Firebase.
- Enabling email and password authentication in Firebase console.
03:38 📝 *User Registration and Authentication Flow*
- Demonstrating user registration and account creation.
- Explaining the Firebase response containing user metadata and access token.
- Usage of local storage for simple front-end state management.
07:29 💻 *Setting up Firebase in React App and Routing Basics*
- Adding Firebase to a React project using Firebase config.
- Initializing Firebase authentication in the front-end.
- Implementing basic routing using react-router-dom.
11:55 🔒 *Implementing Protected Routes and Logout Functionality*
- Creating a protected component to manage access based on authentication token.
- Implementing a logout function using Firebase sign-out.
- Securing routes to redirect users based on authentication status.
16:28 🖥️ *Displaying User Information and Finalizing Authentication*
- Displaying user email on the home page upon successful login.
- Handling conditional rendering based on user authentication status.
- Verifying the overall authentication flow with Firebase.
Made with HARPA AI
Perfect timing, it's like you made this video just to help me! You're the best Kyle!
Kyle is everywhere, he can read your mind, and creating awesome content to help people, he is amazing !!!
Thanks so much for this tutorial! Guys please note that the SDK has since been changed so you need to follow the docs
databaseURL is absent update version of firebase. you find databaseURL in realtime database section.
hope someone find this helpful
I did, thank you
Thank You!
THANKS MAN
yeh right ..so will it work if we continue the lecture?
Where in realtime database section? Do we have to create a new database?
you are the best teacher ever
In case your react app logs out every time you refresh the page, useffect in authcontext should look like that
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (user) => {
if (user) {
setCurrentUser(user);
setLoading(false);
} else {
setCurrentUser(null);
setLoading(false);
}
});
return () => {
unsubscribe();
};
}, []);
Hero!
Excellent course! I got stuck for an hour at the end because my password placeholder was not working. Finally realized that the code was correct; the issue was from Firefox using my saved login info.
Hi, just a small question.
When using react-router-dom, you have 2 options in regards to "history". You can get access to it and use it using the "useHistory" hook like Kyle does in the video.
However, you can also just pass it down as a component prop:
const Signup = ({history}) => {etc ...}
My question is if there's any substantial difference between the two or if it's just a matter of preference. I'd be grateful if anyone could share their knowledge/thoughts on this.
I did authentication myself years ago in React Native but you just saved me so much time, thanks!
Firebase doesn't provide the database URL anymore.. Hope that isn't a issue. Great vid friend!!!
did it?
@@demetrissergides7059 I ended up doing another vid sign in
Wondering how to find this too. Can't figure out where to find it
Did you ever figure it out?
@@stephanieraymos4675 yes you must follow lots of videos, this one and a few more about sending the user a email Verificacion and after add Google sign in etc etc
@@tod670 I actually figured out you don’t even need the database URL anymore. It’s deprecated. My site is working fine without it.
It feels really complicated as I am a newbie with firebase authentication, But really I'm getting here something that any other youtube channel can't pay!
if I'm not doing something wrong:
using setLoading(false) in finally gives warning on console. because we try to update state after using history.push. - after unmounting
instead of doing setLoading(false) in finally (also at the end of an async function) we can do it inside .then before history.push and .catch (also for async functions int try-catch blocks in try before history.push and in catch)
Hi, I'm trying to understand why it happens.. I tried what you suggested and I still get this error in the console. Could you please explain again? Thank you!
@@nivmonovich7976 I don't know how i can explain better, not that my explanation was perceft just i don't know how to do it. if you don't know about mounting/unmounting components you should look them up, it might help you understand better.
it is not exactly same but we can think like we are trying to edit something that no longer exists.
@@ylmazcandelen3121 Thanks! But as I understood the return unsubscribe in the end of the useEffect supposes to 'cleanup' the useEffect function...
Aftera few years of React experience, I thoroughly enjoyed and learned some new stuff in this video. Thanks Kyle
Great tutorial. But we get this one error just after signing up. I think it has to do with history.push moving to a new page without updating state. "Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function."
Can you help suggest a fix?
Very good, idk, but its so calming to me the way he talks haha and he explains clearely, good tutorial.
That was really well done, but now I have a headache. lol
Very clear, very simple. This channel deserves the name 👌🏻
Thank you for the video! I tried learning it and I just can't. I don't know if it's the way you explain or if authentication is just a difficult topic for me. Everything else in react I've learn really fast but authentication is giving me problems. I'll read the firebase docs. Again, thank you for the content!
yeah, I feel your pain lol
bro just did a 30 point story in 1 hr 😂😍
Great Video on the React Authentication. you really explained well. than you soo much...
This was extremely helpful. May I ask, what’s the best way to create different user roles with react/firebase? Like an admin should be able to see different info on their dashboard. Or if I wanted to distinguish between paid and free users? Thank you.
I would add those roles as any user extra information, in the firestore (another service firebase has). And link with a key each document with the corresponding user.
I like your explanation because it's not too slow and not too fast, but still looks very clear to understand.. Awesome🔥
firebase 9 launched last month this tutorial is *expired*
God's work right here
Thank you for the Tutorial. Loved it. In addition to below mentioned improvements, there is also one related to history.push
From all the files where it is history.push change it to history("/") and this will work.
Thank you, great tutorial! But there's a "Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function." How to fix this?
I modified "AuthContext.js" file a little bit. I added in useEffect "unsubscribe" function this:
return function cleanup() {
AbortController.abort()} - it didn't help.
This warning appears after you press Log in.
I got the same error, I cloned the repo in the description and got the same error. It happens because in Login.js there is setLoading(false) which updates the component AFTER the history.push('/'). This updates the Login component after it is unmounted. I'm guessing Kyle probably forgot to delete it :P there is no need for it as when the component mounts again, the inital loading state is set to false again.
Hey guys, make sure you put 'email' as a parameter of the resetPassword(email) function within the AuthContext.js since we're passing in 'emailRef.current.value' as an argument within the ForgotPassword.js component.
I also had this error and that was my issue which solved it.
@@eduardserei6859 it is needed if the login is failed, you have to set the loading to false
Someone solved it? Thanks
@@eduardserei6859
the same problem exists in the UpdateProfile. Remove setLoading(false) solved it
really all one need to start with just one video. splendid job!
can't find REACT_APP_FIREBASE_DATABASE_URL
There has been an update to Firebase so now I do not think we have it anymore...
please create a full series on firebase!!!! and thanks for providing this much content for free!!
Great crash course and intro to react with firebase integration.
Is there a specific reason why you used useRef instead of useState for the email and password? I think the same can be achieved with useState and in a much cleaner way or did I miss something
Kyle has a video about useRef. Basically, it's very similar to useState. But when the value store in useRef, the component will not re-render if the value has changed. And it's popular to use it to reference a HTML element.
My Firebase configuration doesn’t show a databaseURL. What do I do?
You can find it under Realtime Database
Don’t worry it’s not something you need to have
I'm at 27:23 and when I enter in a email + 2 correct passwords and then press the "Sign Up" button, I get the error failed to create account. When seeing you do it in the video you get no error. Does this have to do something with database in firebase or do I need to continue a few steps for this to be fixed?
Hi! :) Have you found a solution for it? I'm also stuck at that part of the code, as I keep getting the same alert, although the passwords match
@@rtcodes4618 I think I did yeah, it's a pretty strange one. I figured it out today actually haha. You need at least 6 characters for your password to be successful. That's why you keep getting an error, even if the passwords match. Very strange and will see if I can add an message for this or find a solution.
Great tutorial, loved the speed in which you managed to cover the complete topic at the same time in way one can understand well....
When logging in for the first time, I get the following error in the console: (any ideas why?)
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function
Getting that too, is it because state is being set from the useEffect hook maybe?
I've read elsewhere that it might have to do with setLoading(false) in Login.js taking place AFTER the history.push('/') so I'm commenting that here for anyone in the future. Not sure though.
I finally found a really clear and helpful tutorial about Authentication with Firebase. Thank you so much! Great tutorial.
TypeError: Cannot destructure property 'signup' of 'Object(...)(...)' as it is undefined.
Did you find any solution ?
Likely forgot to add the AuthProvider in App.js
Same error. I couldn't find the solution.
Perfect I didn't know how to use firebase neither js like 7 day ago I started project and stuck in back end cause I dont know how to I tried many video but not useful but thanks to you got it under my sleev now thanks saved my time and me also😊
Hi, when login i have this warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. Can you help me please?.
It has to do with the Signup component. In the handleSubmit function, when you call the history.push() method your Signup component gets unmounted, and the one that your'e pushing to gets mounted. After unmounting, your'e trying to modify the state of the Signup component with the method setLoading, that's why you're getting the error. To solve it, you just have to set the loading state before using history.push() method
@@josevillar5508 wow great, it works !. Thank you very much friend!
@@DarwinAristaArevalo You're welcome! But tbh I was about to come back and fix my comment cause I thought I got it wrong... maybe it was not about the Signup component but the Login one... But anywayssss, I'm glad it helped
@@josevillar5508 may i know how to set the loading state? as in can i have a coding example? i'm quite new at this
@@josevillar5508 You’re a lifesaver. I spent 2 hrs. trying to fix this problem. I thought the onAuthStateChanged listener was not executing the unsubscribe call. Also, I was wrong about how a try/catch block works. I thought that the try/.catch block had an implicit return statement and that it stopped any further execution within the handleSubmit function. I didn't think the setLoading(false) would run. Putting the setLoading(false) inside the catch block fixed my problem. Thank you, José!
The best quality content I've seen in this area. I wish the continuation of your success
Everything works, though I get a warning when logging in. Even when using the cloned repo.
"Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function."
Same here, but I did the ubsubsrcibe thing.
same
same. how we can fix this?
I have to do a project which require Firebase and React which I was gonna start this Monday.. Since I was busy with some other stuff I was pushing it..
Now it all makes sense why God didn't want me to start it earlier.. 🔥
because Kyle knows your needs he did this in timely basis to help you !!!
Hey man. Thanks alot. You are handsome.
Yeah man, this video saved me tonnnss of time! CTRL C, CTRL V
Very good and helpful tutorial. Only one little thing to be added. Prevent user accessing login page after logged in. Thank you.
If you're having problems with importing the keys configuration when compiling your app, do like this the firebase.js file
import firebase from "firebase/compat/app"
import "firebase/compat/auth"
const firebaseConfig = {
apiKey: "xxxxxx",
authDomain: "xxxxx",
projectId: "xxxxxx",
storageBucket: "xxxxxx",
messagingSenderId: "xxxxxx",
appId: "xxxxxx"
}
const app = firebase.initializeApp(firebaseConfig)
export const auth = app.auth()
export default app
Really useful tutorial! Thank you!!!
And thank you to those who added comments warning of some of the changes that have happened