Code Monkey home page Code Monkey logo

mickasmt / next-saas-stripe-starter Goto Github PK

View Code? Open in Web Editor NEW
1.3K 23.0 219.0 3.09 MB

Open-source SaaS Starter with User Roles & Admin Panel. Built using Next.js 14, Prisma, Neon, Auth.js v5, Resend, React Email, Shadcn/ui, Stripe, Server Actions.

Home Page: https://next-saas-stripe-starter.vercel.app

License: MIT License

Shell 0.03% TypeScript 81.27% MDX 17.39% JavaScript 0.67% CSS 0.64%
authjs nextjs14 prisma react react-email resend shadcn-ui stripe pricing-table server-actions contentlayer nextjs neondb admin-panel userrole

next-saas-stripe-starter's Introduction

SaaS Starter

Start at full speed with SaaS Starter !

Mickasmt Twitter follower count

Introduction · Installation · Tech Stack + Features · Author · Credits


Introduction

Empower your next project with the stack of Next.js 14, Prisma, Neon, Auth.js v5, Resend, React Email, Shadcn/ui, and Stripe.
All seamlessly integrated with the SaaS Starter to accelerate your development and saas journey.

Installation

Clone & create this repo locally with the following command:

npx create-next-app my-saas-project --example "https://github.com/mickasmt/next-saas-stripe-starter"

Or, deploy with Vercel:

Deploy with Vercel

Steps

  1. Install dependencies using pnpm:
pnpm install
  1. Copy .env.example to .env.local and update the variables.
cp .env.example .env.local
  1. Start the development server:
pnpm run dev

Note

I use npm-check-updates package for update this project.

Use this command for update your project: ncu -i --format group

Roadmap

  • Upgrade eslint to v9
  • Add resend for success subscriptions

Tech Stack + Features

saas-starter-demo.mp4

Frameworks

  • Next.js – React framework for building performant apps with the best developer experience
  • Auth.js – Handle user authentication with ease with providers like Google, Twitter, GitHub, etc.
  • Prisma – Typescript-first ORM for Node.js
  • React Email – Versatile email framework for efficient and flexible email development

Platforms

  • Vercel – Easily preview & deploy changes with git
  • Resend – A powerful email framework for streamlined email development
  • Neon – Serverless Postgres with autoscaling, branching, bottomless storage and generous free tier.

UI

  • Tailwind CSS – Utility-first CSS framework for rapid UI development
  • Shadcn/ui – Re-usable components built using Radix UI and Tailwind CSS
  • Framer Motion – Motion library for React to animate components with ease
  • Lucide – Beautifully simple, pixel-perfect icons
  • next/font – Optimize custom fonts and remove external network requests for improved performance
  • ImageResponse – Generate dynamic Open Graph images at the edge

Hooks and Utilities

  • useIntersectionObserver – React hook to observe when an element enters or leaves the viewport
  • useLocalStorage – Persist data in the browser's local storage
  • useScroll – React hook to observe scroll position (example)
  • nFormatter – Format numbers with suffixes like 1.2k or 1.2M
  • capitalize – Capitalize the first letter of a string
  • truncate – Truncate a string to a specified length
  • use-debounce – Debounce a function call / state update

Code Quality

  • TypeScript – Static type checker for end-to-end typesafety
  • Prettier – Opinionated code formatter for consistent code style
  • ESLint – Pluggable linter for Next.js and TypeScript

Miscellaneous

  • Vercel Analytics – Track unique visitors, pageviews, and more in a privacy-friendly way

Author

Created by @miickasmt in 2023, released under the MIT license.

Credits

This project was inspired by shadcn's Taxonomy, Steven Tey’s Precedent, and Antonio Erdeljac's Next 13 AI SaaS.

next-saas-stripe-starter's People

Contributors

adrianbucks avatar devstack-be avatar mickasmt avatar security2431 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

next-saas-stripe-starter's Issues

`title` property in `HeaderSection` prop does not exist and causing build errors

Facing this error when using npm run build, applies to subtitle property as well:

C:\Users\sandbox>npm run build

> [email protected] build
> next build

  ▲ Next.js 14.2.3
  - Environments: .env.local

   Creating an optimized production build ...
Warning: Contentlayer might not work as expected on Windows
Generated 19 documents in .contentlayer
 ✓ Compiled successfully

Failed to compile.

./components/svgs/MarkIcon.tsx
4:4  Error: Parsing error: Expression expected.

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
   Linting and checking validity of types  .
C:\Users\sandbox>npm run build

> [email protected] build
> next build

  ▲ Next.js 14.2.3
  - Environments: .env.local

   Creating an optimized production build ...
Warning: Contentlayer might not work as expected on Windows
Generated 19 documents in .contentlayer
 ✓ Compiled successfully
   Linting and checking validity of types  ..Failed to compile.

