Authentication is one of the most important parts of any web application. For decades, cookies and server-based authentication were the easiest
solution. However, handling authentication in modern Mobile and Single Page Applications can be tricky, and demand a better approach. The best known solutions to authentication problems for APIs are the OAuth 2.0 and the JSON Web Token (JWT).
What is a JSON Web Token?
it’s compact structure, JWT is usually used in HTTP
Authorizationheaders or URL query parameters.
Structure of a JSON Web Token
The header contains the metadata for the token and it minimally contains the type of signature and the encryption algorithm. (You can use a JSON
formatter tool to prettify the JSON object.)
Security and Encryption with JWT
Drawbacks of Server-Based Authentication
The authentication server can sign the token using any secure signature method. For example, a symmetric key algorithm such as HMAC SHA-256 can be used if there is a secure channel to share the secret key among all parties. Alternatively, an asymmetric, public-key system, such as RSA, can be used as well, eliminating the need for further key-sharing.
Advantages of Token-Based Authentication
: There is no
server side lookup to find and deserialize the session on each request. The only thing we have to do is calculate the HMAC SHA-256 to validate the token and parse its content.
A JSO Web Token Example Using Laravel 5 and AngularJS
Laravel Backend Example
When we make a
to with a username and password, we will try to create a new user and save it to the database. After the user has been created, a JWT is created and returned via JSON response.
Fetching a Restricted Resource on the same Domain
Once the user is signed in, we can fetch the restricted resource. I’ve created a
route that simulates a resource that needs an authenticated user. In order to do this, the request header or query string needs to provide the JWT for the backend to verify.
Fetching a Restricted Resource from the API Subdomain
In the next JSON web token example, we’ll take a different approach for token validation. Instead of
using middleware, we will handle exceptions manually. When we make a server , we are making a cross-origin request, and have to enable CORS on the backend. Fortunately, we have already configured CORS in the file.
POSTrequest to an API
AngularJS Frontend Example
I’ve created a navigation bar using Bootstrap that will change the visibility of appropriate links, depending on the sign-in status of the user. The sign-in status is determined by the presence of a
tokenvariable in the controller’s scope.
the file, we have defined two controllers for our application: and . the service, which sends HTTP requests to the backend. It then saves the token to local storage, or shows an error message, depending on the response from the backend.
HomeControllerhandles sign-in, sign-up and logout functionality. It passes the username and password data from the sign-in and sign-up forms to
The Auth service is responsible for making the sign in and sign up HTTP requests to the backend. If the request is successful, the response contains the signed token, which is then base64 decoded, and the enclosed token claims information is saved into a
tokenClaimsvariable. This is passed to the controller via
There is still a lot to cover about JWTs, such with how to handle the security details, and refreshing tokens when they expire, but the examples above should demonstrate the basic usage and, more importantly, advantages of using JSON Web Tokens.
Share your perspective
Share your achievement or new finding or bring a new tech idea to life. Your IT community is waiting!