The function createUserWithEmailAndPassword is not being called within SignUpUser function when onClick event happening. But when I do onClick={signUpUser(email,password)} it works
import React from 'react';
import styled from 'styled-components';
import { useState } from 'react';
import { signUpUser } from '../firebase';
function SignUpComponent() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
return (
<AuthForm>
<input type="text"
placeholder="Email"
name="email"
value={email}
onChange={(e) => setEmail(e.target.value)}/>
<input type="password"
name="password"
placeholder="password"
value={password}
onChange={(e) => setPassword(e.target.value)}/>
<SubmitFormButton
type="submit"
onClick={() => signUpUser(email,password)}
>
Sign Up
</SubmitFormButton>
</AuthForm>
)
};
Here is my firebase.js file
import { initializeApp } from "firebase/app";
import {
getAuth,
onAuthStateChanged,
signInWithPopup,
signOut,
createUserWithEmailAndPassword,
signInWithEmailAndPassword,
} from 'firebase/auth';
const firebaseConfig = {
apiKey: ****,
authDomain: "***",
projectId: "***",
storageBucket: "***",
messagingSenderId: "***",
appId: "***"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const auth = getAuth();
auth.useDeviceLanguage();
// Auth functions
export function signUpUser(email, password) {
if (password.length < 6) {
alert('Password is too short');
return;
};
˚˚createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
const user = userCredential.user;
alert('Signed up Successfully', user);
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
alert(errorMessage);
});
};
onClick={signUpUser(email,password)}
Here the signUpUser is called during a render, no matter if clicked or not.
If it works that way and does not work with
onClick={() => signUpUser(email,password)}
then there are no other options but your SubmitFormButton does not trigger onClick. Maybe it is not passed to the DOM at all.
The problem is that the Auth form should implement "onSubmit" method. We should not call the function on the SubmitFormButton component