React-redux-firebase: bug(auth): google is not a valid auth provider for your firebase instance

[Taerarenai]

Do you want to request a feature or report a bug?
Bug.
What is the current behavior?

Using this.props.firebase.login({provider: 'google', type: 'popup'}) like the examples suggest throws this error -> Error: google is not a valid auth provider for your firebase instance. If using react-native, use a RN specific auth library.

I'm not using RN and the authentication is enabled in my firebase console.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via codesandbox or similar.
Set up react-redux-firebase and try to log in using google as the provider. Follow the example for more info (i used class components instead of functions).

What is the expected behavior?

A google sign-in should pop up i suppose?

Which versions of dependencies, and which browser and OS are affected by this issue? Did this work in previous versions or setups?

    "react-redux": "^7.1.0",
    "react-redux-firebase": "^3.0.0-alpha.12",

[Taerarenai]

I tried using twitter now. That one throws the same error. Does the auth work in V3 or am i doing something wrong here?

[prescottprue]

@Taerarenai auth does work for v3, but when you are using react-native you need to do auth a bit differently using something like react-native-google-signin as mentioned in the react-native section of the docs

[Taerarenai]

@Taerarenai auth does work for v3, but when you are using react-native you need to do auth a bit differently using something like react-native-google-signin as mentioned in the react-native section of the docs

This is not a react native project. I mentioned it above. It is actually a web project using

    "react": "16.8.6",
    "react-dom": "16.8.6",

[prescottprue]

@Taerarenai Oh interesting... How are you importing firebase? Did you also import auth?

[Taerarenai]

@prescottprue I'm using NextJS. This is how i implemented react-redux-firebase and tested if its working ( i can see myself authenticated in the redux state, probably because i just refactored my app for NextJS and i logged in previously using email/password).
I just started using NextJS and firebase so i might've messed something up, but it is a bit weird cause the error doesn't really help and i can see my redux state working without any issues.

I have my firebase config file as such ->

import * as firebase from "firebase/app";
import 'firebase/auth';
import 'firebase/database';
import 'firebase/storage';

const firebaseConfig = {
    apiKey: "....",
    etc:"all other props"
}

export default !firebase.apps.length ? firebase.initializeApp(firebaseConfig) : firebase.app();

I have another file which i called nextStore which creates the react redux store for server/client (if i implemented it right).

import React from 'react'
import { initializeStore } from './store';
import { ReactReduxFirebaseProvider } from 'react-redux-firebase'
import { Provider } from 'react-redux';
import { setLanguageFile } from '../redux/actions';
import firebase from '../firebase/nextConfig';

const isServer = typeof window === 'undefined'
const __NEXT_REDUX_STORE__ = '__NEXT_REDUX_STORE__'
const rrfConfig = {
  userProfile: 'users',
}


function getOrCreateStore(initialState) {
  // Always make a new store if server, otherwise state is shared between requests
  if (isServer) {
    return initializeStore(initialState)
  }

  // Create store if unavailable on the client and set it on the window object
  if (!window[__NEXT_REDUX_STORE__]) {
    window[__NEXT_REDUX_STORE__] = initializeStore(initialState)
  }
  return window[__NEXT_REDUX_STORE__]
}

const reduxStore = getOrCreateStore()


const rrfProps = {
  firebase,
  config: rrfConfig,
  dispatch: reduxStore.dispatch,
  // createFirestoreInstance // <- needed if using firestore
}

export default App => {
  return class AppWithRedux extends React.Component {
    static async getInitialProps(appContext) {
      // Get or Create the store with `undefined` as initialState
      // This allows you to set a custom default initialState

      // Provide the store to getInitialProps of pages
      appContext.ctx.reduxStore = reduxStore

      let appProps = {}
      if (typeof App.getInitialProps === 'function') {
        appProps = await App.getInitialProps(appContext)
      }

      return {
        ...appProps,
        initialReduxState: reduxStore.getState()
      }
    }

    constructor(props) {
      super(props)
      this.reduxStore = getOrCreateStore(props.initialReduxState)

      const reduxState = reduxStore.getState();
      const langFile = require("../language/" + reduxState.lang.selected + ".json");

      reduxStore.dispatch(setLanguageFile(langFile));
    }

    render() {
      return (
        <Provider store={reduxStore}>
          <ReactReduxFirebaseProvider {...rrfProps}>
            <App {...this.props} reduxStore={this.reduxStore} />
          </ReactReduxFirebaseProvider>
        </Provider>

      )
    }
  }
}

And finally my _app.js files inside the pages folder which runs on every page (kind of like an App.js from what i understand, quite new with next).

import App, { Container } from 'next/app';
import React from 'react';
import withReduxStore from '../utils/redux/nextStore';
import { ThemeProvider } from '@material-ui/styles';
import theme from '../utils/theme';
import CssBaseline from '@material-ui/core/CssBaseline';
import MainMenu from '../components/MainMenu';


class MyApp extends App {
    constructor(props) {
        super(props);

    }

    componentDidMount() {
        const jssStyles = document.querySelector('#jss-server-side');
        if (jssStyles) {
            jssStyles.parentNode.removeChild(jssStyles);
        }
    }

    render() {
        const { Component, pageProps, reduxStore } = this.props
        return (
            <Container>
                <ThemeProvider theme={theme}>
                    <CssBaseline />
                        <MainMenu />
                        <Component {...pageProps} />
                </ThemeProvider>
            </Container>
        )
    }
}

export default withReduxStore(MyApp)

Also my actual store (created based on how i was using it before).

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import { postsReducer } from './reducers';
import { userReducer } from './reducers';
import { languageReducer } from './reducers';
import { composeWithDevTools } from 'redux-devtools-extension'
import { firebaseReducer } from 'react-redux-firebase'

const rrfConfig = {
    userProfile: 'users',
    // useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB
}
const reducers = combineReducers({
    posts: postsReducer,
    me: userReducer,
    lang: languageReducer,
    firebase: firebaseReducer
});
export function initializeStore(initialState) {
    return createStore(
        reducers,
        initialState,
        composeWithDevTools(applyMiddleware())
    )
}

[Taerarenai]

Pssst...any idea?

[prescottprue]

@Taerarenai Not really sure, haven't gotten a chance to try to debug yet. Would it be possible to provide a full codebase where it could be reproduced?

[prescottprue]

Could you provide a full codebase through a repo or a codesandbox so that the issue can be reproduced?

[Taerarenai]

I'll try to make a smaller repro and get back to you. Might be a few days since i'm busy and its quite tricky using nextjs.

[Taerarenai]

@prescottprue Ok, managed to make a repo.

https://github.com/Taerarenai/react-redux-firebase-next1 .
Firebase config resides in /utils/firebase/fbconfig.jsx

You can check the error by doing

npm run dev
Then go to localhost:3000/admin and click the button.

[illuminist]

export default !firebase.apps.length ? firebase.initializeApp(firebaseConfig) : firebase.app();

is where it went wrong.

You are exporting only App instance of firebase but not an entire firebase library which react-redux-firebase require to access some property that doesn't included in App instance.

Content in utils/firebase/fbconfig.jsx must be change to

import * as firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/database'
import 'firebase/storage'

const firebaseConfig = {
//FFCONFIG
}

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig)
}

export default firebase
console.log('Firebase loaded')

[Taerarenai]

@illuminist - Yep....you're totally right. That was the issue. I got the pop-up now and it errors out due to the consent page not being configured (i didnt do that yet) so i suppose react-redux-firebase works fine.

But damn, that error message had nothing to do with the actual error.
Anyway, thanks a lot ! :D.