Enable Cross-Domain Login with Memberstack

Article author
Josh Lopez

Cross-domain login is a great new feature available with Memberstack. It allows your members to stay logged in as they navigate across your different domains that have Memberstack installed.

For example, a member can log into yoursite.com and then go to app.yoursite.com without having to log in again. This creates a unified experience across all of your websites.

For example:

  • A member logs into yoursite.com
  • They then go to app.yoursite.com
  • They are still logged in!

This feature is not for separate domains. It only works if the two sites share the root domain.

If you are having trouble with cross domains not working make sure you have added a Custom Domain in your application settings.

Cross-domain login creates a seamless, unified experience for your members.

Follow these steps to enable it:

1. Set up Custom Domains

First, you need to have Custom Domains configured in Memberstack. This allows you to use Memberstack across multiple domains.

2. Update your Header Scripts

Add the following code above the memberstack install script on both websites. Don't delete the memberstack install script!

<script>
const memberstackConfig = {
  useCookies: true,
  setCookieOnRootDomain: true
}
</script>

This enables two key options:

  • useCookies - Uses cookies for session management across domains.
  • setCookieOnRootDomain - Sets the cookies on the root domain to allow access across subdomains.

If you are only using the DOM Package you can add the two properties to the init function to enable this as well.

memberstackDom.init({
    ...
    useCookies: true
    setCookieOnRoot: true
})

And that's it! Cross-domain login will now work across your Memberstack sites. Members can seamlessly navigate without re-logging in.

Was this article helpful?

Comments

14 comments

  • Comment author
    Suhail Razzak

    Josh-Lopez when will this be available in the memberstack/dom package? thanks.

    0
  • Comment author
    Josh Lopez

    Hey Suhail Razzak 👋

    It is available now! In the init function you would need to add two additional properties like:

     memberstackDom.init({
        ...
        useCookies: true
        setCookieOnRoot: true
    })
    -1
  • Comment author
    Suhail Razzak

    Thank you! Will check it out 👍

    0
  • Comment author
    Antoine Charrier

    Hello I'm almost there thanks for this feature, but now I want to GATE the entire subdomain. How to do it please ?

     

    0
  • Comment author
    Artem Avramenko

    When I add the script I get "Access blocked: This app's request is invalid" error when using Google SSO. Also website becomes not secure in the browser.

    I think this is because I have a reverse proxy and it breaks something. 
    (Custom domain was set up correctly and it works just fine)

     
    0
  • Comment author
    Jon Worek

    Hi Josh. Thanks for putting together this guide. Have you tested this with the React package? https://developers.memberstack.com/docs/react-package#memberstack-provider

    I might have expected that you could pass in the same two config options as you would to memberstackDom:

    memberstackDom.init({
        ...
        useCookies: true
        setCookieOnRoot: true
    })

    when initializing the <MemberstackProvider config={config}/> but it doesn't seem to have an effect. The `_ms-mid` cookie is still getting written for the subdomain, and not the root domain.

    2
  • Comment author
    Simran Sidhanti

    Hey, I have set up custom domains for our site but for some reason the production webflow site, is now not able to retain it's login state. As soon as I login, it logs me out. i.e the logout button is not visible anymore and _ms_member cookie is also gone. Used to not happen before setting up custom domain and doesn't happen on staging site either.

    0
  • Comment author
    Josh Lopez

    Hey Simran Sidhanti

    I haven't seen this come up. What is your url so i can take a look?

    0
  • Comment author
    Simran Sidhanti

    https://www2.microburbs.com.au/memberstack/memberstack

    https://microburbsstaging.webflow.io/memberstack/memberstack

    Hey Josh-Lopez this is the production and staging webflow url. I am just testing the MS login system so ignore the design.

    0
  • Comment author
    Josh Lopez

    Simran Sidhanti

    It looks like you found something we didnt account for! We just updated the code and you should be good to go now. I just tested and its working for me.

    0
  • Comment author
    Simran Sidhanti

    Josh-Lopez

    Hey Josh. Thanks for the quick fix, the cross domain login is working well now. But the logout functionality has stopped working now. Whenever I click the logout button, it still keeps the user logged in. If you could have a look at that, that would be great. Cheers

    0
  • Comment author
    Josh Lopez

    Simran Sidhanti

    I just took a look and i didnt see a logout button. I did use await window.$memberstackDom.logout() in the console and was able to logout so it should work if a logout button is added because thats the code it uses.

    0
  • Comment author
    Simran Sidhanti

    Josh-Lopez

    There's a logout button at the bottom right. And even though you using your await window.$memberstackDom.logout() code says it's logged out, the logout button still remains there which gets hidden if the user is actually logged out.

    https://cdn.discordapp.com/attachments/912694468031950868/1192358469991420005/image.png

    You can also confirm that by looking at the ms_member key in the local storage. Which is absent when logged out. If you wanna confirm logged out button gets hidden upon logging out, you can check our staging site on which it gets removed. But in custom domain one, it immediately logs you back in.

     

    0
  • Comment author
    Josh Lopez

    We just released a fix for this! Everything should be good to go now! :)

    0

Please sign in to leave a comment.