JWT Introduction

JWT means JSON Web Token. It is a compact format for representing information between two parties as a JSON-based token.

In REST API authentication, JWT can be issued after successful login and then sent with protected API requests.

Login
  ↓
Verify User
  ↓
Create JWT
  ↓
Send JWT
  ↓
Mobile App
  ↓
Protected API
  ↓
Verify JWT

JWT is commonly used for API authentication because the token can carry claims and can be verified using a cryptographic signature.

• Useful for REST APIs.
• Works well with mobile applications.
• Can contain user-related claims.
• Can include an expiration time.
• Can be verified by the server.
• Does not require the password to be sent with every request.

React Native
     ↓
Email + Password
     ↓
Login API
     ↓
Verify Credentials
     ↓
Create JWT
     ↓
Return JWT
     ↓
React Native
     ↓
Store JWT
     ↓
Protected API
     ↓
Send JWT
     ↓
Verify JWT
     ↓
Return Data

A JWT normally contains three parts separated by dots.

HEADER.PAYLOAD.SIGNATURE

The three parts are:

• Header
• Payload
• Signature

For example, a JWT has a structure similar to:

xxxxx.yyyyy.zzzzz

The header contains information about the token, such as the token type and signing algorithm.

{
    "alg": "HS256",
    "typ": "JWT"
}

The alg field specifies the signing algorithm and typ identifies the token type.

The payload contains claims. Claims are pieces of information about the token or the subject of the token.

{
    "user_id": 101,
    "email": "user@example.com"
}

Applications can also use registered claims such as iss, sub, aud, exp, and iat.

The signature is used to verify that the token was created by a trusted party and has not been modified after it was signed.

Header
   +
Payload
   +
Secret / Private Key
   ↓
Signature

The exact signing method depends on the selected JWT algorithm.

JWT
│
├── Header
│   ├── alg
│   └── typ
│
├── Payload
│   ├── user_id
│   ├── email
│   └── exp
│
└── Signature

These three encoded sections are joined using dots.

Header.Payload.Signature

The header and payload of a JWT are encoded using Base64URL. The resulting token is designed to be safely transmitted as text.

Encoding is not the same as encryption.

A JWT may look like this:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
.
eyJ1c2VyX2lkIjoxMDEsImV4cCI6MTczMDAwMDAwMH0
.
signature-value

The actual token is normally represented as one line with the three parts separated by dots.

Claims are statements about the token or its subject.

{
    "sub": "101",
    "name": "Rahul",
    "role": "student",
    "iat": 1730000000,
    "exp": 1730003600
}

The claims included in a JWT should be limited to information that the application actually needs.

The exp claim represents the expiration time of the JWT.

{
    "user_id": 101,
    "exp": 1730003600
}

After the token expires, the API should reject it according to the authentication rules of the application.

The iat claim represents the time at which the token was issued.

{
    "user_id": 101,
    "iat": 1730000000
}

JWT timestamps are commonly represented as Unix time values.

The sub claim identifies the subject of the token. For a user authentication system, it can represent the authenticated user.

{
    "sub": "101"
}

JWT can use different signing algorithms.

The choice depends on the architecture and security requirements of the application.

HS256 is an HMAC-based signing algorithm using SHA-256. It uses a shared secret to create and verify the signature.

Header
   +
Payload
   +
Shared Secret
   ↓
HS256
   ↓
Signature

The secret must be kept securely on the server.

A secret key is used by algorithms such as HS256 to sign and verify tokens.

$secretKey =
    "CHANGE_THIS_TO_A_SECURE_SECRET";

When a protected API receives a JWT, the server verifies the token's signature and checks relevant claims such as expiration.

JWT
 ↓
Read Header
 ↓
Read Payload
 ↓
Verify Signature
 ↓
Check Claims
 ↓
Valid?
 ┌──┴──┐
Yes    No
 ↓      ↓
Allow  401

A signed JWT provides integrity and authenticity when properly verified. It does not automatically hide the payload contents.

JWT Payload
     ↓
Base64URL Decode
     ↓
Readable JSON

JWT can be used to protect REST API endpoints.

POST /api/login.php
        ↓
      JWT
        ↓
GET /api/profile.php
        ↓
Authorization: Bearer JWT
        ↓
Verify JWT
        ↓
Return Profile

React Native can receive a JWT after successful login and then send it with requests to protected APIs.

React Native
      ↓
POST Login
      ↓
PHP API
      ↓
JWT
      ↓
React Native
      ↓
Protected Request
      ↓
Authorization: Bearer JWT

const response = await fetch(
    "https://example.com/api/profile.php",
    {
        method: "GET",

        headers: {
            "Authorization":
                "Bearer " + token,
            "Accept":
                "application/json"
        }
    }
);

const data =
    await response.json();

console.log(data);

A login API can return a JWT in its JSON response.

{
    "success": true,
    "message": "Login successful",
    "token": "eyJhbGciOiJIUzI1NiIs..."
}

The mobile application can then use the returned token for authenticated requests.

A JWT can be sent in the Authorization header using the Bearer scheme.

GET /api/profile.php

Authorization:
Bearer eyJhbGciOiJIUzI1NiIs...

The server should validate the JWT before providing protected data.

• Keep signing keys secret.
• Use HTTPS.
• Do not store passwords in JWT payloads.
• Do not put JWTs in URLs.
• Validate the signature.
• Check expiration when applicable.
• Use an appropriate signing algorithm.
• Keep token lifetime appropriate for the application.
• Protect token storage on mobile devices.
• Do not trust JWT claims without verifying the token.

Both approaches can be useful. The appropriate choice depends on the application architecture and security requirements.

{
    "header": {
        "alg": "HS256",
        "typ": "JWT"
    },

    "payload": {
        "sub": "101",
        "role": "student",
        "iat": 1730000000,
        "exp": 1730003600
    },

    "signature": "SIGNED_VALUE"
}

The real JWT combines these parts into a compact token:

HEADER.PAYLOAD.SIGNATURE

              React Native
                   │
                   ▼
             Login Screen
                   │
                   ▼
             Login API
                   │
                   ▼
          Verify Email/Password
                   │
                   ▼
               Create JWT
                   │
                   ▼
             Return JWT
                   │
                   ▼
          Store Token Securely
                   │
                   ▼
          Protected API Request
                   │
                   ▼
        Authorization: Bearer JWT
                   │
                   ▼
             Verify JWT
                   │
                   ▼
              JSON Data

JWT is a standardized token format commonly used for authentication in REST APIs. A JWT normally contains a header, payload, and signature. After successful login, a server can issue a JWT. The React Native application can then send the JWT with protected API requests using the Authorization header.

JWT
│
├── Header
│
├── Payload
│
└── Signature

Login
  ↓
Create JWT
  ↓
React Native
  ↓
Bearer JWT
  ↓
Protected API
  ↓
Verify JWT
  ↓
Return Data