Question

0

79

Views

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.

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. Any help or hint is appreciated!

Here is the signup function of my /register route.

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:

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.

I want to display the username on this page

5 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T04:06:54.938Z

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.

That is the new function, may it helps somebody with the same issue:

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