Flutter JWT Authentication for WordPress App

This Flutter application is designed to facilitate the login process to a WordPress site using the JWT Authentication API obtained from the Tmeister/wp-api-jwt-auth repository. The application allows users to register, log in, and access specific pages. It provides a secure and scalable architecture by implementing JWT token-based authentication.

Features

JWT Authentication app with Flutter
WordPress login using WordPress API service
Token generation and validation for authenticated users
Token-based authentication for protected pages
Integration with WordPress API for user registration and login
Data storage using shared_preferences
Secure storage of tokens using secure_storage

Screenshots

Register Screen

Home Screen

Profile Screen

Book Screen

Getting Started

Follow the steps below to run the project in your local environment.

Requirements

Flutter SDK
Dependencies

Installation

Clone the project:

git clone https://github.com/nurullahturkoglu/flutter-jwt-auth-for-wordpress.git

Install the required dependencies:
```
flutter pub get
```
Run the application
```
flutter run
```

Usage

Below, you will find important files and details regarding their usage within the project.

Auth Middleware

The auth_middleware.dart file is used to enable token validation for pages. If a user doesn’t have a token, their token has expired, or an invalid token is provided, they will be automatically redirected to the login page.

Future<void> validateToken() async {
    bool isValid = await WordPressAuthMethods().validateUserToken();

    if (!isValid) {
      navigateToLoginPage();
      return;
    }

    setState(() {
      isAuthenticated = isValid;
    });
}

WordPress Auth Methods

The wordpress_auth_methods.dart file handles WordPress login, registration, and validation processes. User information is stored using shared_preferences, while the token is securely stored using secure_storage. If a token is not available or has expired, the user will be automatically redirected to the login page.

WordPress Login Function

NOTE: ⚠️ I have made some modifications to the jwt-authentication-for-wp-rest-api/public/class-jwt-auth-public.php file in the Tmeister/wp-api-jwt-auth repository. Below, you will find the code snippets added to the generate_token section:

'user_id'         => $user->data->ID,
'user_role'       => $user->roles[0],

By doing so, you can get response if you login successfuly like that:

{
    "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.***",
    "user_id": "13",
    "user_email": "nurullahturkoglu@gmail.com",
    "user_nicename": "Nurullah Turkoglu",
    "user_display_name": "turkoglu1",
    "user_role": "subscriber"
}

In the validate_token function, I have added the following code to retrieve the user ID more efficiently:

'data' => [
    'status' => 200,
    'user_id' => $token->data->user->id,
],

if token is valid, you can get response like that:

{
    "code": "jwt_auth_valid_token",
    "data": {
        "status": 200,
        "user_id": "13"
    }
}

WordPress Register Function

I have added a register function as an API separate from the Tmeister/wp-api-jwt-auth repository. This register function allows you to perform user registration in WordPress. If you want to activate the registration process, you should add the following code to the add_api_routes() function in the api/public/class-jwt-auth-public.php file of the plugin:

register_rest_route($this->namespace, '/register', array(
    'methods'             => 'POST',
    'callback'            => array($this, 'create_user'),
    'permission_callback' => '__return_true',
));

Additionally, you need to create the phpcreate_user() function:

function create_user($request) {
    $params = $request->get_params();

    // Get the username and password
    $username = sanitize_text_field($params['username']);
    $password = sanitize_text_field($params['password']);

    // Check if a user with the same username already exists
    $existing_user = get_user_by('login', $username);
    if ($existing_user) {
        // A user with the same username already exists
        $response = array(
            'status'  => 'error',
            'message' => 'The username is already taken.',
        );
    } else {
        // Create a new user
        $user_id = wp_create_user($username, $password);

        if (!is_wp_error($user_id)) {
            // Successful registration
            $response = array(
                'status'  => 'success',
                'message' => 'User created successfully.',
                'user_id' => $user_id,
            );
        } else {
            // Error occurred
            $error = $user_id->get_error_message();
            $response = array(
                'status'  => 'error',
                'message' => "Failed to create user. $error",
            );
        }
    }

    // Return the response
    return $response;
}

By doing so, you can create a new membership by making a POST request to the address https://yourdomain.com/wp-json/jwt-auth/v1/register with the following JSON payload:

{
    "username": "test123",
    "password": "123"
}

Main Code

The main file of the project contains the following code:

return MaterialApp(
  title: 'JWT Auth Tutorial',
  routes: {
    '/login': (context) => const LoginPage(),
    '/register': (context) => const RegisterPage(),
    '/home': (context) => const AuthMiddleware(child: HomePage()),
    '/book': (context) => const AuthMiddleware(child: BookPage()),
    '/profile': (context) => const AuthMiddleware(child: ProfilePage()),
  },
  home: const LoginPage(),
);

The code above uses the AuthMiddleware widget to add token validation to different pages. This ensures that token validation is performed before accessing certain pages.

Credit

Using TMeister JWT Auth for token generation and token verification in WordPress.

Contributing

We welcome contributions to this project! If you would like to contribute, please follow these steps:

Fork the repository.
Create a new branch for your feature or bug fix.
Make your changes and commit them.
Push your changes to your forked repository.
Submit a pull request describing your changes.

Please ensure that your contributions adhere to the coding conventions and guidelines of this project.

License

This project is licensed under the MIT License. See the LICENSE file for details.

GitHub

View Github