electron-firebase
Advanced tools
framework for building firebase cloud authentication and database in an electron app
Electron-Firebase is a quickstart framework for building cross-platform cloud-connected desktop applications using Electron and Firebase. With a few configuration settings you can include a complete authentication workflow into your app that can use email/password, phone number, google, facebook, or many other identity providers.
Electron-Firebase is unusual in being both an NPM module and an example application, and it spans both worlds of the Browser JavaScript environment and the host node.js environment. As such, it will install several folders and files into the root of the NPM application that form the example application, which you are encouraged to modify for your own purposes.
The design of Electron-Firebase is specifically opinionated in a few key areas:
Electron-Firebase is specifically not opinionated in these areas:
Electron-Firebase has been tested on:
Although Electron-Firebase is an NPM module, there is some preparation to complete before it can be installed. This process may appear complicated because it involes setting up a Cloud service (Firebase) and establishing trust relationships with various identity providers. This is work that needs to be done for any kind of cloud connected application, but once configured, Electron-Firebase automates much of the rest. The sequence of operations is important, and no steps are optional. The process should be identical for any platform that you are using, excepting the text editor and terminal that you use.
Electron-Firebase uses Custom Tokens to help manage the authentication process, where the Service Account ID method will be used. To enable this capability, you must grant the "Service Account Token Creator" IAM role to your project's service account as follows.
configure facebook https://developers.facebook.com/apps/ Products --> Settings --> Client OAuth Settings paste: Valid OAuth Redirect URIs --> Save Changes
# initialize your project
mkdir <your-project>
cd <your-project>
npm init
# install the electron-firebase framework and example application
npm install electron-firebase
It is highly recommended that you add firebase-config.json to your .gitignore file. It contains project-specific information that you do not want to check in with the app, nor should it be packaged when building your app.
Be very careful when cutting/pasting values, as things will certainly not work if there are any errors or JSON syntax violation.
The following command will deploy Firebase rules and cloud functions to the Firebase Cloud. These are critical for authentication and authorization to function properly. The deploy process needs to run only once for your project, or subsequently if the security rules or cloud functions are ever modified. These files are administrative and should not bundled with your application.
npm run deploy
Firebase Authentication uses industry standards like OAuth 2.0 and OpenID Connect to support popular federated identity providers like Google, Facebook, Twitter, and many more. In order for your app to have authentication options such as "Sign in with Facebook", each identity provider needs to know about your app, and your app needs to know something about each identity provider that you would like to support. The following instructions use Facebook as an example. The other identity providers will have very similar processes but will differ in some details.
IMPORTANT: These file parameters must be changed to support your unique firebase project. For details, see section: Edit firebase-config.json parameters
IMPORTANT: If you add new identify providers, you will probably need to add their web asset URLs to this file. The web pages in electron-firebase define Content Security Policy so they may securely be used with foreign scripts and pages, which is a critical component of the signin process. Managing complex Content Security Policy strings can be challenging, so electron-firebase provides this configuration file so that you can list all of the elements individually. Note that there are several style-src 'unsafe-hash' entries which are compensating for the firebasui web page having a few inline style elements.
A number of parameters may be modified in the ./config/app-config.json file. Changing some of them could cause your application to stop working if they are not coordinated with application code changes.
Set this value to true to enable debug mode: some log messages will be visible, network calls with be logged, and Browser (renderer) windows will be opened in developer/debug mode.
These keys describe some critical operating parameters like the localhost port. Most of the filenames and paths are shared information between the main process and renderer. "persistentUser" enables the renderer (Browser) process to securely store a token that persists the firebase user identity between sessions, which makes sense for an app that stays resident on a private computer. If your app is intended to be used in a public or shared context, you may want to set "persistentUser" to false which will force a login every time the app is started.
Electron-Firebase operates a TLS web server within the Main node.js process that hosts APIs that the Browser can access. This is "static" web content, meaning that referencing one of these pages will not run a dynamic script on the web server.
These entries are localhost URLs that the Browser uses to make API requests to the Main process. You shouldn't modify these, but it's a way to keep consistent API definitions between the Browser and Main processes. You can use this mechanism if you would like to add custom Main process apis that can be accessed by the Browser, or in fact by any other application with access to localhost.
There are really two levels of sign-in and two levels of sign-out - the Firebase application, and the identity provider. The Firebase signout process does not handle the identity provider level, so these URLs are provided as a way to perform a "deep logout".
This list determines which choices for identity provider will be presented to the user. So this list must be modified to match the set of identity providers to be supported by your application.
The npm install process copies an example application to your project folder. This application generates some data sets based on the user's authentication profile, and allows the user to view that information in the Firestore database or Firebase Cloud Storage.
To run the example application:
npm start
The example application installs the following folders and files, which you are free to modify. When performing a subsequent npm install, any modified example application files will not be overwritten, so if you want to get the newest version before an update you should change the names of the modified files.
Typical usage of the APIs:
const fbe = require('firebase-electron')
fbe.auth.initializeFirebase()
| API | Description |
|---|---|
| mainapp | Higher-level functions for quickly building your app. |
| auth | Authentication workflow for Google Firebase. |
| firestore | Interface to the Firestore Database in the security context of the authenticated user. |
| fbstorage | Interface to Google Cloud Storage in the security context of the authenticated user. |
| file | Functions for local file I/O. All functions are synchronous. |
| applib | Collection of utilities for JSON, objects, and events. |
| local | Functions that use the localStorage capability in a BrowserWindow. |
| server | A local webserver for secure communication with a BrowserWindow. |
| fbwindow | Open and manage Electron BrowserWindow instances. |
FAQs
framework for building firebase cloud authentication and database in an electron app
We found that electron-firebase demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.