Sometimes we want to implement authentication for multiple reasons and we don't want to create an API just for the authentication or maybe we are not backend developers. That's why Firebase provides authentication backend services easy to use. It supports authentication using passwords, phone numbers, popular social networks like Google, Facebook and Twitter, and more. Requirements First of all, we have to have a Google account ( ). If you don't have an account, create it before starting. Gmail account Firebase Configurations We have to go to their , log in if we are not logged in, and click on . website Get Started And after that, we click on . Add project We have to put a name for our project. For this tutorial I am going to name it react-authentication. Click on . continue For this project I am going to disable Google Analytics. It doesn't affect in anything, so you could enable it if you want. Finally we click on . Create project When we see this image, it means that we are ready to go. Click on . Continue Firebase is not only for web applications, it is also for mobil devices and unity games. But in this case we are going to create a React web app. Click on the marked icon. Now, we have to put a nickname for our application. It doesn't matter which nickname we put it, after all, we are the only ones that are going to see it. I recommend you put a nickname related to the project. Click on . Register app After a few seconds Firebase is going to give us a code that we will then have to put in our projects. Now we have to go to the area. authentication Click on . Set up sign-in method We can see that we have a lot of types of authentication but in this tutorial we are just cover the method. Email/Password Before clicking the method, we can see below that we have the authorized domains. By default there are 3, but you can add more domains. Email/Password Now we are going to enable just the first option. The second option is like it says. When we try to login, google is going to send us a link to our email to login. And that's it. We are done with the Firebase configuration. React App Configurations First of all we have to install the dependencies that are going to help us: i --save firebase reactfire@next npm To keep everything in order we are going to create a file named in our folder. Inside of the firebaseConfig,js file, we add it the json code and export it. firebaseConfig.js src firebaseConfig = { : , : , : , : , : , : , : } firebaseConfig; // src/firebaseConfig.js const apiKey "AIzaSyBSo7NZouVtr-G36eLbFGjXv_IN7cBBn30" authDomain "react-authentication-2c83f.firebaseapp.com" databaseURL "https://react-authentication-2c83f.firebaseio.com" projectId "react-authentication-2c83f" storageBucket "react-authentication-2c83f.appspot.com" messagingSenderId "194995380667" appId "1:194995380667:web:5e5dd9db459ab8a21da49e" export default Now, to Firebase work, we have to wrap the entire app with FirebaseAppProvider and this provider needs to receive the firebase configuration that we created before. React, { Suspense } ; ReactDOM ; { FirebaseAppProvider } ; firebaseConfig ; App ; ;

ReactDOM.render( <Suspense fallback={<h3>Loading...</h3>}>
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </Suspense>
  </FirebaseAppProvider> import from 'react' import from 'react-dom' import from 'reactfire' import from './firebaseConfig' import from './App' import './index.css' < = > FirebaseAppProvider firebaseConfig {firebaseConfig} ,
  document.getElementById('root')
); If you don't know what is suspense component from React, you can check it . here To see if everything is working well, we could import and do a to see in our web console what is going on. We have to add the in our file useFirebaseApp console.log() userFirebaseApp App.js React ; ; { useFirebaseApp } ; { firebase = useFirebaseApp(); .log(firebase); ( );
} App; import from 'react' import './App.css' import from 'reactfire' ( ) function App const console return // Some code export default We can delete the console.log() that we created before so we can continue with the tutorial. Authentication Sign Up First, let's create a component. Sign Up React, { useState } ; ; Signup = { [user, setUser] = useState({ : , : , : , : ,
  }); handleChange = {
    setUser({
      ...user,
      [e.target.name]: e.target.value, : ,
    })
  }; handleSubmit = {
    e.preventDefault(); } ( <h1>Sign up</h1> <form onSubmit={handleSubmit}>
        <input type="text" placeholder="Nickname" name="nickname" onChange={handleChange}/><br />
        <input type="text" placeholder="Email" name="email" onChange={handleChange}/><br />
        <input type="password" placeholder="Password" name="password" onChange={handleChange}/><br />
        <button type="submit">Sign Up</button>
      </form>
      {user.error && <h4>{user.error}</h4>}
    </>
  )
};

