Changing the Frontend based on Authentication State
Tags: webdev, firebase, authentication, html
Published: 2020-11-30 02:46:16

In my [last post](https://dev.to/maasak/sign-up-login-logout-users-with-firebase-authentication-3oa9), we went over the basic authentication setup through Firebase for the backend.  Now, let's take that information to change what is displayed on the frontend, based on the authentication state of the user.

To keep this very simple, we'll just focus on how and when to display the buttons for `Login`, `Sign Up` and `Logout`, which we created previously.  

The way we had left things off, all three buttons would always stay visible on the web page, but it doesn't make sense for a user who is not logged in to see a `Logout` button, just as it doesn't make much sense for a logged in user to still see the buttons for `Login` and `Sign Up`.

Let's start off by using simple HTML class names to help us out here.  What we can do is add a class name of `"logged-out"` for the button elements that we would want displayed when a user is logged out, and a class name of `"logged-in"` for the elements we want displayed when a user is logged in.  We'll also add an inline style attribute set to `"display: none;"` by default.  The form in our `index.html` file should look something like this:

```html
<form>
  <input type="email" id="email" />
  <label for="email">Email</label>
  <br>
  <input type="password" id="password" />
  <label for="password">Password</label>
  <br>
  // Below is where we'll add the class names and inline default styling
  <button class="logged-out" style="display: none;" id="signup-btn">Sign Up</button>
  <button class="logged-out" style="display: none;" id="login-btn">Login</button>
  <button class="logged-in" style="display: none;" id="logout-btn">Logout</button>
</form>
```

Now, let's navigate over to our `main.js` file where we are calling the `onAuthStateChanged` Firebase method to check the authentication state of a user.  This function returns a callback of `user`, so let's add in a conditional statement to check whether or not a `user` exists.  

We'll first query the button elements and save the ones with a class of `"logged-out"` to a const `loggedOutBtns` (there's only one right now, but this can become handy if we decide to add other buttons or links that we want for a logged out user), and the ones with a class of `"logged-in"` to a const `loggedInBtns`.

```javascript
const loggedOutBtns = document.querySelectorAll('.logged-out');
const loggedInBtns = document.querySelectorAll('.logged-in');
```

Now, inside the `onAuthStateChanged` function, if there is a `user`, we'll iterate over the button elements, and for each one change the inline style display to `block` for those that we want to be visible, and `none` for the ones that we want to keep hidden (remember, these were set to `none` by default).  If there is no `user`, then we'll just do the opposite.

```javascript
auth.onAuthStateChanged(user => {
  if (user) {
    loggedInBtns.forEach(link => link.style.display = 'block');
    loggedOutBtns.forEach(link => link.style.display = 'none');

    // We can add more functions here to display the data that can be made available to a logged in user

  } else {
    loggedInBtns.forEach(link => link.style.display = 'none');
    loggedOutBtns.forEach(link => link.style.display = 'block');
  }
});
```

## Securing the Data

I know this post is supposed to be about changes to the frontend, but it's important to note that our app at this point is not secure - meaning, someone could still manipulate the HTML through the browser inspector to login and access data that should be hidden from an unauthorized user.  In order to make sure that **only** users have access to read and write data, we need to update our security rules through the Firebase Console. 

We will need to add in a line under the "Rules" tab in the Firebase Console (whichever Firebase database tool you're using) and add in a line to allow users with a `uid` (unique I.D.) that is **not** equal to `null`, to be allowed to read and write data.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b7ckks34orqa60gpfsys.jpg)

Once the changes have been made, we can now click on "Publish" and we're good to go!   d( ^.^ )b

## Helpful Links

🔥 [The Net Ninja's Firebase Auth Tutorial](https://www.youtube.com/watch?v=aN1LnNq4z54&list=PL4cUxeGkcC9jUPIes_B8vRjn1_GaplOPQ) 🔥
*Going to link this here again. The Net Ninja is amazing at breaking down concepts into short videos at a time, with easy-to-follow explanations.  I would highly recommend checking it out!*

[Firebase Authentication Documentation](https://firebase.google.com/docs/auth)