How to implement a login modal that keeps users on the current page rather than redirecting them? Answered
Is there a way to have it so that if a user is not logged in, the login modal pops up?
Currently, if I send my users to a gated page and they aren't logged in, they are then redirected to the login page, and then the login page redirects them to the login success redirect page, then they have to click the link I sent them again, not ideal.
I'd like to send a user a link, if they aren't logged in the log-in modal pops up, logs them in, and they remain on the /url I sent them.
Comments
12 comments
Hey Felipe, this is possible with custom code. I can send some over to you.
Are you using Webflow?
<script> $memberstackDom.getCurrentMember().then(({data}) => { if (!data) $memberstackDom.openModal("login"); }) </script>Put that code in the footer of the page you’d like the modal to appear on.
Side note, whatever page you put that code on shouldn’t be gated. Otherwise the member will be redirected before the modal appers.
cc Julian Galluzzo in case this snippet is helpful for you too
Thanks so much for your help
Tyler Bell, I put that code into the page and it successfully shows the login modal popup, however when I use the modal to log in, there is some wierd behaviour. When I click the login button, I see a loading wheel for a second, and then nothing happens, it seems the page logged me in, but kept the modal popup there and without reloading the page. here is a quick video of the behaviour: https://i.gyazo.com/6c652370adefb7c6d0f278ff42c4718d.mp4
Is there anything I need to configure so that the modal goes away upon logging in and loads the current page as a logged-in member?
Where should the user be taken to after login?
When using the modal, I'd love it if they could be taken to the page they are currently on. The use case is if I email an user a specific page, often that user isn't logged in so they will be redirected to login and then end up somewhere else via the login redirect. Ideally if I send users to any page, I could have those pages prompt the modal, which then logs them in and reloads the page they are currently on.
ah we see the problem.
Sending you updating code now…
<script> function handleRedirect(redirect) { if (redirect && (window.location.pathname !== redirect)) return window.location.href = redirect; window.location.reload() } $memberstackDom.getCurrentMember().then(async ({data}) => { if (!data) { const { data } = await $memberstackDom.openModal("login"); handleRedirect(data.redirect) } }) </script>Replace your code with the code above 🙂
cc Julian Galluzzo I realized the code I sent earlier doesn’t handle redirects when using the raw openModal function.
You’ll want to update your memberscript code with above - at least when used in Webflow.
This is awesome, super useful! thanks you Tyler
You’re welcome! Is it working for you now?
yes it is
cool!
hi All,
I've a login modal button in a template page setup. Though its a modal, the user is redirected to home page after logging in. Rather I expect the system to retain the same page. How can I achieve this?
Hey Saptharishi Suresh, you can add the attribute data-ms-redirect="current-url" to the login / signup buttons and this will ensure the users land on the same page they initiated the signup / login from. Here's a guide on it as well.
it works perfect. Thanks AJ
Please sign in to leave a comment.