How to use Memberstack with Next.js to create a Google-only signup modal while handling authentication issues?
Hi, I’m trying to use memberstack with a NextJS project and running into some issues.
As a background, I want a simple signup and signin modal that only allows doing so only through google (configured already). So that users have a simple experience when signing up for my web-app and our Circle.so community.
The native nextjs/react modals don’t seem to have any options to limit to just google even though the AI support bot suggested passing a param "googleOnly" (didn't work).
I thought I could go down the "Components" route to copy/paste one of those but the library seems to be 100% geared towards webflow
Lastly, even with the native signup modal, the onSuccess handler is firing even if I just close the modal - so some basic things aren't working as expected.
Hoping someone can help. thx
Comments
5 comments
Hello Yoav,
Most of Memberstack direct users use Webflow, so most of their content is towards them 😅
You can treat their NextJS package as any other JS library. I always encourage people to read the MemberstackDOM package because everything comes from it. Next and React packages are wrappers of this.
Do you want to create your own modal or you want to use Memberstack's default one?
If you want to use memberstack's default modals, and want to use only google, I think you will need to hide the email and password fields via CSS... As I see no way of removing those fields in the dashboard nor via code parameters.
If you want to create your own modal, you will need to use signupWithProvider and loginWithProvider methods to authorize your users
I've figured out how to limit memberstack's default signup/login modal to what i need by just hiding the form. Hacky, but simple
I've actually now figured out most of what i needed - including the onSuccess handler - i thought it was a simple true/false but now i realize all the data gets returned with it and i needed some logic.
thanks for your help 🙂
Maybe you can help me with this:
Does Memberstack have a hosted signup page?
i could only find the hosted login page at auth.memberstack.com
right now i've successfully limited the number of steps a user has to take when "Subscribing" from my web app, by directing them to my Circle.so sign in page (/users/sign_in?post_login_redirect=xxx) which redirects them to sign in at auth.memberstack.com
but if they don't have a memberstack account yet, it obviously fails. If i could set the exact same flow, but with a sign up form, i think it'll work. Is there a different URL i can try ?
Hey Yoav Schwartz, I believe you can add your Signup URL in the Memberstack dashboard settings. It would help you to add a sign up link to the SSO Login page that you already have. That way you can keep the flow the same with an option for users to create an account if they don't have already. More info on this can be found here. Hope this helps.
Hey group, not sure how i ended up here. 😀 Just a quick question, is it possible to use memberstack without webflow? Can I integrate it with my existing Next.js project? TIA!
Hi Billy,
Yes, you can definitely use Memberstack without Webflow! Memberstack is designed to be flexible and can be integrated with various frameworks, including Next.js
To get started, here are helpful links to guide you:
https://docs.memberstack.com/hc/en-us/categories/17509843825819-Developer-Docs
https://developers.memberstack.com/docs
Please sign in to leave a comment.