{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/44","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"1. Secure your server Many known attacks are possible only once physically accessing a machine. For this reason, it is best to have the…","fields":{"slug":"/engineering/is-your-database-secured-think-again/"},"html":"

1. Secure your server

\n

Many known attacks are possible only once physically accessing a machine. For this reason, it is best to have the application server and the database server on different machines. If this is not possible, greater care must be taken, Otherwise, by executing remote commands via an application server, an attacker may be able to harm your database even without permissions. For this reason, any service running on the same machine as the database should be granted the lowest possible permission that still allows the service to operate.

\n

\n \n \n
\nDo not forget to install the whole security package: Antivirus and Anti-spam, Firewall, and all of the security packages recommended by your operating system's vendor. Also, do not forget to spend 10 minutes thinking of your server's physical location - in the wrong location, your server can be stolen, flooded, harmed by wild animals or vagrants.

\n

2. Localhost Security or Disable or restrict remote access

\n

Consider whether MySQL will be retrieved from the system or directly accessed from its own server. On the off chance that remote access is utilized, guarantee that just characterized hosts can get to the server. This is commonly done through TCP wrappers, IP tables, or some other firewall programming or hardware accessibility tools.
\nTo confine MySQL from opening a network socket, the accompanying parameter ought to be included in the [mysqld] area of my.cnf or my.ini:

\n

skip-networking

\n

The document is situated in the \"C:\\Program Files\\MySQL\\MySQL Server 5.1\" catalog on the Windows operating system or \"/etc/my.cnf\" or \"/etc/mysql/my.cnf\" on Linux.
\nThis line cripples the start of systems administration in the middle of MySQL startup. It would be ideal if you bear in mind that a local connection can be used set up a connection to the MySQL server.

\n

Another possible solution is to force MySQL to listen only to the localhost by adding the following line in the [mysqld] section of my.cnfbind-address=127.0.0.1
\nYou may not be willing to incapacitate system access to your database server if clients in your organization interface with the server from their machines or the web server introduced on an alternate machine. In that case, the following restrictive grant syntax should be considered:

\n
mysql> GRANT SELECT, INSERT ON mydb.\\* TO 'someuser'@'somehost';
\n

3. Disable the use of LOCAL INFILE

\n

The next change is to disable the use of the \"LOAD DATA LOCAL INFILE\" command, which will help to keep unapproved perusing from neighborhood records. This is particularly vital when new SQL Injection vulnerabilities in PHP applications are found.
\nIn addition, in certain cases, the \"LOCAL INFILE\" command can be used to gain access to other files on the operating system, for instance \"/etc/passwd\", using the following command:

\n
mysql> LOAD DATA LOCAL INFILE '/etc/passwd' INTO TABLE table1
\n

Or even significantly less difficult:

\n
mysql> SELECT load\\_file("/etc/passwd")
\n

To disable the usage of the \"LOCAL INFILE\" command, the following parameter should be added in the [mysqld] section of the MySQL configuration file.

\n
set-variable=local-infile=0
\n

4. Change root username and password, keep them strong.

\n

The default administrator username on the MySQL server is \"root\". Hackers often attempt to gain access to its permissions. To make this task harder, rename \"root\" to something else and provide it with a long, complex alphanumeric password.

\n

To rename the administrator’s username, use the rename command in the MySQL console:

\n
mysql> RENAME USER root TO new\\_user;
\n

The MySQL \"RENAME USER\" command first appeared in MySQL version 5.0.2. If you use an older version of MySQL, you can use other commands to rename a user:

\n
mysql> use mysql;\n\nmysql> update user set user="new\\_user" where user="root";\n\nmysql> flush privileges;
\n

To change a user’s password, use the following command-line command:

\n
mysql> SET PASSWORD FOR 'username'@'%hostname' = PASSWORD('newpass');
\n

It is also possible to change the password using the \"mysqladmin\" utility:

\n
shell> mysqladmin -u username -p password newpass
\n

5. Remove the \"Test\" database

\n

MySQL comes with a \"test\" database intended as a test space. It can be accessed by the anonymous user, and is therefore used by numerous attacks.
\nTo remove this database, use the drop command as follows:

\n
mysql> drop database test;
\n

Or use the \"mysqladmin\" command:

\n
shell> mysqladmin -u username -p drop test
\n

6. Remove Anonymous and outdated accounts

\n

The MySQL database comes with some anonymous users with blank passwords. As a result, anyone can connect to the database to check whether this is the case, do the following:

\n
mysql> select \\* from mysql.user where user="";
\n

In a secure system, no lines should be echoed back. Another way to do the same:

\n
mysql> SHOW GRANTS FOR ''@'localhost';\n\nmysql> SHOW GRANTS FOR ''@'myhost';
\n

If the grants exist, then anybody can access the database and at least use the default database\"test\". Check this with:

\n
shell> mysql -u blablabla
\n

To remove the account, execute the following command:

\n
mysql> DROP USER "";
\n

The MySQL \"DROP USER\" command is supported starting with MySQL version 5.0. If you use an older version of MySQL, you can remove the account as follows:

\n
mysql> use mysql;\n\nmysql> DELETE FROM user WHERE user="";\n\nmysql> flush privileges;
\n

7. Increase security with Role Based Access Control

\n

A very common database security recommendation is to lower the permissions given to various parties. MySQL is no different. Typically, when developers work, they use the system's maximum permission and give less consideration to permission principles than we might expect. This practice can expose the database to significant risk.
\n* Any new MySQL 5.x installation already installed using the correct security measures.
\nTo protect your database, make sure that the file directory in which the MySQL database is actually stored is owned by the user \"mysql\" and the group \"mysql\".

\n
shell>ls -l /var/lib/mysql
\n

In addition, ensure that only the user \"mysql\" and \"root\" have access to the directory /var/lib/mysql.
\nThe mysql binaries, which reside under the /usr/bin/ directory, should be owned by \"root\" or the specific system \"mysql\" user. Other users should not have write access to these files.

\n
shell>ls -l /usr/bin/my\\*
\n

8. Keep a check on database privileges

\n

Operating system permissions were fixed in the preceding section. Now let’s talk about database permissions. In most cases, there is an administrator user (the renamed \"root\") and one or more actual users who coexist in the database. Usually, the \"root\" has nothing to do with the data in the database; instead, it is used to maintain the server and its tables, to give and revoke permissions, etc.
\nOn the other hand, some user ids are used to access the data, such as the user id assigned to the web server to execute \"select\\update\\insert\\delete\" queries and to execute stored procedures. In most cases, no other users are necessary; however, only you, as a system administrator can really know your application’s needs.

\n

Only administrator accounts needs to be granted the SUPER / PROCESS /FILE privileges and access to the mysql database. Usually, it is a good idea to lower the administrator’s permissions for accessing the data.

\n

Review the privileges of the rest of the users and ensure that these are set appropriately. This can be done using the following steps.

\n
mysql> use mysql;
\n

[Identify users]

\n
mysql> select \\* from users;
\n

[List grants of all users]

\n
mysql> show grants for ‘root’@’localhost’;
\n

The above statement has to be executed for each user ! Note that only users who really need root privileges should be granted them.

\n

Another interesting privilege is \"SHOW DATABASES\". By default, the command can be used by everyone having access to the MySQL prompt. They can use it to gather information (e.g., getting database names) before attacking the database by, for instance, stealing the data. To prevent this, it is recommended that you follow the procedures described below.

\n\n

To disable the usage of the \"SHOW DATABASES\" command, the following parameter should be added in the [mysqld] section of the /etc/my.cnf:

\n

[mysqld]

\n
skip-show-database
\n

9. Enable Logging

\n

If your database server does not execute many queries, it is recommended that you enable transaction logging, by adding the following line to [mysqld] section of the /etc/my.cnf file:

\n

[mysqld]

\n
log =/var/log/mylogfile
\n

This is not recommended for heavy production MySQL servers because it causes high overhead on the server.
\nIn addition, verify that only the \"root\" and \"mysql\" ids have access to these logfiles (at least write access).

\n

Error logEnsure only \"root\" and \"mysql\" have access to the log file \"hostname.err\". The file is stored in the mysql data directory. This file contains very sensitive information such as passwords, addresses, table names, stored procedure names and code parts. It can be used for information gathering, and in some cases, can provide the attacker with the information needed to exploit the database, the machine on which the database is installed, or the data inside it.

\n

MySQL logEnsure only \"root\" and \"mysql\" have access to the logfile \"logfile XY\". The file is stored in the mysql data directory.

\n

10. Change the root directory

\n

A chroot on UNIX {operating system} operating systems is an operation that changes the apparent disk root directory for the present running method and its children. A program that's re-rooted to a different directory cannot access or name files outside that directory, and therefore the directory is named a \"chroot jail\" or (less commonly) a \"chroot prison\".

\n

By using the chroot environment, the write access of the mySQL processes (and child processes) can be limited, increasing the security of the server.

\n

Ensure that a dedicated directory exists for the chrooted environment. This should be something like: /chroot/mysql In addition, to make the use of the database administrative tools convenient, the following parameter should be changed in the [client] section of MySQL configuration file:

\n

[client]

\n
socket = /chroot/mysql/tmp/mysql.sock
\n

Thanks to that line of code, there will be no need to supply the mysql, mysqladmin, mysqldump etc. commands with the --socket=/chroot/mysql/tmp/mysql.sock parameter every time these tools are run.

\n

11. Delete old logs regularly

\n

During the installation procedures, there's plenty of sensitive data which will assist unwelcome users to assault a database. This data is kept within the server’s history and might be terribly useful if one thing goes wrong during the installation. By analyzing the history files, administrators can figure out what has gone wrong and probably fix things up. However, these files are not needed after installation is complete.
\nWe should remove the content of the MySQL history file (~/.mysql_history), wherever all dead SQL commands are kept (especially passwords, that are kept as plain text):

\n
cat /dev/null > ~/.mysql\\_history
\n

In conclusion,we should emphasize on database security. However it should be the first thing for any individual or a company.

\n","frontmatter":{"date":"February 23, 2016","updated_date":null,"description":null,"title":"Is Your Database Secured? Think Again","tags":["Database","Security"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/ceccb1d10402251d7706ea8d19050b15/403a4/database_secure-300x300.webp","srcSet":"/static/ceccb1d10402251d7706ea8d19050b15/61e93/database_secure-300x300.webp 200w,\n/static/ceccb1d10402251d7706ea8d19050b15/403a4/database_secure-300x300.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Kunal","github":"SuperKunal","avatar":null}}}},{"node":{"excerpt":"Manipulating collections like arrays and objects can be a hassle with vanilla JS. Thankfully there are libraries like Underscore which offer…","fields":{"slug":"/engineering/be-more-manipulative-with-underscore-js/"},"html":"

Manipulating collections like arrays and objects can be a hassle with vanilla JS. Thankfully there are libraries like Underscore which offer some extremely useful low level utility functions.

\n

Underscore JS provides much of the array/collection/object manipulating functionality similar to what you may have seen in other languages such as Ruby. As for calling the methods if you're familiar with JQuery, Underscore is identical except instead of \"$\" we use the library's namesake \"_\" to access the methods.

\n

Underscore has over 100 functions that can be used on collections, arrays, objects and functions (you read that right, function functions). I'm going to be discussing a few of the functions that work on collections, but definitely check out what else Underscore has to offer.

\n

Once you know how to re-create the same output with Underscore syntax, you'll never want to go back to plain old JS and using nested for loops. One of the most helpful tools Underscore provides for accomplishing this is...

\n

_.each

\n

The _each method does exactly what it sounds like. It works on collections (arrays or objects), and will iterate over each element in the collection invoking the function you specified with 3 arguments (value, index, list) with index being replaced by key if used on an object. It's also worth noting _.each returns the list if you want chain some more manipulation after calling _.each.

\n

Here's a quick example showing how it can be used and what's available to you when you call it.

\n
var someArray = ["a", "b", "c"];\n \n_.each(someArray, function (element, index, list) {\n    console.log("value: " + element + " index: " + index + " list: " + list)\n});\n \n// outputs\nvalue: a index: 0 list: a,b,c\nvalue: b index: 1 list: a,b,c\nvalue: c index: 2 list: a,b,c
\n

With that out of the way, let's think about what this means in terms of cleaning up our code. To do the above normally we would write a little for loop like this.

\n
for ( var i = 0; i < someArray.length; i++) {\n    console.log("value: " + someArray[i] + " index: " + i + " list: " + someArray);\n}
\n

Admittedly these two aren't all that different, but let's imagine we have a function defined elsewhere that will deal with handling the arguments passed in on each iteration. We can replace that same functionality with a significantly less verbose solution.

\n
_.each(someArray, doStuff);
\n

To quote Antoine de Saint Exupéry: \"It seems that perfection is attained not when there is nothing more to add, but when there is nothing more to remove.\" While it may not be perfection, there are certainly arguments to be made about performance, I think you would be hard pressed to find anything further simplify this code.

\n

_.map

\n

While _.each will return the original list you input, _.map will allow you to manipulate or otherwise transform the input as you please and then returns the new array. Map needs a minimum of 2 arguments, first the collection and then the function to be executed on each iteratee and also accepts a third argument which dictates the context for the iterating function.

\n
var numbersObject = {1:1, 2:4, 3:9};\n \nvar productArray = _.map(numbersObject, function(value, key) {\n    return value * key;\n});\n \n//proudctArray is now\n[1, 8, 27]
\n

Before you go writing some functions to pass as an argument to _.map be sure to take a peek at the other methods available in Underscore. Map is a little bit like having the Lego blocks to build whatever you want, but if you already have a pre-packaged Batcave available, it might not be the best use of your time building it from scratch.

\n

_.pluck

\n

To illustrate my childhood toy analogy let's talk about _.pluck. Pluck is basically just a refined version of _.map made for a specific use case. That's not to say there aren't ways of combining the two to achieve something a little more complex, but if standard _.pluck behaviour is all you're after then don't go re-inventing the wheel.

\n

Often with data objects we're interested in the values of a specific key, for example let's say we have an array of movies.

\n
var movies = [\n    {title: "Dracula", genre: "Horror", star: "Nosferatu"},\n    {title: "Cast Away", genre: "Drama", star: "Wilson"},\n    {title: "Airplane", genre: "Comedy", star: "Leslie Nielsen"}\n];
\n

Now we want to just have an array of the titles of these movies.

\n
var titlesArray = _.pluck(movies, 'title');\n \n//titlesArray is now\n["Dracula", "Cast Away", "Airplane"]
\n

Not much else to say about it, it works on collections and is extremely handy for a very common task.

\n

_.filter

\n

Another example of a more refined _.map function that comes in handy often enough. Aptly named this method will return an array of only the things that make it through your test.

\n
var numbers = [1,33,6,24,8,21,11,22];\n \nvar lessThanTen = _.filter(numbers, function(number) {\n    return number < 10;\n});\n \n//lessThanTen is now\n[1, 6, 8]
\n

Works on collections and kitchen sink faucets.

\n

_.conclusion

\n

Just kidding there's no _.conclusion method.

\n

I hope by now that you get the idea that if what you need to do isn't already a method, Underscore's _.map is a powerful tool for accomplishing whatever obscure collection manipulation your heart desires.

\n

So get out there, take a look through Underscore JS and start writing less obfuscated (nested) for loops with the help of _.each.

\n","frontmatter":{"date":"February 16, 2016","updated_date":null,"description":null,"title":"Be More Manipulative with Underscore JS","tags":["JavaScript","UnderscoreJs"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/a0908f5af6a6436a7da16f3b91888bed/58556/underscore.webp","srcSet":"/static/a0908f5af6a6436a7da16f3b91888bed/61e93/underscore.webp 200w,\n/static/a0908f5af6a6436a7da16f3b91888bed/1f5c5/underscore.webp 400w,\n/static/a0908f5af6a6436a7da16f3b91888bed/58556/underscore.webp 800w,\n/static/a0908f5af6a6436a7da16f3b91888bed/99238/underscore.webp 1200w,\n/static/a0908f5af6a6436a7da16f3b91888bed/135cd/underscore.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Zakary Hughes","github":null,"avatar":null}}}},{"node":{"excerpt":"LinkedIn has recently revamped their API systems and added many new restrictions. We will go through some examples on how you can utilize…","fields":{"slug":"/engineering/extended-linkedin-api-usage/"},"html":"

LinkedIn has recently revamped their API systems and added many new restrictions. We will go through some examples on how you can utilize the LinkedIn Javascript API in order to setup some useful features that comply with LinkedIn's new terms and conditions and use cases.

\n

Getting Your Site Ready

\n

The first step will be setting up your login button which will prompt the user to authenticate with their LinkedIn credentials. We have provided a guide to getting a basic login button setup here. The linked guide will get you as far as setting up a button that allows your users to login with LinkedIn and display a personalized welcome message. Below we will go over extending this functionality to allow you to handle more complex features for your users after logging in.

\n

Event Handling

\n

You can control and initiate specific behavior after a user logs in. You can assign these event handlers by first setting the function that will be used to initialize the events. This will trigger the event designation after the LinkedIn scripts have been loaded on your page. Update the LinkedIn initialization script:

\n
<!--\napi_key: \nauthorize: true\nonLoad: onLinkedInLoad\n-->
\n

This will trigger the onLinkedInLoad function after the Linkedin scripts have been loaded.

\n

You can now assign some LinkedIn Event handlers in this function to control the behavior that will occur for different LinkedIn user actions. Let's begin by assigning the behavior that occurs after a user logs in.

\n
<!--\nfunction onLinkedInLoad() {\n    IN.Event.on(IN, "auth", getProfileData);\n}\n-->
\n

The above event will trigger when a user authorizes and will call the getProfileData function. We can add another event assignment for the user logging out.

\n
<!--\nfunction onLinkedInLoad() {\n    IN.Event.on(IN, "auth", getProfileData);\n    IN.Event.on(IN, "logout", sendGoodByeMessage);\n}\n-->
\n

The above logout event will trigger the sendGoodByeMessage when the user logs out. Now that we have the basic event handling in place we can handle the specific behavior for users logging in.

\n

Data Retrieval and API access

\n

Once a user has logged in and triggered the getProfileData event we can pull in their user profile using the LinkedIn Raw data API handlers, these allow you to access any of LinkedIn's API endpoints and get data back. We will begin with a quick check to make sure the user is still authorized and then call the Raw API to pull in the people endpoint for the current user:

\n
<!--\nfunction getProfileData() {\n    if(IN.User.isAuthorized())\n        IN.API.Raw("/people/~").result(onSuccess).error(onError);\n}\n-->
\n

If the data is successfully returned it will call the onSuccess function and if not it will call onError.

\n

These functions will both include a JSON formatted response that can be used to display their profile data or log a message:

\n
<!--\nfunction onSuccess(data) {\n    console.log(data);\n}\nfunction onError(error) {\n    console.log(error);\n}\n-->
\n

You can test the response formats for most of the LinkedIn APIs on LinkedIns API console You can access any of the API endpoints after successful login via the raw API handler and retrieve data per your requirements.

\n

User Management

\n

Before making any API requests you should verify that your user has a current active session. User sessions are valid for 30 minutes by default. These sessions can be extended using the following call:

\n
<!--\nIN.User.refresh()\n-->
\n

The above call can be used to refresh the expiration time for the user but repeated calls may cause your app to be blocked so this should be used sparingly.

\n

You can provide the ability for your users to logout by setting up a button or link that will trigger the following function call:

\n
<!--\nIN.User.logout(sendGoodByeMessage);\n-->
\n

This will trigger the same function that was assigned to the logout event.

\n","frontmatter":{"date":"February 09, 2016","updated_date":null,"description":null,"title":"Extended LinkedIn API Usage","tags":["LinkedIn","SocialLogin"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/dacf65e1b50df78fc0c763813d3cb64f/403a4/linkedin-feat-img.webp","srcSet":"/static/dacf65e1b50df78fc0c763813d3cb64f/61e93/linkedin-feat-img.webp 200w,\n/static/dacf65e1b50df78fc0c763813d3cb64f/403a4/linkedin-feat-img.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Karl Wittig","github":null,"avatar":null}}}},{"node":{"excerpt":"If you're not familiar with Angular I'd highly recommend heading over to the Angular JS resource site and checking out what all the fuss is…","fields":{"slug":"/engineering/angular-roster-tutorial/"},"html":"

If you're not familiar with Angular I'd highly recommend heading over to the Angular JS resource site and checking out what all the fuss is about. Once you've got a basic understanding of Angular and how to get it up and running this tutorial will show you some of the basic, but awesome features supported by Angular.

\n

Today I'm going to be building out a roster for my fantasy football team. If that's not your cup of tea then by all means feel free to substitute the content for whatever floats your boat.

\n

Players Array

\n

There might not be an I in team, but there are certainly players, so before we do anything in the HTML we'll have to make all the necessary components in the controller. First up let's make an array of all the players we want to include (initially at least) on our team.

\n

Every player is a special little snowflake, and our player objects should reflect that! With this in mind we will make each player an object with his or her own properties like: name, position and team. Here's an example of what our array might look like.

\n
$scope.players = [\n    {name: "Tom Brady", position: "QB", team: "Patriots"},\n    {name: "Tony Romo", position: "QB", team: "Cowboys"},\n    {name: "Peyton Manning", position: "QB", team: "Broncos"},\n    {name: "Rob Gronkowsi", position: "TE", team: "Patriots"},\n    {name: "JJ Watt", position: "DE", team: "Texans"},\n    {name: "Lavonte David", position: "LB", team: "Buccaneers"}\n];
\n

Repetitive department of repetition

\n

Now that we have our roster we can go back to the HTML and make use of Angular's ng-repeat directive. We put the ng-repeat on the element we want to be repeated, keeping in mind that all of its children will also get repeated.

\n
<!--\n    {{player.name}} - {{player.position}}\n-->
\n

Okay so if you're new to Angular there's a couple of things going on here. First like I said we've got the ng-repeat placed on the li (the thing we want repeated) which will create a new li for each player in the players array we defined earlier in the controller. Next up the data binding is being implemented here with each player name as well as position being used as the values for the list item.

\n

While we're on the topic of data binding, let's throw this in just for fun. Pretty simple, it will calculate the length of your roster and keep it updated as any changes are made.

\n
<!--You have {{players.length}} on your roster.-->
\n

Easiest Search Functionality of Your Life

\n

Next let's add some search functionality to our list. Sounds like a lot of work, probably have to iterate over the array elements, match them to the argument being passed in and... just kidding. With Angular it's a breeze.

\n
<!--\n...\n{{player.name}} - {{player.position}}\n-->
\n

Donezo.

\n

The shape of Italy

\n

Let's imagine one of our fantasy players isn't performing too well (ahem Peyton...) and we want to give him the boot (get it now?).

\n

We'll add a little delete button beside each of our players' names, and since we're doing it for each of them guess how we're going to implement it? That's right with ng-repeat we already have on the list items!

\n
<!--{{player.name}} - {{player.position}}\n    ×\n-->
\n

I'll also tack on a little button with an \"x\" as the content (as a side note, when you want to do this use × instead of \"x\" it looks much nicer). Then we'll attach an ng-click with a delete function where we pass in $index.

\n

$index is a neat little feature available with certain Angular directives, and ng-repeat is one of them. It will be assigned the index value (starting at 0) of the position it holds within the array being used with the ng-repeat.

\n

That's all we need in the HTML, so now back in the controller we create a $scope function by the same name used in the HTML and give it a parameter of index. The body of the function is a single line which makes use of the array.splice method where we pass in the index of the item we want to delete, and then 1 to denote that it's only 1 item we want removed.

\n
$scope.delete = function (index) {\n    $scope.players.splice(index, 1);\n};
\n

Acquisitions

\n

Now since we just cut someone from the team, we've gotta find their replacement. Let's chuck a few text inputs in there, give them all a respective ng-model to bind with their value and finally another button with an ng-click but this time calling an addPlayer function.

\n
<!--\n    Name:\n    \n    Position:\n    \n    Team:\n    \n    Add Player\n-->
\n

This one's a lil' different from delete, but still super simple. Working from the inside out, we will create a new player object which gets the name, position and team properties from the ng-models on the HTML and then push that object to the players array. After that we clear those values just for some good housekeeping practice.

\n
$scope.add = function () {\n    $scope.players.push({\n        name: $scope.new_name,\n        position: $scope.new_position,\n        team: $scope.new_team\n    });\n    $scope.new_name = "";\n    $scope.new_position = "";\n    $scope.new_team = "";\n};
\n

Nothing Lasts Forever

\n

Now since this was all done purely on the front end, and didn't make use of cookies, localstorage, or sessionstorage none of this will persist (aka be saved). For that kind of support you'd need some sort of back end, which is beyond the scope of this article.

\n

This was a very rudimentary example of what's possible with Angular JS, so if this interested you at all please dig a little deeper and play around with Angular some more!

\n

That brings us to the end of this tutorial. Feel free to check out the finished (yet unstyled) product here on Codepen

\n","frontmatter":{"date":"January 12, 2016","updated_date":null,"description":null,"title":"Angular Roster Tutorial","tags":["Engineering","AngularJS","PlayersArray","Array","Search"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/3fd5bbf61c136944264b54c576652f32/58556/roster-angularjs-1.webp","srcSet":"/static/3fd5bbf61c136944264b54c576652f32/61e93/roster-angularjs-1.webp 200w,\n/static/3fd5bbf61c136944264b54c576652f32/1f5c5/roster-angularjs-1.webp 400w,\n/static/3fd5bbf61c136944264b54c576652f32/58556/roster-angularjs-1.webp 800w,\n/static/3fd5bbf61c136944264b54c576652f32/1fb14/roster-angularjs-1.webp 960w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Zakary Hughes","github":null,"avatar":null}}}},{"node":{"excerpt":"As a front-end developer, if you haven't heard about Promise in Javascript, well ... At least you have heard about it now! And it is truly…","fields":{"slug":"/engineering/how-to-promise/"},"html":"

As a front-end developer, if you haven't heard about Promise in Javascript, well ...
\nAt least you have heard about it now! And it is truly amazing.

\n

Promise is a the standard way of handling asynchronous operations, such as calling APIs. It is comprehensive but elegant, espeically with a series of Async operations and handling the errors from them.
\nIt has been widely supported by mordern browsers. But of course IE is not one of the modern ones, so do not forget to find a promise-polyfill for your IE users.

\n

Can I use Promise
\nPolyfill for IE

\n

In this blog I will cover the basic usages for Promise, let's get started.
\nA promise function would look like this

\n
new Promise(function (resolve, reject) {\n    var data = asyncCall(); // could be API calls\n    if( data ) {\n        resolve(data); // success\n    } else {\n        reject(data); // fail\n    }\n});
\n

First we need to declare it is a `new` Promise, inside you can put your async calls and let promise know how to deal with the response with `resolve` and `reject`. You can treat `resolve` and `reject` as two callback functions, `resolve` when you are confirmed that you have got what you expect, and reject if anything bad happened.

\n

Here is a brief example, Fiddle it here

\n
var aync1 = function() {\n    return new Promise(function(resolve, reject){\n        // Wait 1s and alert\n        setTimeout(function(){\n            resolve("Hello Promise");\n        }, 1000);\n    });\n}\n\naync1().then(function (resp) {\n    alert(resp);\n});
\n

If something is going wrong, you want to catch and handle it, Fiddle it here.

\n
var aync2 = function() {\n    return new Promise(function(resolve, reject){\n        // Wait 2s and alert\n        setTimeout(function(){\n            // pretend we got something wrong.\n            reject("error");\n        }, 1000);\n    });\n}\n \naync2().then(function (resp) {\n    alert("This will not be called");\n}).catch(function(err){\n    alert(err);\n});
\n

Here I have quickly demonstrated the basic usage of Promise, you may think \"Oh callbacks can do the same thing as well\". You are not wrong, but in next blog I will show the real power of Promise, thanks for reading.

\n","frontmatter":{"date":"January 05, 2016","updated_date":null,"description":null,"title":"How to Promise","tags":["JavaScript","Promise"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/0391ea10a372dcec2e9e04aa7ed59ec0/403a4/promise-300x300.webp","srcSet":"/static/0391ea10a372dcec2e9e04aa7ed59ec0/61e93/promise-300x300.webp 200w,\n/static/0391ea10a372dcec2e9e04aa7ed59ec0/403a4/promise-300x300.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Solomon Yu","github":null,"avatar":null}}}},{"node":{"excerpt":"When you work for a tech company in an office capacity, it feels like everyone around you is speaking another language. Which they are, most…","fields":{"slug":"/engineering/learning-how-to-code/"},"html":"

When you work for a tech company in an office capacity, it feels like everyone around you is speaking another language. Which they are, most of their work exists in coding language. To feel more relevant, I signed up on codecademy.com and started working on their beginner courses (for free! you should try it!).

\n

Here are some things I have learned about coding:

\n
    \n
  1. There are many different ways to code. Not every website or app is made using the same terms or patterns, programmers and developers have options for how they want to format their content, and how they want to communicate with their computer.
    2. \n
  2. Coding is more about seeing what you want in your head than about math. Deciding exactly what you want and communicating it is the big struggle. Having your website/app be capable of computing things is optional, but the layout is mandatory. (Not to mention the most noticeable aspect of your site).
    3. \n
  3. Code is like a language. The words and punctuation must be learned for each coding language. Though they can be linked to English words (like “p” for a new paragraph), you have to be able to pull them up quick in your mind. As with any language, repetition is key to recognition.
    4. \n
  4. You don’t have to start from scratch (but you can). There are frameworks available, like Bootstrap, which have some existing templates you can draw from. This helps you when you are constructing your site, so that you can set up your layout quicker, and have more time to work on your content.
    5. \n
  5. \n

    There are some areas of knowledge that you don’t need to memorize, but having an understanding of what they do will be helpful in coding:

    \n
      \n
    1. The hexi-decimal system (and how it relates to color)
      2. \n
    2. Binary code
      3. \n
    3. ASCII
      4. \n
    \n
    6. \n
  6. Once you learn some of the basics, websites you see every day will start to seem simpler. You will be able to pick out some of their elements, and if you look at their bare code, you will recognize how they come together.
    7. \n
  7. The world of coders is large and easy to access. If you have questions, there is someone online who is willing and eager to answer. This is not a skill that anyone was born with, and due to new languages etc, everyone is still learning.
    8. \n
\n

I hope that this list has contributed to your knowledge, and would encourage you to check online for available resources to expand (or begin) your abilities in coding.

\n","frontmatter":{"date":"December 29, 2015","updated_date":null,"description":null,"title":"Learning How to Code","tags":["Learning","Coding","Learning resources"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/dcadc401834dd794ad2d788dd16ff014/403a4/begin-code-300x300.webp","srcSet":"/static/dcadc401834dd794ad2d788dd16ff014/61e93/begin-code-300x300.webp 200w,\n/static/dcadc401834dd794ad2d788dd16ff014/403a4/begin-code-300x300.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Carling","github":null,"avatar":null}}}}]},"markdownRemark":{"excerpt":"Introduction Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT…","fields":{"slug":"/engineering/how-to-integrate-jwt/"},"html":"

Introduction

\n

Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT, or JSON Web Tokens, a compact, stateless method for securely transmitting user identity and session data across services.

\n

With JWT token authentication, identity information is embedded in a signed token, allowing you to maintain user sessions without server-side storage. This approach is highly scalable and ideal for modern architectures like SPAs, mobile apps, and microservices.

\n

In this blog, we’ll walk you through what is JWT, why use it, and how to implement JWT authentication using LoginRadius.

\n

You’ll learn what JWT is, why it’s effective, and how it works in real-world applications. We'll cover both integration methods (IDX and Direct API), generating your signing key, managing sessions, storing the JWT token securely, and applying best practices throughout.

\n

Whether you're a developer, product manager, or IAM architect, this guide offers a complete foundation for implementing JWT token authentication into your application stack.

\n

What is JWT?

\n

JSON Web Token (JWT) is an open standard (RFC 7519) used to transmit information securely between parties as a JSON object. It’s compact, self-contained, and digitally signed, making it a reliable format for authentication and authorization across modern applications.

\n

A JWT consists of three parts:

\n
    \n
  1. Header – Contains metadata like the type of token and signing algorithm (e.g., HS256).
    2. \n
  2. Payload – Stores the actual data or “claims,” such as user ID, roles, and token expiry.
    3. \n
  3. Signature – A cryptographic hash that ensures the token hasn’t been tampered with.
    4. \n
\n

Example of a token structure:

\n

<base64Header>.<base64Payload>.<signature>

\n

Why Use JWT?

\n\n

How JWT Works?

\n

\"Flowchart

\n
    \n
  1. A user logs in with credentials.
    2. \n
  2. Your app (or identity provider like LoginRadius) issues a signed JWT.
    3. \n
  3. The client stores the token and sends it with each request (usually in the Authorization header).
    4. \n
  4. The server validates the token’s signature and claims.
    5. \n
  5. If valid, access is granted — without any session stored on the backend.
    6. \n
\n

JWT simplifies identity verification, especially when you're building apps that talk to APIs or need to scale without centralized session storage.

\n

JWT Authentication with LoginRadius: Overview

\n

LoginRadius provides robust support for JWT (JSON Web Token) authentication, which allows for flexible and secure access control across different digital platforms. Whether you're building a fully custom identity flow or using a pre-built interface, the platform supports various integration approaches depending on your architecture.

\n

If you're looking to understand how to implement JWT token authentication effectively, LoginRadius offers two primary implementation models that cater to different levels of customization and control:

\n

1. IDX Implementation – JWT through a Hosted Login Page

\n

The IDX-hosted login approach enables secure, standards-compliant, JWT-based authentication without requiring you to build a custom login interface. This is a strategic option for fast, compliant, and user-friendly deployments.

\n\n

Configuration Steps:

\n
    \n
  1. Enable JWT Login
    2. \n
  2. Go to authentication configuration settings and enable JWT Login in the Admin Console.
    3. \n
\n

\"Screenshot

\n
    \n
  1. Specify your signing algorithm and expiry policy, and define your JWT Secret Key.
    2. \n
  2. Input a secure JWT signing key.
    3. \n
  3. Specify token expiry duration (e.g., 15–60 minutes)
    4. \n
  4. Select the desired algorithm —HS256 for symmetric signing (same key signs and verifies)
    5. \n
  5. RS256 for asymmetric signing, where LoginRadius securely stores the private key used to sign the JWT.
    6. \n
  6. Your app or backend service uses the public key to validate the token signature.
    7. \n
  7. LoginRadius provides a JWKS (JSON Web Key Set) endpoint to dynamically fetch and rotate public keys, ensuring trust without key exposure.
    8. \n
  8. Update IDX Template for Callback
    9. \n
  9. Modify your IDX login page template to retrieve the JWT post-login. You can access the token via redirect URL parameters or secure JavaScript callbacks.
    10. \n
\n

Example Response:

\n

{

\n

\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR...\",

\n

\"expires_in\": 1800

\n

}

\n

This integration approach works best for all teams that want effective identity workflows without the complexity of building proprietary login screens, something that is crucial for customer portals, onboarding of mobile applications, and even managing access for business partners.

\n

2. Direct API Implementation – Self Managed Login

\n

If you’re building a custom login UI or working in a headless environment, LoginRadius lets you generate and handle JWTs directly through its Authentication APIs. Here’s how you can programmatically perform token authentication using the classic method:

\n\n

Configuration Steps:

\n

Step 1: Authenticate via API:

\n\n

Include the user’s credentials (email + password) in the request body.

\n

Step 2: Get JWT in Response

\n\n

{

\n

\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...\",

\n

\"expires_in\": 3600

\n

}

\n

Step 3: JWT Decoding and Validation

\n\n

Step 4: Set Custom Claims (Optional)

\n

With LoginRadius, it is possible to customize the payload to include user roles and/or any additional metadata. You can set custom JWT claims on the Admin Console.

\n

With this method, you have complete customization over login flows while using LoginRadius to issue signed JWTs for user session management.

\n

NOTE- With either method, LoginRadius ensures that JWTs are securely signed, optionally short-lived, and compatible with standard token validation libraries, making integration seamless for everyone.

\n

To get started with JWT implementation, you can read our complete developer documentation.

\n

Hosted Login vs Direct API

\n

\"Illustration

\n

What is Session Management and How It Works with JWT

\n

Session management is how your app keeps track of a user after they log in so they don’t have to prove who they are with every request.

\n

In traditional apps, sessions are stored on the server using session IDs. Every time a request comes in, the server checks that session ID to verify the user.

\n

In modern apps, especially SPAs and APIs, JWTs are used to manage sessions without needing server-side storage; this is called stateless session management. The token itself carries the user’s identity, roles, and expiration details. As long as the token is valid, the user stays logged in.

\n

Good session management ensures:

\n\n

How LoginRadius Handles Session Management with JWT:

\n
    \n
  1. \n

    User Logs In

    \n\n
    2. \n
  2. \n

    Client Stores the Token

    \n\n
    3. \n
  3. \n

    Access Token Expiry

    \n\n
    4. \n
  4. \n

    Token Renewal

    \n\n
    5. \n
  5. Logout and Token Revocation Strategy
    6. \n
\n

When the user logs out, both the access token and refresh token should be cleared from client storage.

\n\n

Combining these strategies gives you greater control over token misuse and enables a robust, enterprise-grade logout flow.

\n

\"illustration

\n

How to Store JWT Tokens?

\n

When you implement JWT-based authentication, the client (browser or mobile app) needs a way to store the access token and, optionally, the refresh token after they are issued by the authentication server. This stored token is then attached to every subsequent request to prove the user's identity.

\n

Choosing where to store the JWT is a crucial security decision. The most common storage options are:

\n\n

Each option has trade-offs between security, accessibility, and persistence, and the right choice depends on your application's architecture and threat model.

\n

Recommended Storage Strategy

\n\n

Best Practices for Storing JWTs

\n
    \n
  1. Never store sensitive tokens (like refresh tokens) in localStorage or sessionStorage.
    2. \n
  2. Use Secure and HttpOnly flags with cookies to prevent JavaScript access and ensure transmission only over HTTPS.
    3. \n
  3. Set the SameSite=Strict or Lax attribute on cookies to protect against CSRF.
    4. \n
  4. Use short-lived access tokens and rotate refresh tokens regularly.
    5. \n
  5. Implement CSP (Content Security Policy) to reduce XSS risk.
    6. \n
  6. Avoid storing any tokens in frontend code (e.g., hardcoded in JS files).
    7. \n
\n

Conclusion

\n

JWT authentication with LoginRadius offers a modern, stateless approach to managing sessions across distributed systems. The IDX integration is ideal for rapid deployment, while the Direct API model is best for organizations needing deep customization and integration flexibility.

\n

With robust token signing, refresh capabilities, and centralized control, LoginRadius provides a future-ready foundation for secure, scalable identity architecture. Contact us to know more about JWT authentication and implementation guide.

\n

FAQs

\n

1. What is JWT authentication used for?

\n

A: JWT authentication securely verifies user identities, enabling stateless session management across web, mobile apps, and microservices without server-side session storage.

\n

2. How does LoginRadius simplify JWT integration?

\n

A: LoginRadius simplifies JWT integration by offering hosted IDX login pages and direct API-based authentication methods, enabling rapid deployment and deep customization.

\n

3. Is JWT authentication secure?

\n

A: Yes, JWT authentication is secure when implemented with best practices like short-lived tokens, secure storage methods, signature validation, and refresh token rotation.

\n

4. Can JWT tokens be revoked with LoginRadius?

\n

A: Yes, LoginRadius allows revocation of JWT refresh tokens explicitly, and supports strategies like short-lived tokens and key rotation to manage token lifecycles securely.

\n","frontmatter":{"date":"April 15, 2025","updated_date":null,"description":"Discover JWT (JSON Web Token) authentication, its advantages, and how to integrate it seamlessly using LoginRadius' hosted IDX and Direct API methods for secure, scalable identity management.","title":"JWT Authentication with LoginRadius: Quick Integration Guide","tags":["JWT","JSON Web Token","Authentication","Authorization"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":0.7782101167315175,"src":"/static/4cedb7829f98208cbc6d5a9aea4e983d/58556/how-to-integrate-jwt.webp","srcSet":"/static/4cedb7829f98208cbc6d5a9aea4e983d/61e93/how-to-integrate-jwt.webp 200w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/1f5c5/how-to-integrate-jwt.webp 400w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/58556/how-to-integrate-jwt.webp 800w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/1cc9f/how-to-integrate-jwt.webp 896w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},"pageContext":{"limit":6,"skip":258,"currentPage":44,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}