Access Firebase Storage Json File via Web/Vue.js

January 3, 2020

Setup Firebase (Web)

Create a Firebase project: https://console.firebase.google.com

Register your app with Firebase: Firebase Console -> Project Overview -> + Add app -> Web

Enable Firebase Console -> Storage

You might want to enable for Firebase Console -> Authentication if you are using storage rules request.auth.

Add Firebase SDK: https://firebase.google.com/docs/web/setup#add-sdks-initialize. You can do so via Firebase Hosting, CDN, or module bundlers/Node.js.

Firebase with Vue.js

Install

npm install firebase
npm install firebaseui
npm install axios

Edit main.js

import * as firebase from 'firebase/app'

// storage
import 'firebase/storage'

// authentication
import 'firebase/auth'
import * as firebaseui from 'firebaseui'
import 'firebaseui/dist/firebaseui.css'

const firebaseConfig = {
  apiKey: "AIza...",
  authDomain: "....firebaseapp.com",
  databaseURL: "https://....firebaseio.com",
  projectId: "...",
  storageBucket: "....appspot.com",
  messagingSenderId: "1020...",
  appId: "1:1020..."
};

firebase.initializeApp(firebaseConfig)

NOTE: Get firebaseConfig from Firebase Console -> Project Overview (Click on Gear Icon) -> Project Settings -> General -> Your apps -> Select your Web apps -> Firebase SDK snippet -> Config.

Download Json Storage in component

<template>
  <div>

  </div>
</template>

<script>
import * as firebase from 'firebase/app'
import axios from 'axios'

export default {
  name: 'home',
  data() {
    return {
      item: {}
    }
  }
  async mounted() {
    const storage = firebase.storage()
    const storageRef = storage.ref()
    // const entityRef = storage.ref('item/apple.json');
    const objectRef = storageRef.child('item/apple.json')

    let url = await objectRef.getDownloadURL()
    let response = await axios.get(url)
    this.item = response.data
    console.log(response.data)
  }
}
</script>

Sample without async

objectRef.getDownloadURL().then( (url) => {
  axios.get(url)
    .then((response) => {
      this.item = response.data
      console.log(response.data)
    })
})

Setup CORS

To download data directly in the browser, you must configure your Cloud Storage bucket for cross-origin access (CORS).

Create cors.json.

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

Run gsutil cors set cors.json gs://<your-cloud-storage-bucket> (e.g. `gs://.appspot.com)

Authentication

Setup Firebase Authentication for Web With FirebaseUI (Google Authentication)

Setup Firebase Email Authentication (Web) with Whitelisted emails using Vue.js and Vue Router

References:

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.