[Electron] Firebase v9 Electron setPersistence `LOCAL` and signInWithPopup & signInWithRedirect React-firebaseui

[danielrrv]

[REQUIRED] Describe your environment

• Operating System version: Windows 11
• Browser version: Chromium 102
• Electron version: 18.3.0
• Firebase SDK version: 9.9.0
• React Firebaseui: 6.0.0
• Firebase Product: auth(setPersistence)

[REQUIRED] Describe the problem

StyledFirebaseAuth from [email protected] complains with electron renderer at signing pop with provider.

The warnings id:

1. unsupported-persistence-type

https://github.com/firebase/firebase-js-sdk/blob/4983f4d5a0dc385c5b3e042ace44c8204d3cce81/packages/auth-compat/src/persistence.ts#L55-L63 Going after the reasons, Firebase JS SDK detects that Electron renderer is on a nodeJS environment so that signInWithPopup and signInWithRedirect aren't available. These functions assert if they are supported by the platform through _isPopupRedirectSupported() function.

https://github.com/firebase/firebase-js-sdk/blob/e3a5248fc8536fe2ca6d97483aa7e1b3f737dd17/packages/auth-compat/src/auth.ts#L294-L301

Which is: https://github.com/firebase/firebase-js-sdk/blob/e3a5248fc8536fe2ca6d97483aa7e1b3f737dd17/packages/auth-compat/src/platform.ts#L136-L150

I found that electron renderer fails at _isNativeEnvironment() because is unable to prove it isn't isNode()

Correct me if I wrong, shouldn't it validate isElectron() to support for electron renderer environment? see that Electron renderer has Object.prototype.toString.call(global.process) === '[object process]' true.

https://github.com/firebase/firebase-js-sdk/blob/e3a5248fc8536fe2ca6d97483aa7e1b3f737dd17/packages/auth-compat/src/platform.ts#L63-L65

https://github.com/firebase/firebase-js-sdk/blob/b835b4cbabc4b7b180ae38b908c49205ce31a422/packages/util/src/environment.ts#L58-L66

My workaround was to deceive Firebase with something likeglobal.process[Symbol.toStringTag] = 'electron' so that Object.prototype.toString.call(global.process) === '[object process]' isn't true;

Once the change is made, I was able to open up the popup.

I found other resources which suggested fixing the bug with the Bundler. For me, it didn't work out.

• https://github.com/firebase/firebase-js-sdk/issues/6066#issuecomment-1074422838
• https://medium.com/firebase-developers/using-firebase-in-electron-tips-and-tricks-24ac5b44bf5a

My Webpack for renderer

{
  mode: process.env.NODE_ENV,
  target: 'electron-renderer',
  devtool: 'source-map',
  resolve:{
      mainFields:{'browser', 'module'}
}
}

I searched the esm module or browser-ready module for firebase/auth however it used the isNode() implementation as well.

[hsubox76]

What is the official way to detect at runtime if you're in an Electron renderer environment? At a glance I found this: https://github.com/jprichardson/is-electron-renderer/blob/master/index.js

Which is searching to see if process.type exists and if it is equal to the string "renderer". Is that a robust check?

We don't officially support Electron but if there's a quick fix based on a standard and robust way to detect the Electron renderer environment, we may be able to add it in.

[danielrrv]

Thank you @hsubox76 for taking the time to look at the issue. That validation you presented might be combined with others validations to keep the consistency of Firebase js SDK in the different environments it runs on. The following also might be useful.

https://github.com/firebase/firebase-js-sdk/blob/b835b4cbabc4b7b180ae38b908c49205ce31a422/packages/util/src/environment.ts#L105-L107

Also, consider that Electron browserWindow (The interface in charge of initialize browser windows ) has the property nodeIntegration that determines whether or not the browser window will have node process in global object. So we might need to find a different way to validate _isPopupRedirectSupported() and _validatePersistenceArgument to go through. At the same time, Electron keeps being a Node environment so the isNode() is not guilty at all, however Electron renderer has Browser capabilities that need to be considered at validating the local persistence and capabilities to open iFrames and Pop-ups.

NodeIntegration: A boolean. When this attribute is present the guest page in webview will have node integration and can use node APIs like require and process to access low level system resources. Node integration is disabled by default in the guest page.

Besides, it's important to call out that nodeIntegration: false might not generate the bug presented above(SetPersistance and Popup-Redirect) becauase with nodeIntegration: false the window is more pure browser environment like.

However the issue only shows up when the nodeIntegration: true.