Social Login

WebToNative Social Login Integration for Bubble.io

This guide provides step-by-step instructions to configure the WebToNative Social Login plugin in Bubble.io. By following these steps, you will enable users to log in using Google, Facebook, or Apple accounts.

---

Step 1: Configure the Social Login Action

Trigger: When the social login button is clicked (e.g., Google Login button).

1. Add a Workflow Action:

   • In your Bubble.io workflow, add the Social Login action.

2. Configure Properties:

   • App: Specify the social login provider (e.g., google, facebook, apple).

Outcome: After a successful social login action, the plugin will store the response in the social_login_response element state. This state contains the data returned by the respective provider.

Example of data stored:

{
    "type": "googleLoginToken",
    "idToken": "<id_token>",
    "accessToken": "<access_token>",
    "clientId": "<app_id>"
}

---

Step 2: Schedule the "Verify Social Login" Custom Event

Trigger: After the social login action completes.

1. Add a Delay:

• Add a 0.2-second delay to allow the plugin to process the response.

1. Schedule a Custom Event

• Create a custom event named "Verify Social Login".

• Schedule this custom event to run after the delay.

Purpose: This ensures that the response from the social login action is verified in the next workflow step.

---

Step 3: Verify Social Login Response

Action: Verifying Social Login

1. Add the Verification Action:

   • In the "Verify Social Login" custom event workflow, add the Verify Social Login action.

2. Configure Properties:

   • Social Login Response: Use the social_login_response state to pass the data.

Verification Logic:

• For Google, verify the idToken with Google's API.

• For Facebook, verify the accessToken with Facebook's Graph API.

• For Apple, decode and verify the idToken using Apple's public keys.

Outcome: The verification action will return user details such as:

• Full Name

• First Name

• Last Name

• Email

• Profile Picture

Example Output:

{
    "full_name": "John Doe",
    "first_name": "John",
    "last_name": "Doe",
    "email": "[e-mail]",
    "profile_picture": "<picture_url>",
    "login_type": "googleLoginToken"
}

================== or ===================

{
    "error": "Error",
    "login_type": "googleLoginToken"
}

---

Step 4: Handle User Data Post Verification

Purpose: Update the user data or redirect to another page after verification.

1. Change User Email:

• Add an action to Change Email for the current user.

• Use the verified email from the social login response.

1. Update User Details:

• Add an action to Make Changes to the Current User.

• Update fields such as:

  • First Name

  • Last Name

  • Profile Image

1. Redirect User:

• Add a Navigation Action to redirect the user to another page (e.g., dashboard or home page).

---

Final Workflow Summary

1. Trigger Social Login:

   • Add the Social Login action and configure it with the chosen app.

2. Schedule Verification:

   • Add a delay and schedule the "Verify Social Login" custom event.

3. Verify Social Login:

   • Add the Verify Social Login action in the custom event.

4. Update User Data:

   • Modify user fields like email, name, and profile picture.

5. Redirect User:

   • Navigate the user to the desired page.

---

Note:

After the "Verify Social Login" action is completed, users can customize the workflow to fit their specific needs. The post-verification steps provided (e.g., updating the current user's email, first name, last name, profile picture, etc.) are only examples. You can extend or modify the workflow to include additional actions, such as:

• Updating user roles or permissions in the database.

• Unlocking access to specific app features.

• Triggering notifications or onboarding processes.

• Redirecting users to specific pages or dashboards based on their login type or user status.

Feel free to adapt the workflow to suit your application's requirements.

---

Handling Social Logout

To ensure proper logout functionality across all social login platforms (e.g., Google, Facebook), users need to configure two separate "User is logged out" events in their workflow. Follow these steps:

---

Step 1: Add the First "User is Logged Out" Event

1. Go to your workflow editor.

2. Create a new "User is logged out" event.

3. Add the "Social Logout" action in Step 1 within this event.

4. Set the App property in the "Social Logout" action to the respective platform (e.g., Google or Facebook).

Tip: You can create multiple workflows for each social platform (e.g., one for Google, another for Facebook).

---

Step 2: Add the Second "User is Logged Out" Event

1. Create a new "User is logged out" event.

2. In this event, handle any additional logout-related actions, such as:

   • Redirecting the user to the homepage.

   • Clearing session-specific data.

   • Displaying a logout confirmation message.

---

Note: Ensure that the "Social Logout" action is included for each social login platform to prevent lingering sessions in external apps (e.g., Facebook or Google). If the app is left blank, the logout might not properly terminate sessions in external apps.

---

This setup ensures a smooth and secure social login process in your Bubble.io application using the WebToNative Social Login plugin.