CODEWITHSUNDEEP
firebasefirebase-authenticationelectron
just_user
just_user

Reputation: 12059

Firebase Auth + Electron = failure?

I'm trying to get firebase auth working with electron. I already have it working with iOS and Android and would like to use the same for the desktop version of the app.

What I'm mainly trying with is the google sign in. Using firebase's web version ends up with a failure where localhost isn't accepted for signing in. I have tried the node.js version of the code but I can't get that working either.

Google this: https://www.google.com/search?q=firebase+auth+electron

And you'll see all I have tried and all stackoverflow questions I have looked through. Some people say they have it working but I have found no working examples. Is this a lost cause or could someone point me in the right direction?

A lot of people seems to have the same issue but no answers.

Upvotes: 4

Views: 2958

Answers (4)

crispengari
crispengari

Reputation: 9321

I was facing the same problem when connecting firebase and electron.js with React.js but there's a simple way that allows you to use firebase popup authentication. Inside the main process when creating a new browserWindow. Under webPreferences object add or set the property nativeWindowOpen to true. Make sure that your webPreferences object has the property nativeWindowOpen set to true.

Example

window = new electron.BrowserWindow({
    width: 1200,
    height: 650,
   webPreferences:{
       nodeIntegration: true,
       enableRemoteModule: true,
       nativeWindowOpen: true, // this allows you to use popups when doing authentication using firebase in an electron app
   }
})

Good luck ✔✔✨✨

Upvotes: 0

Lurein Perera
Lurein Perera

Reputation: 79

what you could look into is something that achieves what you need but not exactly what you want. Whilst the google sign in module is iffy to say the least with electron, I've found success using the createUserWithEmailAndPassword function with Firebase auth, check that out

Upvotes: 0

just_user
just_user

Reputation: 12059

One way to make this work is to run a local server which serves the page you want to display. Then in your electron window load that local server url.

Because the Firebase libraries will complain if loaded directly in an electron window, but you can get around it using a local server like this:

import {
    app,
    BrowserWindow
} from 'electron'

import ex from 'express'
import path from 'path'
const express = ex()
let win
const port = 12345

const appPath = app.getAppPath()
express.use(require('express').static(path.join(appPath, '/')))
express.get('/', (_, res) => res.sendFile(path.join(appPath, '/index.html')))
express.listen(port, () => console.log('Running on ' + port))

function getWindow () {
    if (win === undefined) {
        // Create the browser window.
        win = new BrowserWindow({
            frame: false,
            transparent: true,
            alwaysOnTop: true,
            width: 1280,
            height: 768,
            center: true
        })
        win.loadURL('http://localhost:' + port)
    }
    return win
}

app.on('ready', () => {
    getWindow().show()
})

The above code would be your index.js which you'd run when you run electron. Then in index.html which is served over the local webserver you load the firebase web libraries. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>Example</title>
</head>
<body>
    <script src="/__/firebase/6.3.0/firebase-app.js"></script>
    <script src="/__/firebase/6.3.0/firebase-auth.js"></script>
</body>
</html>

Upvotes: 0

Towfiq
Towfiq

Reputation: 425

you will have to set nativeWindowOpen to true inside webPreferences in your main windows. Like so:

mainWindow = new BrowserWindow(
        {
            width: 1280,
            height: 720,
            webPreferences: {
                nodeIntegration: false,
                preload: path.join(__dirname, 'preload.js'),
                nativeWindowOpen: true
            }
        }
);

Upvotes: 1

Related Questions