Firebase Authentication Expected `onClick` listener to be a function, instead got a value of `object` type

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

During Firebase Auth set up on my React project.
I am not able to make to make Auth Pop up trigger on button click.

Either it throws an error inside the console after button click OR it automatically opens Authentication after refreshing the page
(Expected onClick listener to be a function, instead got a value of object type.)

// Initialize Firebase

import firebase from "firebase/app";

import "firebase/firestore";

import "firebase/auth";

const config = {

  apiKey: "myKeyHere",

  authDomain: "domain",

  databaseURL: "url",

  projectId: "idb",

  storageBucket: "bucket",

  messagingSenderId: "id"

};

firebase.initializeApp(config);

window.firebase = firebase;

export const firestore = firebase.firestore();

export const auth = firebase.auth();



export const provider = new firebase.auth.GoogleAuthProvider();

export const signInWithGoogle = () => auth.signInWithPopup(provider);



const settings = { timestampsInSnapshots: true };

firestore.settings(settings);



export default firebase;

And Here is my Component:

import React, { Component } from "react";

import { connect } from "react-redux";

import signInWithGoogle from "../../firebase";



    class Header extends Component {

      constructor(props) {

        super(props);

      }

      render() {

        console.log(this.props);

        return (

          <nav className="header">

            <button onClick={signInWithGoogle}>Sign in</button>

          </nav>

        );

      }

    }

    const mapStateToProps = state => state;



    export default connect(mapStateToProps)(Header);

As you see the Sign In button should trigger signInWithGoogle arrow function from Firebase , but it throws an error onClick.

asked Jan 3 at 8:35

Anton

1301214

add a comment |

During Firebase Auth set up on my React project.
I am not able to make to make Auth Pop up trigger on button click.

// Initialize Firebase

import firebase from "firebase/app";

import "firebase/firestore";

import "firebase/auth";

const config = {

  apiKey: "myKeyHere",

  authDomain: "domain",

  databaseURL: "url",

  projectId: "idb",

  storageBucket: "bucket",

  messagingSenderId: "id"

};

firebase.initializeApp(config);

window.firebase = firebase;

export const firestore = firebase.firestore();

export const auth = firebase.auth();



export const provider = new firebase.auth.GoogleAuthProvider();

export const signInWithGoogle = () => auth.signInWithPopup(provider);



const settings = { timestampsInSnapshots: true };

firestore.settings(settings);



export default firebase;

And Here is my Component:

import React, { Component } from "react";

import { connect } from "react-redux";

import signInWithGoogle from "../../firebase";



    class Header extends Component {

      constructor(props) {

        super(props);

      }

      render() {

        console.log(this.props);

        return (

          <nav className="header">

            <button onClick={signInWithGoogle}>Sign in</button>

          </nav>

        );

      }

    }

    const mapStateToProps = state => state;



    export default connect(mapStateToProps)(Header);

As you see the Sign In button should trigger signInWithGoogle arrow function from Firebase , but it throws an error onClick.

asked Jan 3 at 8:35

Anton

1301214

add a comment |

During Firebase Auth set up on my React project.
I am not able to make to make Auth Pop up trigger on button click.

// Initialize Firebase

import firebase from "firebase/app";

import "firebase/firestore";

import "firebase/auth";

const config = {

  apiKey: "myKeyHere",

  authDomain: "domain",

  databaseURL: "url",

  projectId: "idb",

  storageBucket: "bucket",

  messagingSenderId: "id"

};

firebase.initializeApp(config);

window.firebase = firebase;

export const firestore = firebase.firestore();

export const auth = firebase.auth();



export const provider = new firebase.auth.GoogleAuthProvider();

export const signInWithGoogle = () => auth.signInWithPopup(provider);



const settings = { timestampsInSnapshots: true };

firestore.settings(settings);



export default firebase;

And Here is my Component:

import React, { Component } from "react";

import { connect } from "react-redux";

