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.

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"
}

---

After verifying the social login response, your workflow includes steps for:

1. Signing up the user

2. Assigning a temporary password

3. Logging the user in

4. Going to the page index

Step 4: Sign the User Up

1. Add a Conditional Step:

   • Add a condition to check if the user already exists in your database

   • Use "Search for Users: count < 1" as your condition (as shown in Image 1)

2. Configure the Sign-Up Action:

   • Set the Email field to use the result from step 1's email (webtonative verification)

   • Set the Password field using a temporary password (from step 1's result)

   • Add options as needed:

     • Password confirmation requirement

     • Email confirmation option

     • "Remember the email" option

3. Advanced Options:

   • Use the "Change another field" button to add any additional user data fields

   • Set these fields with corresponding values from the social login response

Step 5: Assign a Temporary Password to User

1. Configure the Temporary Password Assignment:

   • Set the User field to "Search for Users: first item"

   • This ensures you're assigning the password to the correct user account

   • Consider adding constraints based on the email from the social login response

2. Password Security Settings:

   • Set appropriate password complexity requirements

   • The temp password should be generated securely and not visible to users

   • Add any debugging breakpoints if needed during development

Step 6: Log the User In

1. Configure the Login Action:

   • Email: Use the result from step 1 (webtonative verification's email)

   • Password: Use the result from step 3 (temporary password)

   • Set the "Stay logged in" option to "Yes"

   • Enable the "Remember the email" option if desired

2. Add Login Options:

   • Set conditional login behavior if needed

   • Consider adding error handling in case login fails

Step 7: Go to Page Index

1. Configure Navigation:

   • Set the destination page to your app's index or dashboard

   • Pass any necessary parameters to the destination page

   • Consider adding any required states or session variables

2. Add Completion Logic:

   • Consider adding analytics tracking for successful logins

   • Add any essential cleanup of temporary states or variables

Optional Enhancements:

1. Error Handling:

   • Add error-handling steps between each major action

   • Display appropriate messages to users if any step fails

2. User Experience Improvements:

   • Add loading indicators between steps

   • Consider adding user preferences from the social profile

3. Security Enhancements:

   • Add rate limiting for login attempts

   • Implement proper session management

   • Consider adding two-factor authentication options

---

Note:

After completing the "Verify Social Login" action, 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.