./components/pricing-cards.tsx:139:38
Type error: Type '{ label: string; title: string; }' is not assignable to type 'IntrinsicAttributes & HeaderSectionProps'.  
  Property 'title' does not exist on type 'IntrinsicAttributes & HeaderSectionProps'.

  137 |   return (
  138 |     <section className="container flex flex-col items-center text-center">
> 139 |       <HeaderSection label="Pricing" title="" />
      |                                      ^
  140 |
  141 |       <div className="mb-4 mt-10 flex items-center gap-5">
  142 |         <ToggleGroup
   Linting and checking validity of types  ...
C:\Users\sandbox>npm run build

> [email protected] build
> next build

  ▲ Next.js 14.2.3
  - Environments: .env.local

   Creating an optimized production build ...
Warning: Contentlayer might not work as expected on Windows
Generated 19 documents in .contentlayer
 ✓ Compiled successfully
   Linting and checking validity of types  .Failed to compile.

./components/pricing-faq.tsx:48:9
Type error: Type '{ label: string; title: string; subtitle: string; }' is not assignable to type 'IntrinsicAttributes & HeaderSectionProps'.
  Property 'title' does not exist on type 'IntrinsicAttributes & HeaderSectionProps'.

  46 |       <HeaderSection
  47 |         label="FAQ"
> 48 |         title="Frequently Asked Questions"
     |         ^
  49 |         subtitle=""
  50 |       />
  51 |

C:\Users\sandbox\>npm run build

> [email protected] build
> next build

  ▲ Next.js 14.2.3
  - Environments: .env.local

   Creating an optimized production build ...
Warning: Contentlayer might not work as expected on Windows
Generated 19 documents in .contentlayer
 ✓ Compiled successfully
   Linting and checking validity of types  ...Failed to compile.

./components/sections/testimonials.tsx:12:11
Type error: Type '{ label: string; title: string; subtitle: string; }' is not assignable to type 'IntrinsicAttributes & HeaderSectionProps'.
  Property 'title' does not exist on type 'IntrinsicAttributes & HeaderSectionProps'.

  10 |         <HeaderSection
  11 |           label="Testimonials"
> 12 |           title="What our clients are sharing."
     |           ^
  13 |           subtitle="Discover the glowing feedback from our delighted customers
  14 |             worldwide."
  15 |         />

Deployment worked after removing these variables.

Module not found: Package path ./generated is not exported from package

Hey, the project straight from the box returns the following issue when I press "Blog" section:

 ⨯ ./app/(marketing)/[...slug]/page.tsx:2:0
Module not found: Package path ./generated is not exported from package .../Developer/saas-stripe/my-saas-project/node_modules/contentlayer (see exports field in .../Developer/saas-stripe/my-saas-project/node_modules/contentlayer/package.json)
  1 | import { notFound } from "next/navigation"
> 2 | import { allPages } from "contentlayer/generated"
  3 |
  4 | import { Mdx } from "@/components/content/mdx-components"
  5 |

after pnpm run dev I also get info message: ConfigReadError (...Developer/saas-stripe/my-saas-project/contentlayer.config.js): Error [ERR_MODULE_NOT_FOUND]: Cannot find module .../Developer/saas-stripe/my-saas-project/.contentlayer/.`

I tried to find the issue of that, but I have no idea how to fix it

Admin panel

An admin panel is necessary for the project.

Some public urls like /terms and /privacy requires auth

The URLs like /terms, /privacy, etc. requires auth. Trying to access these pages redirects user to sign in page. It's happening with all "Pages" created by contentlayer.

Reason for it is, in middleware.ts file we are checking if user is not logged in and the route is not in publicRoutes array, they should be redirected to the login. Since pages does not have any prefix like /docs or /guides, they are not being recognised as publicRoutes.

Installation error

I tried

npx create-next-app my-saas-project --example "https://github.com/mickasmt/next-saas-stripe-starter"

and keep getting the follownig error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/prettier
npm ERR!   dev prettier@"^3.2.4" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer prettier@"^2.0.0" from [email protected]
npm ERR! node_modules/pretty-quick
npm ERR!   dev pretty-quick@"^3.1.3" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 

I tried --force or --legacy-peer-deps but still no luck

Next 14

A question, when do you update the project to Next 14? In the pnpm-lock.yaml it shows ^12 || ^13 and well, Next 14 brings more improvements than Next 12 or Next 13.
image

Error "Dynamic Code Evaluation not allowed in Edge Runtime" error when using @react-email/tailwind in Next.js

I am facing an issue when using the @react-email/tailwind library in a Next.js project. During the project build, I receive the following error:

./node_modules\@react-email\components\node_modules\@react-email\tailwind\dist\index.mjs Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation

The error indicates that dynamic code evaluation is not allowed in the Next.js Edge runtime. I have tried a few solutions, such as configuring the transpilePackages option in next.config.js and disabling the Edge runtime for specific routes, but the error persists.
I am using Next.js version 14.2.5 and the latest version of the @react-email/tailwind library. The project is based on the next-saas-stripe-starter starter kit and uses Resend for sending emails.
I would like to know if there is any fix or workaround for this issue, as the @react-email/tailwind library is an important dependency for sending emails in the project.

Thank you in advance for any help or guidance in resolving this issue.

appreciation: mad props to you

Hey @mickasmt, just wanted to say thank you for taking the time to update Taxonomy and make it usable for the rest of us. Love the updated direction and am grateful. Your UI Colorgen project saved my ass way back when and been following your progress. Hope you don't mind the issue here but I wanted this to be part of the permanent record. 🔥 ❤️ 🙏🏽 🚀

stripe webhook order issue

image

I tried using the strip webhook and found that invoice.payment_succeeded is triggered 1 second before checkout.session.completed upon initial payment of a customer. So the query by subscription id will fail

where: {
stripeSubscriptionId: subscription.id,
},

It will not affect the final result since we updated the database when checkout.session.completed. However it is indeed wrong logically. And stripe will trigger the webhook 1 hour later and then it succeeds.

The reason I found is that userId is only available in checkout.session.completed. So we need these 2 events in combination. Still trying to figure out a better way to model this process...

Installation error

Dependency error in prettier

getting this error

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/prettier
npm ERR! dev prettier@"^3.2.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer prettier@"^2.0.0" from [email protected]
npm ERR! node_modules/pretty-quick
npm ERR! dev pretty-quick@"^3.1.3" from the root project

Requesting stripe alternative

Hii @mickasmt,

Thanks for this cool SaaS starter.

Here in india accepting payments through stripe has become a hassle, can you please suggest me how to integrate lemonsqueezy in this project.

Thank You,
Ram.

Dependency issue when cloning the repository

I tried cloning and installing the dependencies, and also cloning the repo through VSCode's UI And using npm install, same issue shows.

C:\Users\abdul\Desktop\sandbox\landing-page>npm install
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!   peer react@"^16.8.0 || ^17 || ^18" from [email protected]
npm ERR!   node_modules/react-hook-form
npm ERR!     react-hook-form@"^7.51.3" from the root project
npm ERR!     peer react-hook-form@"^7.0.0" from @hookform/[email protected]
npm ERR!     node_modules/@hookform/resolvers
npm ERR!       @hookform/resolvers@"^3.3.4" from the root project
npm ERR!   29 more (@radix-ui/react-accessible-icon, react-dom, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @react-email/button@"0.0.14" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"18.2.0" from @react-email/[email protected]
npm ERR!   node_modules/@react-email/button
npm ERR!     @react-email/button@"0.0.14" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\abdul\AppData\Local\npm-cache\_logs\2024-04-26T00_40_35_346Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: C:\Users\abdul\AppData\Local\npm-cache\_logs\2024-04-26T00_40_35_346Z-debug-0.log

Originally posted by @aalhayali in #24 (comment)

pnpm error and doubts

I am new to this, I am getting this error:

pnpm : The term 'pnpm' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was
included, verify that the path is correct and try again.
At line:1 char:1

  • pnpm install
  •   + CategoryInfo          : ObjectNotFound: (pnpm:String) [], CommandNotFoundException
      + FullyQualifiedErrorId : CommandNotFoundException
      
      
      
    

So, I checked with Gemini and it gave me 2 options

  1. npm install -g pnpm
  2. npm install

I went forward with (1). But trying to run pnpm dev is again giving errors.
So, I went forward with (2) this time and ran npm run dev instead of pnpm dev.

Will everything work fine? Can I keep using npm?

Subscription Plan is not being saved

Why is my subscription plan still not being signed up after paying? I don't know what I'm doing wrong anymore.

Even when I manually add stripeCustomerId, stripeSubscriptionId, stripePriceId, stripeCurrentPeriodEnd it still shows that
You are currently on the Starter plan.

For Beginners

Build Issues with Bun - Content Layer Error on windows

I am encountering an issue when trying to build the project using Bun. The error seems to be related to the content layer.

Steps to Reproduce:

Clone the repository.
Navigate to the project directory.
Run the build command using Bun (bun build).
Expected Behavior:

The project should build successfully without any errors.

Actual Behavior:

The build process fails with an error related to the content layer.

Additional Information:

Bun version: 1.1.17
Operating system: Windows 11
Node.js version: v20.10.0
Any help to resolve this issue would be greatly appreciated.

Thank you!

Error Message

C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production>bun run build
$ next build
  ▲ Next.js 14.2.4
  - Environments: .env.local

   Creating an optimized production build ...
Warning: Contentlayer might not work as expected on Windows
Generated 19 documents in .contentlayer
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
 ⚠ Using edge runtime on a page currently disables static generation for that page
 ✓ Collecting page data
   Generating static pages (11/38)  [=== ]TypeError: Cannot read properties of undefined (reading 'slug')
    at C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6426
    at Array.map (<anonymous>)
    at j (C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6390)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:540:9)
    at process.processTimers (node:internal/timers:514:7) {
  digest: '4293419188'
}
TypeError: Cannot read properties of undefined (reading 'slug')
    at C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6426
    at Array.map (<anonymous>)
    at j (C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6390) {
  digest: '1748019194'
}
TypeError: Cannot read properties of undefined (reading 'slug')
    at C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6426
    at Array.map (<anonymous>)
    at j (C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6390) {
  digest: '1748019194'
}
   Generating static pages (24/38)  [ ===]TypeError: Cannot read properties of undefined (reading 'slug')
    at C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6426
    at Array.map (<anonymous>)
    at j (C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6390)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:540:9)
    at process.processTimers (node:internal/timers:514:7) {
  digest: '4293419188'
}
TypeError: Cannot read properties of undefined (reading 'slug')
    at C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6426
    at Array.map (<anonymous>)
    at j (C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6390) {
  digest: '1748019194'
}
TypeError: Cannot read properties of undefined (reading 'slug')
    at C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6426
    at Array.map (<anonymous>)
    at j (C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6390) {
  digest: '1748019194'
}

Error occurred prerendering page "/blog/preview-mode-headless-cms". Read more: https://nextjs.org/docs/messages/prerender-error

TypeError: Cannot read properties of undefined (reading 'slug')
    at C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6426
    at Array.map (<anonymous>)
    at j (C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6390)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:540:9)
    at process.processTimers (node:internal/timers:514:7)
TypeError: Cannot read properties of undefined (reading 'slug')
    at C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6426
    at Array.map (<anonymous>)
    at j (C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6390) {
  digest: '1748019194'
}
TypeError: Cannot read properties of undefined (reading 'slug')
    at C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6426
    at Array.map (<anonymous>)
    at j (C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6390)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:540:9)
    at process.processTimers (node:internal/timers:514:7) {
  digest: '4293419188'
}
TypeError: Cannot read properties of undefined (reading 'slug')
    at C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6426
    at Array.map (<anonymous>)
    at j (C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6390)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:540:9)
    at process.processTimers (node:internal/timers:514:7) {
  digest: '4293419188'
}

Error occurred prerendering page "/blog/server-client-components". Read more: https://nextjs.org/docs/messages/prerender-error

TypeError: Cannot read properties of undefined (reading 'slug')
    at C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6426
    at Array.map (<anonymous>)
    at j (C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6390)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:540:9)
    at process.processTimers (node:internal/timers:514:7)
TypeError: Cannot read properties of undefined (reading 'slug')
    at C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6426
    at Array.map (<anonymous>)
    at j (C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6390)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:540:9)
    at process.processTimers (node:internal/timers:514:7) {
  digest: '4293419188'
}
TypeError: Cannot read properties of undefined (reading 'slug')
    at C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6426
    at Array.map (<anonymous>)
    at j (C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6390) {
  digest: '1748019194'
}

Error occurred prerendering page "/blog/deploying-next-apps". Read more: https://nextjs.org/docs/messages/prerender-error

TypeError: Cannot read properties of undefined (reading 'slug')
    at C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6426
    at Array.map (<anonymous>)
    at j (C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6390)
TypeError: Cannot read properties of undefined (reading 'slug')
    at C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6426
    at Array.map (<anonymous>)
    at j (C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6390) {
  digest: '1748019194'
}

Error occurred prerendering page "/blog/dynamic-routing-static-regeneration". Read more: https://nextjs.org/docs/messages/prerender-error

TypeError: Cannot read properties of undefined (reading 'slug')
    at C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6426
    at Array.map (<anonymous>)
    at j (C:\Users\saifj\OneDrive\Desktop\New folder\Entaji\Entaji - First Production\.next\server\app\(marketing)\(blog-post)\blog\[slug]\page.js:1:6390)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:540:9)
    at process.processTimers (node:internal/timers:514:7)
 ✓ Generating static pages (38/38)

> Export encountered errors on following paths:
        /(marketing)/(blog-post)/blog/[slug]/page: /blog/deploying-next-apps
        /(marketing)/(blog-post)/blog/[slug]/page: /blog/dynamic-routing-static-regeneration
        /(marketing)/(blog-post)/blog/[slug]/page: /blog/preview-mode-headless-cms
        /(marketing)/(blog-post)/blog/[slug]/page: /blog/server-client-components
error: script "build" exited with code 1

Any way to make magic link functional?

Hello,
Are there any ways to make the "Sign in with magic link" function work?
I know there's been an issue already opened by someone in April, but just wanted to see if there were any updates regarding it.
Thanks!

Help Needed: Cannot Find Package `@opentelemetry/sdk-trace-node` in PNPM and NPM

Hi everyone,

I'm experiencing a persistent issue with module resolution for the @opentelemetry/sdk-trace-node package in my Next.js project. The error message I receive is:
✓ Starting...
✓ Ready in 4.5s
Error: Cannot find package 'C:\Users\Desktop\next-saas-stripe-starter\node_modules.pnpm@effect-ts+otel-sdk-trace-node@0.15.1_@effect-ts+core@0.60.5_@opentelemetry[email protected]_@opente_gu7sgejjhhrnegyrk5qh4aibs4\node_modules@opentelemetry\sdk-trace-node\package.json' imported from C:\Users\HUAWEI\Desktop\next-saas-stripe-starter\node_modules.pnpm@effect-ts+otel-sdk-trace-node@0.15.1_@effect-ts+core@0.60.5_@opentelemetry[email protected]_@opente_gu7sgejjhhrnegyrk5qh4aibs4\node_modules@effect-ts\otel-sdk-trace-node_mjs\index.mjs
Did you mean to import @opentelemetry+sdk-trace-node@1.25.1_@opentelemetry[email protected]/node_modules/@opentelemetry/sdk-trace-node/build/src/index.js?
at legacyMainResolve (node:internal/modules/esm/resolve:205:26)
at packageResolve (node:internal/modules/esm/resolve:831:14)
at moduleResolve (node:internal/modules/esm/resolve:901:20)
at defaultResolve (node:internal/modules/esm/resolve:1121:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
at ModuleWrap. (node:internal/modules/esm/module_job:85:39)
at link (node:internal/modules/esm/module_job:84:36) {
code: 'ERR_MODULE_NOT_FOUND'
}

Steps I've Tried to Resolve the Issue:

  1. Checked the File Structure: Verified that the @opentelemetry/sdk-trace-node package did not have the build/src/index.js file in the node_modules directory.
  2. Reinstalled the Specific Package: Attempted to reinstall @opentelemetry/sdk-trace-node using PNPM.
  3. Tried Different Versions: Installed different versions of @opentelemetry/sdk-trace-node to see if the issue was version-specific.
  4. Cleared Node Modules and Reinstalled: Deleted the node_modules directory and reinstalled dependencies.
  5. Checked for Peer Dependencies: Ensured that all peer dependencies were correctly installed and compatible.
  6. Verified Package Contents: Manually checked the contents of the package to verify the presence of the necessary files.
  7. Used Alternative Package Managers: Tried using NPM and Yarn to install dependencies.
  8. Cleared npm Cache: Cleared the npm cache to resolve potential corruption.
  9. Deleted and Recreated Lock Files: Deleted package-lock.json and node_modules and reinstalled dependencies.
  10. Reviewed Debug Logs: Reviewed npm debug logs for more detailed error information.
  11. Manually Installed Problematic Package: Tried manually installing @opentelemetry/sdk-trace-node.
  12. Used npm ci for Clean Installation: Attempted a clean installation using npm ci.
  13. Ensured Latest npm Version: Upgraded to the latest npm version.

Additional Information:

  • OS: Windows 10
  • Node.js Version: [Insert Node.js Version]
  • NPM Version: [Insert NPM Version]
  • PNPM Version: [Insert PNPM Version]
  • Project Details: Next.js project with Stripe integration and OpenTelemetry

Debug Log Excerpt:

Nextauth error

type: 'TypeError',
page: '/_next/static/webpack/ec456677b636bcaa.webpack.hot-update.json'
}
6 |
7 | export const {

8 | handlers: { GET, POST },
| ^
9 | auth,
10 | } = NextAuth({
11 | adapter: PrismaAdapter(prisma),

priceId

priceId is required. even though I entered the env variables.

w-full

Hello, I can't find where to modify the global class to put the site in w-full and not with big white borders on the sides.
I'm starting to develop it and I don't have all the notions yet.

Compatibility Issue with Next.js 14.0.3 in the next-saas-stripe-starter Project

Dear mickasmt,

I recently attempted to install your project, "next-saas-stripe-starter," and encountered some compatibility issues related to Next.js and next-contentlayer during the installation process using npx create-next-app. The specific error encountered is as follows:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/next
npm ERR! next@"14.0.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^12 || ^13" from [email protected]
npm ERR! node_modules/next-contentlayer
npm ERR! next-contentlayer@"^0.3.4" from the root project
npm ERR!

It appears that [email protected] does not support the Next.js 14.0.3 version. I am wondering if there are plans to update this dependency to support Next.js 14, or if there are any alternative solutions you might recommend?

Thank you very much for your work and effort on this project. I look forward to your response.

Best regards,
Quintas

No tests

Hi there,

Thanks for your nice starter.

There is also no testing setup. If you're open to this, I would be happy to help with setting this up. I would use vitest + @testing--library/react and add some base tests. I would also make sure to ignore any generated/copied code for coverage purposes.

ERR_MODULE_NOT_FOUND when trying to build or start the development server

Hello,
When I try to run pnpm run dev I get the error bellow:

> [email protected] dev C:\Users\Enej G\Desktop\next-saas-stripe-starter-main
> next dev

  ▲ Next.js 14.2.3
  - Local:        http://localhost:3000
  - Environments: .env.local

 ✓ Starting...
 ✓ Ready in 3.1s
Error: Cannot find package 'C:\Users\Enej G\Desktop\next-saas-stripe-starter-main\node_modules\.pnpm\@[email protected]_@[email protected]_@[email protected]_vdk46njk7gfv6xrwv77e3vblhq\node_modules\@opentelemetry\exporter-trace-otlp-grpc\package.json' imported from C:\Users\Enej G\Desktop\next-saas-stripe-starter-main\node_modules\.pnpm\@[email protected]_@[email protected]_@[email protected]_vdk46njk7gfv6xrwv77e3vblhq\node_modules\@effect-ts\otel-exporter-trace-otlp-grpc\_mjs\index.mjs
Did you mean to import "@opentelemetry/exporter-trace-otlp-grpc/build/src/index.js"?
    at legacyMainResolve (node:internal/modules/esm/resolve:215:26)
    at packageResolve (node:internal/modules/esm/resolve:841:14)
    at moduleResolve (node:internal/modules/esm/resolve:927:18)
    at defaultResolve (node:internal/modules/esm/resolve:1157:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:390:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:359:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:234:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)
    at link (node:internal/modules/esm/module_job:86:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}
Error: Cannot find package 'C:\Users\Enej G\Desktop\next-saas-stripe-starter-main\node_modules\.pnpm\@[email protected]_@[email protected]_@[email protected]_vdk46njk7gfv6xrwv77e3vblhq\node_modules\@opentelemetry\exporter-trace-otlp-grpc\package.json' imported from C:\Users\Enej G\Desktop\next-saas-stripe-starter-main\node_modules\.pnpm\@[email protected]_@[email protected]_@[email protected]_vdk46njk7gfv6xrwv77e3vblhq\node_modules\@effect-ts\otel-exporter-trace-otlp-grpc\_mjs\index.mjs
Did you mean to import "@opentelemetry/exporter-trace-otlp-grpc/build/src/index.js"?
    at legacyMainResolve (node:internal/modules/esm/resolve:215:26)
    at packageResolve (node:internal/modules/esm/resolve:841:14)
    at moduleResolve (node:internal/modules/esm/resolve:927:18)
    at defaultResolve (node:internal/modules/esm/resolve:1157:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:390:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:359:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:234:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)
    at link (node:internal/modules/esm/module_job:86:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

I am using Windows 11 btw

API Endpoint cannot recognise user

Hi,

I am using the starter kit and I must say, It is really awesome and made the startup of the project, absolutely an ease.

Recently, I am facing an issue where the API endpoint is not able to fetch the authenticated user through getToken().

package.json

{
  "name": "saas-starter",
  "version": "0.2.0",
  "private": true,
  "author": {
    "name": "mickasmt",
    "url": "https://twitter.com/mickasmt"
  },
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "vercel-build": "prisma generate && prisma migrate deploy && next build",
    "turbo": "next dev --turbo",
    "start": "next start",
    "lint": "next lint",
    "preview": "next build && next start",
    "postinstall": "prisma generate",
    "email": "email dev --dir emails --port 3333"
  },
  "dependencies": {
    "@auth/prisma-adapter": "^2.1.0",
    "@hookform/resolvers": "^3.3.4",
    "@next-auth/prisma-adapter": "^1.0.7",
    "@prisma/client": "^5.14.0",
    "@radix-ui/react-accessible-icon": "^1.0.3",
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-alert-dialog": "^1.0.5",
    "@radix-ui/react-aspect-ratio": "^1.0.3",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-collapsible": "^1.0.3",
    "@radix-ui/react-context-menu": "^2.1.5",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-hover-card": "^1.0.7",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-menubar": "^1.0.4",
    "@radix-ui/react-navigation-menu": "^1.1.4",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-progress": "^1.0.3",
    "@radix-ui/react-radio-group": "^1.1.3",
    "@radix-ui/react-scroll-area": "^1.0.5",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slider": "^1.1.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-tabs": "^1.0.4",
    "@radix-ui/react-toast": "^1.1.5",
    "@radix-ui/react-toggle": "^1.0.3",
    "@radix-ui/react-toggle-group": "^1.0.4",
    "@radix-ui/react-tooltip": "^1.0.7",
    "@react-email/button": "0.0.15",
    "@react-email/components": "0.0.17",
    "@react-email/html": "0.0.8",
    "@t3-oss/env-nextjs": "^0.10.1",
    "@types/uuid": "^9.0.8",
    "@typescript-eslint/parser": "^7.8.0",
    "@vercel/analytics": "^1.2.2",
    "@vercel/og": "^0.6.2",
    "axios": "^1.7.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "cmdk": "^1.0.0",
    "concurrently": "^8.2.2",
    "contentlayer2": "^0.4.6",
    "date-fns": "^3.6.0",
    "html-react-parser": "^5.1.10",
    "lucide-react": "^0.377.0",
    "luxon": "^3.4.4",
    "ms": "^2.1.3",
    "next": "14.2.3",
    "next-auth": "5.0.0-beta.18",
    "next-contentlayer2": "^0.4.6",
    "next-sitemap": "^4.2.3",
    "next-themes": "^0.3.0",
    "nodemailer": "^6.9.13",
    "prop-types": "^15.8.1",
    "react": "18.3.1",
    "react-aiwriter": "^1.0.0",
    "react-day-picker": "^8.10.1",
    "react-dom": "18.3.1",
    "react-email": "2.1.2",
    "react-hook-form": "^7.51.3",
    "react-markdown": "^9.0.1",
    "react-scroll": "^1.9.0",
    "react-textarea-autosize": "^8.5.3",
    "react-toastify": "^10.0.5",
    "react-typed": "^2.0.12",
    "request-ip": "^3.3.0",
    "resend": "^3.2.0",
    "sharp": "^0.33.3",
    "shiki": "^1.4.0",
    "stripe": "^15.4.0",
    "tailwind-merge": "^2.3.0",
    "tailwindcss-animate": "^1.0.7",
    "uuidv4": "^6.2.13",
    "vaul": "^0.9.0",
    "zod": "^3.23.5",
    "zustand": "^4.5.2"
  },
  "devDependencies": {
    "@commitlint/cli": "^19.3.0",
    "@commitlint/config-conventional": "^19.2.2",
    "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
    "@tailwindcss/line-clamp": "^0.4.4",
    "@tailwindcss/typography": "^0.5.13",
    "@types/node": "^20.12.8",
    "@types/react": "18.3.1",
    "@types/react-dom": "18.3.0",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.57.0",
    "eslint-config-next": "14.2.3",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-tailwindcss": "^3.15.1",
    "husky": "^9.0.11",
    "mdast-util-toc": "^7.0.1",
    "postcss": "^8.4.38",
    "prettier": "^3.2.5",
    "prettier-plugin-tailwindcss": "^0.5.14",
    "pretty-quick": "^4.0.0",
    "prisma": "^5.14.0",
    "rehype": "^13.0.1",
    "rehype-autolink-headings": "^7.1.0",
    "rehype-pretty-code": "^0.13.1",
    "rehype-slug": "^6.0.0",
    "remark": "^15.0.1",
    "remark-gfm": "^4.0.0",
    "tailwindcss": "^3.4.3",
    "typescript": "5.4.5",
    "unist-util-visit": "^5.0.0"
  }
}

components/services/service-input-card.tsx

....

 const axResponse = await axios.post(
        "/api/jobs",
        {
          slug: service.slug,
          input: query,
          ip: null,
          token: visit.token,
        },
        {
          headers: {
            "Content-Type": "application/json",
          },
          withCredentials: true,
        },
      );
      const response: {
        message: any;
        response: any;
      } = (await axResponse.data) as any;

....

api/jobs/route.tsx

export async function POST(req: NextRequest) {
  let { slug, input, ip, token } = await req.json();
  ip = getIp(req);
  if (!ip || (!!token && token.length != 36)) {
    return new Response(JSON.stringify({ message: "Invalid request" }), {
      status: 400,
    });
  }

  const secret = process.env.NEXTAUTH_SECRET;
  console.log("🎩 Secret:", secret);
  const bareUser = (await getToken({
    req,
    secret,
    encryption: true,
  } as any)) as any;
  console.log("🎩 Bare User:", bareUser);
  let user: any = null;
  if (bareUser) {
    user = await prisma.user.findUnique({
      where: {
        email: bareUser.email,
      },
    });
  }
  console.log("🎩 User:", user);
}

The bareUser and user both come out to be null.

Note: In development, things seem to be working but on Vercel it is not. Possibly some issue with the transition from next-auth to auth.js.

Please guide.

Unable to see terminal logs

idk if this is a problem specific to me but I am unable to see terminal logs when developing. After the initial log, proceeding logs stop showing:

Screenshot 2023-11-17 at 10 04 35 AM

stripe webhook 302 and not upgraded after test payment

The problem

image

I'm using a test product id, test api key & test webhook key. And I paid with the test card 4242

The stripe info is not updated in the DB
image

I just directly deployed it on vercel.

Then I added some simple logs.

image

My assumption

I guess I'm missing some configuration so vercel blocked the webhook request with a 302/303? I found sth like this https://stackoverflow.com/questions/47004417/stripe-webhook-test-error-302?rq=3 saying that there's language redirection or a login wall?

getting UnknownAction: Cannot parse action

getting this error when trying the sign-in: getting UnknownAction: Cannot parse action

getting this after the post and get callback from google

logs:
�[31m[auth][error]�[0m UnknownAction: Cannot parse action at /session .Read more at https://errors.authjs.dev#unknownaction

at (node_modules/next-auth/node_modules/@auth/core/lib/utils/web.js:90:0)
at (node_modules/next-auth/node_modules/@auth/core/lib/utils/web.js:23:37)
at (node_modules/next-auth/node_modules/@auth/core/index.js:67:34)
at (node_modules/next-auth/lib/index.js:11:11)
at (node_modules/next-auth/lib/index.js:119:0)
at (node_modules/next-auth/lib/index.js:99:0)
at (node_modules/next/dist/esm/server/web/adapter.js:181:17)
at (node_modules/next/dist/esm/server/async-storage/request-async-storage-wrapper.js:74:0)
at (node_modules/next/dist/esm/server/web/adapter.js:168:45)
at (node_modules/next/dist/esm/server/lib/trace/tracer.js:114:0)

logs_result (5).json
image

need help

About Not Using PlanetScale Database

Can traditional MySQL connection be used? PlanetScale requires a credit card, which is very troublesome, and the data is relatively reliable on our own side, making backup convenient

How to sign up/sign in using Auth.js Magic Link

Hi,
first of all thanks for this open source saas starter. It's saving me hundreds of hours of development.
I've successfully set up Google Authentication flow.
Right now I am struggling implementing the magic link sign in/sign up.
From what I understand, the main flow is in auth.config.ts. You've commented out the supposed code required to implement it.
I've tried uncommenting it, but it throws error cannot find Email() .
I've read the new Auth.JS 5.0 guides considering that you just upgraded it, and, from what I understand, it should be something like this:

providers: [
Resend({
      from: "[email protected]",
    }),
]

I've tried replacing Email() with Resend() but still won't work. No project docs for this topic to look up either.
My question is, have you successfully found a solution for this? I'm stuck on this since 2 days already. If you could give me a hand on this, I'd really appreciate it.
Thank in advance

Requesting Payment alternative: lemonsqueezy.

Need a payment alternative.

This is one of the Best and well maintained open-source SaaS template.

But, the stripe payments is Not supported in some countries like India, So, I was wondering if you can provide documentation for integrating lemonsqueezy into this Project. If you can do this, It would be a great Help...

Thank you for the Template!

Add Lemon Squeezy Payment Integration for Subscription Support

Hi,

Thank you for creating and maintaining this fantastic repository!

However, I have encountered an issue where Stripe is not supported in my country, which makes it difficult for me to utilize the subscription payment feature. To address this, I would like to suggest integrating Lemon Squeezy as an alternative payment gateway for subscription management.

Lemon Squeezy is a reliable and developer-friendly payment platform that supports a wide range of countries and offers robust subscription handling features.

Would it be possible to implement Lemon Squeezy as an additional payment option alongside Stripe? This would greatly enhance the accessibility of the project for users in countries where Stripe is not available.

Thank you for considering this request, and I am looking forward to your response.

Not working with postgres and npm - UnknownAction: Cannot parse action at /session .Read more at https://errors.authjs.dev#unknownaction

So I am trying a fairly standard setup, except I use supabase (postgress) + npm instead of pnpm.

Error is following:

 ✓ Compiled /api/auth/[...nextauth] in 554ms (264 modules)
[auth][warn][debug-enabled] Read more: https://warnings.authjs.dev#debug-enabled
 ✓ Compiled /middleware in 151ms (264 modules)
[auth][error] UnknownAction: Cannot parse action at /session .Read more at https://errors.authjs.dev#unknownaction
    at parseActionAndProviderId (webpack-internal:///(middleware)/./node_modules/next-auth/node_modules/@auth/core/lib/utils/web.js:87:27)
    at toInternalRequest (webpack-internal:///(middleware)/./node_modules/next-auth/node_modules/@auth/core/lib/utils/web.js:32:40)
    at Auth (webpack-internal:///(middleware)/./node_modules/next-auth/node_modules/@auth/core/index.js:82:103)
    at getSession (webpack-internal:///(middleware)/./node_modules/next-auth/lib/index.js:22:60)
    at handleAuth (webpack-internal:///(middleware)/./node_modules/next-auth/lib/index.js:134:35)
    at Object.request (webpack-internal:///(middleware)/./node_modules/next-auth/lib/index.js:116:24)
    at eval (webpack-internal:///(middleware)/./node_modules/next/dist/esm/server/web/adapter.js:193:27)
    at AsyncLocalStorage.run (node:async_hooks:346:14)
    at Object.wrap (webpack-internal:///(middleware)/./node_modules/next/dist/esm/server/async-storage/request-async-storage-wrapper.js:81:24)
    at eval (webpack-internal:///(middleware)/./node_modules/next/dist/esm/server/web/adapter.js:180:122)
(node:56485) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)

I switched to use Next-Auth 4.x and it works fine now.

Sign-in modal differs from login page

So there is two options in the header Login page and Sign-In. First allows to login with email, but second is not. I understand that sign-in modal used from the subscription flow.

Also there is /register page which have another different UI.

I think there is should be Register and Sign-in buttons but they should lead to the same page or popup if you prefer.

image image image

Google login failed

As described in this thread. It's just a really simple client id & secret, what could go wrong...

nextauthjs/next-auth#10089 (comment)

image
[auth][error] TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11730:11)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at getAuthorizationUrl (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/lib/actions/signin/authorization-url.js:24:35)
    at Module.signIn (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/lib/actions/signin/index.js:16:56)
    at AuthInternal (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/lib/index.js:72:24)
    at Auth (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/index.js:126:34)
    at /path/to/my-saas-project/node_modules/next/dist/compiled/next-server/webpack:/next/dist/esm/server/future/route-modules/app-route/module.js:207:37
    at e_.execute (/path/to/my-saas-project/node_modules/next/dist/compiled/next-server/webpack:/next/dist/esm/server/future/route-modules/app-route/module.js:122:26)
    at e_.handle (/path/to/my-saas-project/node_modules/next/dist/compiled/next-server/webpack:/next/dist/esm/server/future/route-modules/app-route/module.js:269:30)
    at doRender (/path/to/my-saas-project/node_modules/next/src/server/base-server.ts:2273:30)

Bentogrid

Hello, where did you find all these svg to make your superb card?

thank you for your reply

No development setup

Hi there,

Currently there is no local development setup in place. This is something I need to add on my end, and I would be happy to contribute back.

I intend to add:

  1. docker compose file to run a local database
  2. some commands to easily bring it up as required and migrate it
  3. test setup allowing running tests against a database (using https://testcontainers.com/)
  4. github workflows for running linting and unit tests
  5. integration of test coverage and code analytics using (https://deepsource.com/)

I might also run e2e tests later, but that is out of scope for me at first.

Tell me if anything is relevant and I will add it as a PR here first and sync

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.