Checking user authentication with Firebase

Question

I'm using Firebase Auth to log users into my site. Upon login, they are redirected to /console.html.

In the header of this file I have

<script type="text/javascript">
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        // User is signed in.
      } else {
        // No user is signed in.
        window.location.href = '/';
      }
    });
  </script>

To check that they are logged in. If not, they are redirected to index.html, which is just a login page. The issue I have is that should someone disable Javascript and go to /console.html, this is ignored and they are able to see whatever is shown on that webpage.

The code used to provide sign in uses FirebaseUI, and is as follows:

  <script type="text/javascript">
    // Initialize the FirebaseUI Widget using Firebase.
    var ui = new firebaseui.auth.AuthUI(firebase.auth());

    var uiConfig = {
      callbacks: {
        signInSuccessWithAuthResult: function(authResult, redirectUrl) {
          // User successfully signed in.
          // Return type determines whether we continue the redirect automatically
          // or whether we leave that to developer to handle.
          return true;
        },
        uiShown: function() {
          // The widget is rendered.
          // Hide the loader.
          document.getElementById('loader').style.display = 'none';
        }
      },
      // Will use popup for IDP Providers sign-in flow instead of the default, redirect.
      signInFlow: 'popup',
      signInSuccessUrl: 'console.html',
      signInOptions: [
        // Leave the lines as is for the providers you want to offer your users.
        firebase.auth.EmailAuthProvider.PROVIDER_ID
      ],
      // Terms of service url.
      tosUrl: '<your-tos-url>',
      // Privacy policy url.
      privacyPolicyUrl: '<your-privacy-policy-url>'
    };

    // The start method will wait until the DOM is loaded.
    ui.start('#firebaseui-auth-container', uiConfig);
  </script>

(Copied from the Firebase Docs).

Answer 1

You should never protect any vital information on the Client Side only, always assume that your Client Side Protection is not there when deciding if the content on your page is safe.

Whatever you show in your HTML File should only be Fetched from the Server/DB/Whatever if certain Security Rules on the Server Side are matched.