Social Auth Buttons in Profile Forms

Article author
Duncan Hamra
  • Updated

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).

4-minute Tutorial

Managing Auth Buttons

  1. 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.
  2. Copy your social auth buttons from the signup or login forms and paste them inside the div.  
  3. Give the button text a data attribute of data-ms-auth-connected-text="Disconnect Google"Disconnect Google will replace the button text once the auth provider is connected, and you can change this text to be anything you want. 
  4. 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

  1. 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.
  2. Give the div an attribute of  data-ms-content="has-password". This element will only be visible if the member has a password set. 

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.