login page not working (javascript, firebase)

Question

HELP! I'm not sure what's going on, but my login page isn't working. It simply reloads even though I'm entering valid user/password. I think the problem is it's getting stuck on issues with my data-structure, security-rules, and app.js, but I'm at a loss. I was provided a sinatra/ruby simple api to work with users & groups (just a small project).

here's the site: https://starter-vicks9985.firebaseapp.com/index.html

here's the code:

$.post/("https://starter-vicks9985.firebaseapp.com/main.rb",
        {
        "name": "admin",
        "email": "admin@example.com",
        "password": "secret",
        "admin": true,
        "role-value": 99,
        }
 ), console.log("success");

{
    "rules": {
        ".read": true,
        "users": {
          "$user": {
            //can add a message if authenticated
            ".write": "auth.uid === $user"
          }
        },
        "rooms": {
            "$room": {
                "users": {
                    // can write to the users list only if ADMINISTRATOR
                    "$user": {
                        "write":"newData.parent().child(auth.uid).val() === 99"
                    }
                }
            }
        },
        "messages": {
          "$room": {
            "$message": {
                //can add a message if they are a MEMBER (if there was message/chat capability)
                ".write": "(!data.exists() && newData.exists() && root.child('rooms/' + $room + '/users/' + auth.uid).val() >= 10)"
            }
          }
        }
    }
}

$(document).ready(function() {

/**
*Set initial firebase ref. Use set to write in first admin user.
*/

var ref = new Firebase("https://starter-vicks9985.firebaseio.com/");
ref.set({
    "name": "Admin",
    "email": "admin@example.com",
    "password": "secret",
    "admin": true
});

/** Get email address from loginform, format email, get password
 * Firebase keys cannot have a period (.) in them, so this converts the emails to valid keys
 */
var emailAddress = function emailToKey(emailAddress){
  return btoa(emailAddress);
};
var password = document.getElementById('password');
/**
* Authorize user with email and password, passing in values from form.
*/
ref.authWithPassword({
  email    : emailAddress,
  password : password,
}, function(error, authData) {
  if (error) {
    console.log("Login Failed!", error);
  } else {
    return authData;
  }
});

/**
* If user is logged in (valid), redirect to user profile
*/

ref.onAuth(function(authData) {
    window.open="https://starter-vicks9985.firebaseio.com/userprofile/userprofile.html";

})

});

Answer 1

Like @Kato said, this is a code dump so please consider creating an mcve. Although, first check out my comments below.

The Code You Posted

---

After glancing at your code, I see some errors that I will point out:

1. Your jQuery post syntax is incorrect, and wouldn't work even if it was correct.

• Most importantly, you are making a post request to a Ruby file. Firebase Hosting is not a server, it is hosting for static files.
• See this answer by Frank. He says:

Firebase hosting is a product to serve so-called static application, which consist only of files that the client interprets. Firebase's servers will not interpret any code that you upload. So Firebase hosting is not suited to host your Ruby-on-Rails application.

To quote Firebase hosting's documentation:

We deliver all your static content (html, js, images, etc)

That being said, take a look at the jQuery documentation for $.post().

See my comments on your code:

    $.post/("https://starter-vicks9985.firebaseapp.com/main.rb",
       // ^ What is this '/'?
      {
      "name": "admin",
      "email": "admin@example.com",
      "password": "secret",
      "admin": true,
      "role-value": 99,
      }
    ), console.log("success");
 // ^ You are closing the function call, 'console.log' falls outside of it.

What it should look like:

$.post("https://starter-vicks9985.firebaseapp.com/main.rb", {
  "name": "admin",
  "email": "admin@example.com",
  "password": "secret",
  "admin": true,
  "role-value": 99,
}, function() {
  console.log("success");
});

2. What's even going on with the login functions?

Assuming you fix Uncaught SyntaxError: Unexpected token { in data-structure.js:14...

• If you take a look at the console, you will see Uncaught Error: Firebase.authWithPassword failed: First argument must contain the key "email" with type "string".
• That is because you are passing a function, emailAddress to .authWithPassword().

You declare emailAddress() like so:

var emailAddress = function emailToKey(emailAddress){
  return btoa(emailAddress);
};

So the email parameter in the following is being passed emailAddress(), not a string that is an email address.

ref.authWithPassword({
  email    : emailAddress,
  password : password,
}, function(error, authData) {
  if (error) {
    console.log("Login Failed!", error);
  } else {
    return authData;
  }
});

• Most importantly, all of these login functions are being called immediately after the page loads. Nothing in your code (app.js) waits for, and responds to, the submission of the form.

The Code on Your Website

---

I also went on your page, looked at your source code, and found some more issues.

1. Error in form HTML in index.html

<section class="loginform cf">
  <form id= "login" form name="login" form type= "submit" accept-charset="utf-8">
<!--  extra^space    ^duplicate "form"^         ^again, space -->
  ...
  </form>
</section>

2. Syntax Errors in data-structures.js

Again, you have the same errors here as I described above ('/' and closing parentheses), but the object that you're passing the post is incorrectly formatted

$.post/("https://starter-vicks9985.firebaseapp.com/main.rb",
     {
    "users"  //missing ':' after users
        //the following objects do not have keys - should be {"users":{"someUserKey1":{...},"someUserKey2":{...}}} etc.
        {
        "name": "admin",
        "email": "...",
        "password": "...",
        "admin": true,
        "role-value": 99,
        },
        {
        "name": "aaa",
        ...
        },
        {
        "name": "bbb",
        ...
        }
    },
), console.log("success");

And the same things apply for the post call for "groups".

---

• I hope that provides some clarity.
• I would suggest reading over other answers here on StackOverflow, like:
  • jQuery AJAX submit form
  • jQuery form submit
• And search for more answers like:
  • https://stackoverflow.com/search?q=jquery+form+submit

---

In conclusion, I'd suggest doing some more research and reading documentation :)