DEV Community: Muhammad Saad Bin Nadeem

Beyond JWTs: Preventing API Replay Attacks in React Native & .NET (Financial-Grade Security)

Muhammad Saad Bin Nadeem — Sun, 05 Apr 2026 06:04:42 +0000

When building mobile applications—especially in the fintech, maritime, or ERP sectors—most developers think security stops at JWT Authentication and HTTPS.

But what happens if a malicious user or a compromised network proxy intercepts a perfectly valid POST request? For example:
POST /api/wallet/transfer { "amount": 100, "to": "user_b" }

Even with a valid JWT, the attacker can capture this payload and "replay" (resend) it 100 times, draining the victim's wallet. Your backend will process it because the token is technically valid.

To prevent this, enterprise systems use HMAC (Hash-based Message Authentication Code) Signatures combined with strict Timestamps. Here is how to implement this end-to-end between React Native and .NET Core.

The Concept
The Client (React Native) takes the request body, adds the current timestamp, and hashes it using a secret key. It sends this hash in the headers.

The Server (.NET) receives the request. First, it checks if the timestamp is older than 60 seconds (if yes, it rejects it immediately to prevent old replays). Then, the server hashes the body and timestamp using the same secret key.

If the server's hash matches the client's hash, the request is untouched and fresh.

Step 1: The React Native Implementation (Axios)
First, install a crypto library: npm install crypto-js.
Then, we use an Axios Interceptor to automatically sign every outgoing POST, PUT, or PATCH request.

import axios from 'axios';
import CryptoJS from 'crypto-js';

const api = axios.create({ baseURL: 'https://api.yourdomain.com' });
const CLIENT_SECRET = process.env.EXPO_PUBLIC_HMAC_SECRET; // Must match the backend

api.interceptors.request.use((config) => {
  // Only sign requests that modify data
  if (['post', 'put', 'patch'].includes(config.method ?? '')) {
    const timestamp = Date.now().toString();
    const bodyString = config.data ? JSON.stringify(config.data) : '';

    // Create the signature payload: Timestamp + Body
    const payloadToSign = `${timestamp}:${bodyString}`;

    // Hash it using HMAC-SHA256
    const signature = CryptoJS.HmacSHA256(payloadToSign, CLIENT_SECRET).toString(CryptoJS.enc.Hex);

    // Attach to headers
    config.headers['X-Request-Timestamp'] = timestamp;
    config.headers['X-Request-Signature'] = signature;
  }
  return config;
});

export default api;

Step 2: The .NET 9 Backend Implementation
Instead of polluting our controllers, we write a clean, reusable ActionFilterAttribute in C# to intercept requests before they even hit our endpoints.

Create a file called ValidateHmacSignatureAttribute.cs:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Filters;
using System.Security.Cryptography;
using System.Text;

public class ValidateHmacSignatureAttribute : ActionFilterAttribute
{
    private const int MaxAgeInSeconds = 60;

    public override async Task OnActionExecutionAsync(ActionExecutingContext context, ActionExecutionDelegate next)
    {
        var request = context.HttpContext.Request;

        // 1. Extract Headers
        if (!request.Headers.TryGetValue("X-Request-Timestamp", out var timestampValues) ||
            !request.Headers.TryGetValue("X-Request-Signature", out var signatureValues))
        {
            context.Result = new UnauthorizedObjectResult("Missing security headers.");
            return;
        }

        var timestampStr = timestampValues.ToString();
        var clientSignature = signatureValues.ToString();

        // 2. Prevent Replay Attacks via Timestamp Validation
        if (!long.TryParse(timestampStr, out long timestampMs))
        {
            context.Result = new BadRequestObjectResult("Invalid timestamp format.");
            return;
        }

        var requestTime = DateTimeOffset.FromUnixTimeMilliseconds(timestampMs);
        if ((DateTimeOffset.UtcNow - requestTime).TotalSeconds > MaxAgeInSeconds)
        {
            context.Result = new UnauthorizedObjectResult("Request expired. Replay attack detected.");
            return;
        }

        // 3. Rebuild the payload and validate signature
        request.EnableBuffering();
        using var reader = new StreamReader(request.Body, Encoding.UTF8, leaveOpen: true);
        var body = await reader.ReadToEndAsync();
        request.Body.Position = 0; // Reset stream for the controller

        var payloadToSign = $"{timestampStr}:{body}";

        // In a real app, inject this secret via IConfiguration
        var serverSecret = "YOUR_SHARED_SECRET_KEY"; 

        using var hmac = new HMACSHA256(Encoding.UTF8.GetBytes(serverSecret));
        var hashBytes = hmac.ComputeHash(Encoding.UTF8.GetBytes(payloadToSign));
        var serverSignature = Convert.ToHexString(hashBytes).ToLower();

        // 4. Compare
        if (serverSignature != clientSignature.ToLower())
        {
            context.Result = new UnauthorizedObjectResult("Payload tampering detected. Invalid signature.");
            return;
        }

        await next();
    }
}

