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
- 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
data-ms-auth-connected-text="Disconnect Google".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.
Comments
6 comments
Hello,
Can I hide some content based on the provider is connected or not ?
Hey William de Broucker,
I don't think so 😞 But I'm curious, what content are you hoping to hide? I can add this to the roadmap if it's important for you.
I want to hide the disconnect from Google button once the user did connect his memberstack account to his/her Google account.
The button creates confusion = people think it is a logout button :(
Oh, gotcha!
In that case, you can remove the element with data-ms-auth-disconnect="true". That element is not required for the button to work.
You can also update the data-ms-auth-connected-text="Disconnect Google" attribute to say something like ... data-ms-auth-connected-text="Google Connected"
Video to show what I mean https://www.loom.com/share/de230b876a9d4a4ba8251752f4c22336
Great, that's what I wanted :)
To disconnect the Google Auth for example it requires you put a password first but what if I am using passwordless login/signup feature? is this case covered?
Please sign in to leave a comment.