firebase / firebaseui-web-react Goto Github PK

this.unregisterAuthObserver is not a function at e.componentWillUnmount (StyledFirebaseAuth.js:1)

Using Next.js and demo code:

import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth'
import firebase from 'firebase'

I'm following the example on a fresh create-react-app app. It only worked on the first time. From then it displays the following error

Firebase: Firebase service named 'auth' already registered (app/duplicate-service).

I am building an app using the react web UI and I've run into a very strange issue: whenever I logout of my app after I perform some type of API call (in this case, just a simple CRUD operation to the DB or uploading a photo to storage) I return to the sign-in screen however the signInOptions don't render via `<FirebaseAuth ... />.

If I logout without making any API call, the FirebaseAuth component and signInOptions render normally.

In both cases the uiConfig and app.auth are being passed properly to <FirebaseAuth ... />. I have no idea what to make of this.

If it helps, here is my auth screen component:

import * as React from 'react';
import * as firebaseui from 'firebaseui';
import * as firebase from 'firebase/app';
import FirebaseAuth from 'react-firebaseui/FirebaseAuth';
import * as app from '@/app';

class Authenticate extends React.Component<any, any> {
  render() {
    const uiConfig = {
      signInSuccessUrl: '/',
      signInOptions: [
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
        firebase.auth.GoogleAuthProvider.PROVIDER_ID
      ],
      credentialHelper: firebaseui.auth.CredentialHelper.NONE
    }

    return  <div className="section authenticate">
              <FirebaseAuth uiConfig={uiConfig} firebaseAuth={app.auth}/>
            </div>; 
  }
}

export default Authenticate;

FirebaseUI React Components provides React Wrappers on top of the Firebase UI Web library and notably Firebase UI Auth.

Am i right in thinking this project only provide wrapper for Firebase Auth currently?

Hello. I have problem with get messages when i generate token after fist launch.
Messages receive, but not show in system.

onMessage:  {collapse_key: "do_not_collapse", from: "189690317549", priority: "high", notification: {…}}

When I close browser and launch again - all working.

I need working messaging push with fist launch.

export const sendPushNotification = (title, body, icon = "firebase-logo.png") => async (dispatch, getState) => {
	console.log("sending....")
	let data = {
		notification: {
			title: title,
			body: body,
			icon: icon,
			priority: "high",
		},
		to: getState().fcm.token,
	}

	axios.defaults.baseURL = "https://fcm.googleapis.com"
	axios.defaults.headers.common["Authorization"] = "key=" + serverKey
	axios.defaults.headers.post["Content-Type"] = "application/json"

	axios({
		method: "post",
		url: "/fcm/send",
		data: data,
	})
		.then(function(response) {
			console.log(response)
		})
		.catch(function(error) {
			console.log(error)
		})
}

Help, please. Thank You!

Hi,

Thanks for your work Nicolas. Trying to get it work with redirect flow with a change state.

I tried signInFlow: 'redirect' but doesn't seems to work. In your "Using FirebaseAuth with a redirect" exemple - the signInFlow is at 'popup'. I assumed 'redirect' would be the right one, am I messing around ?

Thanks

Nice lib. Any way to localize the components? I'm using this library as an npm module.

is it possible to do this?

I have cloned the repo onto my mac, cd into the example, ran npm install (fires some warnings about peer dependencies not installed), firebase --add but then when trying to build I get this :

$ npm run build

> @ build /Users/dev/DEVInternet/firebaseui-web-react/example
> npm run createfirebaseconf; NODE_ENV=production webpack -p;


> @ createfirebaseconf /Users/dev/DEVInternet/firebaseui-web-react/example
> firebase setup:web --json > ./src/firebase-config.json

/Users/dev/DEVInternet/firebaseui-web-react/example/webpack.config.js:37
  plugins: [new ExtractTextPlugin('./bundle.css')],
                ^

ReferenceError: ExtractTextPlugin is not defined
    at Object.<anonymous> (/Users/dev/DEVInternet/firebaseui-web-react/example/webpack.config.js:37:17)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at requireConfig (/Users/dev/DEVInternet/firebaseui-web-react/example/node_modules/webpack/bin/convert-argv.js:97:18)
    at /Users/dev/DEVInternet/firebaseui-web-react/example/node_modules/webpack/bin/convert-argv.js:104:17
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ build: `npm run createfirebaseconf; NODE_ENV=production webpack -p;`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/dev/.npm/_logs/2018-02-06T08_58_52_818Z-debug.log

I tried to add : var ExtractTextPlugin = require('extract-text-webpack-plugin');
In webpack.config.js, but then got some more errors after building :

$ npm run build

> @ build /Users/dev/DEVInternet/firebaseui-web-react/example
> npm run createfirebaseconf; NODE_ENV=production webpack -p;


> @ createfirebaseconf /Users/dev/DEVInternet/firebaseui-web-react/example
> firebase setup:web --json > ./src/firebase-config.json

Packing for production
Hash: 214e9b6af19f8cf21a35
Version: webpack 3.10.0
Time: 1710ms
        Asset       Size  Chunks             Chunk Names
    bundle.js  768 bytes       0  [emitted]  main
bundle.js.map    6.03 kB       0  [emitted]  main
chunk    {0} bundle.js, bundle.js.map (main) 255 bytes [entry] [rendered]
    [0] ./src/App.jsx 255 bytes {0} [built] [failed] [2 errors]
   [0] ./src/App.jsx 255 bytes {0} [built] [failed] [2 errors]

ERROR in ./src/App.jsx

/Users/dev/DEVInternet/firebaseui-web-react/example/src/App.jsx
  20:8   error  There should be no space after '{'             object-curly-spacing
  20:23  error  There should be no space before '}'            object-curly-spacing
  33:50  error  Block must not be padded by blank lines        padded-blocks
  39:53  error  Missing trailing comma                         comma-dangle
  43:9   error  Unexpected 'this'                              no-invalid-this
  45:8   error  Missing trailing comma                         comma-dangle
  46:6   error  Missing trailing comma                         comma-dangle
  50:20  error  Missing trailing comma                         comma-dangle
  59:1   error  Line 59 exceeds the maximum line length of 80  max-len
  63:1   error  Line 63 exceeds the maximum line length of 80  max-len
  72:6   error  Missing semicolon                              semi

✖ 11 problems (11 errors, 0 warnings)
  8 errors, 0 warnings potentially fixable with the `--fix` option.


ERROR in ./src/App.jsx
Module parse failed: Unexpected token (35:11)
You may need an appropriate loader to handle this file type.
| export default class App extends React.Component {
| 
|   uiConfig = {
|     signInFlow: 'popup',
|     signInOptions: [
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ build: `npm run createfirebaseconf; NODE_ENV=production webpack -p;`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the @ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/dev/.npm/_logs/2018-02-06T08_53_47_725Z-debug.log

Could someone please help me ? :) And if needs be let's fix the example !

module versions

• "react-firebaseui": "^3.0.4"
• "firebase": "5.3.0"

Hi, I upgraded the project dependencies Firebase from version 5.0.4 to 5.3.0 and I get an error.

Error Message on React

Firebase: Firebase service named 'auth' already registered (app/duplicate-service).

I think that peerDependencies of "react-firebaseui" don't support v5.3.0 is the error cause.

 "peerDependencies": {
    "react": ">=15 <17",
    "firebase": ">=5 <=5.0.1"
  },

BTW, I'm using TypeScript on the project. So import syntax is as fellows.

import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/database'

How can I have Persistent State?
Now I have to do authenticate after every page refresh.

I tried to use firebase docs but it doesn't work for me.

https://firebase.google.com/docs/auth/web/auth-state-persistence?authuser=0

It looks like this does not support the Firebase UI credentialHelper config setting. I set credentialHelper: 'firebaseui.auth.CredentialHelper.NONE' and email sign-in still opens accountchooser.com.

When I try to login with Phone provider signInSuccessWithAuthResult is not invoking. If I try to login with other providers there is no problem. I am using FirebaseAuth with local state.

Platform : Next.js
How to repro issue : Navigate between homepage - login page - logging in then logging out
URL : http://crm.puretext.us
Observation : UI/ Buttons wont load

I'm trying to set credentialHelper to NONE in my uiConfig variable:

credentialHelper: firebaseui.auth.CredentialHelper.NONE

But the component won't mount. The error is:
'firebaseui' is not defined no-undef

It appears that I don't have access to the 'firebaseui' object, so it can't evaluate the value of firebaseui.auth.CredentialHelper.NONE.

Cool lib, thanks! any ideas why I would be getting Tl(...).updateCurrentUser is not a function

Unable to resolve .css

Hi,

Need help figuring out how to set the credentialHelper when configuring to firebaseui.auth.CredentialHelper.NONE (sample code doesn't address this).
Is there a simple way to access the underling firebaseui definitions from the component?
Other than import firebaseui from 'firebaseui' (which I think unnecessarily increases my package size)?
I understand I can access the firebaseui object itself in the uiCallback prop but here I need access to the static definitions.

Hi.
I have used this component with CRA and it has shown me the following error.

./node_modules/firebaseui/dist/npm.js
Module not found: Can't resolve 'dialog-polyfill' in '<proyect-path>\node_modules\firebaseui\dist'

Any idea how to solve it?
Greetings.

Hi, I have configured the one tap sign-up credential helper, through the uiConfig prop. But how can I call disableAutoSignIn() to disable auto sign in for returning users, since it has to be called on the firebaseui.auth.AuthUI instance which is implemented inside of the FirebaseAuth component ?
I dont see a prop parameter option...
See how it is done there : https://github.com/firebase/firebaseui-web#credential-helper
In the first code part, there is the call to :

// Auto sign-in for returning users is enabled by default except when prompt is
// not 'none' in the Google provider custom parameters. To manually disable:
ui.disableAutoSignIn();

I tried to create multiple instances of FirebaseAuth by following https://github.com/firebase/firebaseui-web-react#using-multiple-instances and only the second instance gets rendered. Currently, I'm using react-firebaseui 1.0.10.

If that's not possible, then a possible solution could be a prop that can be used to trigger the start() reset() function.

Has anybody tested it in a PWA ? I've found it having add behaviours:
if I open the page with a browser, it works on a browser: pop up, login and then reopen the site. But If I save the page as a PWA then it would never close the popup. My only workaround was to use only EmailAuthProvider.

Any ideas ?

Have you Using Firebase Phone number?

I'm trying to use this component inside a modal, but the browser redirects to www.accountchooser.com and then back to my page. The problem is that the redirect clears my state and makes the modal disappear (default state is hidden). Any idea how to get around this? I'm using the popup signinflow but this is still happening. Is there a way to open www.accountchooser.com in a different tab or something? Thanks

Is there any way to select a provider to be shown as default?

According to the docs:

The FirebaseAuth component needs a global CSS to get proper styling. The CSS is already imported within FirebaseAuth. If you are using webpack you'll need to add CSS loaders

Unfortunately it's my understanding that create-react-app doesn't support this without ejecting. Is this accurate? I would love for there to be some (even hacky) way to get the Authentication component to look good without ejecting.

When I run firebase use --add in the console, I got the following error: bash: firebase: command not found. Can someone please help?

Hello,

I'm finding that, if I sign in using the FirebaseAuth component and in the same session logout (using firebase.auth().signOut() ), when I try to render the component again, for example for the next user to sign in, the component is blank.

The #firebaseui_container is in the DOM Tree but has no content.

I've seen the previous issue here and thought they might be related so tried using the firebaseui.auth.AuthUI.getInstance(opt_appId) method to obtain the AuthUI instance and reset it, however that did not fix the problem.

I did however notice that when inspecting the instance, on the second time, one of the fields is callback rather than passwordSignIn. I've attached screenshots

Here is my UI config

  uiConfig = {
    signInFlow: 'popup',
    signInOptions: [firebase.auth.EmailAuthProvider.PROVIDER_ID],
    callbacks: {
      // Avoid redirects after sign-in.
      signInSuccess: () => false
    }
  };

I'm using Redux and React-router if that could have any effect.

Many thanks

I'm using React-Router, with code like this:

// Import FirebaseAuth and firebase.
import React from "react";
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
import firebase from "firebase";

// Configure Firebase.
const config = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID
};

firebase.initializeApp(config);

// Configure FirebaseUI.
const uiConfig = {
  // Popup signin flow rather than redirect flow.
  signInFlow: "popup",
  // Redirect to /signedIn after sign in is successful. Alternatively you can provide a callbacks.signInSuccess function.
  signInSuccessUrl: "/signedIn",
  signInOptions: [firebase.auth.GoogleAuthProvider.PROVIDER_ID]
};

export default class SignInScreen extends React.Component {
  render() {
    return (
      <div>
        <h1>My App</h1>
        <p>Please sign-in:</p>
        <StyledFirebaseAuth
          uiConfig={uiConfig}
          firebaseAuth={firebase.auth()}
        />
      </div>
    );
  }
}

And here's my App.js

import React, { PureComponent } from "react";
import { withRouter } from "react-router";
import { Route, Switch } from "react-router-dom";
import NavigationDrawer from "react-md/lib/NavigationDrawers/NavigationDrawer";
// import { ListItem } from "react-md";
import { toTitle } from "./utils";

import { navItems, NavItemLinks } from "./pages/NavItems";
import Home from "./pages/home";
import Citations from "./pages/citations";
import Connect from "./pages/connect";

const styles = {
  content: { minHeight: "auto" }
};

class RoutingExample extends PureComponent {
  constructor(props) {
    super();

    this.state = { toolbarTitle: this.getCurrentTitle(props) };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ toolbarTitle: this.getCurrentTitle(nextProps) });
  }

  getCurrentTitle = ({ location: { pathname } }) => {
    const lastSection = pathname.substring(pathname.lastIndexOf("/") + 1);
    if (lastSection === "") {
      return "Home";
    }

    return toTitle(lastSection);
  };

  render() {
    const { location } = this.props;
    return (
      <NavigationDrawer
        toolbarTitle="My App"
        mobileDrawerType={NavigationDrawer.DrawerTypes.MINI}
        tabletDrawerType={NavigationDrawer.DrawerTypes.CLIPPED}
        desktopDrawerType={NavigationDrawer.DrawerTypes.CLIPPED}
        navItems={NavItemLinks}
        contentId="main-demo-content"
        // footer={<ListItem primaryText="Drafts" />}
        contentStyle={styles.content}
        drawerTitle={this.state.toolbarTitle}
        contentClassName="md-grid"
      >
        <Switch key={location.pathname}>
          <Route path={navItems[0].to} exact component={Home} />
          <Route path={navItems[1].to} component={Citations} />
          <Route path={navItems[3].to} exact component={Connect} />
        </Switch>
      </NavigationDrawer>
    );
  }
}
export default withRouter(RoutingExample);

I won't explain all of the code, since it's irrelevant. The problem is that the 'Sign In with Google' button only shows up the first time I go to the '/connect' page. If I navigate again and go back, the Auth UI is gone, and when I look in the console I see: "Error: Uncaught (in promise) Error: AuthUI instance is deleted!"

My app also gets slower the more I navigate to and away from the 'connect' page, which makes me think that there might be a memory leak involved.

I have the same problem with the example on the front page using state.

I'd appreciate any help. Thanks!

The next major version of React is going to deprecate componentWillMount. Because of this, the next minor version (v16.3) is renaming componentWillMount to UNSAFE_componentWillMount.

I saw in the README, at the using FUIWR with local state section, that componentWillMount lifecycle method is used for listening to Firebase and setting local state.

I suggest that the README should support the use of componentDidMount method to be up to date for next version releases of React.

I found a bug. I get: TypeError: __WEBPACK_IMPORTED_MODULE_2__fire__.a.auth.GoogleAuthProvider is undefined. My code is, using firebase 5.2.0 and firebaseui-react 3.0.4

import React from 'react'
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth'
import fire from '../../fire'

const uiConfig = {
  // Popup signin flow rather than redirect flow.
  signInFlow: 'popup',
  // Redirect to /signedIn after sign in is successful. Alternatively you can provide a callbacks.signInSuccess function.
  signInSuccessUrl: '/signedIn',
  // We will display Google and Facebook as auth providers.
  signInOptions: [
    fire.auth.GoogleAuthProvider.PROVIDER_ID
    // fire.auth.FacebookAuthProvider.PROVIDER_ID
  ]
}

export default class Login extends React.Component {
  render () {
    return (
      <div>
        <h1>My App</h1>
        <p>Please sign-in:</p>
        <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={fire.auth()} />
      </div>
    )
  }
}

Hello,

I am following the README instructions very closely but cannot get email/password authentication to work for the life of me:

import React, { Component } from "react";

import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
import firebase from "firebase";

const config = {
  // Copied directly from the Firebase console...
};
firebase.initializeApp(config);

const firebaseUIConfig = {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      requireDisplayName: false,
      signInMethod: firebase.auth.EmailAuthProvider.EMAIL_PASSWORD_SIGN_IN_METHOD
    }
  ],
  tosUrl: "https://irace.me",
  privacyPolicyUrl: "https://irace.me"
};

class App extends Component {
  render() {
    return <StyledFirebaseAuth uiConfig={firebaseUIConfig} firebaseAuth={firebase.auth()} />;
  }
}

When choosing my email address from the dropdown, I get the following error:

[  5.887s] [firebaseui] Internal error: {"error":{"code":400,"message":"API Key not found. Please pass a valid API key.","errors":[{"message":"API Key not found. Please pass a valid API key.","domain":"global","reason":"badRequest"}],"status":"INVALID_ARGUMENT"}}

When looking at the HTTP traffic, I see that the API key is in fact present:

Any ideas? Totally stuck on this – thanks in advance!

It would be helpful if this also exposed props to style the UI components rather than requiring a global CSS stylesheet.

I ran into an issue while trying to use this library. Basically it failed to import the firebaseui.css because it is common to configure webpack with the following:

  {
    test: /\.css/,
    exclude: /node_modules/,
    use: ['style-loader', 'css-loader']
  }

The exclude prevents the CSS file in node_modules from being processed.

Excluding node_modules is a normal convention used to prevent slow build times. It is normally expected that any npm module already be built with everything it needs.

I worked around it by removing the exclude but it should probably work without requiring this.

Is it possible to build the CSS directly into the dist bundle to avoid this problem?

Hi,

Tried following the instructions to customize some of the css for StyledFirebaseAuth.
Added this to the example project firebaseui-styling.global.css:
.firebaseui-idp-password, .firebaseui-idp-password:hover, .mdl-button.firebaseui-idp-password:active, .mdl-button.firebaseui-idp-password:focus { background-color: #ff9500; }

But when running the example project its seems the original styling (from firebaseui-web?) is still taking over:

Any clarification would be helpful thanks.

On Firebase documentation, there's something related to set up the spanish language

firebase.auth().useDeviceLanguage(); // set with function
firebase.auth().languageCode = 'fr'; // set with string

¿How to configure it?

How can I send verification email after user registers?
Right now I am doing this manually via firebase.auth().currentUser.sendEmailVerification();, but would be great to somehow send it automatically for all new users

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

import { FirebaseAuth } from 'react-firebaseui';

<FirebaseAuth uiConfig={this.uiConfig} firebaseAuth={firebase.auth()}/>

I'm using this with Create React App build APP

I am using StyledFirebaseAuth and passing a callback called handleSignIn that is called when the sign in is successful.

In this function, I call firebase.auth().currentUser to get the logged-in user object. The object is null the first time we perform login after clearing browser cache.

The following steps can be used to reproduce the issue-

• git clone https://github.com/iaaflaafc/temp-app
• cd temp-app
• yarn install
• vi src/App.js # Open the src/App.js file and replace the firebaseConfig object with a valid object.
• Clear your browsing history
• yarn start
• Login in the browser and check the browser console

Observations-

• After the user has performed sign-in, the firebase.auth().currentUser object is null

Expectation-

• After the user has performed sign-in, the firebase.auth().currentUser object should not be null.

I copied the code directly from the readme, but i get this error.

Module not found: Can't resolve 'react-firebaseui/StyledFirebaseAuth'

I'm getting a blank page and the following stace trace error in my browser console...

I have created an npm module which uses react-firebaseui. My npm module is exported as a 'umd library' using webpack. When I install this module into my main react project I am getting this error. I don't get this same error if I install react-firebaseui directly into my main react project however. The error is caused when I include either the 'FirebaseAuth' or 'StyleFirebaseAuth' components.

'navigator' seems to be a property that should be attached to the 'window' object. Is it possible the error is caused because 'window' is not defined?

I am trying to use StyledAuthComponent in an electron app.

The error

M {code: "auth/unsupported-persistence-type", message: "The current environment does not support the specified persistence type."}

is shown.

I have created a project to reproduce the error. The following steps can be used to reproduce the error

git clone https://github.com/iaaflaafc/react-firebaseui-error.git
cd react-firebaseui-error/
npm install
npm run dev

In the package.json there are these scripts..

 "scripts": {
    "clean": "rm -rf ./public/bundle.* ./src/firebase-config.json ./node_modules",
    "build": "npm run clean && npm run createfirebaseconf; NODE_ENV=production webpack -p;",
    "createfirebaseconf": "firebase setup:web --json > ./src/firebase-config.json",
    "serve": "firebase serve"
  },

When doing npm run build it will execute npm run clean which will remove the folder node_modules among other things

Because of this I'm getting this error when doing npm run build

Error: Cannot find module 'extract-text-webpack-plugin'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)

because of course, all dependencies required in webpack.config.js (included this extract-text-webpack-plugin) are not available anymore on node_modules

I've fixed this by simply removing the ./node_modules part of the script

"clean": "rm -rf ./public/bundle.* ./src/firebase-config.json",

What was the purpose of this? Am I missing something?

e.g. provider.addScope('https://www.googleapis.com/auth/contacts.readonly');

Please publish Typescript type definitions

(4,32): Could not find a declaration file for module 'react-firebaseui/StyledFirebaseAuth'. '/Users/me/myproject/node_modules/react-firebaseui/StyledFirebaseAuth.js' implicitly has an 'any' type.
  Try `npm install @types/react-firebaseui` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-firebaseui';`

How can you get access to the underlying firebaseui instance? I tried a handful of options but thing seems to work. I'd like to set the AnonymousAuthProvider option.

Hello.
How can I handle Email Verification?
I can not find a place where I can follow this pattern
https://firebase.google.com/docs/auth/web/manage-users#send_a_user_a_verification_email

Hey @nicolasgarnier !

I've been using your component for a hot minute, implementing OAuth in an app I'm contributing to.

There are 2 unhandled promise rejections in this plugin that will automatically fail in a test environment where .env variables are missing.

Is there a special way this plugin should be tested?
If not would it be feasible to implement a catch for each of the 2 used promises in order for it not to have to be mocked out completely?

I tested it in a fork locally and it works like a charm for me, if I should open a PR for this, please let me know!

Throwing error Module not found because of the uppercase require inside StyledFirebaseAuth.js could we recompile this with require("react")?