In this section of our course, we will focus on implementing profile image support for users in the Bold New Builders Hub. The goal is to streamline the user experience by automatically retrieving Google profile images for Google sign-in users and providing an upload option for email/password sign-ins. Below is a step-by-step breakdown of the implementation, issues faced, and solutions applied.
Implementation Plan
-
Google Sign-In Users:
-
Retrieve and set the profile image from the Google account automatically.
-
Ensure the image persists across sessions.
-
-
Email/Password Sign-In Users:
-
Provide an option to upload a profile image.
-
If no image is uploaded, display a default placeholder image.
-
Development Process
-
Integrated Google Sign-In API to fetch the user’s profile image.
-
Implemented an image upload functionality with a button at the bottom-right corner of the profile picture.
-
Applied Firebase storage rules to allow authenticated users to upload images.
-
Configured Firestore to allow profile photo URL updates.
-
Ensured public read access for all profile images.
Initial Issues Encountered & Fixes
-
Google Profile Image Not Persisting
-
Initially, the Google profile image would appear momentarily but then disappear.
-
Solution: Updated the authentication context to correctly set and persist the Google profile photo.
-
-
Email/Password Image Upload Not Completing
-
Users were unable to successfully upload images; the process would stay in an uploading state indefinitely.
-
Solution: Adjusted Firebase storage rules to properly validate the image format and size constraints.
-
Implemented Firestore updates to allow photo URL changes.
-
-
Firebase Security Rules & Configuration
-
Issues with Firebase security rules were preventing proper image storage.
-
Solution: Updated Firebase storage rules to allow authenticated user uploads while enforcing file type and size constraints.
-
-
CORS Configuration for Firebase Storage
-
The browser console logs indicated CORS-related errors preventing image uploads.
-
Solution: Configured Firebase storage bucket with appropriate CORS settings using a JSON configuration file.
-
Final Deployment & Testing
-
Successfully deployed updates and tested Google sign-in, confirming that profile images were now persistent.
-
For email/password users, verified that the upload option was functional and properly storing images.
-
Adjusted project settings by upgrading to the Firebase Blaze plan to enable full storage capabilities.
Conclusion
By implementing these updates, we have ensured a seamless profile image experience for both Google and email/password users. Users can now either have their Google profile picture automatically set or upload their own image manually.
This enhancement greatly improves the user experience in the Bold New Builders Hub, reducing friction and making profile management more intuitive and efficient.