Building an Ionic JWT Refresh Token Flown
Akash MoreSoftware Developer
Published On
Updated On
Table of Content
Introduction
JSON Web Tokens (JWT) have become a standard method for authentication in modern web and mobile applications. However, managing token lifecycle and security can be challenging. In this blog post, we'll dive deep into implementing a robust JWT refresh token flow in an Ionic application.
Why Use JWT for Authentication?
- Stateless Authentication: No need for the server to maintain session data.
- Compact Tokens: JWTs are lightweight and can be sent via HTTP headers.
- Security: JWTs are signed, ensuring data integrity and protection against tampering.
Understanding JWT and Refresh Tokens A JSON Web Token is a compact, URL-safe means of representing claims to be transferred between two parties. It consists of three parts:
- Header: Contains the token type and hashing algorithm
- Payload: Stores claims or user information
- Signature: Ensures the token's integrity
Authentication Flow Overview:
Install Required Packages:
- axios: For making API requests.
- @ionic/storage-angular: For secure local storage of tokens.
- jwt-decode: To decode JWTs and check expiration.
npm install axios @ionic/storage-angular jwt-decode
Backend Setup (JWT Generation and Validation)
Ensure your backend API is configured to generate and validate JWT tokens. Here’s a basic Node.js example for reference
Key points:
- Password Hashing: Using
bcryptfor secure password storage. - JWT Tokens: Short-lived access tokens (
15m) and long-lived refresh tokens (7d).
1. Express js setup:
We use Express.js to create the server and handle API routes. app.use(cors()) allows cross-origin requests from the Ionic app.
2. User Registration (/api/register):
- We hash the password using bcrypt for security before storing it.
bcrypt.hash(password, 10)creates a hashed version of the password with 10 salt rounds for added security.
3.Login (/api/login):
- Checks if the user exists and verifies the password.
- Generates two JWTs: Access Token & Refresh Token.
4.Token Refresh (/api/refresh):
- Verifies the refresh token and issues a new access token.
const express = require('express');
const jwt = require('jsonwebtoken');
const cors = require('cors');
const bcrypt = require('bcrypt');
const app = express();
app.use(express.json());
app.use(cors());
const SECRET_KEY = 'your_secret_key';
const users = []; // In-memory user storage (replace with a database in production)
// Register Endpoint
app.post('/api/register', async (req, res) => {
const { username, password } = req.body;
const hashedPassword = await bcrypt.hash(password, 10);
users.push({ username, password: hashedPassword });
res.status(201).send('User registered successfully');
});
// Login Endpoint
app.post('/api/login', async (req, res) => {
const { username, password } = req.body;
const user = users.find((u) => u.username === username);
if (user && (await bcrypt.compare(password, user.password))) {
const accessToken = jwt.sign({ username }, SECRET_KEY, { expiresIn: '15m' });
const refreshToken = jwt.sign({ username }, SECRET_KEY, { expiresIn: '7d' });
res.json({ accessToken, refreshToken });
} else {
res.status(401).send('Invalid credentials');
}
});
// Refresh Token Endpoint
app.post('/api/refresh', (req, res) => {
const { refreshToken } = req.body;
if (!refreshToken) return res.sendStatus(403);
jwt.verify(refreshToken, SECRET_KEY, (err, user) => {
if (err) return res.sendStatus(403);
const newAccessToken = jwt.sign({ username: user.username }, SECRET_KEY, { expiresIn: '15m' });
res.json({ accessToken: newAccessToken });
});
});
app.listen(3000, () => console.log('Server running on port 3000'));
Express Server Setup:
express()initializes the app.app.use(cors())allows cross-origin requests from the Ionic client.app.use(express.json())parses incoming JSON payloads.
Registration Endpoint (
/api/register):- bcrypt hashes passwords before storing them, ensuring sensitive data is secure.
bcrypt.hash(password, 10)adds a salt to strengthen password security.
Login Endpoint (
/api/login):- Users provide a username and password.
- If credentials are valid, two JWTs are issued:
Refresh Endpoint (
/api/refresh):- Takes a refresh token and validates it using
jwt.verify(). - Issues a new access token to maintain the session without requiring re-login.
- Takes a refresh token and validates it using
Integrating AuthService in Ionic App
Create an AuthService to manage registration, login, token storage, and refreshing tokens using Ionic Storage.
- Dependency Injection: We inject Storage to store tokens locally on the device.
register(): Sends the registration data to the backend.login(): StoresaccessTokenandrefreshTokenin Ionic Storage after successful login.logout(): Clears stored tokens from the device.
import { Injectable } from '@angular/core';
import axios from 'axios';
import { Storage } from '@ionic/storage-angular';
@Injectable({ providedIn: 'root' })
export class AuthService {
private API_URL = 'http://localhost:3000/api';
private storage: Storage | null = null;
constructor(private storageCtrl: Storage) {
this.init();
}
async init() {
this.storage = await this.storageCtrl.create();
}
// Register
async register(username: string, password: string) {
try {
await axios.post(`${this.API_URL}/register`, { username, password });
console.log('User registered successfully');
} catch (error) {
console.error('Registration failed:', error.response.data);
}
}
// Login
async login(username: string, password: string) {
try {
const response = await axios.post(`${this.API_URL}/login`, { username, password });
await this.storage?.set('accessToken', response.data.accessToken);
await this.storage?.set('refreshToken', response.data.refreshToken);
console.log('Login successful');
} catch (error) {
console.error('Login failed:', error.response.data);
}
}
// Logout
async logout() {
await this.storage?.remove('accessToken');
await this.storage?.remove('refreshToken');
}
}
Storage Initialization:
- We initialize Ionic Storage to store tokens securely on the client device.
register()Method:- Calls the backend
/registerendpoint to create a new user.
- Calls the backend
login()Method:- Sends the username and password to the backend
/loginendpoint. - Stores both the access and refresh tokens locally.
- Sends the username and password to the backend
refreshAccessToken():- Retrieves the refresh token and uses it to request a new access token when the current one expires.
logout()Method:- Clears the stored tokens, effectively logging the user out.
Building the Registration Page in Ionic
Now create the RegisterPage that will allow users to sign up.
Form Data Binding:
[(ngModel)]binds the input fields tousernameandpasswordproperties.
onRegister()Method:- Calls
AuthService.register()with the provided credentials.
- Calls
<ion-header>
<ion-toolbar>
<ion-title>Register</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<form (submit)="onRegister()">
<ion-item>
<ion-label position="floating">Username</ion-label>
<ion-input type="text" [(ngModel)]="username" name="username"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Password</ion-label>
<ion-input type="password" [(ngModel)]="password" name="password"></ion-input>
</ion-item>
<ion-button expand="full" type="submit">Register</ion-button>
</form>
</ion-content>
import { Component } from '@angular/core';
import { AuthService } from '../services/auth.service';
@Component({ selector: 'app-register', templateUrl: './register.page.html' })
export class RegisterPage {
username: string = '';
password: string = '';
constructor(private authService: AuthService) {}
async onRegister() {
if (this.username && this.password) {
await this.authService.register(this.username, this.password);
console.log('Registration successful');
} else {
console.error('All fields are required');
}
}
}
Conclusion
By the end of this guide, you've set up a fully functional Ionic authentication system using JWTs and Node.js. You now have a solid foundation for managing user sessions, refreshing tokens, and building secure Ionic applications.
WhatsApp
Call Us
Mail Us