I have a problem with the firebase authentication for my sign-in component (I’m using React) and the problem is that I have two ways of signing in one with google and the other just with email and password, when I create a user and this user signs-in first with google that works ok but then the sign-in with email and password does not work for him and if I create another user and click first on the sign-in with email and password that works but then the sign-in with google stops working.
I don’t know if my problem is on the component or in the firebase configuration that I have, but the error says is on the server so what can I do?
please if there is any React expert who could help is more than welcome to point my error and guide me towards a solution.
firebase.utils.js
import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
const config = {
apiKey: "AIzaSyBWrW38eq1eSNUUhs_T7raPons6_8OfxKI",
authDomain: "crown-db-4243b.firebaseapp.com",
databaseURL: "https://crown-db-4243b.firebaseio.com",
projectId: "crown-db-4243b",
storageBucket: "crown-db-4243b.appspot.com",
messagingSenderId: "500798355673",
appId: "1:500798355673:web:fc08cf5afdceb35a79a6c8",
measurementId: "G-LNFRDT7XV6"
};
firebase.initializeApp(config);
export const createUserProfileDocument = async (userAuth, additionalData) => {
if (!userAuth) return;
const userRef = firestore.doc(`users/${userAuth.uid}`);
const snapShot = await userRef.get();
if (!snapShot.exists) {
const { displayName, email } = userAuth;
const createdAt = new Date();
try {
await userRef.set({
displayName,
email,
createdAt,
...additionalData
});
} catch (error) {
console.log('error creating user', error.message);
}
}
return userRef;
};
export const addCollectionAndDocuments = async (
collectionKey,
objectsToAdd
) => {
const collectionRef = firestore.collection(collectionKey);
const batch = firestore.batch();
objectsToAdd.forEach(obj => {
const newDocRef = collectionRef.doc();
batch.set(newDocRef, obj);
});
return await batch.commit();
};
export const convertCollectionsSnapshotToMap = collections => {
const transformedCollection = collections.docs.map(doc => {
const { title, items } = doc.data();
return {
routeName: encodeURI(title.toLowerCase()),
id: doc.id,
title,
items
};
});
return transformedCollection.reduce((accumulator, collection) => {
accumulator[collection.title.toLowerCase()] = collection;
return accumulator;
}, {});
};
export const getCurrentUser = () => {
return new Promise((resolve, reject) => {
const unsubscribe = auth.onAuthStateChanged(userAuth => {
unsubscribe();
resolve(userAuth);
}, reject);
});
};
export const auth = firebase.auth();
export const firestore = firebase.firestore();
export const googleProvider = new firebase.auth.GoogleAuthProvider();
googleProvider.setCustomParameters({ prompt: 'select_account' });
export const signInWithGoogle = () => auth.signInWithPopup(googleProvider);
export default firebase;
sign-in component
import React, { useState } from 'react';
import { connect } from 'react-redux';
import FormInput from '../form-input/form-input.component';
import CustomButton from '../custom-button/custom-button.component';
import {
googleSignInStart,
emailSignInStart
} from '../../redux/user/user.actions';
import "./sign-in.styles.scss";
const SignIn = ({ emailSignInStart, googleSignInStart }) => {
const [userCredentials, setCredentials] = useState({
email: '',
password: ''
});
const { email, password } = userCredentials;
const handleSubmit = async event => {
event.preventDefault();
emailSignInStart(email, password);
};
const handleChange = event => {
const { value, name } = event.target;
setCredentials({ ...userCredentials, [name]: value });
};
return (
<div className="sign-in">
<h2>I already have an account</h2>
<span>Sign in with your email and password</span>
<form onSubmit={handleSubmit}>
<FormInput
name="email"
type="email"
value={email}
handleChange={handleChange}
label="email"
required
/>
<FormInput
name="password"
type="password"
value={password}
handleChange={handleChange}
label="password"
required
/>
<div className="buttons">
<CustomButton type="submit">Sign In</CustomButton>
<CustomButton
type="button"
onClick={googleSignInStart}
isGoogleSignIn
>
Sign In with Google
</CustomButton>
</div>
</form>
</div>
);
};
const mapDispatchToProps = dispatch => ({
googleSignInStart: () => dispatch(googleSignInStart()),
emailSignInStart: (email, password) =>
dispatch(emailSignInStart({ email, password }))
});
export default connect(
null,
mapDispatchToProps
)(SignIn);