import React, { useRef, useState } from "react"
import { Form, Button, Card, Alert } from "react-bootstrap"
import { useAuth } from "../contexts/AuthContext"
import { Link, useNavigate} from "react-router-dom"
export default function Signup() {
const emailRef = useRef()
const passwordRef = useRef()
const passwordConfirmRef = useRef()
const { signup } = useAuth()
const [error, setError] = useState("")
const [loading, setLoading] = useState(false)
const history = useNavigate()
async function handleSubmit(e) {
e.preventDefault()
if (passwordRef.current.value !== passwordConfirmRef.current.value) {
return setError("Passwords do not match")
}
try {
setError("")
setLoading(true)
await signup(emailRef.current.value, passwordRef.current.value)
history.push("/")
} catch {
setError("Failed to create an account")
}
setLoading(false)
}
return (
<>
<Card>
<Card.Body>
<h2 className="text-center mb-4">Sign Up</h2>
{error && <Alert variant="danger">{error}</Alert>}
<Form onSubmit={handleSubmit}>
<Form.Group id="email">
<Form.Label>Email</Form.Label>
<Form.Control type="email" ref={emailRef} required />
</Form.Group>
<Form.Group id="password">
<Form.Label>Password</Form.Label>
<Form.Control type="password" ref={passwordRef} required />
</Form.Group>
<Form.Group id="password-confirm">
<Form.Label>Password Confirmation</Form.Label>
<Form.Control type="password" ref={passwordConfirmRef} required />
</Form.Group>
<Button disabled={loading} className="w-100" type="submit">
Sign Up
</Button>
</Form>
</Card.Body>
</Card>
<div className="w-100 text-center mt-2">
Already have an account? <Link to="/login">Log In</Link>
</div>
</>
)
}
我正在尝试创建一个与我的 firebase.js 文件连接的注册页面,但每当我尝试创建用户时,它总是会抛出错误“无法创建帐户”。
我尝试的是:
import React, { useContext, useState, useEffect } from "react"
import { auth } from "../firebase"
const AuthContext = React.createContext()
export function useAuth() {
return useContext(AuthContext)
}
export function AuthProvider({ children }) {
const [currentUser, setCurrentUser] = useState()
const [loading, setLoading] = useState(true)
function signup(email, password) {
return auth.createUserWithEmailAndPassword(email, password)
}
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged(user => {
setCurrentUser(user)
setLoading(false)
})
return unsubscribe
}, [])
const value = {
currentUser,
// login,
signup,
// logout,
// resetPassword,
// updateEmail,
// updatePassword
}
return (
<AuthContext.Provider value={value}>
{!loading && children}
</AuthContext.Provider>
)
}
这是我的 AuthContext.js 文件,但仍然不确定。
下面是我的 firebase.js 文件。
import "firebase/auth"
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
const app = initializeApp({
apiKey:
authDomain: ,
projectId: ,
storageBucket: ,
messagingSenderId:,
appId:
})
export const auth = getAuth(app);
export default app
我已经删除了信用信息,所以我仍然不确定问题所在
这是一个使用 firebase 注册新用户的工作函数。 (我将其放在一个自定义挂钩中,我在注册页面上调用该挂钩)。
const signUpWithEmailAndPassword = (formData) => {
const { email, password, displayName } = formData;
createUserWithEmailAndPassword(auth, email, password, displayName)
.then((userCredential) => {
// Signed in
const user = userCredential?.user;
const uid = userCredential?.user?.uid;
loginService(uid, user); //this is where you would dispatch your login service which can be reused with your other sign-in options (Google/Facebook/etc)
})
.catch((error) => {
alert(error.message);
console.log(
'Error Signing Up with Email & Password. Error Message: ',
error.message
);
});
};
我也同意德鲁的观点,虽然提供的信息不足以调试您的代码,但问题似乎出在您的上下文中。我建议您尝试使用上述功能创建一个新用户并记录结果,如果有效,那么您可以开始调试您的上下文。
祝你好运!