Poor documentation

[chriscarrollsmith]

I would love a step-by-step guide to spinning one of these up from scratch. I ran into many issues, starting from the very first steps. I cloned the repo and tried to deploy with the "deploy" button, but this resulted in Vercel prompting me to create a new repo. So I deleted my clone and created a new repo, and then I got an error message from Vercel that there's some unspecified problem. So then I re-cloned the repo and imported the existing repo to Vercel, but it needed Supabase and Stripe secrets before it would let me proceed with deployment. So then I created a Supabase and a Stripe webhook and supplied the secrets, but it didn't create the database schema. So I ran the code to create the database schema, but then the products didn't import to the deployment. So then I updated the URL on the Stripe webhook, but I wasn't sure which of the several Vercel URLs to use. And so on. I never did get it working, unfortunately.

[ApplikationUK]

Completely agree. I found that the first step produces an error too. The process then becomes very manual. Out of interest how did you generate the database schema? I can't seem to find that in the documentation, only the types generation command.

[chriscarrollsmith]

You take schema.sql and just copy-paste it to the Supabase SQL editor.

[Rounel]

After 2 days of reading the code and watching videos I was able to get this repo working.

1st Step: Fork it.

2nd Step: Create your supabase project and your stripe project on the respective sites. Then on stripe, configure webhook. You can put any url until you have the real one after deployment but the most important thing is to have the secret signature key (STRIPE_WEBHOOK_SECRET)

3rd Step: Create the necessary tables by relying on the types_db.ts file (users, customers, prices, products, subscriptions) then activate an RLS policy for the prices and products tables. Without the RLS policy, the vercel project cant access the supabase tables. Then copy-paste the schema.sql file to the supabase SQL editor.

4th Step: Deploy the repo you forked by adding as environment variables all the keys generated on supabase and stripe namely: -NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_ANON_KEY SUPABASE_SERVICE_ROLE_KEY NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY STRIPE_SECRET_KEY STRIPE_WEBHOOK_SECRET

Normally that should work.

[chriscarrollsmith]

Thanks. Yeah, I did ultimately get it working. The tables and RLS policies are created automatically by the SQL schema, so you can skip creating them manually.

Additional notes:

1. When you create your Vercel project, you will be prompted to create a new repo. You can instead import your existing fork from the left menu.

2. After deployment to Vercel, you need to "Update Details" for your Stripe webhook and provide the URL of your deployment's webhook: (e.g., https://[your-deployment].vercel.app/api/webhooks).

3. You have to create your products on Stripe (either with run stripe fixtures fixtures/stripe-fixtures.json or manually in the Stripe dashboard) after you've set everything up correctly, not before. Whenever you create or update a product, Stripe pings your webhook to update your site. So if you don't have the webhook connected when you create the products, the products won't propagate to Supabase.

And to test locally, you need two terminals running concurrently:

1. In one terminal, run stripe listen --forward-to=localhost:3000/api/webhooks. In a second terminal, run npm run dev to start the development server. Wait for the development server to initialize and navigate to http://localhost:3000/.

One thing I learned during my experimentation that surprised me was that "serverless functions" aren't really serverless. I was under the impression that all the magic happens in the client's browser, but that's not the case. It's serverless only in the sense that Vercel manages spinning the server up and down and scaling it for you.

[Rounel]

oh yes I hadn't even paid attention to the .sql file in supabase/migrations/

[chriscarrollsmith]

I am rewriting the README right now and will open a PR.

[hinetapora]

V frustrating. Following these helpful instructions and stripe still unable to send the webhook: Webhook Error: No signatures found matching the expected signature for payload. Are you passing the raw request body you received from Stripe? Learn more about webhook signing and explore webhook integration examples for various frameworks at https://github.com/stripe/stripe-node#webhook-signing

*Update: was running stripe in production mode (vs test mode) - switched it to test mode and now no more webhook error.

[chriscarrollsmith]

Do you have "/api/webhooks" at the end of your webhook URL? And have you created webhooks for both test mode and production mode and made sure you're using the webhook secret and API secrets that correspond to whichever mode you're operating in?

On Mon, Jun 19, 2023, 4:32 AM 0xCosydell @.***> wrote:

V frustrating. Following these helpful instructions and stripe still unable to send the webhook: Webhook Error: No signatures found matching the expected signature for payload. Are you passing the raw request body you received from Stripe? Learn more about webhook signing and explore webhook integration examples for various frameworks at https://github.com/stripe/stripe-node#webhook-signing