Step 3: Secure Your Endpoints
Now, to protect any financial transaction in your API, you simply add the attribute to the controller:

[HttpPost("transfer")]
[ValidateHmacSignature] // BOOM. Replay attacks are dead.
public IActionResult TransferFunds([FromBody] TransferDto request)
{
    // Process the transaction safely
    return Ok(new { Message = "Funds transferred securely." });
}

Conclusion
By combining timestamps with HMAC signatures, we ensure two things:

The payload was not altered in transit.

The request is fresh and cannot be intercepted and replayed later.

If you are building fintech apps, ERP systems, or anything handling real money, this level of security is non-negotiable.

What other advanced security layers do you guys implement in your mobile architectures? Let's discuss in the comments!

(P.S. Make sure to follow my profile for more deep dives into enterprise-grade .NET and React Native architecture!)

Stop re-writing this: How to build a reusable Password Input in React Native

Muhammad Saad Bin Nadeem — Sun, 05 Apr 2026 06:01:27 +0000

If you are building a React Native app, you are going to need a Login screen, a Registration screen, and probably a "Change Password" screen.

The biggest mistake I see developers make is re-writing the same useState logic to toggle the secureTextEntry (the eye icon) on every single one of these screens. It makes your code messy and violates the DRY (Don't Repeat Yourself) principle.

Instead, we should build a single, beautiful component that handles its own internal state, and just reuse it everywhere.

Here is exactly how to build it using standard React Native components and Expo vector icons.

The Component Code Create a new file called CustomPasswordInput.tsx in your components folder. We will use @expo/vector-icons for the eye graphic (which comes pre-installed in Expo).

import React, { useState } from 'react';
import { View, TextInput, TouchableOpacity, StyleSheet, TextInputProps } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

// We extend standard TextInputProps so we can pass things like 'placeholder' or 'onChangeText'
interface CustomPasswordInputProps extends TextInputProps {}

export const CustomPasswordInput: React.FC<CustomPasswordInputProps> = ({ ...props }) => {
  // Internal state to track if the password is hidden or visible
  const [isSecure, setIsSecure] = useState(true);

  const toggleVisibility = () => {
    setIsSecure(!isSecure);
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        secureTextEntry={isSecure} // Toggles the masking
        placeholderTextColor="#999"
        {...props} 
      />

      <TouchableOpacity style={styles.iconContainer} onPress={toggleVisibility}>
        <Ionicons 
          name={isSecure ? "eye-off" : "eye"} 
          size={24} 
          color="#666" 
        />
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#F5F5F5',
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#E0E0E0',
    paddingHorizontal: 15,
    height: 50,
    marginBottom: 15,
  },
  input: {
    flex: 1, // Takes up remaining space
    fontSize: 16,
    color: '#333',
  },
  iconContainer: {
    padding: 5,
  }
});

Why this approach is better Encapsulation: The Login screen doesn't need to know how the eye icon works. It just needs the final typed text.

Flexibility: Because we spread {...props} onto the TextInput, you can still pass standard props like onChangeText, value, or onBlur from the parent screen without having to manually define them all.

How clean it looks in your Login Screen Now, look at how incredibly clean your actual Login Screen becomes. No messy state variables tracking the eye icon!

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import { CustomPasswordInput } from '../components/CustomPasswordInput';

export default function LoginScreen() {
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    console.log("Logging in with: ", password);
  };

  return (
    <View style={{ padding: 20 }}>
      {/* Our clean, reusable component! */}
      <CustomPasswordInput 
        placeholder="Enter your password" 
        value={password}
        onChangeText={setPassword}
      />

      <Button title="Login" onPress={handleLogin} />
    </View>
  );
}

By extracting UI elements into smart components, you can assemble complex screens in seconds instead of hours.

Did you find this helpful? I build full-stack architectures and post weekly about React Native, .NET Core, and writing cleaner code. Make sure to follow my profile so you don't miss the next UI component breakdown!

reactnative, #javascript, #webdev, #ui

Why your React Native app can't connect to your local .NET API (And how to fix it)

Muhammad Saad Bin Nadeem — Sun, 05 Apr 2026 05:58:17 +0000

