User Profile Pictures with React Authentication and Cloud Storage (with Firebase v9)
Vložit
- čas přidán 12. 12. 2021
- Upload user profile pictures to Firebase Cloud Storage. Link Authentication with Cloud Storage with Firebase Web v9 Modular.
The code used in this video:
github.com/LogicismX/React-Fi...
Firebase Auth Documentation:
firebase.google.com/docs/auth...
Firebase Auth Playlist:
• React Authentication C...
Timestamps: - Věda a technologie
This helped me even after 2 years of uploading. Great work, you guys are real heros
Thank you so much for save my time. I have been searching this for complete an assignment.
Great tutorial. Easy to follow. I got my avatar pictures working now
Thank you a lot man, you helped a lot with my project using the authentication and storage in firebase.
Thanks so much for teaching me (us) Firebase 9!!!!! Appreciate a lot!!
I haven’t watched the vid I just saw it got put up but I know it’s going to be great ! Ur the man keep on going
haha Daniel thank you so much for your kind words :))
Thank you so much for this, really helped me out. For any readers in the comments you can restrict the input element to only allow images by adding the *accept="image/*"* tag for all images, or if you only want jpg/jpegs you can use *accept="image/jpeg"*
Bro you are a pro. Love u. Thanks for this great video. Now I have successfully add user profile functionality in my website by following your video.
very very helpful. thank you dear. keep the good work
This is super helpful, thank you! 😄
You're amazing
Mate, thank you very much. I've seeking for the solution for 3 hours and haven't found. You're great, I am totally thankful for this video. Ones again Thank you. I was thinking, I won't find, but than I found you, and my developer's life resurrected again!
This is helpful. great video.
Thanks buddy it helped a lot
Thank you my teacher!!!
for the custom hook, before I use it and make login and logout button disappear I used redux so I can change its className to hidden lol but this was just some lines of code... it blew my mind!
Hey Logicism. I love this series of React/Firebase tutorials! I am beginner and your videos helped me a lot! Thanks and if you can make one video about user roles that would be great!
hi Ropepe thank you so much for this comment, i'm glad the video helped! And about the user roles, that is very high up on my todo list in my video ideas.. implementing firebase auth with react-router and storage
@@ravenjs Then we will wait :D Thanks once again for great job ;)
Totally underrated video
amazing video thank you!
Very helpful. Thank you
Nice and informative
Great tutorial 😍
that question mark (Optional chaining) is amazing 😃
yes it totally is xD
Thank you so much!
THANK YOU!
I have a problem when I navigate through different pages, the profileImageSrc state gets set to the default picture for a little bit till the actual one gets loaded, it's feeling weird how can I fix it
thank you sir
Thanks for the video. I do have a question though. If you were to logout after creating a user and profile pucture. Then Log back in would the profile picture you previously stored render?
Hey Logicism! I love your series.Can you please make video on a subCollection in firebase
glad you love the series! do you mean subcollections in Cloud Firestore? If so, yes im cooking up a video on that :))
Sir can I ask a question ? How can I do populate a ref in document like in mongodb but in firestore?
Hi, thanks a lot for this video! I m building a react listing marketplace web app, users can upload their data and cover image with a form, before i watched your video i had a problem because i can only upload cover pics with my file uploader in the form. I wanted to have a coverphoto on the listing page aswell a profile photo, you gave me the solution by uploading the profile photo on the signup form, now i want to render this photoURL on the listingpage, i keep getting errors, do you have any suggestion how to do this?
Thnx for the great video!
please continue as soon as possible I will continue with you
thank u so much Cylia haha
How can we implement this using firestore?Please help
For storing other details too
Like name and age
how can we then add the file path URL from the storage into firebase database?
I keep getting the error, snapshot is assigned a value but never read - from .firebase does anyone know how to fix this?
I was getting a 403 permission error when uploading. On the firebase page in the Rules tab, I changed it to
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read: if true;
allow write: if request.auth!=null;
}
}
}
and it worked. Though I read this might not be a good idea in production
Thanks this helped me too!
I want you to teach me how to upload Image and text into storage and firestore and display on another page.
you are the best
you the best too hehe :))
hey Logicism, great work with this series; what about passing currentUser to another page from "/" to "/photo"?
hm, let me say that when u refresh page there is moment that currentUser is undefined (u see login page), then server respond (u see photo page) - how to avoid that?
@@lenart2552 unfortunately, this is just the way that Firebase is built.
if you really want a way around this, you can implement a global loading state within react to show a loading screen while firebase auth is initialising
hi!
thx you very much for your lesson!
but i have a question:
i have lots of users and each of them has a photo.
how can i display their pictures in users list?
You'd store their pictures in Firebase Storage, then store the url in each user's profile in Firestore, then use .map() to make a users list in your React App. Hope this helps!
After watching your video, I became a solid learner of firebase. However, this error occurs when uploading the file.
storage/unauthorized Firebase Storage: User does not have permission to access
I wrote the code exactly like you.
Can you give me an answer?
perhaps it's your auth or firebase security settings? there is a section in the firebase console for "Auth rules"
Everything worked for me till i got to the part where the profile picture displays on the app.
i keep getting this error "userInternal.getIdToken is not a function".
just checkin, did you manage to fix this?
@@ravenjs thanks for checking in , yeah it was due to where I placed my code , but I got it sorted out and my code worked great !!!
next add edit ,delete functionality with add user detail.. thanks
If possible for the next vid can you show how you will create multiple user profiles ?!
by multiple user profiles do you mean multiple users?
@@ravenjs yeah multiple users. Each user is able to post thier own unique content
@@danielodiase6824 unique content? yea basically we just have to link auth to firestore.. which i plan ondoing in the next vid :))
Why I get Error FirebaseError: Firebase: Error (auth/network-request-failed)?
have you tried any other browsers e.g. Firefox, Chrome, Edge ? Do you get the same errors?
@@ravenjs I'm using chrome, and I've also seen the error appear in your video using firefox
@@newbieCieL in the video? could you comment the timestamp
@@ravenjs 20:20 in console
@@newbieCieL oh that haha for me it was just a temporary error that goes away after i refresh the page. is it crashing your app totally?
lllllesss goooo