— Reply to this email directly, view it on GitHub https://github.com/vercel/nextjs-subscription-payments/issues/202#issuecomment-1596748287, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASCYPGIZCVL2HHIZ5LYAESDXMAFCXANCNFSM6AAAAAAZIEGGCM . You are receiving this because you authored the thread.Message ID: @.***>

[chriscarrollsmith]

See my step-by-step guide here.

https://github.com/chriscarrollsmith/nextjs-subscription-payments

I have opened a PR.

On Mon, Jun 19, 2023, 4:32 AM 0xCosydell @.***> wrote:

V frustrating. Following these helpful instructions and stripe still unable to send the webhook: Webhook Error: No signatures found matching the expected signature for payload. Are you passing the raw request body you received from Stripe? Learn more about webhook signing and explore webhook integration examples for various frameworks at https://github.com/stripe/stripe-node#webhook-signing

— Reply to this email directly, view it on GitHub https://github.com/vercel/nextjs-subscription-payments/issues/202#issuecomment-1596748287, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASCYPGIZCVL2HHIZ5LYAESDXMAFCXANCNFSM6AAAAAAZIEGGCM . You are receiving this because you authored the thread.Message ID: @.***>

[hinetapora]

Thanks Chris, trying again.

[noemit]

Spent about 5 hours trying to set this up. I read a few of these threads and was able to figure out how to set up the tables in supabase. I'm using all production variables/keys, I've triple checked everything is correct, and the deployment is in production, but still getting that stripe error. The webhook is failing 100% of the time, it's not making it to vercel, much less supabase. I've deleted and recreated the products countless times. I initially set it up in test mode, but that also didn't work.

I guess I'll try it re-do all the env variables with the test mode ones .. but I don't think it will work. I think there's still something missing from the instructions.

[danieljsanders]

I got it working too but there was a bit of trial and error I think I had to do a couple of redos of steps. I can probably help solve the various questions. The 'signature not matching' thing is because you have the wrong key configured in one of the properties. I think I ended up running a script in Supabase via the UI to create the Stripe schema.

[noemit]

I'm about to jump on zoom with a friend and have them watch me copy over the variables to quadruple check. I've also checked for rogue whitespace characters and nothing. Is the test endpoint different than the production endpoint? Is the endpoint different if you have a custom URL set up in vercel?

[noemit]

Ah, yes. That was it. It was the endpoint. You have to update the endpoint in stripe every time you redeploy because vercel deploys to a new subdomain every time (This wasn't super clear to me)

[chriscarrollsmith]

Oh, yes. Vercel assigns you several URLs. One of those URLs is a stable URL that doesn't change between deployments. Another is a dynamic URL that differs from deployment to deployment. You need the stable one, not the dynamic one. I just went in and clarified this in my README PR.

[noemit]

Thanks for clarifying - worth adding to the documentation. Seems like most of the issues are Vercel-related, even the env you're deploying to is not 100% clear in Vercel (compared to similar products.)

[JoNilsson]

See my step-by-step guide here. https://github.com/chriscarrollsmith/nextjs-subscription-payments I have opened a PR.

There are still some error or confused bits in your docs.

RE: Env Vars;

Copy these values and paste them into Vercel, replacing the test mode values.

The code has a switch case that looks for ..._LIVE Env Vars. You should not replace the test env vars in your project, but ADD the live env vars, and only promote those to the Production Deployments. This way, You can keep testing if you need to on deploy previews. Once you get it working fully in production, it would then be safe to remove the test env vars.

EG:

[chriscarrollsmith]

That's certainly how it's supposed to work, but I personally couldn't figure out how to change the deployment environment to development or preview on Vercel. Seems to deploy to the production environment immediately. If you can figure out how to access development or preview environments, let me know.

EDIT: I discovered that if you use a separate "dev" branch for development purposes, that branch deploys to the "Preview" environment rather than "Production".

[hinetapora]

I'm such an idiot. My vercel deployment was not in production and several keys were set to production only. I hate myself.

All working now. When I add products or change product attribute, the change gets pushed to supabase via the webhook and the app updates instantly. Nice.

Would love to chat with folk about what you might use this project for - and stay connected there is much to share.

[abwdev]

Hi @chriscarrollsmith thank you so much for all your work on this - your new readme has been a life saver helping me get the template running!

FYI - I have a hunch that a Vercel environment variable for NEXT_PUBLIC_SITE_URL needs to be setup to the primary domain during the configuration steps. My operational instance could not get a value for this variable (it lives in helpers.ts), and fell back to the secondary specific domain at NEXT_PUBLIC_VERCEL_URL (which is automatically set by the platform). That lead to a session loss when returning from Stripe.

It's possible that I missed a config setting elsewhere but all the values in the readme were set. Once I manually configured NEXT_PUBLIC_SITE_URL in the Vercel dashboard there session issues were resolved.

Raised an issue here for reference: https://github.com/vercel/nextjs-subscription-payments/issues/208

[chriscarrollsmith]

So glad it helped you, abwdev. And that's good to know. I assume you're using a custom domain?

[abwdev]

Hi Chris. Actually I am yet to deploy a custom domain - right now I'm in dev/test mode using the Vercel auto generated domains.

When I navigate to the primary domain and log in, the flow keeps the user happily within that domain (No. 1 on the list below) After returning from Stripe, the redirect was landing the user on the No. 3 domain below. The mis-match was killing the session.

FYI - the first domain is what helpers.ts is looking for in NEXT_PUBLIC_SITE_URL, but that required me to set it in the environment settings (defaulted to empty).

The third domain that is deployment specific IS set automatically by Vercel, and lives in NEXT_PUBLIC_VERCEL_URL. It is only used by helpers.ts if there is no value for NEXT_PUBLIC_SITE_URL.

All very curious!

[chriscarrollsmith]

Ah, I see! Thanks for the tip. I will update my README.

[abwdev]

Cheers Chris!!

FYI I think we may be on the right track. Was trawling through the supabase docs today and saw this code comment which appears to support the approach (found at https://supabase.com/docs/guides/auth#redirect-urls-and-wildcards)

[abwdev]

Small FYI Chris - I found that vercel env pull set my SUPABASE_SERVICE_ROLE_KEY for me automatically

[abwdev]

Thanks. Yeah, I did ultimately get it working. The tables and RLS policies are created automatically by the SQL schema, so you can skip creating them manually.

Additional notes: .......... And to test locally, you need two terminals running concurrently:

1. In one terminal, run stripe listen --forward-to=localhost:3000/api/webhooks. In a second terminal, run npm run dev to start the development server. Wait for the development server to initialize and navigate to http://localhost:3000/.

One thing I learned during my experimentation that surprised me was that "serverless functions" aren't really serverless. I was under the impression that all the magic happens in the client's browser, but that's not the case. It's serverless only in the sense that Vercel manages spinning the server up and down and scaling it for you.

Hi Chris - did you ever encounter an issue with local deployment where the app redirects to the vercel hosted instance after login? That occurs when I am running locally. Starts fine on http://localhost:3000/, then after login the app sends the user off to the hosted instance.

My solution was to update the supabase site URL to localhost. Perhaps there's a way to set it in the env file

[abwdev]

Scratch that last one, I sorted it! There's a missing step in the local dev setup actions. The final thing you need to do is configure NEXT_PUBLIC_SITE_URL in env.local so it becomes:

Use the Vercel CLI to get the dev variables: vercel env pull .env.local

Within .env.local, set NEXT_PUBLIC_SITE_URL="http://localhost:3000"

The CLI rather unhelpfully set's the dev URL to the production primary domain 🤔 so even when running locally the user is redirected to the prod site.

Setting it to localhost keeps the entire app flow local.

[chriscarrollsmith]

Thanks for figuring that out, @abwdev. My pull request was accepted without that detail, so the documentation in the main repo is improved but is missing this point. I opened another PR to add this clarification.

[abwdev]

Thankyou for all your hard work on this @chriscarrollsmith !!

[thorwebdev]

The getURL helper method automatically emits localhost when the env var isn't present: https://github.com/vercel/nextjs-subscription-payments/blob/main/utils/helpers.ts#L5-L15

Therefore you need to make sure to only set NEXT_PUBLIC_SITE_URL for production, then everything works correctly without needing to manually change it.

[abwdev]

The getURL helper method automatically emits localhost when the env var isn't present: https://github.com/vercel/nextjs-subscription-payments/blob/main/utils/helpers.ts#L5-L15

Therefore you need to make sure to only set NEXT_PUBLIC_SITE_URL for production, then everything works correctly without needing to manually change it.

I found this doc clarified things and was able to correctly set the DEV site settings and pull to local machine for successful local testing: https://vercel.com/docs/concepts/projects/environment-variables#development-environment-variables

[ChrisB007]

I was trying SO hard to make it work too cos I have been using Vercel services for a long time, and see some value in it - most especially ease of use. But lately all their products that I have tried namely Vercel AI tools, Shopify template, and host of a few ones has been super frustrating to install. Not much help came from their discord community neither. I tried til I finally gave up on it. Switched the project around completely using other providers. As much as I like keeping my projects in one ecosystem, I'd say Vercel is best deploying simple apps. Any complex, and you'd end up spending time pulling your hair out. Even worse if there's no detail docs to help out.

[Jordan1022]

Thanks @chriscarrollsmith for all the work done to update documentation! Way easier to read! One quick question: Regarding the screenshot below, which deploy button is this referring to or maybe this is based on something that has since been removed?

[chriscarrollsmith]

Whoops! Thanks for the great catch, @Jordan1022! It appears that I accidentally deleted the deploy button when I did my README rewrite. I've restored it in my currently open PR!

[abwdev]

Does anybody have an issue with GitHub login not correctly exchanging the code query parameter for the session?

When I login with email it works fine and exchanges the code for a session. When I use GitHub the code is left dangling in the URL. The GitHub login definitely logs in the user, but the code exchange doesn't seem to occur

[Belline]

Does anybody have an issue with GitHub login not correctly exchanging the code query parameter for the session?

When I login with email it works fine and exchanges the code for a session. When I use GitHub the code is left dangling in the URL. The GitHub login definitely logs in the user, but the code exchange doesn't seem to occur

Same thing here. And I am not able to login via email since I signed up via Github initially, so I'm basically stuck. I guess the only way out is to deploy a "custom" project and using the forked repo instead of using this template.

[abwdev]

Same thing here. And I am not able to login via email since I signed up via Github initially, so I'm basically stuck. I guess the only way out is to deploy a "custom" project and using the forked repo instead of using this template.

Hi Belline - it seems like there may be some known bugs with the Supabase auth-ui package that this template uses (see here: https://github.com/supabase/auth-ui/issues/188)

Perhaps those bugs are affecting the template.

I think you might be right about a custom project :-)

[northrn]

@chriscarrollsmith Did you ever run into a foreign key relation error with the Stripe webhook? It is posting the product into my 'products' table fine but is unable to post the price. Why are these tables separated anyways? This is like my 5th attempt at trying to get this project to work over the past 6 months lol.

[abwdev]

@chriscarrollsmith Did you ever run into a foreign key relation error with the Stripe webhook? It is posting the product into my 'products' table fine but is unable to post the price. Why are these tables separated anyways? This is like my 5th attempt at trying to get this project to work over the past 6 months lol.

Hi northrn. I don't know if I am allowed to recommend another GitHub member within this chat, but I would like to suggest you check out the stuff by Giancarlo at https://github.com/Gbuomprisco

I had the exact same problems as yourself - trying repos like this one and getting 80% of the way there but not quite making it work. Giancarlo has a couple of products including a guided course that uses this exact same tech stack. The part that I found most useful is that he covers the missing 20% that's hard to find in most tutorials. Stuff like Stripe integration, database design & build, that sort of thing. It's about $100 but for me it's worth it because I now have a working saas template, must have saved me weeks of effort.

Apologies to Vercel if this is an inappropriate response. Disclaimer: Giancarlo is extremely PRO Vercel - his tutorial concludes with a whole section on how you deploy to Vercel & why it's the best hosting platform to use 😀

[northrn]

@chriscarrollsmith Did you ever run into a foreign key relation error with the Stripe webhook? It is posting the product into my 'products' table fine but is unable to post the price. Why are these tables separated anyways? This is like my 5th attempt at trying to get this project to work over the past 6 months lol.

Hi northrn. I don't know if I am allowed to recommend another GitHub member within this chat, but I would like to suggest you check out the stuff by Giancarlo at https://github.com/Gbuomprisco

I had the exact same problems as yourself - trying repos like this one and getting 80% of the way there but not quite making it work. Giancarlo has a couple of products including a guided course that uses this exact same tech stack. The part that I found most useful is that he covers the missing 20% that's hard to find in most tutorials. Stuff like Stripe integration, database design & build, that sort of thing. It's about $100 but for me it's worth it because I now have a working saas template, must have saved me weeks of effort.

Apologies to Vercel if this is an inappropriate response. Disclaimer: Giancarlo is extremely PRO Vercel - his tutorial concludes with a whole section on how you deploy to Vercel & why it's the best hosting platform to use 😀

Thanks for the response. I looked at Giancarlo's product and it's very compelling. If I continue to run into trouble with this repo I will definitely be purchasing as it looks to solve what I'm trying to figure out here.

Hopefully nobody takes your comment down as I think it's unfortunate that Vercel and their partners have so many of these half-baked starter templates active. If they aren't committed to keeping them current and functioning properly, they should either include a disclaimer in the README or get rid of the repo altogether.

You spend all this time trying to get these to work only to realize they are either outdated or are no longer supported.