Login in Flutter using WordPress credentials

Question

I'm a beginner in Dart and also in WordPress, I would like some ideas on how to or even to know whether the following idea it is possible:

I have a WordPress page, with a user area already set, and I have developed an app in Flutter that I want only some types of users of my WordPress page to have access to. So I thought of implementing a login page to my app making the authentication using WordPress, is this possible? Anyone can point me to some excertps of code or pages that can help me achieve that?

Thanks

Solution 1

Add the following code to your WordPress (either through your (child)theme's functions.php, or by creating and enabling your own plugin):

add_action('rest_api_init', 'remoteLogin');

public static function remoteLogin($request = [])
{
    register_rest_route('remote-login', 'login', array(
        'methods' => 'POST',
        'callback' => 'restUserLogin',
    ));
}

function restUserLogin($request = [])
{
    $response = [
        'success' => false,
        'message' => 'Login failed'
    ];
    $status_code = 403;
    $parameters = $request->get_json_params();
    $username = sanitize_text_field($parameters['username']);
    $password = sanitize_text_field($parameters['password']);

    $user = null;
    if (!empty($username) && !empty($password)) {
        $user = wp_authenticate($username, $password);
    }

    if ($user instanceof WP_User) {
        $response['success'] = true;
        $response['message'] = 'Login successful';
        $status_code = 200;
    }

    return new WP_REST_Response($response, $status_code);
}

A new REST route named /remote-login/login has been created (you can change that in the register_rest_route call to whatever you like). The newly created REST route will also be listed on https://YOUR_DOMAIN_HERE/wp-json/ .

Next, you can POST a username and password from within your Flutter app like:

  var url = 'https://YOUR_DOMAIN_HERE/wp-json/remote-login/login';
  var body = jsonEncode({ 'username': 'USERNAME', 'password': 'SECRET' });
  http.post(url,
      headers: {"Content-Type": "application/json"},
      body: body
  ).then((http.Response response) {
      final int statusCode = response.statusCode;
      if (statusCode == 200) {
         // login successful...

In this example, the status code is either 200, or 403. For 200, the login was successful so no need to even look at the success-part of the response JSON.

Solution 2

WordPress As OAuth Server For Flutter App Authentication

I would recommend using a WordPress plugin that turns your WordPress site into an OAuth server. Your Flutter app can then authenticate users using one of the many OAuth packages available.

WordPress OAuth Server Plugins

Try googling "WordPress OAuth Server Plugin. As with all things WordPress, some options are free, some are paid.

• https://wordpress.org/plugins/oauth2-provider/
• https://wordpress.org/plugins/miniorange-oauth-20-server/

Flutter OAuth Packages

• https://pub.dev/packages/flutter_appauth (I recommend this one)
• https://pub.dev/packages/oauth2 (bare bones option)

Comments

[EdHuamani]

You need to enable web services in WordPress, read this post to get started developer.wordpress.org/rest-api/using-the-rest-api/…

[victorpbr]

Worked like a charm. Only edit was to remove the public static, as it was resulting in an error because apparently it is only used when defining classes. Thank you.

[victorpbr]

If I want to go further and retrieve also the parameter of the 'user' role from WordPress, how would I do that?

[Mycodingproject]

If the flutter could be clearer, then it would have helped me a lot but I just want to turn the flutter code to function but I'm a bit confused about the return type of the function because of the api call.