La función createUserWithEmailAndPassword no se llama dentro de la función SignUpUser cuando ocurre el evento onClick . Pero cuando hago onClick={signUpUser(email,password)} funciona

 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> ) };

Aquí está mi archivo firebase.js

 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); }); };