Firebaseui-web: how to integrate with react app?

[jasan-s]

[channing-google]

Does something like this work for you? You'll also have to include the FirebaseUI CSS/JS from your HTML since we do not have npm packages for those yet.

var React = require('react');
var firebase = require('firebase');

// Copy this from the Firebase Console.
var config = {
  apiKey: "...",
  authDomain: "...",
  databaseURL: "...",
  storageBucket: "...",
};
var app = firebase.initializeApp(config);
var authUi = new firebaseui.auth.AuthUI(firebase.auth());

module.exports = React.createClass({
  componentDidMount: function() {
    var self = this;
    var uiConfig = {
      'callbacks': {
        'signInSuccess': function(user) {
          if (self.props.onSignIn) {
            self.props.onSignIn(user);
          }
          return false;
        }
      },
      'signInOptions': [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID
      ]
    };
    authUi.start('#firebaseui-auth', uiConfig);
  },
  componentWillUnmount: function() {
    authUi.reset();
  },
  render: function() {
    return (
      <div id="firebaseui-auth"></div>
    );
  }
});

[sebnun]

I'm new to react and firebase, I can't seem to make the firebaseui work.
I'm using the official "create-react-app" boilerplate from facebook.

In index.js I have the code posted above by channing-google with my own config values.
In index.html I included
<script src="https://www.gstatic.com/firebasejs/ui/live/0.5/firebase-ui-auth.js"></script> <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/live/0.5/firebase-ui-auth.css" />

but firebaseui is not available.

I tried importing firebase-ui-auth.js in index.js, with
var firebaseui = require('./firebaseUI/firebase-ui-auth.js')

but it doesn't compile due to errors in firebase-ui-auth.js

what is the correct way to make firebaseui available in react?

[channing-google]

firebaseui is defined as a global, so you'll need to add this line at the top of your JS source:
/*global firebaseui*/

Reference: http://eslint.org/docs/rules/no-undef.html

[trence]

I am able to call the login ui from the reactjs, however, the signInSuccess callback would never be called. @jasan-s @channing-google did you guys have any solution for that?

[TKAB]

I am using the create-react-app script collection too and tried it with the above code snippet (by channing-google, Sep 13). But firebaseui seems to assume that firebase is a globally available object, which is not the case as its imported into index.js with import * as firebase from 'firebase';.

The error message that I get for the line var authUi = new firebaseui.auth.AuthUI(firebase.auth()); in Chrome is: Uncaught ReferenceError: firebase is not defined(…) firebase-ui-auth.js:249.

Am I right about the global object? Is there any way around it? It would also be very nice to be able to include firebaseui via webpack.

[TMSCH]

@trence could you provide with a minimal snippet to reproduce this issue? I'm surprised the callback is not called.

@TKAB are you importing firebase in the same file where you call firebaseui.auth.AuthUI(firebase.auth());?
We are also currently working on a NPM module that should make it more convenient in such environment as Webpack.

[TKAB]

Yes, I am. I posted my index.js as a gist. The error message I described is triggered by line 21.

[trence]

@TMSCH @TKAB i have found the solution as follow
const firebaseui = global.firebaseui;
const authUi = new firebaseui.auth.AuthUI(firebase.auth());

so, we need to reference to the global firebaseui in the react in order to make it work.

[TMSCH]

@trence that looks reasonable, thanks for finding this. Hopefully a NPM module should make it more natural. What about the issue with the signInSuccess callback? Is it still happening?

@TKAB could you try Terence's solution?

[trence]

@TKAB for the signInSuccess callback, i use the firebase library on the react.
e.g. firebase.auth().onAuthStateChanged

yeah, the NPM module would allow us to implement it seamlessly.

[TKAB]

I tried it but it didn't change anything. I don't understand why this can help: isn't the problem the visibility of firebase, which isn't changed by the two lines?

[astromme]

@TKAB, I worked around the visibility issue by importing firebase.js with:
<script src="https://www.gstatic.com/firebasejs/3.6.1/firebase.js"></script> and then using /*global firebase*/.

[TKAB]

@astromme, thanks that works! I updated the gist to what my index.js looks like now. In the index.html I include firebase and firebaseui from the CDN.

[TMSCH]

