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

Рет қаралды 34,068

Күн бұрын

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/Log...
Firebase Auth Documentation:
firebase.googl...
Firebase Auth Playlist:
• React Authentication C...
Timestamps:

Пікірлер: 71

@ControlAllDa1337 2 жыл бұрын

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

@faisalshaikh7994 5 ай бұрын

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

@bornclasher1294 9 ай бұрын

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.

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

@thivankawaduge509 4 ай бұрын

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

@danielodiase6824 2 жыл бұрын

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 2 жыл бұрын

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

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

@kinstar 2 жыл бұрын

that question mark (Optional chaining) is amazing 😃

@ravenjs 2 жыл бұрын

yes it totally is xD

@byui-masa 2 жыл бұрын

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

@eves.2825 Жыл бұрын

You're amazing

@emonkhanedward5946 7 ай бұрын

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

@dionardomarques18 2 жыл бұрын

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

@smitpatel6620 2 жыл бұрын

Totally underrated video

@ropepe3059 2 жыл бұрын

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 2 жыл бұрын

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 2 жыл бұрын

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

@toppmoviehighlights Жыл бұрын

This is helpful. great video.

@MiikaKontio 2 жыл бұрын

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

@cyliaalileche6445 2 жыл бұрын

please continue as soon as possible I will continue with you

@ravenjs 2 жыл бұрын

thank u so much Cylia haha

@BenjiFriedman 2 жыл бұрын

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 2 жыл бұрын

Thanks this helped me too!

@maazahmed7771 2 жыл бұрын

Thanks buddy it helped a lot

@yusufaltundal3482 Жыл бұрын

Very helpful. Thank you

@Btc314btc 2 жыл бұрын

Thank you so much!

@bharatsinhparmar3666 Жыл бұрын

Nice and informative

@Clytax 2 жыл бұрын

amazing video thank you!

@paulcochrane6389 Жыл бұрын

This is super helpful, thank you! 😄

@whoIsDeck 2 жыл бұрын

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

@ravenjs 2 жыл бұрын

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

@dimpless25 2 жыл бұрын

THANK YOU!

@gokulkrishna.s5691 Жыл бұрын

Great tutorial 😍

@enjoyyourlife4399 2 жыл бұрын

thank you sir

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

@cyliaalileche6445 2 жыл бұрын

you are the best

@ravenjs 2 жыл бұрын

you the best too hehe :))

@user-wo1os3ow1q 2 жыл бұрын

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

@animamanakar4052 2 жыл бұрын

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

@Strategic. 5 ай бұрын

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

@willyhorizont8672 2 жыл бұрын

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

@aramabdulrahman2087 2 жыл бұрын

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

@altcoinalpha 2 жыл бұрын

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

@nazaryipyryg6491 2 жыл бұрын

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 2 жыл бұрын

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!

@bazirakkalguksu1480 2 жыл бұрын

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 2 жыл бұрын

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

@danielodiase6824 2 жыл бұрын

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

@ravenjs 2 жыл бұрын

by multiple user profiles do you mean multiple users?

@danielodiase6824 2 жыл бұрын

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

@ravenjs 2 жыл бұрын

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

@robertkinney8241 15 күн бұрын

How to have the page refresh itself?

@danielodiase6824 2 жыл бұрын

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 2 жыл бұрын

just checkin, did you manage to fix this?

@danielodiase6824 2 жыл бұрын

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

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

@JanetteKing 2 жыл бұрын

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

@lenart2552 2 жыл бұрын

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

@lenart2552 2 жыл бұрын

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 2 жыл бұрын

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