Data Attributes for Authentication in Memberstack

Article author
Josh Lopez
  • Updated

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.

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.