OAuth2 Login in Flutter with WordPress JWT Authentication

OAuth2 Login in Flutter with WordPress JWT Authentication

June 20, 2025
Flutter JWT login

User login is a core feature in most apps — and when your backend is powered by WordPress, it’s important to implement a system that’s both secure and mobile-friendly. While WordPress isn’t a full OAuth2 provider by default, you can create an OAuth-like login experience in Flutter using JWT (JSON Web Token) authentication.

This approach allows you to securely authenticate users, manage tokens, and access protected REST API endpoints — all from your Flutter frontend.

What’s the Difference Between OAuth2 and JWT?

  • OAuth2 is a protocol — it defines how apps should request and handle authorization and access tokens, usually with redirect-based flows.

  • JWT is a token format — commonly used in OAuth2 flows but also usable on its own.

WordPress doesn’t support OAuth2 out of the box, but with the right plugin (like JWT Authentication for WP REST API), you can simulate a simplified token-based flow, similar to OAuth2 Resource Owner Password Grant.

How JWT-Based Authentication Works (Like OAuth2 Password Grant)

Here’s how the OAuth-style flow looks using JWT in a Flutter app:

1. User Enters Credentials

The user provides a username (or email) and password via a Flutter login form.

2. App Sends a Token Request

The app sends a POST request to:

/wp-json/jwt-auth/v1/token

…with credentials in the request body.

3. WordPress Responds with a Token

If valid, WordPress returns a JSON object containing:

  • A JWT token

  • User data like user_email, display_name, user_nicename

4. Flutter Stores the Token

The app stores the token securely (e.g., using flutter_secure_storage).

5. Authenticated Requests

For all protected REST API actions, Flutter includes the token in headers:

Authorization: Bearer <token>

Key Features of This Login Flow

Token-based (stateless)
Role-aware (e.g., only editors can post)
Compatible with Flutter’s HTTP clients
Fast and secure if HTTPS is used
Easy to implement with REST API-ready plugins

How to Set Up JWT Authentication in WordPress

  1. Install Plugin
    Use the JWT Authentication for WP REST API plugin.

  2. Edit .htaccess or Server Config
    Add required headers to allow authorization:

    SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
  3. Define Secret Key
    In wp-config.php:

    define('JWT_AUTH_SECRET_KEY', 'your-strong-secret-key');
  4. Enable CORS if Needed
    Especially important for Flutter web or cross-origin requests.

Benefits of Using This Flow in Flutter

  • Security: No password stored; only token is used post-login

  • Protected Routes: Restrict access to content based on token roles

  • User-Specific Actions: Submit posts, fetch personal data, update profiles

  • Cross-platform Compatible: Works for Android, iOS, desktop, and web

  • Control via WordPress: Admin can manage users, permissions, and token policies

Limitations to Know

  • JWT tokens don’t refresh automatically — if needed, you’ll need to implement manual token refresh or re-login.

  • This is not a full OAuth2 flow with redirect URIs and scopes — it mimics the Resource Owner Password Credentials grant type.

  • JWT plugin must be kept updated for security patches.