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 :)