Using Firebase with Electron

Question

I'm trying to use Firebase with Electron. When installing it just like I would on a web page it doesn't work because Electron pages are hosted locally and don't have a hostname. This is the error I'm getting...

Uncaught Error: This domain is not authorized for OAuth operations for your Firebase project. Edit the list of authorized domains from the Firebase console.

I can't add an empty (or wildcard) authorized domain to the Firebase console so I'm therefore stuck. Does anybody have any ideas of how to work around this?

edit: Here's the code I'm using, it's just the standard boilerplate, nothing extra...

<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
<script>
  var config = {
    apiKey: "AIzaSyBvmmPB0_Oddc-02cUj3Ntt3wi8jSxxxx",
    authDomain: "xxxxx-d24ad.firebaseapp.com",
    databaseURL: "https://xxxxx-d24ad.firebaseio.com",
    storageBucket: "",
  };
  firebase.initializeApp(config);
</script>

Solution 1

For now, you can suppress this error by removing the authDomain line from your config. authDomain is needed for the Auth signInWithPopup/signInWithRedirect operations, but everything else should work.

A version of the library that throws that error only when you actually try to do a signInWithPopup/Redirect is in the works.

Solution 2

I don't know if this is the best solution but is a workaround.

create a file server.js with a simple express server

"server.js"

var express = require('express');
var http = require('http');
var path = require('path');

var appServer = express();
appServer.use(express.static(path.join(__dirname, '')));

appServer.get('*', (req, res) => {
    res.sendFile(__dirname + 'index.html');
});

http.createServer(appServer).listen(3007, function() {
    console.log('Express server listening on port');
});

In your main.js(electron-main-js-file)

On the top of the main.js start the node server

require('./server');

and change the "win.loadURL"

win.loadURL('http://localhost:3007');

I've fork your project and implement, the error from firebase is gone but jQuery is not defined, I think you can fix that.

https://github.com/diegoddox/sad-electron-firebase-error

Solution 3

You can use firebase auth's GitHub, Twitter, Facebook, Google Provider with electron by using the manual sign in flow and firebase auth signInWithCredential method.

https://firebase.google.com/docs/auth/web/github-auth#handle_the_sign-in_flow_manually

I created useful library for these case.

https://github.com/mironal/electron-oauth-helper#firebase-auth-integration

// Github manually flow example.

const { OAuth2Provider } = require("electron-oauth-helper")

const config = { /* oauth config. please see example/main/config.example.js.  */}
const provider = new OAuth2Provider(config)
provider.perform()
  .then(resp => {
    const query = querystring.parse(resp)
    const credential = firebase.auth.GithubAuthProvider.credential(query.access_token)
    firebase.auth().signInWithCredential(credential)
    .then(user => {
        console.log(user)
    })
    .catch(error => console.error(error))
  })
  .catch(error => console.error(error))

Comments

[DaveJ]

Excellent, thanks! If you could come back and edit your answer when signInWithPopup/Redirect is supported then that would be awesome.

[Erik J]

Are you using that from the renderer? I'm trying to use firebase from the main thread and getting errors about XMLHttpRequest not being available.

[Carlos Eduardo Sanchez Torres]

Yes, It does. In Angular called to Firebase.