import signInWithGoogle from "../../firebase";



    class Header extends Component {

      constructor(props) {

        super(props);

      }

      render() {

        console.log(this.props);

        return (

          <nav className="header">

            <button onClick={signInWithGoogle}>Sign in</button>

          </nav>

        );

      }

    }

    const mapStateToProps = state => state;



    export default connect(mapStateToProps)(Header);

As you see the Sign In button should trigger signInWithGoogle arrow function from Firebase , but it throws an error onClick.

asked Jan 3 at 8:35

Anton

1301214

During Firebase Auth set up on my React project.
I am not able to make to make Auth Pop up trigger on button click.

// Initialize Firebase

import firebase from "firebase/app";

import "firebase/firestore";

import "firebase/auth";

const config = {

  apiKey: "myKeyHere",

  authDomain: "domain",

  databaseURL: "url",

  projectId: "idb",

  storageBucket: "bucket",

  messagingSenderId: "id"

};

firebase.initializeApp(config);

window.firebase = firebase;

export const firestore = firebase.firestore();

export const auth = firebase.auth();



export const provider = new firebase.auth.GoogleAuthProvider();

export const signInWithGoogle = () => auth.signInWithPopup(provider);



const settings = { timestampsInSnapshots: true };

firestore.settings(settings);



export default firebase;

And Here is my Component:

import React, { Component } from "react";

import { connect } from "react-redux";

import signInWithGoogle from "../../firebase";



    class Header extends Component {

      constructor(props) {

        super(props);

      }

      render() {

        console.log(this.props);

        return (

          <nav className="header">

            <button onClick={signInWithGoogle}>Sign in</button>

          </nav>

        );

      }

    }

    const mapStateToProps = state => state;



    export default connect(mapStateToProps)(Header);

As you see the Sign In button should trigger signInWithGoogle arrow function from Firebase , but it throws an error onClick.

reactjs firebase authentication firebase-authentication

asked Jan 3 at 8:35

Anton

1301214

asked Jan 3 at 8:35

Anton

1301214

asked Jan 3 at 8:35

Anton

1301214

asked Jan 3 at 8:35

Anton

1301214

asked Jan 3 at 8:35

Anton

1301214

add a comment |

1 Answer
1

active

oldest

votes

I believe the problem is that you are importing the default export from '../../firebase', which is 'firebase' instead of the sign in function.

To fix that you just need to add curly brackets {} to the import so that you import the named export instead of the default:

import { signInWithGoogle } from "../../firebase";

answered Jan 3 at 12:07

Ricardo Smania

1,1631122

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54018777%2ffirebase-authentication-expected-onclick-listener-to-be-a-function-instead-go%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

I believe the problem is that you are importing the default export from '../../firebase', which is 'firebase' instead of the sign in function.

To fix that you just need to add curly brackets {} to the import so that you import the named export instead of the default:

import { signInWithGoogle } from "../../firebase";

answered Jan 3 at 12:07

Ricardo Smania

1,1631122

add a comment |

I believe the problem is that you are importing the default export from '../../firebase', which is 'firebase' instead of the sign in function.

To fix that you just need to add curly brackets {} to the import so that you import the named export instead of the default:

import { signInWithGoogle } from "../../firebase";

answered Jan 3 at 12:07

Ricardo Smania

1,1631122

add a comment |

I believe the problem is that you are importing the default export from '../../firebase', which is 'firebase' instead of the sign in function.

To fix that you just need to add curly brackets {} to the import so that you import the named export instead of the default:

import { signInWithGoogle } from "../../firebase";

answered Jan 3 at 12:07

Ricardo Smania

1,1631122

I believe the problem is that you are importing the default export from '../../firebase', which is 'firebase' instead of the sign in function.

To fix that you just need to add curly brackets {} to the import so that you import the named export instead of the default:

import { signInWithGoogle } from "../../firebase";

answered Jan 3 at 12:07

Ricardo Smania

1,1631122

answered Jan 3 at 12:07

Ricardo Smania

1,1631122

answered Jan 3 at 12:07

Ricardo Smania

1,1631122

answered Jan 3 at 12:07

Ricardo Smania

1,1631122

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu