Kinde•11mo ago

Set up a Subscription form for Nextjs App.

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

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

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

with the json:

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

{ "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:

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

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.

subscription-form.ts...

15 Replies

Oli - Kinde•11mo ago

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!

NanaGaisieOP•11mo ago

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?

Oli - Kinde•11mo ago

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

NanaGaisieOP•11mo ago

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

Oli - Kinde•11mo ago

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

viv (kinde)•11mo ago

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!

NanaGaisieOP•11mo ago

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.

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);
    };
  }, []);

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);
    };
  }, []);

viv (kinde)•11mo ago

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!

NanaGaisieOP•10mo ago

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

MurtazaKp•10mo ago

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

viv (kinde)•10mo ago

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!

MurtazaKp•9mo ago

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

Oli - Kinde•9mo ago

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.

NanaGaisieOP•9mo ago

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.

Oli - Kinde•9mo ago

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.

Gaming

Programming

Set up a Subscription form for Nextjs App.