AJ W AJ W - 6 months ago 216
Javascript Question

Firebase 3.0 throws cross-origin error when bundled with webpack

I'm running into an issue with Firebase 3.0.3, where it throws the following error:

FIREBASE WARNING: Exception was thrown by user callback. Error: Blocked a frame with origin "https://localhost:3000" from accessing a cross-origin frame.
at Error (native)
at derez (<anonymous>:995:515)
at derez (<anonymous>:1001:208)
at derez (<anonymous>:1001:208)
at derez (<anonymous>:1001:208)
at derez (<anonymous>:1001:208)
at derez (<anonymous>:1001:208)
at derez (<anonymous>:1001:208)
at derez (<anonymous>:1001:208)
at derez (<anonymous>:1001:208)

Uncaught SecurityError: Blocked a frame with origin "https://localhost:3000" from accessing a frame with origin "https://falkor.firebaseapp.com". Protocols, domains, and ports must match.


My stack uses React 15.1.0, Redux 3.5.2, Babel-Core 6.9.0 and webpack 1.13.1.

Here are the important parts:

// ./src/constants/index.js

import * as firebase from 'firebase';
firebase.initializeApp(JSON.parse(process.env.FIREBASE_CONFIG));

export const ref = firebase.database().ref();
export const auth = firebase.auth();




// ./src/actions/auth.js

import * as actions from './';
import { ref, auth } from '../constants';

export const loadAuth = () =>
(dispatch, getState) => {
const { subscribed } = getState().firebase;
if (subscribed.indexOf('auth') < 0) {
dispatch(actions.fbaseSubscribed('auth'));
auth.onAuthStateChanged(user => {
if (user) {
dispatch(loadMe(user.uid));
dispatch(actions.auth(user));
}
});
}
};

const serialize = data => ({ [data.key]: data.val() });

export const loadMe = (uid) =>
(dispatch, getStore) => {
const { subscribed } = getStore().firebase;
if (subscribed.indexOf('me') < 0) {
dispatch(actions.fbaseSubscribed('me'));
const item = ref.child('teamMembers').child(uid);

item.on('child_added', data => dispatch(actions.me(serialize(data))));
item.on('child_changed', data => dispatch(actions.me(serialize(data))));
item.on('child_removed', data => dispatch(actions.me(serialize(data))));
}
};

export const login = ({email, password}) =>
() => {
auth.signInWithEmailAndPassword(email, password).catch(err => console.error(err));
};

export const renewSession = token =>
() => {
auth.signInWithCustomToken(token).catch(err => console.error(err));
};


When I try the quickstart app I don't run into any issues with the firebase config being initialized in the head of the page. I only run into this issue when I install the module with NPM and bundle it with webpack.

Any help would be greatly appreciated, I've been scratching my head for a few hours now.

Answer

I don't see your entire code, but as it worked for me, try to not dispatch an action with entire user

export const loadAuth = () =>
  (dispatch, getState) => {
    const { subscribed } = getState().firebase;
    if (subscribed.indexOf('auth') < 0) {
      dispatch(actions.fbaseSubscribed('auth'));
      auth.onAuthStateChanged(user => {
        if (user) {
          dispatch(loadMe(user.uid));
          //dispatch(actions.auth(user)); // not dispatch the entire user. When I changed this my code worked
          dispatch(actions.auth(user.email));
        }
      });
    }
  };

Update: Jun/06/2016

I made this simple transform function to parse data from Firebase user object: https://gist.github.com/douglascorrea/003ae6a6b11f19c97d6ee5b28d0d9eef

And also, if you want more information about this issue you can follow up this thread in Firebase group: https://groups.google.com/d/msg/firebase-talk/Lp6I9uS0PAo/AbHwr_03DwAJ