How to implement Firebase authentication for web apps

Firebase authentication works across platforms, enabling a consistent user experience whether our app is web-based or mobile. It integrates seamlessly with other Firebase services such as Realtime Database, Firestore, and Cloud Storage, facilitating secure data access and management.

Implementing authentication

Implementing Firebase authentication for web apps involves several steps, but it’s generally straightforward. We will be adding it to a simple React application. Let’s see how this can be done.

Setup and initialization

• Go to the Firebase Consolehttps://console.firebase.google.com.

• Click “Add Project” and follow the instructions to create a new Firebase project.

Once the project has been created, we can now set the authentication.

• On the Firebase Console, click “Authentication.”

• Choose the “Get Started” button and select the authentication methods you want to enable (e.g., Email/Password, Google Sign-In, etc.).

• Follow the on-screen instructions to enable the selected authentication methods and configure any necessary settings.

Adding Firebase to the web app

With our project created and authentication set up, we can now add Firebase to our application. Firebase offers integration in iOS, Android, and web apps. Let’s see the process for a web application.

• On the Project Homepage, click the code icon for web applications.

• Give your app a nickname and click the “Register app” button.

• Copy the app configuration using the copy button and keep it safe.

We will be using the firebaseConfig in the code widget below.

Initialize Firebase in the web app

We can now add Firebase to our web application. We can install Firebase via npm or include it directly in our HTML using a CDN link. You can install it using the command below:

Firebase has already been installed in the widget below. We will now have to initialize Firebase in our application using the configuration we copied earlier.

Let’s explore the Firebase methods and functions that we have used in our application.

• The firebaseConfig object on line 8 contains configuration parameters required to initialize Firebase. These parameters include the apiKey, authDomain, projectId, storageBucket, messagingSenderId, and appId.

• The firebase.initializeApp() function on line 19 initializes Firebase with the provided configuration. It ensures that Firebase is initialized only once by checking if there are any existing Firebase apps.

• We have used 3 methods to create, sign in, and sign out users.

  • The firebase.auth().createUserWithEmailAndPassword(email, password) function on line 32 creates a new user account with the provided email and password.

  • The firebase.auth().signInWithEmailAndPassword(email, password) function on line 46 signs in an existing user with the provided email and password.

  • The firebase.auth().signOut() function on line 55 signs out the currently authenticated user.

• Similarly, we have 3 functions to handle the main functions.

  • handleSignUp(email, password, confirmPassword): This function is called when a user attempts to sign up. It validates the password by ensuring both passwords match and then creates a new user account using createUserWithEmailAndPassword.

  • handleLogin(email, password): This function is called when a user attempts to log in. It signs in the user using signInWithEmailAndPassword.

  • handleLogout(): This function is called when a user clicks the logout button. It signs out the currently authenticated user using signOut.

• The currentUser state variable holds information about the currently authenticated user. It is initialized as null and updated with the current user object after successful authentication.

Please note that while this app demonstrates the basic functionality of Firebase authentication, it may not adhere to best practices for production-level applications.

Conclusion

We can see that it is fairly quick and easy to integrate Firebase authentication in a web application. Here are some best practices that you can follow to keep your applications secure.

• Secure password storage: Never store passwords in plain text. Use Firebase’s built-in password hashing or external secure storage solutions.

• Implement session management: Use secure cookies or tokens to manage user sessions after successful login.

• Follow recommended practices: Refer to the Firebase documentation and security best practices for robust and secure implementations.