How should I approach: Wordpress Social Login (web) and Flutter (mobile)

449

I hope that you have found the solution. If not, you can take a look at using FirebaseUI Web on WordPress via the Integrate Firebase PRO plugin.

https://firebase-wordpress-docs.readthedocs.io/en/latest/auth/work-with-firebaseui-web.html

The authentication on WordPress will be handled by Firebase Authentication, so they will have the same userbase.

Share:
449
yaguarete
Author by

yaguarete

Updated on December 24, 2022

Comments

  • yaguarete
    yaguarete 11 months

    I'm a little bit lost on how should I approach my objective, which is adding Social login to both Wordpress site and flutter and integrate for its content in using wordpress as backend.

    • From flutter perspective, I could use specific plugins to oAuth to each provider or even use Firebase.
    • From Wordpress site, lots of plugins to achieve same functionality.

    My first thought was to use firebase to stablish some sort of workflow

    1 User tries to Login in Flutter with any social provider
    2 I check if user has already an account in Firebase
    2a If it does, go and fetch the user token in Wordpress
    2b if it does not, I create the user in Firebase and then do a callback to wordpress site to create it and obtain the wordpress token
    

    But still, not sure if that would work. What would happen if same user then tries to log in on the Wordpress Site using same / any provider, will it create a new user on wordpress site? Will it tell him that, he is already registered or would just login with no issue.

    I apologise for the novice question.

    Also, would like to avoid as much as posible paid plugins solutions, as this is a learning curve for me, not a monetary issue or professional work.

    Thanks in advance


    Update:

    Thanks for answering, I did review such plugin, but as I mentioned I was aiming to learn on how to accomplish such integration. What I ended up doing was actually was quite a simple but very clunk solution which covers my needs.

    • First I ended up creating a Firebase Account, added FireStore, and all required social media login (you have plenty of videos on how to accomplish that)
    • In flutter installed the FireBase Core plugin to do the integration between both.
    • After that I created a few rest api end points in wordpress, which handles the response from Firebase.

    So in other words for the use case I was interested (User Auth), Firebase Handles Google, Facebook, and the N social media login... after they are logged in flutter (I have the token for the social media), I then query rest Api from wordpress in order to know if the user already exists (update) o I need to create it. If it's created then I create a cookie (Why a Cookie? will handle WooCommerce Cart Items and have them in sync by default), but you can generate a Token if you need, and that's it. User is created a Firebase with corresponding Token and In wordpress generating a Cookie for user activities. Bellow you can find a rest Api end point going from one of the Social Media as an example.. from flutter you have several on YouTube.

    public function loginFacebook($args = null)
      {
        $parsedArgs = $args->get_params();
        $userToken = $parsedArgs["token"];
    
        if (empty($userToken)) {
          return YaguaretePluginApiCommonFunctions::wpError(
            "error_response_token_empty",
            401
          );
        }
    
        //facebook arguments
        $fields = "id,name,first_name,last_name,email,picture.type(large)";
        $enable_ssl = true;
    
        $response = YaguaretePluginApiCommonFunctions::wpUrlRequest(
          "https://graph.facebook.com/me/?fields=" .
            $fields .
            "&access_token=" .
            $userToken
        );
    
        if (!isset($response["email"])) {
          return YaguaretePluginApiCommonFunctions::wpError(
            "error_response_token_invalid",
            401
          );
        }
    
        if (!email_exists($response["email"])) {
          $userName = $response["name"];
          while (username_exists($userName)) {
            $i++;
            $user_name = strtolower($userName) . "." . $i;
          }
    
          $userData = [
            "user_login" => $userName,
            "user_email" => $response["email"],
            "user_pass" => wp_generate_password(
              $length = 12,
              $include_standard_special_chars = false
            ),
            "display_name" => $result["name"],
            "first_name" => $result["first_name"],
            "last_name" => $result["last_name"],
          ];
    
          //inserting user
          $user = wp_insert_user($userData);
        }
    
        $user = get_user_by("email", $response["email"]);
        add_user_meta(
          $user->ID,
          "YaguaretePluginSocialAvatar",
          $response["picture"]["data"]["url"],
          true
        );
    
        return YaguaretePluginApiCommonFunctions::wpInternalCallGetUser(
          $response["email"]
        );
      }
    

    Any way, thanks for replying!

    • yaguarete
      yaguarete about 3 years
      Hi, does any one have any hint on the subject?.