You just built a beautiful .NET Core Web API. You test it in Swagger or Postman, and it works perfectly. It returns data instantly.

So, you open up your React Native Expo app, write a simple axios.get('http://localhost:5257/api/users'), press save, and... 💥 Network Error.

If you are testing on an Android emulator or a physical device, this error will drive you crazy. Here is exactly why it happens and how to set up your environment variables to fix it forever.

The Problem: What is "Localhost"?
When you type localhost inside your React Native code, the code is running inside the mobile device (or emulator).

To your computer, localhost means the computer itself.

To your Android emulator, localhost means the Android device's internal loopback network.

The emulator is literally looking inside itself for a .NET server that doesn't exist, failing, and throwing a Network Error.

The Solution: The Magic IP Addresses
To fix this, you need to point your mobile app to your computer's actual network address, depending on what you are testing on.

Testing on the iOS Simulator (Mac) Apple made this easy. The iOS simulator shares the host machine's network.

URL to use: http://localhost:

Testing on the Android Emulator Google built the Android emulator to run on an isolated virtual router. To break out of that router and talk to your computer's localhost, they provide a specific alias IP.

URL to use: http://10.0.2.2:

Testing on a Physical Device (iPhone or Android via Wi-Fi) If you are running the Expo app on your actual phone, neither localhost nor 10.0.2.2 will work. Your phone needs your computer's local Wi-Fi IP address.

Open your terminal and type ipconfig (Windows) or ifconfig (Mac).

Find your IPv4 address (it usually looks like 192.168.1.X or 10.0.0.X).

URL to use: http://192.168.1.X:
(Note: For this to work, you must ensure your .NET app is listening on your local IP, not just localhost. You can do this by running dotnet run --urls "http://0.0.0.0:")

The Best Practice: Environment Configuration
Instead of manually changing your Axios URLs every time you switch from iOS to Android, set up a dynamic config.

If you are using Expo, create a .env file at the root of your project:

Code snippet

# Change this depending on your testing device!
# iOS Simulator
# EXPO_PUBLIC_API_URL=http://localhost:5257/api

# Android Emulator
EXPO_PUBLIC_API_URL=http://10.0.2.2:5257/api

# Physical Device
# EXPO_PUBLIC_API_URL=http://192.168.1.45:5257/api

Then, configure your Axios instance once, and never touch it again:

TypeScript

import axios from 'axios';

