firebase / firebase/firebase-js-sdk

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

Open
#6,444 2 comments 0 reactions 0 assignees View on GitHub
api: auth needs-attention question stack:Electron v9
Dominant language
TypeScript
Stars
5.1k
Forks
1k
Avg merge
2d 21h
Merged PRs (30d)
37

Description

### [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 `react-firebaseui@6.0.0` complains with electron renderer at signing pop with provider.

The warnings id:

1. `unsupported-persistence-type`

![image](https://user-images.githubusercontent.com/45492643/179631781-e95c6319-6d9b-40d5-b0c1-ce13507b761f.png)

![image](https://user-images.githubusercontent.com/45492643/179629134-fe1e0650-5beb-4f37-ae1a-4f3e31e6910e.png)

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 like`global.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.
![image](https://user-images.githubusercontent.com/45492643/179631361-9e313be6-9827-49c8-8d53-1a869acd38c4.png)

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**
```js
{
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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.