How to integrate google signin authentication in react application

Question

I am barely 2 months with React and currently I am having issues with integrating google signin to my application. This is what I have tried so far but it's still not working and I don't know what I am not doing right. Please any help would be appreciated.

I have attached both files for your review in case you might want to see where the issue is coming from. Thank you very much.

firebase file

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";

const config = {
    apiKey: "*** API KEY ***",
    authDomain: "*** PROJECT ID ***.firebaseapp.com",
    projectId: "*** PROJECT ID *** ",
    storageBucket: "*** PROJECT ID ***.appspot.com",
    messagingSenderId: "*** SENDER ID ***",
    appId: "*** APP ID ***",
    measurementId: "*** MEASUREMENT ID ***"
  };

  firebase.initializeApp(config); // this creates and initializes a Firebase instance.

  export const auth = firebase.auth();
  export const firestore = firebase.firestore();

  //google auth utility

  const provider = new firebase.auth.GoogleAuthProvider();
  provider.setCustomParameters({prompt: 'select_account'}); //this always triggers the google pop-up for signin

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

    export default firebase;

signin file

import React, { Component } from 'react'
import FormInput from '../formInput/FormInput'
import '../signIn/SignIn.css';
import CustomButton from '../customButton/CustomButton';
import signInWithGoogle from '../../firebase/firebase';

class SignIn extends Component {
    constructor(props) {
        super(props);

        this.state = {
            email: '',
            password: '',
        }
    }
    // onsubmit handler for the form 
    handleSubmit = (event) => {
        event.preventDefault();
        this.setState({ email: '', password: '' });
    }
    //onchange handler for the input
    handleChange = (event) => {
        const { value, name, } = event.target;
        this.setState({ [name]: value })
    }

    render() {
        return (
            <div className="sign-in">
                <h2>I already have an account</h2>
                <span>Sign in with your email and password</span>

                <form onSubmit={this.handleSubmit}>
                    <FormInput
                        type="email"
                        name="email"
                        value={this.state.email}
                        handleChange={this.handleChange}
                        label="email"
                        required
                    />

                    <FormInput
                        type="password"
                        name="password"
                        value={this.state.password}
                        handleChange={this.handleChange}
                        label="password"
                        required
                    />

                    <CustomButton type="submit">Sign In</CustomButton><br />
                    <CustomButton onclick={signInWithGoogle}>{''}Sign in with Google{''}</CustomButton>
                </form>
            </div>

        )
    }
}
export default SignIn;

@jns Firebase configuration data is not a credential. See https://stackoverflow.com/q/37482366 — Frank van Puffelen, May 31 '21 at 14:16
Thank you very much, although it's not a project for production. It's a portfolio project. — denscholar2020, May 31 '21 at 16:09

score 0 · Accepted Answer · answered May 31 '21 at 12:51

0

You don't need to ask for an email and password from the user.

Add a Google Signup button to UI.

Change your signInWithGoogle function as below and on the above button click you can use this function in the SignIn Component to get the signing user info. Which you can save to a DB and update your state.

export const signInWithGoogle = async () => {
  return auth.signInWithPopup(googleProvider).then((res) => {
    console.log(res.user);
    return res.user;
  });
}

Also take a look at auth().onAuthStateChanged it is like an rxjs Observable with updated user info. Use this in your App file or ContextProvider to switch your UI from an un-authenticated page to authenticated page and vice-versa

answered May 31 '21 at 12:51

Akhil

879
5
11

Also you can check [this](https://blog.logrocket.com/user-authentication-firebase-react-apps/) or [this](https://dev.to/gathoni/firebase-google-sign-in-with-react-3741) article for more info. – Akhil May 31 '21 at 12:53
do i need to import any module from firebase because it's saying 'googleProvider' is not defined? – denscholar2020 May 31 '21 at 16:15
`const googleProvider = new firebase.auth.GoogleAuthProvider()` – Akhil May 31 '21 at 16:30
thank you...it worked for me. You have been very helpful and everyone that help out. I so much appreciate. – denscholar2020 May 31 '21 at 16:48

How to integrate google signin authentication in react application

1 Answers1