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

Answer 1

It's works in Electron 6.0.1 (Google, Facebook and Twitter Auth) through .signInWithPopup. Environment:

node 10.16.2 LTS
electron 6.0.1
vs2017-win2016
electron-forge 5.2.4

electron's package.json

 "dependencies": {
 "@capacitor/electron": "^1.1.0",
 "electron-compile": "^6.4.4",
 "electron-squirrel-startup": "^1.0.0"
  },
  "devDependencies": {
   "babel-plugin-transform-async-to-generator": "^6.24.1",
   "babel-preset-env": "^1.7.0",
   "babel-preset-react": "^6.24.1",
   "electron-forge": "^5.2.4",
   "electron-prebuilt-compile": "4.0.0"
  }, 

Angular's package

  "dependencies": {
"@angular/animations": "^8.2.0-next.1",
"@angular/cdk": "^8.0.0",
"@angular/common": "^8.2.0-next.1",
"@angular/core": "^8.2.0-next.1",
"@angular/fire": "^5.2.1",
"@angular/forms": "^8.2.0-next.1",
"@angular/material": "^8.0.0",
"@angular/platform-browser": "^8.2.0-next.1",
"@angular/platform-browser-dynamic": "^8.2.0-next.1",
"@angular/pwa": "^0.800.2",
"@angular/router": "^8.2.0-next.1",
"@angular/service-worker": "^8.2.0-next.1",
"@capacitor/core": "1.1.0",
"@ionic/angular": "^4.6.2",
"@ngx-loading-bar/core": "^4.2.0",
"@ngx-loading-bar/router": "^4.2.0",
"@ngxs/logger-plugin": "^3.3.2",
"@ngxs/store": "^3.3.2",
"angulartics2": "^7.5.2",
"echarts": "^4.2.1",
"firebase": "^6.1.1",
"hammerjs": "^2.0.8",
"immutable": "^4.0.0-rc.12",
"ngx-echarts": "^4.1.1",
"ngx-permissions": "^7.0.3",
"ngx-stars": "^1.3.0",
"rxjs": "6.5.2",
"zone.js": "~0.9.1"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~0.802.0-next.0",
  "@angular/cli": "~8.2.0-next.0",
  "@angular/compiler": "^8.2.0-next.1",
  "@angular/compiler-cli": "~8.2.0-next.1",
  "@angular/language-service": "~8.2.0-next.1",
  "@capacitor/cli": "^1.0.0",
  "@compodoc/compodoc": "^1.1.10",
  "@ionic/angular-toolkit": "~2.0.0",
  "@ngxs/devtools-plugin": "^3.4.3",
  "@ngxs/schematics": "0.0.1-alpha.5",
  "@types/echarts": "^4.1.9",
  "@types/jasmine": "^3.3.12",
  "@types/jasminewd2": "~2.0.6",
  "@types/node": "~11.13.4",
  "ajv": "^6.9.1",
  "codelyzer": "~5.0.0",
  "html-minifier": "^4.0.0",
  "ionic": "^5.0.1",
  "jasmine-core": "~3.4.0",
  "jasmine-spec-reporter": "~4.2.1",
   "karma": "^4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.5",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"karma-mocha-reporter": "^2.2.5",
"protractor": "~5.4.0",
"sonarqube-scanner": "^2.4.0",
"ts-node": "~8.0.3",
"tslint": "~5.15.0",
"tslint-sonarts": "^1.9.0",
"typescript": "~3.4.3"
},

I've compiled for Windows with:

DEBUG='electron-forge:*' node_modules/.bin/electron-forge make

Answer 2

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.

Answer 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))

Answer 4

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