This feature is super handy when linking from an email to your signup, login, or password reset forms. Since you already know the member's email address it's only kind to pre-fill that email when they land on the page.
You'll want to add this code to the Footer or <Body> section of any page with a signup, login, or reset password form.
<script type="module">
import * as queryString from "https://cdn.jsdelivr.net/npm/native-querystring@1.1.1/+esm";
function prefillInputsByDataAttribute(dataAttribute) {
const params = queryString.parse(window.location.search);
const elements = document.querySelectorAll(`[${dataAttribute}]`);
elements.forEach(element => {
if (element.tagName === "INPUT") {
element.value = params["ms-email"] || "";
}
});
}
window.$memberstackDom.getCurrentMember()
.then(({ data: member }) => {
prefillInputsByDataAttribute("data-ms-member=email");
});
</script>
The link param should look something like this:
www.yourdomain.com/login?ms-email=email@gmail.com.
Comments
10 comments
Memberstack Team
If the snippet doesn't work, add:
In your opening script :)Thank you Massak Chrait 🙏
btw - how did you get the code element to appear in your comment? I've been struggling to figure that out! haha
Duncan from Memberstack
I just clicked on the code block icon in the comment editor... but it seems that it doesn't work anymore somehow
Hey! Could this also work for pre filling both the email and OTP code in the passwordless login forms?
Hey Elias null 👋
Can you explain step-by-step (from a members perspective) how you'd like this to work? i.e. 1) enter email and otp 2) change page from signup to login 3) automatically carry over the values. etc.
Hey Memberstack Team.
I would use this within an email. I could send them a automatically generated link, the email and OTP will be pre filled, and they would instantly be logged in when they click on the e-mail link. Wondering if this is possible. E-mail at least should be possible, but with OTP would be even better, because you could (in theory) use this to create magic link login.
I'm curious what you think!
Cool idea! Assuming you are programmatically creating/sending the emails then it should be possible. (Meaning you would not be able to use the native Memberstack emails).
Then you could use a slightly modified version of MemberScript 67 to populate the email from a link param.
Thanks Duncan from Memberstack! Yeah, that was to be expected. Would you be able then to auto generate the OTP on behalf of the recipient? And am I able to choose a timeframe for the expiry? (24h for example?). It seems like this is a cool way to implement passwordless login with Memberstack.
Elias null there is no way to configure or modify the OTP 🤔 But if you explain why this is important to you, I can pitch the idea in the next product roadmapping call.
Yeah sure! It would be super helpful if I can send out an email with a button that instantly logs the user in into their account. If, in whatever way, I'm able to make a link that logs them in, that would be cool! I don't know how this would work technically, but I can imagine the E-mail and OTP being prefilled into the login form when they click on the button in my email. This way they instantly log in without switching between the inbox and my app 2 times in order to log in with OTP. Let me know if you have any more questions.
Please sign in to leave a comment.