Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

136
Views
Firebase function createUserWithEmailAndPassword is not being called within my custom function

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);
      });
};
about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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.

about 4 years ago · Juan Pablo Isaza Report

0

The problem is that the Auth form should implement "onSubmit" method. We should not call the function on the SubmitFormButton component

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!