[ { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# local env files\n.env\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# vercel\n.vercel\n\n# editors\n.vscode\n\n# certificates\ncertificates\n.env*.local\n" }, { "path": ".prettierignore", "content": "# Build artifacts\n.next/\n.turbo/\n_next/\n__tmp__/\ndist/\nnode_modules/\ntarget/\ncompiled/\n\npnpm-lock.yaml\n\ntypes_db.ts\n" }, { "path": ".prettierrc.json", "content": "{\n \"arrowParens\": \"always\",\n \"singleQuote\": true,\n \"tabWidth\": 2,\n \"trailingComma\": \"none\"\n}\n" }, { "path": "LICENSE", "content": "The MIT License (MIT)\n\nCopyright (c) 2024 Vercel, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE." }, { "path": "README.md", "content": "# Next.js Subscription Payments Starter\n\n\n> [!WARNING] \n> This repo has been sunset and replaced by a new template: https://github.com/nextjs/saas-starter\n\n## Features\n\n- Secure user management and authentication with [Supabase](https://supabase.io/docs/guides/auth)\n- Powerful data access & management tooling on top of PostgreSQL with [Supabase](https://supabase.io/docs/guides/database)\n- Integration with [Stripe Checkout](https://stripe.com/docs/payments/checkout) and the [Stripe customer portal](https://stripe.com/docs/billing/subscriptions/customer-portal)\n- Automatic syncing of pricing plans and subscription statuses via [Stripe webhooks](https://stripe.com/docs/webhooks)\n\n## Demo\n\n- https://subscription-payments.vercel.app/\n\n[![Screenshot of demo](./public/demo.png)](https://subscription-payments.vercel.app/)\n\n## Architecture\n\n![Architecture diagram](./public/architecture_diagram.png)\n\n## Step-by-step setup\n\nWhen deploying this template, the sequence of steps is important. Follow the steps below in order to get up and running.\n\n### Initiate Deployment\n\n#### Vercel Deploy Button\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnextjs-subscription-payments&env=NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,STRIPE_SECRET_KEY&envDescription=Enter%20your%20Stripe%20API%20keys.&envLink=https%3A%2F%2Fdashboard.stripe.com%2Fapikeys&project-name=nextjs-subscription-payments&repository-name=nextjs-subscription-payments&integration-ids=oac_VqOgBHqhEoFTPzGkPd7L0iH6&external-id=https%3A%2F%2Fgithub.com%2Fvercel%2Fnextjs-subscription-payments%2Ftree%2Fmain)\n\nThe Vercel Deployment will create a new repository with this template on your GitHub account and guide you through a new Supabase project creation. The [Supabase Vercel Deploy Integration](https://vercel.com/integrations/supabase) will set up the necessary Supabase environment variables and run the [SQL migrations](./supabase/migrations/20230530034630_init.sql) to set up the Database schema on your account. You can inspect the created tables in your project's [Table editor](https://app.supabase.com/project/_/editor).\n\nShould the automatic setup fail, please [create a Supabase account](https://app.supabase.com/projects), and a new project if needed. In your project, navigate to the [SQL editor](https://app.supabase.com/project/_/sql) and select the \"Stripe Subscriptions\" starter template from the Quick start section.\n\n### Configure Auth\n\nFollow [this guide](https://supabase.com/docs/guides/auth/social-login/auth-github) to set up an OAuth app with GitHub and configure Supabase to use it as an auth provider.\n\nIn your Supabase project, navigate to [auth > URL configuration](https://app.supabase.com/project/_/auth/url-configuration) and set your main production URL (e.g. https://your-deployment-url.vercel.app) as the site url.\n\nNext, in your Vercel deployment settings, add a new **Production** environment variable called `NEXT_PUBLIC_SITE_URL` and set it to the same URL. Make sure to deselect preview and development environments to make sure that preview branches and local development work correctly.\n\n#### [Optional] - Set up redirect wildcards for deploy previews (not needed if you installed via the Deploy Button)\n\nIf you've deployed this template via the \"Deploy to Vercel\" button above, you can skip this step. The Supabase Vercel Integration will have set redirect wildcards for you. You can check this by going to your Supabase [auth settings](https://app.supabase.com/project/_/auth/url-configuration) and you should see a list of redirects under \"Redirect URLs\".\n\nOtherwise, for auth redirects (email confirmations, magic links, OAuth providers) to work correctly in deploy previews, navigate to the [auth settings](https://app.supabase.com/project/_/auth/url-configuration) and add the following wildcard URL to \"Redirect URLs\": `https://*-username.vercel.app/**`. You can read more about redirect wildcard patterns in the [docs](https://supabase.com/docs/guides/auth#redirect-urls-and-wildcards).\n\nIf you've deployed this template via the \"Deploy to Vercel\" button above, you can skip this step. The Supabase Vercel Integration will have run database migrations for you. You can check this by going to [the Table Editor for your Supabase project](https://supabase.com/dashboard/project/_/editor), and confirming there are tables with seed data.\n\nOtherwise, navigate to the [SQL Editor](https://supabase.com/dashboard/project/_/sql/new), paste the contents of [the Supabase `schema.sql` file](./schema.sql), and click RUN to initialize the database.\n\n#### [Maybe Optional] - Set up Supabase environment variables (not needed if you installed via the Deploy Button)\n\nIf you've deployed this template via the \"Deploy to Vercel\" button above, you can skip this step. The Supabase Vercel Integration will have set your environment variables for you. You can check this by going to your Vercel project settings, and clicking on 'Environment variables', there will be a list of environment variables with the Supabase icon displayed next to them.\n\nOtherwise navigate to the [API settings](https://app.supabase.com/project/_/settings/api) and paste them into the Vercel deployment interface. Copy project API keys and paste into the `NEXT_PUBLIC_SUPABASE_ANON_KEY` and `SUPABASE_SERVICE_ROLE_KEY` fields, and copy the project URL and paste to Vercel as `NEXT_PUBLIC_SUPABASE_URL`.\n\nCongrats, this completes the Supabase setup, almost there!\n\n### Configure Stripe\n\nNext, we'll need to configure [Stripe](https://stripe.com/) to handle test payments. If you don't already have a Stripe account, create one now.\n\nFor the following steps, make sure you have the [\"Test Mode\" toggle](https://stripe.com/docs/testing) switched on.\n\n#### Create a Webhook\n\nWe need to create a webhook in the `Developers` section of Stripe. Pictured in the architecture diagram above, this webhook is the piece that connects Stripe to your Vercel Serverless Functions.\n\n1. Click the \"Add Endpoint\" button on the [test Endpoints page](https://dashboard.stripe.com/test/webhooks).\n1. Enter your production deployment URL followed by `/api/webhooks` for the endpoint URL. (e.g. `https://your-deployment-url.vercel.app/api/webhooks`)\n1. Click `Select events` under the `Select events to listen to` heading.\n1. Click `Select all events` in the `Select events to send` section.\n1. Copy `Signing secret` as we'll need that in the next step (e.g `whsec_xxx`) (/!\\ be careful not to copy the webook id we_xxxx).\n1. In addition to the `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY` and the `STRIPE_SECRET_KEY` we've set earlier during deployment, we need to add the webhook secret as `STRIPE_WEBHOOK_SECRET` env var.\n\n#### Redeploy with new env vars\n\nFor the newly set environment variables to take effect and everything to work together correctly, we need to redeploy our app in Vercel. In your Vercel Dashboard, navigate to deployments, click the overflow menu button and select \"Redeploy\" (do NOT enable the \"Use existing Build Cache\" option). Once Vercel has rebuilt and redeployed your app, you're ready to set up your products and prices.\n\n#### Create product and pricing information\n\nYour application's webhook listens for product updates on Stripe and automatically propagates them to your Supabase database. So with your webhook listener running, you can now create your product and pricing information in the [Stripe Dashboard](https://dashboard.stripe.com/test/products).\n\nStripe Checkout currently supports pricing that bills a predefined amount at a specific interval. More complex plans (e.g., different pricing tiers or seats) are not yet supported.\n\nFor example, you can create business models with different pricing tiers, e.g.:\n\n- Product 1: Hobby\n - Price 1: 10 USD per month\n - Price 2: 100 USD per year\n- Product 2: Freelancer\n - Price 1: 20 USD per month\n - Price 2: 200 USD per year\n\nOptionally, to speed up the setup, we have added a [fixtures file](fixtures/stripe-fixtures.json) to bootstrap test product and pricing data in your Stripe account. The [Stripe CLI](https://stripe.com/docs/stripe-cli#install) `fixtures` command executes a series of API requests defined in this JSON file. Simply run `stripe fixtures fixtures/stripe-fixtures.json`.\n\n**Important:** Make sure that you've configured your Stripe webhook correctly and redeployed with all needed environment variables.\n\n#### Configure the Stripe customer portal\n\n1. Set your custom branding in the [settings](https://dashboard.stripe.com/settings/branding)\n1. Configure the Customer Portal [settings](https://dashboard.stripe.com/test/settings/billing/portal)\n1. Toggle on \"Allow customers to update their payment methods\"\n1. Toggle on \"Allow customers to update subscriptions\"\n1. Toggle on \"Allow customers to cancel subscriptions\"\n1. Add the products and prices that you want\n1. Set up the required business information and links\n\n### That's it\n\nI know, that was quite a lot to get through, but it's worth it. You're now ready to earn recurring revenue from your customers. šŸ„³\n\n## Develop locally\n\nIf you haven't already done so, clone your Github repository to your local machine.\n\n### Install dependencies\n\nEnsure you have [pnpm](https://pnpm.io/installation) installed and run:\n\n```bash\npnpm install\n```\n\nNext, use the [Vercel CLI](https://vercel.com/docs/cli) to link your project:\n\n```bash\npnpm dlx vercel login\npnpm dlx vercel link\n```\n\n`pnpm dlx` runs a package from the registry, without installing it as a dependency. Alternatively, you can install these packages globally, and drop the `pnpm dlx` part.\n\nIf you don't intend to use a local Supabase instance for development and testing, you can use the Vercel CLI to download the development env vars:\n\n```bash\npnpm dlx vercel env pull .env.local\n```\n\nRunning this command will create a new `.env.local` file in your project folder. For security purposes, you will need to set the `SUPABASE_SERVICE_ROLE_KEY` manually from your [Supabase dashboard](https://app.supabase.io/) (`Settings > API`). If you are not using a local Supabase instance, you should also change the `--local` flag to `--linked' or '--project-id ' in the `supabase:generate-types` script in `package.json`.(see -> [https://supabase.com/docs/reference/cli/supabase-gen-types-typescript])\n\n### Local development with Supabase\n\nIt's highly recommended to use a local Supabase instance for development and testing. We have provided a set of custom commands for this in `package.json`.\n\nFirst, you will need to install [Docker](https://www.docker.com/get-started/). You should also copy or rename:\n\n- `.env.local.example` -> `.env.local`\n- `.env.example` -> `.env`\n\nNext, run the following command to start a local Supabase instance and run the migrations to set up the database schema:\n\n```bash\npnpm supabase:start\n```\n\nThe terminal output will provide you with URLs to access the different services within the Supabase stack. The Supabase Studio is where you can make changes to your local database instance.\n\nCopy the value for the `service_role_key` and paste it as the value for the `SUPABASE_SERVICE_ROLE_KEY` in your `.env.local` file.\n\nYou can print out these URLs at any time with the following command:\n\n```bash\npnpm supabase:status\n```\n\nTo link your local Supabase instance to your project, run the following command, navigate to the Supabase project you created above, and enter your database password.\n\n```bash\npnpm supabase:link\n```\n\nIf you need to reset your database password, head over to [your database settings](https://supabase.com/dashboard/project/_/settings/database) and click \"Reset database password\", and this time copy it across to a password manager! šŸ˜„\n\nšŸš§ Warning: This links our Local Development instance to the project we are using for `production`. Currently, it only has test records, but once it has customer data, we recommend using [Branching](https://supabase.com/docs/guides/platform/branching) or manually creating a separate `preview` or `staging` environment, to ensure your customer's data is not used locally, and schema changes/migrations can be thoroughly tested before shipping to `production`.\n\nOnce you've linked your project, you can pull down any schema changes you made in your remote database with:\n\n```bash\npnpm supabase:pull\n```\n\nYou can seed your local database with any data you added in your remote database with:\n\n```bash\npnpm supabase:generate-seed\npnpm supabase:reset\n```\n\nšŸš§ Warning: this is seeding data from the `production` database. Currently, this only contains test data, but we recommend using [Branching](https://supabase.com/docs/guides/platform/branching) or manually setting up a `preview` or `staging` environment once this contains real customer data.\n\nYou can make changes to the database schema in your local Supabase Studio and run the following command to generate TypeScript types to match your schema:\n\n```bash\npnpm supabase:generate-types\n```\n\nYou can also automatically generate a migration file with all the changes you've made to your local database schema with the following command:\n\n```bash\npnpm supabase:generate-migration\n```\n\nAnd push those changes to your remote database with:\n\n```bash\npnpm supabase:push\n```\n\nRemember to test your changes thoroughly in your `local` and `staging` or `preview` environments before deploying them to `production`!\n\n### Use the Stripe CLI to test webhooks\n\nUse the [Stripe CLI](https://stripe.com/docs/stripe-cli) to [login to your Stripe account](https://stripe.com/docs/stripe-cli#login-account):\n\n```bash\npnpm stripe:login\n```\n\nThis will print a URL to navigate to in your browser and provide access to your Stripe account.\n\nNext, start local webhook forwarding:\n\n```bash\npnpm stripe:listen\n```\n\nRunning this Stripe command will print a webhook secret (such as, `whsec_***`) to the console. Set `STRIPE_WEBHOOK_SECRET` to this value in your `.env.local` file. If you haven't already, you should also set `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY` and `STRIPE_SECRET_KEY` in your `.env.local` file using the **test mode**(!) keys from your Stripe dashboard.\n\n### Run the Next.js client\n\nIn a separate terminal, run the following command to start the development server:\n\n```bash\npnpm dev\n```\n\nNote that webhook forwarding and the development server must be running concurrently in two separate terminals for the application to work correctly.\n\nFinally, navigate to [http://localhost:3000](http://localhost:3000) in your browser to see the application rendered.\n\n## Going live\n\n### Archive testing products\n\nArchive all test mode Stripe products before going live. Before creating your live mode products, make sure to follow the steps below to set up your live mode env vars and webhooks.\n\n### Configure production environment variables\n\nTo run the project in live mode and process payments with Stripe, switch Stripe from \"test mode\" to \"production mode.\" Your Stripe API keys will be different in production mode, and you will have to create a separate production mode webhook. Copy these values and paste them into Vercel, replacing the test mode values.\n\n### Redeploy\n\nAfterward, you will need to rebuild your production deployment for the changes to take effect. Within your project Dashboard, navigate to the \"Deployments\" tab, select the most recent deployment, click the overflow menu button (next to the \"Visit\" button) and select \"Redeploy\" (do NOT enable the \"Use existing Build Cache\" option).\n\nTo verify you are running in production mode, test checking out with the [Stripe test card](https://stripe.com/docs/testing). The test card should not work.\n" }, { "path": "app/account/page.tsx", "content": "import CustomerPortalForm from '@/components/ui/AccountForms/CustomerPortalForm';\nimport EmailForm from '@/components/ui/AccountForms/EmailForm';\nimport NameForm from '@/components/ui/AccountForms/NameForm';\nimport { redirect } from 'next/navigation';\nimport { createClient } from '@/utils/supabase/server';\nimport {\n getUserDetails,\n getSubscription,\n getUser\n} from '@/utils/supabase/queries';\n\nexport default async function Account() {\n const supabase = createClient();\n const [user, userDetails, subscription] = await Promise.all([\n getUser(supabase),\n getUserDetails(supabase),\n getSubscription(supabase)\n ]);\n\n if (!user) {\n return redirect('/signin');\n }\n\n return (\n
\n
\n
\n

\n Account\n

\n

\n We partnered with Stripe for a simplified billing.\n

\n
\n
\n
\n \n \n \n
\n
\n );\n}\n" }, { "path": "app/api/webhooks/route.ts", "content": "import Stripe from 'stripe';\nimport { stripe } from '@/utils/stripe/config';\nimport {\n upsertProductRecord,\n upsertPriceRecord,\n manageSubscriptionStatusChange,\n deleteProductRecord,\n deletePriceRecord\n} from '@/utils/supabase/admin';\n\nconst relevantEvents = new Set([\n 'product.created',\n 'product.updated',\n 'product.deleted',\n 'price.created',\n 'price.updated',\n 'price.deleted',\n 'checkout.session.completed',\n 'customer.subscription.created',\n 'customer.subscription.updated',\n 'customer.subscription.deleted'\n]);\n\nexport async function POST(req: Request) {\n const body = await req.text();\n const sig = req.headers.get('stripe-signature') as string;\n const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET;\n let event: Stripe.Event;\n\n try {\n if (!sig || !webhookSecret)\n return new Response('Webhook secret not found.', { status: 400 });\n event = stripe.webhooks.constructEvent(body, sig, webhookSecret);\n console.log(`šŸ”” Webhook received: ${event.type}`);\n } catch (err: any) {\n console.log(`āŒ Error message: ${err.message}`);\n return new Response(`Webhook Error: ${err.message}`, { status: 400 });\n }\n\n if (relevantEvents.has(event.type)) {\n try {\n switch (event.type) {\n case 'product.created':\n case 'product.updated':\n await upsertProductRecord(event.data.object as Stripe.Product);\n break;\n case 'price.created':\n case 'price.updated':\n await upsertPriceRecord(event.data.object as Stripe.Price);\n break;\n case 'price.deleted':\n await deletePriceRecord(event.data.object as Stripe.Price);\n break;\n case 'product.deleted':\n await deleteProductRecord(event.data.object as Stripe.Product);\n break;\n case 'customer.subscription.created':\n case 'customer.subscription.updated':\n case 'customer.subscription.deleted':\n const subscription = event.data.object as Stripe.Subscription;\n await manageSubscriptionStatusChange(\n subscription.id,\n subscription.customer as string,\n event.type === 'customer.subscription.created'\n );\n break;\n case 'checkout.session.completed':\n const checkoutSession = event.data.object as Stripe.Checkout.Session;\n if (checkoutSession.mode === 'subscription') {\n const subscriptionId = checkoutSession.subscription;\n await manageSubscriptionStatusChange(\n subscriptionId as string,\n checkoutSession.customer as string,\n true\n );\n }\n break;\n default:\n throw new Error('Unhandled relevant event!');\n }\n } catch (error) {\n console.log(error);\n return new Response(\n 'Webhook handler failed. View your Next.js function logs.',\n {\n status: 400\n }\n );\n }\n } else {\n return new Response(`Unsupported event type: ${event.type}`, {\n status: 400\n });\n }\n return new Response(JSON.stringify({ received: true }));\n}\n" }, { "path": "app/auth/callback/route.ts", "content": "import { createClient } from '@/utils/supabase/server';\nimport { NextResponse } from 'next/server';\nimport { NextRequest } from 'next/server';\nimport { getErrorRedirect, getStatusRedirect } from '@/utils/helpers';\n\nexport async function GET(request: NextRequest) {\n // The `/auth/callback` route is required for the server-side auth flow implemented\n // by the `@supabase/ssr` package. It exchanges an auth code for the user's session.\n const requestUrl = new URL(request.url);\n const code = requestUrl.searchParams.get('code');\n\n if (code) {\n const supabase = createClient();\n\n const { error } = await supabase.auth.exchangeCodeForSession(code);\n\n if (error) {\n return NextResponse.redirect(\n getErrorRedirect(\n `${requestUrl.origin}/signin`,\n error.name,\n \"Sorry, we weren't able to log you in. Please try again.\"\n )\n );\n }\n }\n\n // URL to redirect to after sign in process completes\n return NextResponse.redirect(\n getStatusRedirect(\n `${requestUrl.origin}/account`,\n 'Success!',\n 'You are now signed in.'\n )\n );\n}\n" }, { "path": "app/auth/reset_password/route.ts", "content": "import { createClient } from '@/utils/supabase/server';\nimport { NextResponse } from 'next/server';\nimport { NextRequest } from 'next/server';\nimport { getErrorRedirect, getStatusRedirect } from '@/utils/helpers';\n\nexport async function GET(request: NextRequest) {\n // The `/auth/callback` route is required for the server-side auth flow implemented\n // by the `@supabase/ssr` package. It exchanges an auth code for the user's session.\n const requestUrl = new URL(request.url);\n const code = requestUrl.searchParams.get('code');\n\n if (code) {\n const supabase = createClient();\n\n const { error } = await supabase.auth.exchangeCodeForSession(code);\n\n if (error) {\n return NextResponse.redirect(\n getErrorRedirect(\n `${requestUrl.origin}/signin/forgot_password`,\n error.name,\n \"Sorry, we weren't able to log you in. Please try again.\"\n )\n );\n }\n }\n\n // URL to redirect to after sign in process completes\n return NextResponse.redirect(\n getStatusRedirect(\n `${requestUrl.origin}/signin/update_password`,\n 'You are now signed in.',\n 'Please enter a new password for your account.'\n )\n );\n}\n" }, { "path": "app/layout.tsx", "content": "import { Metadata } from 'next';\nimport Footer from '@/components/ui/Footer';\nimport Navbar from '@/components/ui/Navbar';\nimport { Toaster } from '@/components/ui/Toasts/toaster';\nimport { PropsWithChildren, Suspense } from 'react';\nimport { getURL } from '@/utils/helpers';\nimport 'styles/main.css';\n\nconst title = 'Next.js Subscription Starter';\nconst description = 'Brought to you by Vercel, Stripe, and Supabase.';\n\nexport const metadata: Metadata = {\n metadataBase: new URL(getURL()),\n title: title,\n description: description,\n openGraph: {\n title: title,\n description: description\n }\n};\n\nexport default async function RootLayout({ children }: PropsWithChildren) {\n return (\n \n \n \n \n {children}\n \n