We've added npm support, so you should be able to require them as described here: https://github.com/firebase/firebaseui-web#npm-module. Let me know if that's better for your scenarios!

[TKAB]

That's very nice. The /* global */ statements are no longer necessary. However, I still need some time to figure out how to integrate this into React, like where to put the .start, what to reference in it and where to put the callbacks.

[TMSCH]

That indeed doesn't solve all the problems. Have you tried using @channing-google snippet with the new require solution?

[thedaniel]

I notice in @channing-google's example component, the apiKey is included in the JS, is that kosher?

[thedaniel]

Never mind, I'm new to firebase, I see that it's part of the getting started steps in the console.

[formido]

I can log in with FirebaseUI Web Oauth, but I can't then update the database with the logged in user.

It works If my rules are set to:

{
  "rules": {
    ".read": "auth != null",
    "44358340": { ".write": true }
  }
}

My onAuthStateChanged handler sees the user and prints Timestamp written to the Chrome console.

But if my rules are set to require authorization:

{
  "rules": {
    ".read": "auth != null",
    "44358340": { ".write": "auth != null" }
  }
}

My onAuthStateChanged handler sees the user but fails to update the Firebase database and records an error in the Chrome console:

database.js:52 FIREBASE WARNING: set at /44358340 failed: permission_denied`
database.js:220 Uncaught (in promise) Error: PERMISSION_DENIED: Permission denied
    at database.js:220
    at fc (database.js:59)
    at Ah (database.js:220)
    at database.js:215
    at database.js:177
    at Ag.g.wd (database.js:178)
    at og.wd (database.js:168)
    at Yf.Xf (database.js:166)
    at ag (database.js:150)
    at WebSocket.Ia.onmessage (database.js:149)

This is just a simple create-react-app along with npm install firebaseui --save. After that, the only file I changed is src/App.js using @channing-google's code above as guidance.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import firebase from 'firebase';
import firebaseui from 'firebaseui';
import 'firebaseui/dist/firebaseui.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <FirebaseUI />
      </div>
    );
  }
}

var config = {
  apiKey: "AIzaSyCykvoa0gMrHjWp_b9pgJG6PsdJJVN3VHU",
  authDomain: "in-out-board-a9ed9.firebaseapp.com",
  databaseURL: "https://in-out-board-a9ed9.firebaseio.com",
  storageBucket: "in-out-board-a9ed9.appspot.com",
};
var app = firebase.initializeApp(config);
var authUi = new firebaseui.auth.AuthUI(firebase.auth());
var ref = firebase.database().ref("/44358340");

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    ref.set(firebase.database.ServerValue.TIMESTAMP).then((error) => {
      if (error) {
        console.error(error);
      }
      else {
        console.log("Timestamp written");
      }
    });
  }
});

class FirebaseUI extends Component {
  componentDidMount() {
    var self = this;
    var uiConfig = {
      'callbacks': {
        'signInSuccess': function(user) {
          if (self.props.onSignIn) {
            self.props.onSignIn(user);
          }
          return false;
        }
      },
      'signInOptions': [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID
      ]
    };
    authUi.start('#firebaseui-auth', uiConfig);
  }

  componentWillUnmount() {
    authUi.reset();
  }

  render() {
    return (
      <div id="firebaseui-auth"></div>
    );
  }
}

export default App;

I asked a less detailed question on the same problem at Stack Overflow to which @puf made a helpful comment, but I think my problem description wasn't self-contained enough and the question has gone stale without a resolution.

I also forked @ryansully's https://github.com/ryansully/react-firebaseui-web-demo to make a fully runnable example: https://github.com/formido/react-firebaseui-web-stackoverflow-question.

Clearly I'm missing something very basic, but this is my first time using React and Firebase. They're such a perfect fit for our use case so I don't want to give up on them!

Edit

To rule out that it's something to do with my server, the following code (run with python -m SimpleHTTPServer) combined with rule "44358340": { ".write": "auth != null" } inserts a timestamp into my database:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<script src="https://www.gstatic.com/firebasejs/4.0.0/firebase.js"></script>
  <title>Firebase Stack Overflow answer</title>
</head>
<body>
<script type="text/javascript">
var config = {
  apiKey: "AIzaSyCykvoa0gMrHjWp_b9pgJG6PsdJJVN3VHU",
  authDomain: "in-out-board-a9ed9.firebaseapp.com",
  databaseURL: "https://in-out-board-a9ed9.firebaseio.com",
  storageBucket: "in-out-board-a9ed9.appspot.com",
};
firebase.initializeApp(config);

firebase.auth().signInAnonymously();

var ref = firebase.database().ref("/44358340");

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    ref.set(firebase.database.ServerValue.TIMESTAMP).then((error) => {
      if (error) {
        console.error(error);
      }
      else {
        console.log("Timestamp written")
      }
    });
  }
})
</script>
</body>
</html>

[bojeil-google]

This doesn't look right:

//ref.set(firebase.database.ServerValue.TIMESTAMP).then((error) => {
ref.set(firebase.database.ServerValue.TIMESTAMP)
  .then(() => {
    console.log("Timestamp written")
  })
  .catch(error => {
    console.error(error);
  });

Though I am not sure why you are getting a permission error. Can you log the user in the onAuthStateChanged callback?

[formido]

Yes, I've logged the user there and it's the user I logged in as.

[formido]

That's the same code that works as noted in my EDIT. I got it from @puf's jsbin:

https://jsbin.com/qiqezip/1/edit?html,js,output

Unless I'm missing something. I don't see that commented line so I assume that's a typo.

EDIT

Ok, I see, that's a rewrite. I can try that real quick.

[formido]

As you suspected, after those edits it still came back denied.

[ryansully]

Maybe try assigning the ref inside onAuthStateChanged after the user is truthy?

```javascript
var ref = null;