const api = axios.create({
  baseURL: process.env.EXPO_PUBLIC_API_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

export default api;
Now, whenever you switch testing devices, you just uncomment the right line in your .env file, restart your Expo server with npx expo start -c (to clear the cache), and your API will connect flawlessly.

I hope this saved you a few hours of debugging! I build full-stack architectures and post weekly about React Native, .NET Core, and mobile enterprise solutions. Make sure to follow my profile here on Dev.to so you don't miss the next architecture breakdown!

reactnative, #dotnet, #javascript, and #beginners

How to fix expo-secure-store crashing on Web (Platform-Agnostic Storage in React Native)

Muhammad Saad Bin Nadeem — Tue, 31 Mar 2026 19:36:44 +0000

If you are building a universal React Native app using Expo, you’ve probably run into this incredibly frustrating issue when setting up your JWT Authentication.

You install expo-secure-store to safely save your user's auth tokens. You test it on your iOS simulator, and it works flawlessly. You test it on Android, perfect.

But the second you hit w in your terminal to test your app in a web browser, your app completely crashes with an error like:
TypeError: ExpoSecureStore.default.getValueWithKeyAsync is not a function

Why does this happen?
expo-secure-store relies on the native hardware security of mobile devices (Keychain for iOS, Keystore for Android). Web browsers do not have this native hardware. When Expo tries to run native code inside Google Chrome, the browser panics and kills your API requests.

The Solution: A Platform-Agnostic Storage Wrapper
Instead of littering your components with if (Platform.OS === 'web') statements every time you need to check a token, the cleanest enterprise-level solution is to create a centralized storage utility.

This utility will automatically detect the environment. If the user is on a phone, it uses the highly secure SecureStore. If they are on the web, it gracefully falls back to standard localStorage.

Create a file called storage.ts in your services folder:

import * as SecureStore from 'expo-secure-store';
import { Platform } from 'react-native';

// Save Token
export const setToken = async (key: string, value: string) => {
  if (Platform.OS === 'web') {
    localStorage.setItem(key, value);
  } else {
    await SecureStore.setItemAsync(key, value);
  }
};

// Get Token
export const getToken = async (key: string) => {
  if (Platform.OS === 'web') {
    return localStorage.getItem(key);
  } else {
    return await SecureStore.getItemAsync(key);
  }
};

// Delete Token
export const deleteToken = async (key: string) => {
  if (Platform.OS === 'web') {
    localStorage.removeItem(key);
  } else {
    await SecureStore.deleteItemAsync(key);
  }
};

How to use it in your Axios Interceptor
Now, instead of calling SecureStore directly, you just call your new smart utility. Here is how clean it looks inside an Axios interceptor:

import axios from 'axios';
import { getToken } from './storage';

const api = axios.create({
  baseURL: process.env.EXPO_PUBLIC_API_URL,
});

api.interceptors.request.use(async (config) => {
  // Works flawlessly on iOS, Android, AND Web!
  const token = await getToken('userToken');

  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

Gemini said
Here is the exact technical article to post on Dev.to.

Because Dev.to is a platform strictly for developers, we are not going to make this look like an ad. We are going to teach them how to fix a very annoying React Native bug, and then soft-pitch your Gumroad link at the very end. This builds massive trust.

Title: How to fix expo-secure-store crashing on Web (Platform-Agnostic Storage in React Native)

Body:

If you are building a universal React Native app using Expo, you’ve probably run into this incredibly frustrating issue when setting up your JWT Authentication.

You install expo-secure-store to safely save your user's auth tokens. You test it on your iOS simulator, and it works flawlessly. You test it on Android, perfect.

But the second you hit w in your terminal to test your app in a web browser, your app completely crashes with an error like:
TypeError: ExpoSecureStore.default.getValueWithKeyAsync is not a function

This utility will automatically detect the environment. If the user is on a phone, it uses the highly secure SecureStore. If they are on the web, it gracefully falls back to standard localStorage.

Create a file called storage.ts in your services folder:

TypeScript
import * as SecureStore from 'expo-secure-store';
import { Platform } from 'react-native';

// Save Token
export const setToken = async (key: string, value: string) => {
if (Platform.OS === 'web') {
localStorage.setItem(key, value);
} else {
await SecureStore.setItemAsync(key, value);
}
};

// Get Token
export const getToken = async (key: string) => {
if (Platform.OS === 'web') {
return localStorage.getItem(key);
} else {
return await SecureStore.getItemAsync(key);
}
};

// Delete Token
export const deleteToken = async (key: string) => {
if (Platform.OS === 'web') {
localStorage.removeItem(key);
} else {
await SecureStore.deleteItemAsync(key);
}
};
How to use it in your Axios Interceptor
Now, instead of calling SecureStore directly, you just call your new smart utility. Here is how clean it looks inside an Axios interceptor:

TypeScript
import axios from 'axios';
import { getToken } from './storage';

const api = axios.create({
baseURL: process.env.EXPO_PUBLIC_API_URL,
});

api.interceptors.request.use(async (config) => {
// Works flawlessly on iOS, Android, AND Web!
const token = await getToken('userToken');

if (token) {
config.headers.Authorization = Bearer ${token};
}
return config;
});
Skip the Boilerplate
I got so tired of wiring up this storage utility, Axios interceptors, JWT handling, and .NET AuthControllers for every single new project that I finally packaged it all together.

If you want to skip the 40 hours of tedious "infrastructure" setup and just start building your actual mobile app today, I released my full Enterprise Mobile Solution (React Native/Expo + .NET 9 API + SQLite).

It has all of this built-in, plus premium UI components, for just $39.

You can grab the full source code here: https://cutt.ly/rtAQiXmT

Happy coding! Let me know if you handle your universal storage differently in the comments.

reactnative #dotnet #webdev #tutorial

Stop building Authentication from scratch: A Full-Stack .NET & React Native Architecture

Muhammad Saad Bin Nadeem — Sun, 29 Mar 2026 19:12:41 +0000

We’ve all been there. You have a great idea for a mobile app, but before you can build a single feature, you have to wire up the "Big Three": Authentication, API Interceptors, and Secure Storage.

In this post, I want to share the architecture I use for my Enterprise Mobile Solution.

Key Architectural Decisions:

The Interceptor Pattern: Using Axios interceptors to automatically attach Bearer tokens.

Platform-Agnostic Storage: How to wrap expo-secure-store so your app doesn't break when testing in a Chrome browser.

Themed Components: Moving away from inline styles to a centralized theme.ts for instant rebranding.

I’ve packaged this entire architecture into a ready-to-go solution for anyone who wants to skip the boilerplate phase.

Check out the full solution here: https://saadventure610.gumroad.com/l/EnterpriseMobileSolution-ReactNative-NETCore

reactnative #dotnet #webdev #productivity