Data Attributes for Authentication in Memberstack

Article author
Josh Lopez

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

2 comments

  • Comment author
    Musab Dali

    If I am using data-ms-auth-provider="google" in a sign up form, how can I override the email verification redirect so that it either:
    1. Logs in immediately
    2. or at least take user to the Log In page instead of the Verification Required page

    0
  • Comment author
    Josh Lopez

    hey Musab Dali  

    If the member has verified their email with google then they are auto verified. If you would like us to assume the member using google is verified we can over ride and make all google users verified. We would need to know your app id to enable this.

    0

Please sign in to leave a comment.