This article will show you how to A) require members to verify their email address during signup, or B) prompt them to verify their email after signup. Here's how to do it...
☝ Quick Note: Verification emails do not get sent if passwordless auth is enabled.
Enable Email Verification
Navigate to Email Settings in your Memberstack dashboard.
You can use this UI to preview, translate, and brand your emails. Your brand color and logo will be pulled from other areas of the dashboard.
Require Verification to Access Content
Clone this Webflow project to copy and paste a basic email verification page.
Click the toggle at the bottom of the Email Settings page to prevent unverified members from accessing gated content. Create a "Please verify your email" page, and enter the page URL into Memberstack. We will redirect all unverified members to this page when they signup or log in.
Verification Success Redirect
What happens after a new customer verifies their email?
By default, Memberstack directs each new customer to their On Signup URL after they verify their email address. You can customize the On Signup URL by updating your default and plan-level redirects.
Note: Memberstack will remove any query parameters from the redirect. e.g. /success?plan=paid-signup
Redesign Verification Email Button
We automatically send a verification message to the address they used to sign up, but they can re-send the verification email if they didn’t receive it. Place the following data attribute on the button: data-ms-action="resend-verification-email"
.
Prompt Verification After Signup
Clone this Webflow project to copy and paste a verification prompt.
Disable the toggle at the bottom of the Email Settings to allow members regular access to your site.
You can then use the following data attributes to show and hide content from verified or unverified members.
Use data-ms-content="!verified"
to show an element to a member who is NOT verified (picture below).
Pro tip - If you want this element to be hidden by default, you can add the attribute of data-ms-bind:style="display:block"
and then hide the element when you're finished designing it. If the member has access, Memberstack will set the element to display block
. Learn more →
Use data-ms-action="resend-verification-email"
to allow members to send themselves another verification email (e.g. useful if they create an account several weeks ago).
Note: You can also use data-ms-content="verified"
to show an element to a member who IS verified. This feature is less common.
Dashboard
You can check if a member has been verified or not via the dashboard.
FAQ
White-labelling
You can change the "from" address by following the steps in this guide to while-label emails from Memberstack.
Webhooks
When a member becomes verified, the member.updated
webhook fires.
The reason field will show "verified."
Google Authentication
Members who create an account using Google auth will be verified by default if their Google account is verified.
Why do my member get instantly verified without using Google Authentication?
In very rare cases we have seen some educational email servers prefetch the verification email which opens the link to verify the email making it verify on its own. We currently do not have a way to work around this.
Comments
8 comments
I get the email confirmation text to my email. but when I click on the confirm my email then it redirects to same page ( email confirmation page.)
how to solve this?
Hi Mohamed Ali 👋
Memberstack will use the signup redirect once they click verify. You can set that at the site level or at the plan level.
Hello, member stack, I have a modal for the verification code where I have sent the verification code.When I close verification modal and try to login with same email I get this error.
How can I resolve this?
Aspected behavior,
1. close verification modal
2. press login & get another code or just open verification modal
When I click verify email button in email, it takes me to https://www.jannahcircle.orgundefined/?member=%7B%22verified%22%3Atrue%7D&forceRefetch=true
It say 'The page can't be reached'
Hey Ahmed Qayyum
Thank you for posting. I just made some small edits to your app. This should fix the problem. If it does not please submit a support ticket here so we can dig deeper and find a solution.
The problem is fixed. Thank you so much. There is another issue where I am getting 2 verifications emails on successful signup. I run verification email trigger on Wized.
I don't have much experience with Wized. There are a lot of wized users in our community slack though that may be able to help.
Ahmed Qayyum I have also not spent much time with Wize, but i have a theory! Can you please disable verification emails in Memberstack and then only use Wize to send them? That may fix it. If not, then you can remove the emails from Wize and only enable them in Memberstack. Right now it sounds like the feature is enabled twice.
Please sign in to leave a comment.