Set up a Subscription form for Nextjs App.

NNanaGaisie

I am using kinde to set up a subscription form to build a waitlist and generate interest on the landing page of my app before it is ready for the public. After subscription, I am redirected to

Plain Text

https://<subdomain>.kinde.com/widgets/subscribe/v1/subscribe

with the json:

Plain Text

{ "status": "success", "message": "Success! You'll be notified as soon as Smartnote is ready." }

.
When a user has already subscribed, I get this error message:

Plain Text

400 Bad request
Sorry, you can not access that page.
You can return to the homepage.

Did I implement this correctly? If not how do you recommend I implement this in my nextjs app.

15 comments

OOli - Kinde

Hey @NanaGaisie,
Thanks for reaching out. Always happy to give guidance on your approach to implementing Kinde.

Based on the code you've provided, it seems like you've implemented the Kinde subscription form correctly in your Next.js app. The script for the Kinde widget is correctly added and removed on component mount and unmount, and the form appears to be set up correctly with the necessary data attributes.

The success message you're seeing after subscription and the 400 error when a user who has already subscribed tries to subscribe again are both expected behaviors. The success message indicates that the subscription process is working as expected, and the 400 error is Kinde's way of preventing a user from subscribing multiple times with the same email address.

If you want to improve the user experience, you could add some error handling to display a friendly message when a user who has already subscribed tries to subscribe again. However, this would require making a request to the Kinde API to check if the user's email is already in the list of subscribers, which might not be feasible depending on your application's requirements.

Overall, it seems like you've done a good job implementing the Kinde subscription form in your Next.js app. If you have any other questions or run into any issues, feel free to ask!

NNanaGaisie

Thank you @Oli - Kinde,
But is there a way I can display the success message directly on the page after signing up without redirecting to kinde?

OOli - Kinde

I will have to speak to my team on Monday about this

NNanaGaisie

Hey @Oli - Kinde,
Could you find out about the issue I was facing and is there a possible work around?

OOli - Kinde

Hi there,
My team are still looking into your issue.
Apologies for the inconvenience.

vviv (kinde)

Hey @NanaGaisie - just regarding the success message, did you want it to display directly below the form after a user signs up (ss attached)? I believe this is the default behaviour, but if you're not seeing this - could I quickly check if the <script> you've copied from Kinde admin looks like <script src="https://widgets.localkinde.me/v1/js/subscribe.js"></script>? Noticed there may be an encoding err, so the quotes may be appearing as &quote; - changing them over to "" should resolve this, I'll update in Kinde. Thanks!

Attachment

NNanaGaisie

Hi @viv (kinde),
Yes I want to display the success message directly below after the user signs up.
I am using a useEffect to add the script to the dom when the component mounts. I have the code below. I am not getting the expected behavior.

Plain Text

useEffect(() => {
    const script = document.createElement("script");
    script.src = `https://widgets.kinde.com/v1/js/subscribe.js`;
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

vviv (kinde)

Hi @NanaGaisie - I've fixed up the encoding issue in Kinde admin -> Design -> Subscribe, would you mind copying over the HTML/CSS/JS generated there and trying again? Thank you!

NNanaGaisie

Thank you @viv (kinde), will try it and give you a feedback on that.

MMurtazak

Hello I have setup the form using the steps and script when user submit it sometime redirect and sometime stay in same place how to fix that behavior

vviv (kinde)

Hi Murtazak - can I check where it is redirecting to? Also are you seeing a pattern in this behaviour (ie just on success / just on failure) or is it just occurring randomly? Thanks!

MMurtazak

Yes I have notice a pattern when user is logged its redirect and when user is logged out it shows message below

OOli - Kinde

Hey @Murtazak,
Are you able to share where the users are being redirected to?
Also, are you able to share a recording (or screenshot) of this issue? You can DM me of you prefer.

NNanaGaisie

Hey, using dangerouslySetInnerHTML for setting a subscription form works as expected. The form does not listen to user preference for setting the theme to light or dark. Setting the global preference for theme in the globals section for design does not affect the subscription form and email theme.

OOli - Kinde

Hey @NanaGaisie,
Would you be willing to share a recording (or screenshot) showing this issue where the dark/light mode theme does not work with using dangerouslySetInnerHTML? You can DM me if you prefer.

Add a reply

Welcome to the Kinde community

Set up a Subscription form for Nextjs App.