The idea is to allow registered users to upload their own profile picture and use efficient caching for the profile pictures valid across all visitors (not only registered ones).
I have PWA that is hosted outside google cloud but manages its users via firebase and stores pictures with firebase-storage. It seems a good idea to also use firebase-hosting on a custom subdomain which is to be used as a proxy/access manager etc for the access to firebase-storage (which in turn can be additionally cached via Cloudflare - optional).
Basically, we find ourselves with (private hosting: on the main domain) and (firebase hosting: on a subdomain). How could we manage who is logged in on the main app to the subdomain without passing metadata that would affect the caching we seek to obtain from the subdomain?
At this stage, I hardly know how firebase manages its sessions.
Any ideas suggestions are greatly appreciated!
The PWA is informed about the user logging in/out via JS events:
firebase.auth().onAuthStateChanged((user) => {
if (user) {
//user is logged in
} else {
//user is logged out
}
}
I checked a bunch of questions here like: Cache images received from Firebase Storage in PWA application Set cache to files in Firebase Storage Firebase storage downloadURL file structure How to cache Firebase storage downloaded images
To upload a picture (from the private hosting) on firebase-storage using JS we can use:
<progress value="0" max="100" id="uploader">0%</progress><br />
<input type="file" id="photo" />
<script>
var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('photo');
fileButton.addEventListener('change', function(e) {
var user = firebase.auth().currentUser;
var ref = firebase.storage().ref();
var file = e.target.files[0];
var name = (user.uid+'/1');
var metadata = {
'contentType': file.type,
'cacheControl': 'private, max-age=15552000'
};
var task = ref.child(name).put(file, metadata);
task.on('state_changed',
function progress(snapshot) {
var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
uploader.value = percentage;
},
function error(err) {
console.log(err);
},
function complete() {
console.log('all done');
}
);
task
.then(snapshot => snapshot.ref.getDownloadURL())
.then((url) => {
console.log(url); //this "url" is to be saved on the profile for the authenticated user and used from within the firebase hosting
})
.catch(console.error);
});
</script>
Basically, when the picture is saved on firebase-storage we can save the "url" for the user profile. We want to use firebase-hosting to process the saving to firebase-storage (as it will be great to add cropping and other image manipulations prior saving to firebase storage, hence I believe that we need to be able to share session data). Once an image is saved on the firebase-storage I would like to implement caching via firebase-hosting.
