We can use one of the three types of the persistence that are available in firebase on specified Firebase Authentication instance(.auth()) based on your application or user's requirements:

Consider this example:

firebaseApp.auth().setPersistence('session')
 .then(function() {
 // Auth state is now persisted in the current
 // session only. If user directly close the browser window without doing signout then it clear the existing state
 // ...
 // New sign-in will be persisted with session.
 return firebase.auth().signInWithEmailAndPassword(email, password);
 })
 .catch(function(error) {
 // Handle Errors here.
 });

Let's create a function with the name of authWithEmailPassword() and add the following code to it:

const email = this.emailField.value
const password = this.passwordField.value;
firebaseApp.auth().fetchProvidersForEmail(email).then((provider)=>{
 if(provider.length === 0){
 //Creating a new user
 return firebaseApp.auth().createUserWithEmailAndPassword(email,password);
 } else if(provider.indexOf("password") === -1){
 this.loginForm.reset();
 ToastDanger('Wrong Password. Please try again!!')
 } else {
 //signin user
 return firebaseApp.auth().signInWithEmailAndPassword(email,password);
 }}).then((user) => {
 if(user && user.email){
 this.loginForm.reset();
 this.setState({redirect: true});
 }})
 .catch((error)=>{
 console.log(error);
 ToastDanger(error.message);
 })

In the preceding code, first, we are getting the values from the form. When the user clicks on the submit button, then with the help of fetchProvidersForEmail(email), we are validating whether the email exists in our current firebase system; if not, it will create a new user using the createUserWithEmailAndPassword() method. If it returns true, then we will validate the password; if the user entered the wrong password, it will prompt the user with Wrong password, otherwise sign them in using the same method—signInWithEmailAndPassword()—and we'll update the state of the component by redirecting true.

When we'll create a new user in the createUserWithEmailAndPassword() method, it returns the following error code:

• auth/email-already-in-use
• auth/invalid-email
• auth/operation-not-allowed (if email/password accounts are not enabled in Firebase Console.)
• auth/weak-password (if the password is not strong enough.)

When we'll fetch the provider based on the email with fetchProvidersForEmail(email), then it returns the following error code:

• auth/invalid-email (If a user entered the invalid email)

To read the list of more auth methods and error codes, refer to https://firebase.google.com/docs/reference/js/firebase.auth.Auth.

We can also use the following firebase methods in our application to manipulate the user:

var currentUser = firebase.auth().currentUser;
currentUser.updateProfile({
 displayName: “Harmeet Singh”,
 photoURL: “http://www.liferayui.com/g/200/300"
});
currentUser.sendPasswordResetEmail(“[email protected]”); // Sends a temporary password
// Re-authentication is necessary for email, password and delete functions
var credential = firebase.auth.EmailAuthProvider.credential(email, password);
currentUser.reauthenticate(credential);
currentUser.updateEmail(“[email protected]”);
currentUser.updatePassword(“D@#Log123”);
currentUser.delete();

After successful login, we'll be redirected to an application dashboard page, and we'll be able to see the full navigation where we can add and view the tickets:

Now if you click on the logout button, nothing will happen, because we have not yet created any logout component. So in the logout button, what we need to do is simply call the signOut() method of the firebase:

class Logout extends Component {
 constructor(props) {
 super();
  this.state = {
    redirect: props.authenticated,
    data:''
 }}
 componentWillMount(){
  firebaseApp.auth().signOut().then((user)=>{
    this.setState({
       redirect:true,
       data: null
   })
 })}
 render() {
 if(this.state.redirect === true){
    return <Redirect to = "/" />
 }
 return (
 <div style={{textAlign:"center",position:"absolute",top:"25%",left:"50%"}}>
   <h4>Logging out...</h4>
 </div>
 );
 }}

In the preceding code, we created a component and set the state based on the passing value in the component props (authenticated); then, inside component lifecycle hook method componentWillMount(), we called the firebaseApp.auth().signout() method that signs out the user redirects them to the login page, and removes the data from the state.