0
firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    console.log("Signed in");
    return user.getIdToken(true).then(function(idToken) {
        // Send token to your backend via HTTPS
        // ...
        console.log("Token = " + idToken);
        var bearer = "Bearer " + idToken;
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "dashboard");
        xhr.setRequestHeader("Authorization", bearer);
        return xhr.send();
    }).catch(function(error) {
        // Handle error
        console.log(error);
    });
  }
  else{
    console.log("User signed out");
  }
});

I am doing the following request. In my server I am receiving logs saying it has received the request and it has recognized it as an authenticated user and so on. In fact, to test, I sent it to a simple endpoint like /hello where I simply do res.render("Hello World!") in my express app but even then nothing happens on the page. Why isn't the browser refreshing the page to represent the response from the endpoint?

rgoncalv
  • 5,825
  • 6
  • 34
  • 61

2 Answers2

0

Why isn't the browser refreshing the page to represent the response from the endpoint?

Because the entire point of Ajax is that the response is passed to JavaScript so you can do what you like with it instead of loading a whole new page.

You can access the data with:

xhr.addEventListener("load", function () {
    console.log(this.responseText);
});
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • But I would like to load a new web page, i.e redirect the user to the `/dashboard` endpoint when he press the login button. I tried using form with `action="/dashboard" method="post"` but got no luck setting the authorization header on the server (https://stackoverflow.com/questions/50900309/express-firebase-failing-to-set-header-before-redirect/50900752) – rgoncalv Jun 18 '18 at 12:05
0

What you're now building is essentially a webapp which communicates with an API from JS. Since you're doing logic client-side instead of server-side now, instead of using Express to redirect to another route after login you have to do client-side routing.

This means after you've received a successful response (200) from the API you have to direct the client to the desired route. So you would do something like:

if (user) {
  window.location = "/dashboard";
}

However it seems like you're doing client-side logic by accident. Therefore I would recommend to stop using XMLHttpRequest and just use <form> as you were doing in your other post and continue your efforts to try to get that working. In that way you can continue building a server-rendered ExpressJS app.

Niels de Bruin
  • 705
  • 5
  • 15
  • Niels, do you have any idea how could I pass the authorization header before the redirect? And more specifically, since HTTP and the server (express) is stateless, how do I make sure every request from now on (after user login) has the authorization token in the header? Please take a look at this other post of mine as well: https://stackoverflow.com/questions/50643768/how-to-check-if-user-is-authenticated-in-firebase-and-express-node-js?noredirect=1&lq=1 – rgoncalv Jun 18 '18 at 15:01
  • This is driving me crazy. There's not enough documentation on how to handle Firebase Authentication + Express – rgoncalv Jun 18 '18 at 15:01
  • 1
    You could use sessions so when the client is logged in you save that fact in a cookie. [https://nodewebapps.com/2017/06/18/how-do-nodejs-sessions-work/](This is a good explanation) for using sessions in Express. Look at the part where he sets a property on `req.session`: you can add a boolean like `isLoggedIn` there. – Niels de Bruin Jun 21 '18 at 20:38