> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: eb63ac3d-8468-42c0-9832-f104c3f3ccd6
---

# How to add social login for membership pages

> In this guide you will add social login capability to your login template.

export const SupportedProducts = ({marketing, sales, service, cms, data, commerce, marketingLevel, salesLevel, serviceLevel, cmsLevel, dataLevel, commerceLevel}) => {
  const translations = {
    description: "Requires one of the following products or higher.",
    productNames: {
      marketing: "Marketing Hub",
      sales: "Sales Hub",
      service: "Service Hub",
      cms: "Content Hub",
      data: "Data Hub",
      commerce: "Commerce Hub"
    },
    tiers: {
      free: "Free",
      starter: "Starter",
      professional: "Professional",
      enterprise: "Enterprise"
    }
  };
  const translateTier = tier => {
    if (!tier) return '';
    const lowerTier = tier.toLowerCase();
    return translations.tiers[lowerTier] || tier;
  };
  const products = [{
    name: marketing ? translations.productNames.marketing : '',
    level: translateTier(marketingLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/marketing-bolt.svg",
    alt: "Marketing Hub"
  }, {
    name: sales ? translations.productNames.sales : '',
    level: translateTier(salesLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/sales-star.svg",
    alt: "Sales Hub"
  }, {
    name: service ? translations.productNames.service : '',
    level: translateTier(serviceLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/service-heart.svg",
    alt: "Service Hub"
  }, {
    name: cms ? translations.productNames.cms : '',
    level: translateTier(cmsLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/content-play.svg",
    alt: "Content Hub"
  }, {
    name: data ? translations.productNames.data : '',
    level: translateTier(dataLevel),
    icon: "https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/subscription_key_icons/operations_icon.svg",
    alt: "Data Hub"
  }, {
    name: commerce ? translations.productNames.commerce : '',
    level: translateTier(commerceLevel),
    icon: "https://developers.hubspot.com/hubfs/Knowledge_Base/subscription_key_icons/commerce_icon.svg",
    alt: "Commerce Hub"
  }].filter(product => product.name && product.level);
  if (products.length === 0) return null;
  return <div>
      <div className="text-sm mb-2">{translations.description}</div>
      <div className={`grid ${products.length === 1 ? 'grid-cols-1' : 'grid-cols-2'} gap-1.5`}>
        {products.map((product, index) => <div key={index} style={{
    display: 'flex',
    alignItems: 'center'
  }}>
            <img src={product.icon} alt={product.alt} className="w-3.5 h-3.5 mr-1.5 mt-2.5 mb-2.5 flex-shrink-0 align-middle" />
            <span className="font-medium mr-1 text-sm">{product.name} -</span>
            <span className="text-sm">{product.level}</span>
          </div>)}
      </div>
    </div>;
};

<Accordion title="Supported products" defaultOpen="true" icon="cubes">
  <SupportedProducts cms={true} cmsLevel="enterprise" />
</Accordion>

Remembering your password across the hundreds of sites we interact with day to day can be hard. Especially if you follow best practices and have separate passwords for all of your accounts. You can make it easier on users who have memberships with your website by providing the ability to login using social accounts like Facebook and Google.

In this guide you will add social login capability to your login template

## What you need before you begin

* Memberships functionality (requires CMS Enterprise)
* A membership login template
* A website page you wish to restrict access to
* A contact list you will give page access to (a list which just contains your email would be good for testing before using a real list)

<Steps>
  <Step title="Open your login template">
    In your theme, find and open your login template. Membership login templates are required to have the template annotation `templateType: membership_login_page`
  </Step>

  <Step title="Add the membership social login module">
    Add the code for the `membership_social_logins` module to your template where you want the button(s) to appear.

    ```hubl theme={null}
    {% module "social" path="@hubspot/membership_social_logins" %}
    ```

    <Info>
      The module supports both Google and Facebook login. You can add both, or just one of them to your login page.
    </Info>

    The module supports both Google and Facebook login. You can add both, or just one of them to your login page.

    ### Add Google login button

    You will create credentials in the Google developer console. You will be given a **client ID** which you will then use in your module tag.

    1. Go to the [Credentials page](https://console.developers.google.com/apis/credentials).
    2. Select **"Create credentials > OAuth client ID"**
    3. Select **"Web application"** application type.
    4. Name your application something that communicates what your users will be logging into on your HubSpot site.
    5. Click **"Create"**
    6. Copy the **Client ID** of your newly created OAuth client.
    7. In your template file, find the social login module, add the parameter `google_clientid="YourAppID"` replace "YourAppID" with the app ID you just copied.
    8. Add the parameter `google_enabled=true`. This will make the Google login button appear.

    ### Add Facebook login button

    To add the facebook login button you will create an app in Facebook's developer dashboard. The app will be given a **Facebook App Id**.

    1. [Log into your Facebook developer account](https://developers.facebook.com/apps/) ([Register a new account](https://developers.facebook.com/docs/development/register) if you don't have one)
    2. Use the **"Create App"** button.
    3. Select **"Build connected experiences"**, then **"continue"**.
    4. Name your app something that communicates what your users will be logging into on your HubSpot site. Select **"Create app"**.
    5. You should now see a screen that says "add products to your app".
    6. Select **"Facebook Login"**
    7. Open **"Settings"** in the left side navigation panel and under Client OAuth Settings, enter your redirect URL in the **"Valid OAuth Redirect URIs"** field.
    8. In the top bar you will see your **app id**. Copy it to your clipboard.
    9. In your template file, find the social login module, add the parameter `facebook_appid="YourAppID"` replace "YourAppID" with the app ID you just copied.
    10. Add the parameter `facebook_enabled=true`. This will make the facebook login button appear.

    <Info>
      HubSpot does not have control over the UI that Google and Facebook provide. Should their UI change these instructions may become confusing or no longer work. The most important part is that you create a client/app, then get it's ID. Provide that id through the default module's parameter for that provider and their respective "enabled" parameter.
    </Info>

    Below is an example of what your code may look like. If you are only adding one of the providers, you would not need to include an id, and the enabled parameter for services you are not supporting.

    ```hubl theme={null}
    {% module "social" path="@hubspot/membership_social_logins",
      clientid="1234567890-abc123def456.apps.googleusercontent.com"
      appid="12345678"
      facebook_enabled=true
      google_enabled=true
    %}
    ```
  </Step>

  <Step title="Test the social login">
    1. [Create a contact list](https://knowledge.hubspot.com/lists/create-active-or-static-lists#set-up-a-new-list) with just your email address in it. *Email address must also be used for your Google or Facebook account.*
    2. [Set a page to "Private registration required",](https://knowledge.hubspot.com/website-pages/require-member-registration-to-access-private-content#set-up-membership-registration-for-pages) choose your newly created test list.
    3. Visit one of these pages using incognito mode so you are not signed in. You should see your login template with the social login functionality.
    4. Attempt to log in using the social login buttons.

    If you're seeing any issues, look back through the instructions, ensure your client ID or app ID is entered correctly and passed to the module. Ensure if you have security set up for it that your site's domain is set as a trusted domain in the app settings.
  </Step>
</Steps>

## You're done!

Congratulations you successfully added social login functionality to your login template! Your users can now use their Google and/or Facebook to log in.

## Related resources

* [Memberships](/cms/start-building/features/memberships/overview)
* [Memberships SSO](/cms/start-building/features/memberships/sso)
* [CRM Objects in CMS Hub](/cms/start-building/features/data-driven-content/crm-objects)
* Membership social logins module reference