A few notes on JWTs and refresh tokens whilst it is fresh in my mind. I am likely to forget in the months between touching the relevant systems.
JWTs
JWTs (JSON Web Tokens) carry information necessary to access a resource directly. They are short-lived. They can be verified without needing to be checked against a database (for example).
Refresh Tokens
Refresh tokens carry information to get new access tokens. They are usually just large strings of random characters.
How does it work?
- The client sends credentials (email, password) to the server.
- If valid, the server creates a JWT and a refresh token and sends them back to the client, along with the JWT expiry time.
- The client stores the JWT in memory and the refresh token in an HttpOnly cookie.
- Before the JWT expires, the refresh token is sent to the server to obtain a new JWT. The refresh token could also be regenerated at this time.
- If at any point we do not have a JWT in memory we can use the refresh token to obtain a new one.
Should the JWT expire without a new one being generated the server we have two options. I am not sure which I prefer.
- Have the server use the refresh token to obtain a new JWT and send that back with whatever payload was expected. The client would check every response for a new JWT and store it.
- Send back a 401 with the message
expired_token, the client requests a new JWT using the refresh token and retries the request.
Of course, if at any point the refresh token is refused, the user is logged out or refused access to the resource.
Best Practises
- Always have an algorithm. The JWT specification allows for an
alg of 'none' which removes the need for a signature. An attacker could strip the signature from the payload and change the algorithm.
- Add auth roles to JWTs, this way the consuming resource can check for permissions just from the token itself.
- Keep expiry times short, refresh tokens should have longer expiry times.
- Store refresh tokens in HTTP-only cookies. No exceptions.
- Stored refresh tokens could be purged after a certain amount of time, though this would require a timestamp be stored with them, not so easy in Redis (for example).
I had a situation where I had three instances of the same component, each mounted with a different value:
<Items type='new' />
<Items type='sold' />
<Items type='hidden' />
The Items component has a method that when called can affect sibling components. For example, if an item marked new is set to hidden, we need to update the current new Items component to remove it and also update the hidden Items component to show it.
Events are an ideal way to achieve this, but how do we dispatch an event to a sibling, rather than a parent-child relationship? Easy:
In the update method emit an event on the root component:
this.$root.$emit('updateItems');
And in the mounted() method of the Items component add the event handler:
mounted() {
this.$root.$on('updateItems', (data) => {
// reload contents
});
}
The correct way to inject HTML formatted data into a Vue component is to use the v-html property on the element:
<p v-html="my_variable"></p>
However, this doesn't support the usual way to use a filter:
<p>\{\{ my_variable | my_filter\}\}</p>
In the above example, the filter would be applied and the HTML escaped. Not what we want. Logic would say put the pipe and the filter in the v-html property, but that fails.
The way to do it is to call the filter explictly as a method on the data:
<p v-html="$options.filters.my_filter(my_variable)"></p>
Another experiment I did way back to create a contextual clock in html/css/js, originally in jQuery but now updated to vanilla javascript. Source available on Github.
The clock itself is a table of cells containing a single character, each with its own ID. Rows have letters and columns numbers.
<table>
<tr>
<td id='a1'>I</td>
<td id='a2'>T</td>
...
With this we can create the words and numbers as strings of IDs separated by commas. Because arrays are zero indexed I'm explicitly setting the hours so the array key matches the hour (eg. [1] = one):
var itis = "a1,a2,a4,a5";
var a = "a7";
var ten = "a9,a10,a11";
...
var hourwords = new Array();
hourwords[1] = "d1,d2,d3";
hourwords[2] = "d4,d5,d6";
...
Before we update the time it's important to clear the board. To do this we loop through all the <td> elements, ensure each has a numeric key and remove the CSS class 'alight':
function clearBoard(){
var alltds = document.getElementsByTagName('td');
for (var index in alltds) {
if(!isNaN(parseInt(index, 10)) && alltds[index].classList.contains('alight')){
alltds[index].classList.remove("alight");
}
}
}
To determine which words to light up we create an empty array to hold the words, then use an instance of the Date object to get numerical representations of the hour and the minutes:
var words = new Array();
var now = new Date();
var hour = now.getHours();
var mins = now.getMinutes();
The following is a little bit of a hacky approach but it avoids complicated if statements. Each case tests which five minute bracket the current minutes falls in and adds the relevant words to our array:
switch(true){
case (mins >= 55): words = [five, to]; hour++; break;
case (mins >= 50): words = [ten, to]; hour++; break;
case (mins >= 45): words = [quarter, to]; hour++; break;
case (mins >= 40): words = [twenty, to]; hour++; break;
case (mins >= 35): words = [twenty, five, to]; hour++; break;
case (mins >= 30): words = [half, past]; break;
case (mins >= 25): words = [twenty, five, past]; break;
case (mins >= 20): words = [twenty, past]; break;
case (mins >= 15): words = [a, quarter, past]; break;
case (mins >= 10): words = [ten, past]; break;
case (mins >= 5): words = [five, past]; break;
case (mins < 5): words = [oclock]; break;
}
Because Javascript's Date object returns hours in twenty-four hour format we have to do a little maths to change things to twelve hour format.
if(hour > 12){
hour = hour - 12;
} else if(hour < 1){
hour = 12;
}
Now it's just a case of pushing the words 'it is' and the current hour to our words array. Looping through each word then splitting each word by the comma to get each cell ID. With this we can set the class to 'alight'.
words.push(itis, hourwords[hour]);
words.forEach((word) => {
word.split(',').forEach((letter) => {
document.getElementById(letter).classList.add("alight");
});
});
To get this all running we fire the showClock() function. To update it we run a function every five seconds to see if the current minutes is a multiple of five and if so, run the showClock() function again.
(function() {
showClock();
setInterval(() => {
if(new Date().getMinutes() % 5 == 0){
showClock();
}
}, 5000);
})();
To make the letters glow apply a text-shadow with a light colour against a dark background:
.alight {
text-shadow: 0px 0px 12px #ccc;
color: #fff;
}