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.
Comments
20 comments
Josh Lopez when will this be available in the memberstack/dom package? thanks.
Hey Suhail Razzak 👋
It is available now! In the init function you would need to add two additional properties like:
Thank you! Will check it out 👍
Hello I'm almost there thanks for this feature, but now I want to GATE the entire subdomain. How to do it please ?
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)
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:
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.
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.
Hey Simran Sidhanti
I haven't seen this come up. What is your url so i can take a look?
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.
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.
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
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.
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.
We just released a fix for this! Everything should be good to go now! :)
I seem to understand that cross chain is only for subdomain of the same root...for true cross chain retaining the sign in.
we are trying to build a media content network of multiple brands but seamlessly have the same paid member user base have access to the all te paid content across our brands.
Can I use the same memberstack account for membership sign up form and login pages on multiple websites techincally without cross chain semaless? Like each ones requires independent logins and i create the individual plans and gated access for each?
i.e.
abc.com > user sign up/sign in > free plan abc > gain access permission to gated bonus content on abc.com
abc.com > user sign up/sign in > paid members plan > gain access permission to both free gated bonus content > also gain access to exclusive paid only content for abc.com
I install same account code to site def.com. The user has to login in separately and can not go back and forth between abd.com and def.com logged in to both seamlessly.
def.com > user sign up/sign in > free plan def > gain access permission to squarespace membersite gated bonus content on def.com
def.com > user sign up/sign in > paid members plan A > gain access permission to gated free bonus content > also gain access to gated exclusive paid only content for def.com
So can members can get access to either site like that?
Hi, I have a question:
What if a user logs into subdomain1.yoursite.com, then goes to subdomain2.yoursite.com, will the user still be logged in over there?
I have domains currently hosted on heroku and have CNAME records that point from my sub domain the the heroku domain. I am unable to add another CNAM record for my sub domain. Any help would be greatly appreciated. I have spent days on this problem and have not been able to find a solution.
Hi,
my 2 subdomains are as follows:
subdomain1 (where users create their account) is NextJs where I've adjusted layout.tsx to include these variables:
subdomain2 is a Circle.so community. Since i'm using Cloudflare, I attempted to add the javascript snippet through Zaraz (which should add it to the head via proxy)
Needless to say it's not working. When my users create an account on subdomain1, i redirecto them to circle's auth login (on subdomain2) which routes them to the Memberstack hosted auth page (also on my subdomain)
So everything is on the same domain. My expectation is at most the user will just have to "authorize" the connection between MS and Circle but not have to log in again.
thanks for your help!
Yoav Schwartz On the subdomain2, did you install the script with the data-memberstack-use-cookies attribute?
```
<script data-memberstack-app="APP_ID_HERE" data-memberstack-use-cookies src="https://static.memberstack.com...." type="text/javascript"></script>
```
Because if not then the subdomain2 might still be using localStorage for session detection.
More information on this: https://docs.memberstack.com/hc/en-us/articles/14958076984347-Override-Memberstack-to-use-cookies-instead-of-local-storage
subdomain2 is hosted by circle.so, where i have SSO with Memberstack enabled, which means it must already have memberstack installed.
So the script i have injected with Zaraz (Cloudflare) is:
i just tried adding the installation script itself with the suggested data attribute, but that didn't work either. Once the user hits subdomain2 (circle.so) they get redirected to auth (subdomain3)
Please sign in to leave a comment.