Storage Api breaks with Server-Side Rendering (Angular Universal).

[ribalnasr]

When using the SDK with Angular Universal, the SSR version (which is rendered server-side) gives the following error:

The Firebase client-side SDK cannot access the Storage Bucket server-side. Please use the admin SDK instead - https://www.npmjs.com/package/firebase-admin

Which is usually understandable but not applicable in this particular case.

This error only shows if I'm using the storage service or when populating fields of type Media.

For a while now I've been using isPlatformBrowser() before populating media fields since I didn't need the media URLs for SEO purposes before, however now, since am integrating Twitter and Facebook's open graph meta tags, I need these URLs to be included in the source-code.

How do you see we should proceed here? Should you fix that from your side or is it something I can do as a workaround from my side to make sure the URLs are retrieved on server-side too?

[gitdubz]

@ribalnasr is this resolved by adding the cert as mentioned here? https://github.com/flamelink/flamelink-js-sdk/issues/136

[ribalnasr]

hi, no, this is not really related, the other issue is when using flamelink on server-side, but in this case here, flamelink is used on client-side using the firebase sdk (not firebase-admin), however since we're using angular universal, we compile the site to be served as a firebase function instead of uploading it to firebase hosting, and we redirect the hosting to the function. as you probably know this is done in order to make the source code seo-friendly, but since this process runs the website on server-side first then on client-side, the firebase client-side sdk (used by flamelink sdk in the website) shows the above error in the functions logs (not in the browser's console).

I hope this makes it clearer, otherwise i will need to create a full example on how to reproduce this later since i can't publicly share the current projects am working on.

[ribalnasr]

since there is no activity on this issue here's the workaround i did:

i created a firebase function that expects the image id and returns the image as follows:

important: you need to initialize the firebase app using the service account certificate and not the default admin.initializeApp() for this to work

import * as functions from 'firebase-functions';
import flamelink from './flamelink'; // this is where i initialized the flamelink app
import axios from 'axios';

export const metaImage = functions.https.onRequest(async (request, response) => {
    const fileId = request.path.split('/')[1];

    if (!fileId) {
        throw 'Image ID is not specified.';
    }

    const url = await flamelink.storage.getURL({
        fileId,
        size: { width: '1440' }
    });

    const image = await axios.get(url, {
        responseType: 'arraybuffer'
    })

    response.contentType('jpg').send(image.data);

});

then i add the required meta tags using the function link. ex:

    this.meta.addTag({
        name: 'og:image',
        content: 'https://us-central1-<PROJECT_NAME>.cloudfunctions.net/metaImage/<IMAGE_ID>' 
    })