firebase.auth().onAuthStateChanged((user) => {
if (user) {
ref = firebase.database().ref("/44358340");
ref.set(firebase.database.ServerValue.TIMESTAMP).then((error) => {
if (error) {
console.error(error);
}
else {
console.log("Timestamp written");
}
});
}
});```

[bojeil-google]

Ok, i am able to reproduce it. I don't know exactly why. I will need to investigate this further.

[bojeil-google]

Ok, for now to unblock, this issue seems to have been introduced in 4.1.0. You can revert to 4.0.0 while I try to figure out what they broke.

[formido]

Awesome, thanks!

[bojeil-google]

Hey @formido, the fix is out: https://firebase.google.com/support/release-notes/js#4.1.2
Please upgrade to 4.1.2 and let me know if you find any problems. Thank you for reporting this issue and we apologize for any inconvenience.

[formido]

It works! Very impressive that you diagnosed and fixed this last night. I'd been trying to figure it out since Sunday morning. :)

[bojeil-google]

Hey @formido, it was a regression bug and could have been causing single page apps using FirebaseUI-web and real-time database with version 4.1.0+ to break in production. If I was aware of this earlier, I would have addressed it asap. I am just glad you reported it and it was fixed. We will update the docs to recommend using the latest version 4.1.2 to avoid this issue.

[nicolasgarnier]

Hey guys,

I'm currently writing a sample app using React/redux/Firebase and firebaseUI.

I'll probably extract and publish a reusable React component for firebaseui in its own npm package but in the meantime you can have a look at:

The component:

https://github.com/nicolasgarnier/friendlypix-web-react/blob/master/frontend/firebase/FirebaseAuth.jsx

How to use it:

https://github.com/nicolasgarnier/friendlypix-web-react/blob/master/frontend/components/SplashPage.jsx#L64

I'll follow up once I polished this up and started publishing this :)

[bojeil-google]

Cool! Thanks, @nicolasgarnier !

[Lakaz]

Hi! I am getting the following error when i run the code provided by channing
TypeError: Cannot read property 'PROVIDER_ID' of undefined

[nicolasgarnier]

Here is the react re-usable component: https://www.npmjs.com/package/react-firebaseui but very much un-tested right now :)

[nicolasgarnier]

I'm going to close this. We now have a wrapper for react in its own repo: https://www.npmjs.com/package/react-firebaseui

The README lists several ways of integrating with the new package.

The repo contains some sample code to use it and I've used it in one of my test project here:
https://github.com/nicolasgarnier/friendlypix-web-react/blob/master/frontend/components/SplashPage.jsx#L80