[Code] Remember Which Social Auth Provider was used to Login

Article author
Duncan Hamra
  • Updated

Hello, in this article I'll help you make your login form more user friendly when there are multiple social auth buttons.

It can be hard for members to remember which auth provider they used to signup. Assuming they are using the same device as when they signed up, this code will help them to remember. Checkout the demo to learn more. 

Place this code before the </body> tag on your signup and login pages. 

 

<script>
// Function to convert string to title case function toTitleCase(str) { return str.replace(/\b\w/g, function(match) { return match.toUpperCase(); }); } const socialButtons = document.querySelectorAll('[data-ms-auth-provider]'); function handleButtonClick(clickedProvider) { // Convert clickedProvider to title case const clickedProviderTitleCase = toTitleCase(clickedProvider); // Remove the class 'ms-clicked' from all buttons socialButtons.forEach(button => { button.classList.remove('ms-clicked'); }); // Find the button with the clicked provider const clickedButton = document.querySelector(`[data-ms-auth-provider="${clickedProvider}"]`); if (clickedButton) { clickedButton.classList.add('ms-clicked'); } // Save the clicked provider to local storage localStorage.setItem('lastClickedProvider', clickedProvider); // Retrieve the element with the data attribute const messageElement = document.querySelector('[data-msx-last-clicked]'); // Update the message text messageElement.textContent = `You previously logged in with ${clickedProviderTitleCase}.`; messageElement.style.display = 'block'; } // Add event listener to each button socialButtons.forEach(button => { button.addEventListener('click', function() { const clickedProvider = this.getAttribute('data-ms-auth-provider'); handleButtonClick(clickedProvider); }); }); // Check if there is a previously clicked provider in local storage const lastClickedProvider = localStorage.getItem('lastClickedProvider'); // Retrieve the element with the data attribute const messageElement = document.querySelector('[data-msx-last-clicked]'); if (!lastClickedProvider) { // Hide the element if there is no previously clicked provider messageElement.style.display = 'none'; } else { // Convert lastClickedProvider to title case const lastClickedProviderTitleCase = toTitleCase(lastClickedProvider); // Display the element and set the message messageElement.textContent = `You previously logged in with ${lastClickedProviderTitleCase}.`; messageElement.style.display = 'block'; // Add the 'ms-clicked' class to the corresponding button const clickedButton = document.querySelector(`[data-ms-auth-provider="${lastClickedProvider}"]`); if (clickedButton) { clickedButton.classList.add('ms-clicked'); } }
</script>

The code will apply the .ms-clicked classname to the most recently clicked auth button. 

And it will set the element with the attribute data-msx-last-clicked to display block and update the message after the user clicks on a button. 

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.