1
resposta

Erro ao criar usuário: TypeError: (0 , firebase_auth__WEBPACK_IMPORTED_MODULE_2__.auth) is not a function

Olá a todos!

Estou enfrentando um problema ao tentar implementar a autenticação de usuários em um projeto React utilizando o Firebase. Ao criar um novo usuário com o método createUserWithEmailAndPassword, recebo o seguinte erro:

main.b87e1ed041e2022d382c.hot-update.js:40 Erro ao criar usuário: TypeError: (0 , firebase_auth__WEBPACK_IMPORTED_MODULE_2__.auth) is not a function
    at handleCriarUsuario (main.b87e1ed041e2022d382c.hot-update.js:37:77)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)
    at dispatchEventsForPlugins (react-dom.development.js:9097:1)
    at react-dom.development.js:9288:1

Aqui estão alguns detalhes sobre o meu código e configuração:

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import {getAuth} from 'firebase/auth'


const firebaseConfig = {
 ///minha config
};


const app = initializeApp(firebaseConfig);
export const db = app.firestore();
export const auth = getAuth(app)

No meu componente App, estou importando corretamente as funções necessárias do Firebase:

import { useState } from 'react'
import './App.css'
import { createUserWithEmailAndPassword } from 'firebase/auth'


function App() {
    const [registrarEmail, setRegistrarEmail] = useState('')
    const [registrarSenha, setRegistrarSenha] = useState('')

    const [loginEmail, setLoginEmail] = useState('')
    const [loginSenha, setLoginSenha] = useState('')

    const handleCriarUsuario =  () => {   
      try {
      const user = await createUserWithEmailAndPassword(
        auth,
        registerEmail,
        registerPassword
      );
      console.log(user);
    } catch (error) {
      console.log(error.message);
    }
    }
    const handleLogin = ()=>{
      return(console.log("Login"))
    }
    const handleLogout = ()=>{
      return(console.log("Logout"))
    }

    return (




    ///Criar um novo usuario
    <div className="App">
      <div>

        <h1>Registrar</h1>
        <input
          placeholder="Email..."
          onChange={(event)=>{setRegistrarEmail(event.target.value)}}
        />
        <input
          placeholder="Password..."
          onChange={(event)=>{setRegistrarSenha(event.target.value)}}
        />
        <button onClick={handleCriarUsuario} >Criar Usuário</button>
      </div>



      <div>
        <h1>Logar</h1>
        <input
          placeholder="email..."
          onChange={setLoginEmail}
        />
        <input
          placeholder="Password..."
          onChange={setLoginSenha}

        />
        <button onClick={handleLogin}>Login</button>
      </div>
      <div>
        <h1>Usuário Logado</h1>
        <button onClick={handleLogout}>Logout</button>
        </div>
    </div>
  )
}

export default App

A função handleCriarUsuario, responsável por criar um novo usuário com createUserWithEmailAndPassword, é chamada corretamente quando o botão correspondente é clicado. No entanto, continuo recebendo o erro mencionado acima. Já verifiquei minhas importações e configurações, mas não consigo identificar o que está causando o problema.

Alguém já enfrentou esse tipo de erro ao trabalhar com autenticação no Firebase em um projeto React? Alguma sugestão de como posso resolver esse problema?

Agradeço antecipadamente por qualquer ajuda ou orientação que vocês possam fornecer!

Atenciosamente, Sofia :)

1 resposta

Oii, Sofia! Tudo bem?

Peço desculpas pela demora em respondê-la.

O erro que você está recebendo, indica que há uma tentativa de usar algo que não é uma função como se fosse uma.

No seu código, observe que você está importando a função createUserWithEmailAndPassword de forma incorreta. Em vez de importá-la diretamente do módulo firebase/auth, você deve importá-la do objeto auth que você já importou do Firebase.

Uma alternativa para solucionar o problema, é alterar a linha de importação da seguinte forma:

import { createUserWithEmailAndPassword } from 'firebase/auth';

Além disso, a função createUserWithEmailAndPassword precisa ser chamada a partir do objeto auth do Firebase. Portanto, você precisa atualizar a função handleCriarUsuario da seguinte maneira:

const handleCriarUsuario = async () => {   
  try {
    const user = await auth.createUserWithEmailAndPassword(
      registrarEmail,
      registrarSenha
    );
    console.log(user);
  } catch (error) {
    console.log(error.message);
  }
}

Feito isso, o erro deve ser resolvido e você deve conseguir criar um novo usuário sem mais problemas.

Espero ter ajudado!

Bons estudos, Sofia!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!