In my last post, 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:
<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.
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.
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.
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 🔥
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!
Oldest comments (0)