# 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

<figure><img src="/files/hZy68TPkjsTl71UZEKig" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/i9YYRObBR2d71Okc7nmJ" alt=""><figcaption></figcaption></figure>

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 <mark style="color:green;">`social_login_response`</mark> element state. This state contains the data returned by the respective provider.

Example of data stored:

```json
{
    "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:**

<figure><img src="/files/mS9rPepTUe1HgiSvCmf4" alt=""><figcaption></figcaption></figure>

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

2. **Schedule a Custom Event**

<figure><img src="/files/OPaorbu2s9s90KKYm523" alt=""><figcaption></figcaption></figure>

* 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

<figure><img src="/files/cqfovodiwEGACMvEtVnF" alt=""><figcaption></figcaption></figure>

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 <mark style="color:green;">`social_login_response`</mark> 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:**

<pre class="language-json"><code class="lang-json">{
    "full_name": "John Doe",
    "first_name": "John",
    "last_name": "Doe",
    "email": "johndoe@gmail.com",
    "profile_picture": "&#x3C;picture_url>",
    "login_type": "googleLoginToken"
}

<strong>================== or ===================
</strong>
{
    "error": "Error",
    "login_type": "googleLoginToken"
}
</code></pre>

***

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

<figure><img src="/files/8m5XVeAC6xNqCne1sy7e" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/NBt6vEz2KiRutOWXJ02B" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/H05RpSSKy0AocuI3iUf4" alt=""><figcaption></figcaption></figure>

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webtonative.com/website-plugins/bubble.io/social-login.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.