Poor documentation #202
Comments
|
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. |
|
You take schema.sql and just copy-paste it to the Supabase SQL editor. |
|
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: Normally that should work. |
|
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:
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. |
|
oh yes I hadn't even paid attention to the .sql file in supabase/migrations/ |
|
I am rewriting the README right now and will open a PR. |
|
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? *Update: was running stripe in production mode (vs test mode) - switched it to test mode and now no more webhook error. |
|
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
<#202 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ASCYPGIZCVL2HHIZ5LYAESDXMAFCXANCNFSM6AAAAAAZIEGGCM>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
|
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
<#202 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ASCYPGIZCVL2HHIZ5LYAESDXMAFCXANCNFSM6AAAAAAZIEGGCM>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
|
Thanks Chris, trying again. |
|
Spent about 5 hours trying to set this up. 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. |
|
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. |
|
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. |
|
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) |
|
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. |
|
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.) |
There are still some error or confused bits in your docs. RE: Env Vars;
The code has a switch case that looks for EG: |
|
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". |
|
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. |
|
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: |
|
So glad it helped you, abwdev. And that's good to know. I assume you're using a custom domain? |
|
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) 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!
|
|
Ah, I see! Thanks for the tip. I will update my README. |
|
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)
|
|
Small FYI Chris - I found that vercel env pull set my SUPABASE_SERVICE_ROLE_KEY for me automatically |
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 My solution was to update the supabase site URL to localhost. Perhaps there's a way to set it in the env file |
|
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:
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.
|
|
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. |
|
Thankyou for all your hard work on this @chriscarrollsmith !! |
|
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 |
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 |
|
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. |
|
Thanks @chriscarrollsmith for all the work done to update documentation! Way easier to read! One quick question: |
|
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! |
|
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. |
Hi Belline - it seems like there may be some known bugs with the Supabase auth-ui package that this template uses (see here: supabase-community/auth-ui#188) Perhaps those bugs are affecting the template. I think you might be right about a custom project :-) |
|
@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. |
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.
The text was updated successfully, but these errors were encountered: