The mystery of no flash session variables in Express + Passport auth

Someday I started an application using NodeJS with ExpressJS framework and decided to use passport for authenticate the users. As many other times I wanted to use flash messages so, when user authentication fails, the application shows a message informing about bad credentials. Nothing new on the horizon until…. OMG !!! I can’t see the flash messages !!!

Disclaimer: This is a really stupid history with me as starring.

I like to learn from my errors and because of this I decide to write this post both as a punishment and to ensure I don’t forget it again.

The crime scene

I was working implementing a sign up process, where the user writes its credentials and system creates as a new user or returns an error message like “Sorry, but a username with that email exists” or similar.

Before introduce any code, the flow is as follows:

  • User access the /signup page via GET method.
  • Data is sent to /signup resource via POST method, which is responsible to:
    • Check if data is fine, create a new user and redirected to the /profile page.
    • If a user with the same email exists we redirect again to the /signup page (that is, using the GET method) with a flash message related to bad credentials.

Note: A flash message is a variable stored within a session that is only available once, for the next request. That is if we put a flash variable and renders a page, the flash variable is available but if we render the same (or other) page again the flash variable is not present (it is destroyed).

The approximate code for the previous flow is as follows. First, the next code is responsible to receive the post data and register the user:

The authentication is delegated to passport, which is implemented as:

As you can see, if the user exists we add a flash session message with:  req.flash('signupMessage', 'That email is already taken.'));

On the other side, we show the signup form each time user access to the /signup resource via GET method:

Here we are rendering the signup template passing a message with the value of the signupMessage message. This way if user is redirected to the form, because the signup process fails (that is, the access to the /signup resource via POST), then the error message is shown.

The mystery

The problem was I never get a value for the flash variable. What? Yes, I never get a value for the flash variable.

There was no error, I can’t set and (in the same method) get the flash value, but I can’t get value any value among different resources, that is, between GET /signup and POST /signup.

The solution

After too much time (too many to be recognised publicly) I found my problem was with the way I initialise my sessions. What ? Yes, I said it was my fault due the way I initialise the session. This I did it:

Can you see the problem? Here goes a clue, think I was working with a dev profile, that is, in my local machine accessing resources without HTTPS.

Yes, the problem was to set the  secure: true  and does not access resources via HTTPS.

The express-session middleware documentation says (yes, go to the cookie section):

Please note that secure: true is a recommended option. However, it requires an https-enabled website, i.e., HTTPS is necessary for secure cookies. If secure is set, and you access your site over HTTP, the cookie will not be set. If you have your node.js behind a proxy and are using secure: true, you need to set “trust proxy” in express.

Conclusions

I’m happy to found the problem. Right now, while I write this lines, I’m at a tattoo shop waiting to be tattooed with the previous beautiful sentence.

Reading/writing compressed and not compressed files in Java

Main reason for this post is trying don’t repeat yourself (DRY) because, often, I fall in the recursive need to read and write compressed and not compressed files (mainly JSON and CSV).

Let’s to see first how to read text files. Note I’m working with (relatively small) text files so:

  1. The read methods returns an String with the whole content.
  2. I’m using BufferedReader to read line by line.

Note: there are more than one way to do things. In the entry Best way to read a text file, where you can find many different ways to read a text file depending on your JDK version and the size of the file.

Similarly to write a String to a file:

To read/write compressed files, that is with binary data, we need to work with streams and buffers. So to read a GZIP compressed file and obtain a String:

and similarly to write a String to a GZip compressed file:

References

Next you can find a couple of great links with Java code for various JDK versions:

Why OpenLayers3 does not render my GeoJSON?

OpenLayers3 offers the ol.source.GeoJSON class that allows to read data from a GeoJSON source (an URL, a JavaScript object or a text string).

Maybe you, like me, has spent some time trying to understand why your GeoJSON data is not rendering properly: projection is fine, your GeoJSON is well formed and validated but OpenLayers3 doesn’t return any features and so nothing is rendered in the map.

What is the problem?

The ol.source.GeoJSON class is a subclass of ol.source.StaticVector that uses an ol.format.GeoJSON instance to read content:

A source class, by definition, acts as a source of features for a vector layers, that is, it is like a container of features. Because of this, the ol.source.GeoJSON source is limited to read GeoJSON features and not geometries. So next GeoJSON will be ignored by OpenLayers3 (really if you use de debug version you will see an assertion message):

While the next is a valid GeoJSON suitable to be read by the source:

 That means we can’t read GeoJSON geometries?

Absolutely no, simply means source classes follows the source concept, and that means, work with features.

The ol.format.GeoJSON format class allows to read and write features and geometries. To read a GeoJSON file composed of geometries we need to read the geometries and, manually, create a feature for each one. For example:

How the JavaScript heatmap implementation works?

A heatmap is a powerful way to visualise data. Given a matrix of data each value is represented by a color. The implementation of the heatmap algorithm is expensive in computation terms: for each grid’s pixel you need to compute its colour from a set of known values. As you can thing, it is not feasible to be implement it on the client side because map rendering would be really slow.

But OpenLayers3 comes with a handy class, ol.layer.Heatmap, which allows to render vector data as a heatmap, so the question is: how it is made?

Really, the ol.layer.Heatmap layer uses a smart approximation to the algorithm which produces great results and is really fast. The steps can be summarised as:

  • A gradient of colors is created as a 1×256 pixel size image.
  • Each known value is rendered in a canvas as a grey blurred point using some radius. This produces a canvas where the blurred points can overlap each other and create more obscure zones. Something similar to this.

  • Finally, an image is obtained from the canvas and for each pixels a color is assigned. The color is obtained from the previous 1×256 pixel image obtained the color specified by the grey value (which goes from 0..255).

The coloured image is then rendered in the map canvas, obtaining a nice effect suited to be used for density maps. The ol.layer.Heatmap offers some properties we can use to play better: blur, radius, gradient, shadow and weight. This last can be configured per feature, allowing to assign a level of importance to each feature determining in more or less measure the final color.