export default Signup; import from 'react' import './Signup.css' const => () // User State const nickname '' email '' password '' error '' // onChange function const => e error '' // Submit function (Create account) const => e // Sign up code here. return <> Lets explain: First we created the user state with React Hooks. If you are not familiar with Reac hooks, you can check the documentation . here We have this function that updated the state when the user does a change in the inputs. Also reset the error message to hide it. handleChange The function is where we are going to send the information to Firebase. handleSubmit The input is optional, we are going to see why in the next steps. nickname And this is the result. I added minor styling so your form could look diferent. Now we are going to finish the function. handleSubmit React, { useState } ; { useFirebaseApp } ; ; Signup = { firebase = useFirebaseApp(); handleSubmit = (e) => {
    e.preventDefault(); firebase.auth().createUserWithEmailAndPassword(user.email, user.password)
      .then( { result.user.updateProfile({ : user.nickname,
        })
      }).catch( { .log(error);
        setUser({
          ...user, : error.message,
        })
      })
  } ( )
}; Signup; import from 'react' import from 'reactfire' import 'firebase/auth' import './Signup.css' const => () // Previous code... // Import firebase const // Submit function (Create account) const async // Sign up code here. await => result // Update the nickname displayName => error // Update the error console error return // Previous code... export default First, we have to import and , so we can start to create the user. useFirebaseApp firebase/auth Assign the to const. useFirebaseApp firebase The handleSubmit function has to be an async/await function. will recive just an email and a password, like it says in the name. That's why making a is optional. firebase.auth().createUserWithEmailAndPassword() nickname If we added the nickname option, we have to update the profile, that is why we use . This receives an object with 2 optional parameters: to update the username and the to add a picture avatar. In this tutorial we are just using . user.updateProfile() displayName photoURL displayName And finally in the part we just update the error message. catch With this code we could say that is done, and yes it is, we got what we wanted, but we can improve it. Right now when we Sign up, we don't know if the email is a valid or not, also Firebase automatically logged us in and maybe we don't want that, so let's edit the function. handleSubmit handleSubmit = (e) => {
    e.preventDefault(); firebase.auth().createUserWithEmailAndPassword(user.email, user.password)
      .then( { result.user.updateProfile({ : user.nickname,
        }); myURL = { : } result.user.sendEmailVerification(myURL)
          .then( {
            setUser({
              ...user, : ,
            })
          })
          .catch( {
            setUser({
              ...user, : error.message,
            })
          }) firebase.auth().signOut();
      }).catch( { setUser({
          ...user, : error.message,
        })
      })
} const async // Sign up code here. await => result // Update the nickname displayName // URL of my website. const url 'http://localhost:3000/' // Send Email Verification and redirect to my website. => () verifyEmail `Welcome . To continue please verify your email.` ${user.nickname} => error error // Sign Out the user. => error // Update the error error We added 3 new things. is an object that contains the url of my website. myURL send an email verification and we passed object to add a link to redirect us to our website. result.user.sendEmailVerification() myURL signed us out, so that we do not log in automatically and wait for the email confirmation. firebase.auth().signOut() Log In The Log in is easy. Actually is similar to the previous code. React, { useState } ; { useFirebaseApp } ; ; Login = { [user, setUser] = useState({ : , : , : ,
  }); handleChange = {
    setUser({
      ...user,
      [e.target.name]: e.target.value, : ,
    })
  }; firebase = useFirebaseApp(); handleSubmit = {
    e.preventDefault(); firebase.auth().signInWithEmailAndPassword(user.email, user.password)
      .then( { (!result.user.emailVerified) {
          setUser({
            ...user, : ,
          })
          firebase.auth().signOut();
        }
      })
      .catch( { setUser({
          ...user, : error.message,
        })
      })
  } ( <h1>Log In</h1> <form onSubmit={handleSubmit}>
        <input type="text" placeholder="Email" name="email" onChange={handleChange}/><br />
        <input type="password" placeholder="Password" name="password" onChange={handleChange}/><br />
        <button type="submit">Log in</button>
      </form>
      {user.error && <h4>{user.error}</h4>}
    </>
  )
};

export default Login; import from 'react' import from 'reactfire' import 'firebase/auth' import './Signup.css' const => () // User State const email '' password '' error '' // onChange function const => e error '' // Import firebase const // Submit function (Log in user) const => e // Log in code here. => result if error 'Please verify your email before to continue' => error // Update the error error return <> The most relevant changes are: We just have 2 inputs: email and password. Instead of use , we use . createUserWithEmailAndPassword() signInWithEmailAndPassword() We have to verify if the email was confirmed or not. Log out Log out is just a button that shows up only when the user is connected. React ; { useFirebaseApp } ; Logout = { firebase = useFirebaseApp(); handleClick = {
    firebase.auth().signOut();
  } ( <button type="button" onClick={handleClick}>Log Out</button> import from 'react' import from 'reactfire' import 'firebase/auth' const => () // Import firebase const // Log out function const => () return <> )
};

export default Logout; </> We use . The same function that we use to prevent automatically logged in. firebase.auth().signOut() And practically we are done. If we want to know if the user is connected or not, we can use function from . useUser reactfire React ; Signup ; Login ; Logout ; { useUser } ; ; { user = useUser(); ( <Logout /> <Signup /> <Login /> );
} App; import from 'react' import from './Signup' import from './Login' import from './Logout' import from 'reactfire' import './App.css' ( ) function App const return {
        user && < = > div className "App" }
      {
        !user && <> } </> </ > div export default I put it in the App file to render the components depending if the user is connected or not. You can see the entire repo . here

Facebook

Google

Target

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Authentication in React with Firebase

Too Long; Didn't Read

Companies Mentioned

Kalib Hackin

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Authentication in React with Firebase

Too Long; Didn't Read

Companies Mentioned

Kalib Hackin

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES