Social Auth Buttons in Profile Forms

Article author
Duncan Hamra

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

11 comments

  • Comment author
    William de Broucker

    Hello, 

    Can I hide some content based on the provider is connected or not ?

     

    0
  • Comment author
    Duncan Hamra
    • Edited

    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. 

    0
  • Comment author
    William de Broucker

    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 :(

    1
  • Comment author
    Duncan Hamra

    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

    0
  • Comment author
    William de Broucker

    Great, that's what I wanted :)

    1
  • Comment author
    Abdelhalim WithDev

    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?

    1
  • Comment author
    William de Broucker

    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

    0
  • Comment author
    Duncan Hamra

    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. 

    0
  • Comment author
    William de Broucker

    Duncan Hamra

    Yes I did, I can send you a Loom by DM if needed

    0
  • Comment author
    Duncan Hamra

    Yes please! That would be a huge help. Please cc in Tyler Bell and Josh Lopez in the community Slack if you can. 

    0
  • Comment author
    William de Broucker

    Hello Duncan Hamra
    Done :) 

    0

Please sign in to leave a comment.