在 Firebase 中实施身份验证的正确方法是什么？

Question

ok so I've built a few apps in Firebase and really enjoy using the simple API but always struggle with auth. see this code

I have a simple email and password "form" (not a form element, just two inputs) and then a button (div) I click to call this function below

const logUserIn = () => {
    firebase
        .auth()
        .signInWithEmailAndPassword(email, password)
        .then((res) => {
            console.log('here') // this WORKS but the history redirect below does not work :/
            localStorage.setItem('authUser', JSON.stringify(res))
            history.push('/account')
        })
        .catch((error) => {
            console.log('ERROR:', error)
        })
}

however when I put the lines below

    firebase.auth().onAuthStateChanged((user) => {
        if (user) {
            console.log('user logged in')
        } else {
            console.log('user not logged in')
        }
    })

it seemed to pick it up correctly

but my question is, what is the point of signInWithEmailAndPassword ? and also, how do I use both functions together? do I need to call onAuthStateChanged in the .then part of my signInWithEmailAndPassword function?

it's really confusing how to have a consistent state. my app seems to work after I refresh the page but I want it to work without refreshes (obviously)

any ideas on the best approach?

EDIT

also when I click sign out

firebaseApp.auth().onAuthStateChanged((user) => {
    if (user) {
        history.push('/account')
    } else {
        console.log('NO USER')
    }
})

NO USER logs but then I click on an authenticated route it takes me there until I refresh

Answer 1

The point of signInWithEmailAndPassword is to allow the implementation of classic username/password authentication for people who don't have a Google, Facebook, Twitter, etc. account. If you decide to add it, Google will handle the user accounts and everything, but you'll have to build the login form, complete with the I forgot my password and Register as new user links. Other than that it's simply another provider.

I have a very simple little project on my Github repo which implements user/password authentication along with several others, I suggest you to look into it. I made it as a test assignment for a job interview. It's Angular. https://github.com/tomcatmwi/morbidomega