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
11 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?
Hello Duncan Hamra,
One of my customer gets this error message : "Cannot read properties of null (reading 'value')" when trying to create a password on a Google login account ; however I used the template components for the "Set Password Form".
Here is the link to my page : https://www.ordotype.fr/membership/compte
thanks
Abdelhalim WithDev that should be fine 👍
William de Broucker interesting... it seems to be working for me. Have you been able to replicate the issue on your own device? These sorts of things are hard to test unless we can replicate the issue.
Duncan from Memberstack,
Yes I did, I can send you a Loom by DM if needed
Yes please! That would be a huge help. Please cc in Tyler Bell and Josh Lopez in the community Slack if you can.
Hello Duncan Hamra,
Done :)
Please sign in to leave a comment.