![\"JWT](\"https:\/\/www.utilewebsites.nl\/wp-content\/uploads\/2025\/07\/jwt_headless_app_ionic_vue3-1024x877.jpg\")
<\/a><\/figure>\nHeadless<\/strong> means your backend exclusively provides data without a presentation layer\u2014for example, a PHP API that only returns JSON to a mobile app or JavaScript frontend. In such a stateless environment, traditional session authentication doesn't work smoothly: the server must process each request independently without tracking user sessions.<\/p>\n JSON Web Tokens (JWT) offer a compact, self-contained, and secure way to transmit authorization information. After logging in, the client receives a token that is sent with every API call, allowing your backend to easily verify if the user is authorized.<\/p>\n In this part, we'll build the PHP backend that issues and validates tokens. We will use \u00a0 <\/li>\n<\/ul>\n In this part, we'll build the frontend in Ionic Vue. We will install Axios, create a service for all our API calls including refresh token rotation, and implement secure storage.<\/p>\n First, install the secure storage plugin for Capacitor:<\/p>\n In your interceptor, you can automatically make a refresh call on a 401 error:<\/p>\n This guide highlights that true security starts with a \"security-first\" architecture: short-lived tokens, a dual-token strategy, secure client-side storage, and strict server-side validation. With this layered approach, you can build a resilient, production-ready headless application that is resistant to modern threats.<\/p>\n","protected":false},"excerpt":{"rendered":"The Anatomy of a JWT<\/strong><\/h3>\n
\n
alg<\/code>) and the token type (typ<\/code>).<\/li>\nsub<\/code>), the issuer (iss<\/code>), and the expiration (exp<\/code>). You can also add roles or permissions here.<\/li>\n
\nPart 1: The PHP Backend \u2013 Building a JWT API<\/strong><\/h3>\n
firebase\/php-jwt<\/code> to create and verify JWTs, ensuring strict claim and algorithm validation.<\/p>\n\n
\n
api\/login.php<\/code>: Validates login credentials and returns a JWT (access + refresh).<\/li>\napi\/refresh.php<\/code>: Refreshes the access token using a valid refresh token.<\/li>\napi\/secure-data.php<\/code>: Secure endpoint; only accessible with a valid access token.<\/li>\n.env<\/code>: Contains your secret keys (JWT_SECRET<\/code> and JWT_REFRESH_SECRET<\/code>).<\/li>\n<\/ul>\n<\/li>\n
\u00a0 \u00a0\ncomposer require firebase\/php-jwt<\/code><\/pre>\n1. Generating a Token (login.php)<\/strong><\/h4>\n
<?php\nrequire __DIR__ . '\/vendor\/autoload.php';\nuse Firebase\\JWT\\JWT;\n\n\/\/ Load secret from .env\n$secret = getenv('JWT_SECRET');\n$refreshSecret= getenv('JWT_REFRESH_SECRET');\n\n\/\/ Validate user...\nif (validUser($_POST['email'], $_POST['password'])) {\n $now = time();\n $accessPayload = [\n 'iss' => 'https:\/\/your-domain.com',\n 'aud' => 'https:\/\/your-domain.com',\n 'iat' => $now,\n 'exp' => $now + 900, \/\/ 15 minutes\n 'sub' => getUserId(),\n 'role'=> 'user'\n ];\n $refreshPayload = [\n 'iss' => 'https:\/\/your-domain.com',\n 'aud' => 'https:\/\/your-domain.com',\n 'iat' => $now,\n 'exp' => $now + 604800, \/\/ 1 week\n 'sub' => getUserId()\n ];\n $accessToken = JWT::encode($accessPayload, $secret, 'HS256');\n $refreshToken = JWT::encode($refreshPayload, $refreshSecret, 'HS256');\n echo json_encode(['accessToken'=>$accessToken, 'refreshToken'=>$refreshToken]);\n exit;\n}\nhttp_response_code(401);\necho json_encode(['error'=>'Invalid credentials']);\n<\/code><\/pre>\n2. Validating a Token (secure-data.php)<\/strong><\/h4>\n
<?php\nrequire __DIR__ . '\/vendor\/autoload.php';\nuse Firebase\\JWT\\JWT;\nuse Firebase\\JWT\\Key;\n\n$secret = getenv('JWT_SECRET');\n$auth = $_SERVER['HTTP_AUTHORIZATION'] ?? '';\nif (preg_match('\/Bearer\\s(\\S+)\/', $auth, $m)) {\n try {\n $token = $m[1];\n $decoded = JWT::decode($token, new Key($secret, 'HS256'));\n \/\/ Check iss and aud\n if ($decoded->iss !== 'https:\/\/your-domain.com' || $decoded->aud !== 'https:\/\/your-domain.com') {\n throw new Exception('Invalid token issuer or audience');\n }\n echo json_encode(['data'=>'Secure information']);\n exit;\n } catch (Exception $e) {\n http_response_code(401);\n echo json_encode(['error'=>'Access denied']);\n exit;\n }\n}\nhttp_response_code(401);\necho json_encode(['error'=>'No token found']);\n<\/code><\/pre>\n3. Refresh Endpoint (refresh.php)<\/strong><\/h4>\n
<?php\nrequire __DIR__ . '\/vendor\/autoload.php';\nuse Firebase\\JWT\\JWT;\nuse Firebase\\JWT\\Key;\n\n$refreshSecret = getenv('JWT_REFRESH_SECRET');\n$body = json_decode(file_get_contents('php:\/\/input'), true);\ntry {\n $decoded = JWT::decode($body['refreshToken'], new Key($refreshSecret, 'HS256'));\n $now = time();\n $newAccess = [\n 'iss'=>'https:\/\/your-domain.com','aud'=>'https:\/\/your-domain.com',\n 'iat'=>$now,'exp'=>$now+900,'sub'=>$decoded->sub\n ];\n $token = JWT::encode($newAccess, getenv('JWT_SECRET'), 'HS256');\n echo json_encode(['accessToken'=>$token]);\n} catch (Exception $e) {\n http_response_code(401);\n echo json_encode(['error'=>'Invalid refresh token']);\n}\n<\/code><\/pre>\n
\nPart 2: The Ionic Vue App \u2013 API Communication with Axios<\/strong><\/h3>\n
1. Secure Storage & Axios Setup<\/strong><\/h4>\n
npm install @capacitor-community\/secure-storage<\/code><\/pre>\n\/\/ src\/services\/AxiosService.js\nimport axios from 'axios';\nimport { SecureStoragePlugin } from '@capacitor-community\/secure-storage';\n\nconst API_URL = import.meta.env.VITE_API_URL || 'https:\/\/your-domain.com\/api';\nconst storage = new SecureStoragePlugin();\n\nconst axiosInstance = axios.create({ baseURL: API_URL, headers:{'Content-Type':'application\/json'} });\n\naxiosInstance.interceptors.request.use(async config => {\n const token = await storage.get({ key:'accessToken' });\n if (token.value) config.headers.Authorization = `Bearer ${token.value}`;\n return config;\n});\n\nexport default axiosInstance;\n<\/code><\/pre>\n2. Login & Token Storage (
LoginPage.vue<\/code>)<\/strong><\/h4>\n<script setup>\nimport { SecureStoragePlugin } from '@capacitor-community\/secure-storage';\nimport axiosService from '@\/services\/AxiosService';\nconst storage = new SecureStoragePlugin();\n\nasync function handleLogin() {\n const resp = await axiosService.post('\/login.php', params);\n await storage.set({ key:'accessToken', value:resp.data.accessToken });\n await storage.set({ key:'refreshToken', value:resp.data.refreshToken });\n router.push('\/tabs\/dashboard');\n}\n<\/script>\n<\/code><\/pre>\n3. Refresh Logic<\/strong><\/h4>\n
axiosInstance.interceptors.response.use(null, async error => {\n if (error.response?.status === 401) {\n const refresh = await storage.get({key:'refreshToken'});\n const { data } = await axios.post('\/refresh.php', { refreshToken: refresh.value });\n await storage.set({key:'accessToken', value:data.accessToken});\n error.config.headers.Authorization = `Bearer ${data.accessToken}`;\n return axiosInstance.request(error.config);\n }\n return Promise.reject(error);\n});<\/code><\/pre>\n
\nBest Practices & Security<\/strong><\/h3>\n
\n
iss<\/code>, aud<\/code>, and alg<\/code> on the server side.<\/li>\nConclusion<\/strong><\/h3>\n