[英]How to include username in firebase's 'createUserWithEmailAndPassword' authentication method
I'm trying to make a Username and Password Authentication in a web app that is made with react and firebase.我正在尝试在使用 React 和 firebase 制作的 web 应用程序中进行用户名和密码身份验证。
But I'm really new to firebase and I couldn't find any good documentation about the process, I have read about Firestore but I don't know how to connect it to the authentication method.但我真的是 firebase 的新手,我找不到任何关于该过程的好文档,我已经阅读过Firestore但我不知道如何将它连接到身份验证方法。 Any help or hint is appreciated!任何帮助或提示表示赞赏!
Here is the signup function of my /register route.这是我的 /register 路线的注册 function。
async function handleSubmit(e) {
e.preventDefault()
if (passwordRef.current.value !== passwordConfirmationRef.current.value){
return setError('Passwords do not match');
}
try {
setError('')
setLoading(true)
await signup(emailRef.current.value, passwordRef.current.value, usernameRef.current.value)
Home()
} catch {
setError('Failed to create an account')
}
setLoading(false)
}
And this is my 'AuthContext.JSX' code:这是我的“AuthContext.JSX”代码:
import React, { useContext , useEffect, useState } from 'react'
const AuthContext = React.createContext()
import {auth} from '../firebase'
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)
}
function login(email, password) {
return auth.signInWithEmailAndPassword(email, password)
}
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged(user => {
setCurrentUser(user)
setLoading(false)
})
return unsubscribe
}, [])
auth.onAuthStateChanged(user => {
setCurrentUser(user)
})
const value = {
currentUser,
signup,
login
}
return (
<AuthContext.Provider value={value}>
{!loading && children }
</AuthContext.Provider>
)
}
Just to let you know the authentication is working well the only problem is getting the Display Name and exporting it to the home page for display.只是为了让您知道身份验证工作正常,唯一的问题是获取显示名称并将其导出到主页以供显示。
Thanks to Dhamaraj I used the updateProfile()
function inside my Register route, and it worked properly for adding a display name to the user which I used on the home page for the profile display.多亏了Dhamaraj ,我在我的 Register 路由中使用了updateProfile()
function,它可以正常地为我在主页上用于个人资料显示的用户添加显示名称。
That is the new function, may it helps somebody with the same issue:那是新的 function,可能对遇到同样问题的人有所帮助:
async function handleSubmit(e) {
e.preventDefault()
if (passwordRef.current.value !== passwordConfirmationRef.current.value){
return setError('Passwords do not match');
}
try {
setError('')
setLoading(true)
await signup(emailRef.current.value, passwordRef.current.value)
auth.currentUser.updateProfile({
displayName: usernameRef.current.value
}).then(() => {
console.log('Username is: ' + auth.currentUser.displayName)
}).catch((error) => {
console.log('An error was occured while updating the profile.')
});
Home()
} catch {
setError('Failed to create an account')
}
setLoading(false)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.