Profile URL Redirects Home

Hello! Perhaps I’m going at this wrong since I see members in the past has had success, but I can’t get the profile modal to pop up. The signup modal’s implementation is similar so I’m not sure whether it’s a bug or not.

The tech stack I’m using is React.

Sign up Modal:

<div className="loginContainer">
        <a href="#/ms/signup/5efb222e2be7f100043b8389">
              <Button color="green">Sign Up / Login</Button>
       </a>
</div>

Profile Modal:

<Dropdown.Menu>
        <Dropdown.Item>
                  <a href="/#/ms/profile">Profile Settings</Link>
         </Dropdown.Item>
</Dropdown.Menu>

When sign up button is clicked, the sign up modal pops up.
When the Profile Settings button is clicked, it redirects me to the login screen.

I added an extra “/” in front for profile because when the user is logged in, they are directed to “domain.com/dashboard”. Without the “/”, it would concatenate to the url and become “domain.url/dashboard#/ms/profile” and nothing happens.

Digging a bit deeper, I tried to get the member’s metadata with

window.MemberStack.onReady.then(async member => {
        let res = await member.getMetaData();
        console.log(res);
    });

and got the error after I logged in by entering the correct username and password:
Uncaught (in promise) Error: Member must be logged in at memberstack.js?webflow:1 at c (memberstack.js?webflow:1)

Hey Simon :wave:

Yay another react dev! In your profile link remove the starting / so it would be #/ms/profile you would also need to reload Memberstack on each new page change since react does things different than a regular site. Try using window.MemberStack.reload() for that :smiley: If this doesn’t fix the problem let us know. :pray:

Hi Josh!

I’ve tried running window.MemberStack.reload() on each component but I continue to get Uncaught (in promise) Error: Member must be logged in at memberstack.js?webflow:1 at c (memberstack.js?webflow:1) error.

Tried again by just using without “/”. Domain becomes “domain.com/dashboard#/ms/profile” but UI is unchanged.

Also noticed an odd behavior on the Login button that only appears after the app is built and deployed. It will have style=“display: none” tacked onto the anchor tag, effectively hiding my Login button.

Compile time:

<div className="loginContainer">
            <a href="#/ms/login">
                <Button color="green">Login</Button>
            </a>
</div>

Runtime:

<div className="loginContainer">
            <a href="#/ms/login" style="display: none">
                <Button color="green">Login</Button>
            </a>
</div>

Hello again!

Would you be willing to jump on a call with us sometime soon? :smiley:

Thanks for the offer, I would love to!

Here is a calendar where you can schedule a meeting. :smiley: