User Profile Pictures with React Authentication and Cloud Storage (with Firebase v9)

[@faisalshaikh7994]

This helped me even after 2 years of uploading. Great work, you guys are real heros

[@bornclasher1294]

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.

[@thivankawaduge509]

Thank you so much for save my time. I have been searching this for complete an assignment.

[@ControlAllDa1337]

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"*

[@danielodiase6824]

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

[@ravenjs]

haha Daniel thank you so much for your kind words :))

[@Luftjunkie]

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!

[@emonkhanedward5946]

very very helpful. thank you dear. keep the good work

[@eves.2825]

You're amazing

[@kimhwanhoon]

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!

[@byui_masa]

Thanks so much for teaching me (us) Firebase 9!!!!! Appreciate a lot!!

[@toppmoviehighlights]

This is helpful. great video.

[@kinstar]

that question mark (Optional chaining) is amazing 😃

[@ravenjs]

yes it totally is xD

[@dionardomarques18]

Thank you a lot man, you helped a lot with my project using the authentication and storage in firebase.

[@smitpatel6620]

Totally underrated video

[@MiikaKontio]

Great tutorial. Easy to follow. I got my avatar pictures working now

[@ropepe3059]

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!

[@ravenjs]

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

[@ropepe3059]

@@ravenjs Then we will wait :D Thanks once again for great job ;)

[@yusufaltundal3482]

Very helpful. Thank you

[@cyliaalileche6445]

please continue as soon as possible I will continue with you

[@ravenjs]

thank u so much Cylia haha

[@bharatsinhparmar3666]

Nice and informative

[@Btc314btc]

Thank you so much!

[@maazahmed7771]

Thanks buddy it helped a lot

[@BenjiFriedman]

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

[@MiikaKontio]

Thanks this helped me too!

[@Clytax]

amazing video thank you!

[@paulcochrane6389]

This is super helpful, thank you! 😄

[@cyliaalileche6445]

you are the best

[@ravenjs]

you the best too hehe :))

[@whoIsDeck]

Hey Logicism! I love your series.Can you please make video on a subCollection in firebase

[@ravenjs]

glad you love the series! do you mean subcollections in Cloud Firestore? If so, yes im cooking up a video on that :))

[@gokulkrishna.s5691]

Great tutorial 😍

[@dimpless25]

THANK YOU!

[@danielc4991]

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?

[@bazirakkalguksu1480]

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?

[@ravenjs]

perhaps it's your auth or firebase security settings? there is a section in the firebase console for "Auth rules"

[@Strategic.]

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

[@JanetteKing]

how can we then add the file path URL from the storage into firebase database?

[@nazaryipyryg6491]

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?

[@ravenjs]

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!

[@อภิสิทธิ์ตรีนิตย์]

I want you to teach me how to upload Image and text into storage and firestore and display on another page.

[@willyhorizont8672]

Sir can I ask a question ? How can I do populate a ref in document like in mongodb but in firestore?

[@danielodiase6824]

If possible for the next vid can you show how you will create multiple user profiles ?!

[@ravenjs]

by multiple user profiles do you mean multiple users?

[@danielodiase6824]

@@ravenjs yeah multiple users. Each user is able to post thier own unique content

[@ravenjs]

@@danielodiase6824 unique content? yea basically we just have to link auth to firestore.. which i plan ondoing in the next vid :))

[@danielodiase6824]

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

[@ravenjs]

just checkin, did you manage to fix this?

[@danielodiase6824]

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

[@lenart2552]

hey Logicism, great work with this series; what about passing currentUser to another page from "/" to "/photo"?

[@lenart2552]

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?

[@ravenjs]

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

[@enjoyyourlife4399]

thank you sir

[@animamanakar4052]

How can we implement this using firestore?Please help For storing other details too Like name and age

[@aramabdulrahman2087]

next add edit ,delete functionality with add user detail.. thanks

[@robertkinney8241]

How to have the page refresh itself?

[@altcoinalpha]

I keep getting the error, snapshot is assigned a value but never read - from .firebase does anyone know how to fix this?

[@thomasvanreijn8569]

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!

[@NoahOnyejese]

What are you storage rules?

[@newbieCieL]

Why I get Error FirebaseError: Firebase: Error (auth/network-request-failed)?

[@ravenjs]

have you tried any other browsers e.g. Firefox, Chrome, Edge ? Do you get the same errors?

[@newbieCieL]

@@ravenjs I'm using chrome, and I've also seen the error appear in your video using firefox

[@ravenjs]

@@newbieCieL in the video? could you comment the timestamp

[@newbieCieL]

@@ravenjs 20:20 in console

[@ravenjs]

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

[@abrarmulla1196]

lllllesss goooo