JWT Authentication for SPA with Laravel and Vue.js

Generally we use Session Based Authentication. But in modern technology, JWT (JSON Web Token) Authentication is used specially in Single Page Application (SPA). Let's discuss about both.

Session based Authentication

In session based authentication, Authentication records or session must be kept in Server and Client-side. The server needs to keep track of all active sessions in database and send an Session ID to cookie of User's browser. Cookie will store the Session ID.

Let's take a look of Flow of Session Based Authentication

  • User/Client enters his login informations (Username/Email, Password) to Server (Suppose Facebook server).

  • Server verifies user's informations with his previously Sign Up data. If the informations are correct, then server creates a session and stores it to server database and sent it to User. (Facebook compares the user's login data to his registration data and create a session. Store that session to facebook server and send a session id to user.)

  • Server sent a Session ID to User's browser. Browser cookie also stores that Session ID (facebook's session ID is stored on user browser cookie)

  • While User request an authenticated page (for example: Facebook news feed) with saved Session ID of Cookie to Server, then Server compares that Session ID with it's (server) saved Session data. If matches, then server give permission to enter that page

  • When a user log out, then Server side and user-side (client side) session is destroyed.

Please take a look below picture. You will be clear about the topic I think.

(Picture is copied from dev.to)

Token based Authentication

In Token based authentication, server does not save anything. So, it is called Stateless. When user logs in then server creates a Token and send it to user. User save the token to localStorage or sessionStorage or cookie.

Token is encoded and it has three parts. They are separated with DOT.

  • Header

  • Payload

  • Signature

Encoded token picture

Header: Header is the first part of token. It has two sections. Algorithm and Token type. Algorithm means by which algorithm it is encoded like: HMAC, SHA256 or RSA etc. It is encoded with Base64Url in the first part of token. See the below picture

Header part of Token

Payload: Payload is the second part of token. It is the data part. It contains user data like name, subject, issue time, expire date and others. It is encoded in the second part of token with Base64Url. Please take a look in the below picture

Payload part of token

Signature: Signature is the last part and important part of a token. It has an Encoded Header, a dot and an encoded Payload with a secret. Secret is a key to encode the header and payload. If one person change the header, he don't know the secret, so, it will not match with the main header. Let's take a look in the below picture.

Signature part of token

How JWT works:

I am showing the steps of JWT authentication

  • When user logs in with their informations like username/email and password to Server, then server creates a token with the informations and sent it to the User/Client.

  • User saves this Token to localStorage or sessionStorage or Cookie.

  • Again user sent a request via API. Token is attached with API. Server verify the token with secret key. If all are correct then allow user for that request.

  • While logout Token is destroyed from localStorage or sessionStorage or Cookie. Don't need to do anything in server.

Please see the below picture to be more clear

JWT Authentication flow. Picture has taken from dev.to

In the next part we will discuss about how to set up JWT in Laravel Application. Please see: Part 2