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.
Comments
0 comments
Please sign in to leave a comment.