Data Attributes for Authentication in Memberstack

Memberstack offers several data attributes to handle social authentication with providers like Google, Facebook, LinkedIn, etc. These attributes allow you to add social login, connect/disconnect buttons, and conditionally show content based on a connected provider.

data-ms-auth-provider

This attribute adds a social login button in your signup and login forms. It must be used inside the data-ms-form="signup" or data-ms-form="login" elements.

<a data-ms-auth-provider="google" href="#">
  Continue with Google
</a>

data-ms-auth

This attribute creates a container to manage connecting/disconnecting providers. It must wrap data-ms-auth-provider elements.

<div data-ms-auth="manage-providers">

  <a data-ms-auth-provider="google" href="#">
    Continue with Google
  </a>

</div>

data-ms-auth-connected-text

This attribute allows you to change the text of an element if a provider is connected. It must be inside data-ms-auth="manage-providers".

<div data-ms-auth-connected-text="Disconnect Google">
   Connect Google
</div>  

data-ms-auth-disconnect

This attribute shows a child element like an X icon if the provider is connected. It must be inside data-ms-auth-provider.

<div data-ms-auth-provider="google">

  <div data-ms-auth-disconnect>
     <img src="x-icon.png">
  </div>
  
  Connect Google
  
</div>

Using these attributes together allows you to create a social authentication flow in Memberstack. See the documentation for more details on setup and usage.

Memberstack offers several data attributes to handle authentication with email/password or social providers like Google, Facebook, etc.

Regular Email/Password

For standard email and password authentication, use the data-ms-form attributes in your signup and login forms found here.