In this tutorial, we'll create a UI for members to connect providers, view previously connected providers, disconnect providers, and to set a password. (Note if you're using Memberstack's pre-built UI all of this will be handled for you automatically).
Managing Auth Buttons
- Create a div with the attribute
data-ms-auth="manage-providers"and place this div anywhere on the site. Notes:
- This div can contain multiple social auth buttons.
- This div can be inside or outside of a profile form.
- Copy your social auth buttons from the signup or login forms and paste them inside the div.
- Give the button text a data attribute of
Disconnect Googlewill replace the button text once the auth provider is connected, and you can change this text to be anything you want.
- Last, you'll need to add a text block, div, or image with the attribute
data-ms-auth-disconnect="true". This element will only be visible if the provider is connected.
Set Password Forms
This next step assumes you've previously set up a custom profile form for members' to update their passwords.
- Locate your "Current Password" field and wrap it in a div. We want this field only to appear if the member actually has a current password set.
- Give the div an attribute of
data-ms-content="has-password". This element will only be visible if the member has a password set.