[ { "path": ".devcontainer/Dockerfile", "content": "FROM mcr.microsoft.com/devcontainers/javascript-node:20 \n" }, { "path": ".devcontainer/compose.dev.yml", "content": "services:\n workspace:\n build: \n dockerfile: Dockerfile\n volumes:\n - ../:/workspace:cached\n command: /bin/sh -c \"while sleep 1000; do :; done\" \n depends_on:\n - database\n \n database:\n image: postgres:17.2-alpine\n environment:\n POSTGRES_DB: acme\n POSTGRES_USER: postgres\n POSTGRES_PASSWORD: root\n " }, { "path": ".devcontainer/devcontainer.json", "content": "{\n \"name\": \"Next.js Auth Template\",\n \"dockerComposeFile\": [\"compose.dev.yml\"],\n \"service\": \"workspace\",\n \"workspaceFolder\": \"/workspace\",\n \"postCreateCommand\": \"pnpm config set store-dir $HOME/.pnpm-store\",\n \"postStartCommand\": \"pnpm install\",\n \"forwardPorts\": [3000],\n \"features\": {\n \"ghcr.io/devcontainers-extra/features/pnpm\": \"latest\"\n },\n \"customizations\": {\n \"vscode\": {\n \"settings\": {\n \"editor.codeActionsOnSave\": {\n \"source.fixAll.eslint\": \"explicit\",\n \"source.organizeImports\": \"explicit\",\n \"source.removeUnusedImports\": \"explicit\"\n },\n \"editor.guides.bracketPairs\": \"active\",\n \"editor.rulers\": [100],\n \"typescript.tsdk\": \"node_modules/typescript/lib\"\n },\n \"extensions\": [\n \"dsznajder.es7-react-js-snippets\",\n \"eamodio.gitlens\",\n \"esbenp.prettier-vscode\",\n \"YoavBls.pretty-ts-errors\",\n \"bradlc.vscode-tailwindcss\"\n ]\n }\n }\n}\n" }, { "path": ".eslintrc.cjs", "content": "/** @type {import(\"eslint\").Linter.Config} */\nconst config = {\n parser: \"@typescript-eslint/parser\",\n parserOptions: {\n project: true,\n },\n plugins: [\"@typescript-eslint\"],\n extends: [\n \"plugin:@next/next/recommended\",\n \"plugin:@typescript-eslint/recommended-type-checked\",\n \"plugin:@typescript-eslint/stylistic-type-checked\",\n ],\n rules: {\n // These opinionated rules are enabled in stylistic-type-checked above.\n // Feel free to reconfigure them to your own preference.\n \"@typescript-eslint/array-type\": \"off\",\n \"@typescript-eslint/consistent-type-definitions\": \"off\",\n \"@typescript-eslint/no-empty-interface\": \"off\",\n\n \"@typescript-eslint/consistent-type-imports\": [\n \"warn\",\n {\n prefer: \"type-imports\",\n fixStyle: \"inline-type-imports\",\n },\n ],\n \"@typescript-eslint/no-unused-vars\": [\"warn\", { argsIgnorePattern: \"^_\" }],\n \"@typescript-eslint/require-await\": \"off\",\n \"@typescript-eslint/no-misused-promises\": [\n \"error\",\n {\n checksVoidReturn: { attributes: false },\n },\n ],\n },\n ignorePatterns: [\"*.js\"],\n};\n\nmodule.exports = config;\n" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.md", "content": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Describe the bug**\nA clear and concise description of what the bug is.\n\n**To Reproduce**\nSteps to reproduce the behavior:\n1. Go to '...'\n2. Click on '....'\n3. Scroll down to '....'\n4. See error\n\n**Expected behavior**\nA clear and concise description of what you expected to happen.\n\n**Screenshots**\nIf applicable, add screenshots to help explain your problem.\n\n**Desktop (please complete the following information):**\n - OS: [e.g. iOS]\n - Browser [e.g. chrome, safari]\n - Version [e.g. 22]\n\n**Smartphone (please complete the following information):**\n - Device: [e.g. iPhone6]\n - OS: [e.g. iOS8.1]\n - Browser [e.g. stock browser, safari]\n - Version [e.g. 22]\n\n**Additional context**\nAdd any other context about the problem here.\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.md", "content": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Is your feature request related to a problem? Please describe.**\nA clear and concise description of what the problem is. Ex. I'm always frustrated when [...]\n\n**Describe the solution you'd like**\nA clear and concise description of what you want to happen.\n\n**Describe alternatives you've considered**\nA clear and concise description of any alternative solutions or features you've considered.\n\n**Additional context**\nAdd any other context or screenshots about the feature request here.\n" }, { "path": ".github/pull_request_template.md", "content": "# Description\n\nPlease include a summary of the changes and the related issue. Please also include relevant motivation and context. List any dependencies that are required for this change.\n\nFixes # (issue)\n\n## Type of change\n- [ ] Bug fix (non-breaking change which fixes an issue)\n- [ ] New feature (non-breaking change which adds functionality)\n- [ ] This change requires a documentation update\n- [ ] This change requires installing new dependencies\n\n" }, { "path": ".github/workflows/check.yaml", "content": "name: Lint & Test\n\non:\n pull_request:\n branches: [main]\n\nconcurrency:\n group: ci-${{ github.ref }}\n cancel-in-progress: true\n\npermissions:\n contents: read\n\njobs:\n typecheck-and-lint:\n runs-on: ubuntu-latest\n\n steps:\n - uses: actions/checkout@v2\n - uses: pnpm/action-setup@v2\n with:\n version: 9\n - uses: actions/setup-node@v3\n with:\n node-version: 20.x\n cache: \"pnpm\"\n\n - name: Install dependencies\n run: pnpm install --frozen-lockfile\n\n - name: Type Check and Lint\n run: pnpm run typecheck && pnpm run lint\n env:\n SKIP_ENV_VALIDATION: true\n\n e2e-test:\n needs: typecheck-and-lint\n timeout-minutes: 60\n runs-on: ubuntu-latest\n\n env:\n DATABASE_URL: ${{secrets.DATABASE_URL}}\n DISCORD_CLIENT_ID: ${{secrets.DISCORD_CLIENT_ID}}\n DISCORD_CLIENT_SECRET: ${{secrets.DISCORD_CLIENT_SECRET}}\n MOCK_SEND_EMAIL: \"true\"\n SMTP_HOST: host\n SMTP_PORT: 587\n SMTP_USER: user\n SMTP_PASSWORD: password\n NEXT_PUBLIC_APP_URL: http://localhost:3000\n STRIPE_API_KEY: stripe_api_key\n STRIPE_WEBHOOK_SECRET: stripe_webhook_secret\n STRIPE_PRO_MONTHLY_PLAN_ID: stripe_pro_monthly_plan_id\n\n steps:\n - uses: actions/checkout@v2\n - uses: pnpm/action-setup@v2\n with:\n version: 9\n - uses: actions/setup-node@v3\n with:\n node-version: 20.x\n cache: \"pnpm\"\n - name: Install dependencies\n run: pnpm install --frozen-lockfile\n - name: Build the app\n run: pnpm build\n - name: Install Playwright Browsers\n run: pnpm exec playwright install chromium --with-deps\n - name: Run Playwright tests\n run: pnpm exec playwright test\n - uses: actions/upload-artifact@v4\n if: always()\n with:\n name: playwright-report\n path: playwright-report/\n retention-days: 30\n" }, { "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# database\n/prisma/db.sqlite\n/prisma/db.sqlite-journal\n\n# next.js\n/.next/\n/out/\nnext-env.d.ts\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.pnpm-debug.log*\napplication.log\n\n# local env files\n# do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables\n.env\n.env*.local\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\n/test-results/\n/playwright-report/\n/blob-report/\n/playwright/.cache/\ntests/e2e/output" }, { "path": "LICENSE", "content": "# MIT License\n\nCopyright (c) [2023] [Touha Zohair]\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "# Next.js Auth Starter Template\n\n## Motivation\n\nImplementing authentication in Next.js, especially Email+Password authentication, can be challenging. NextAuth intentionally limits email password functionality to discourage the use of passwords due to security risks and added complexity. However, in certain projects, clients may require user password authentication. Lucia offers a flexible alternative to NextAuth.js, providing more customization options without compromising on security. This template serves as a starting point for building a Next.js app with Lucia authentication.\n\n## Lucia vs. NextAuth.js\n\nLucia is less opinionated than NextAuth, offering greater flexibility for customization. While Lucia involves more setup, it provides a higher degree of flexibility, making it a suitable choice for projects requiring unique authentication configurations.\n\n## Key Features\n\n- **Authentication:** ๐Ÿ’ผ Support for Credential and OAuth authentication.\n- **Authorization:** ๐Ÿ”’ Easily manage public and protected routes within the `app directory`.\n- **Email Verification:** ๐Ÿ“ง Verify user identities through email.\n- **Password Reset:** ๐Ÿ”‘ Streamline password resets by sending email password reset links.\n- **Lucia + tRPC:** ๐Ÿ”„ Similar to NextAuth with tRPC, granting access to sessions and user information through tRPC procedures.\n- **E2E tests:** ๐Ÿงช Catch every issue before your users do with comprehensive E2E testing.\n- **Stripe Payment:** ๐Ÿ’ณ Setup user subscriptions seamlessly with stripe.\n- **Email template with react-email:** โœ‰๏ธ Craft your email templates using React.\n- **PostgreSQL Database:** ๐Ÿ›ข๏ธ Utilize a PostgreSQL database set up using Drizzle for enhanced performance and type safety.\n- **Database Migration:** ๐Ÿš€ Included migration script to extend the database schema according to your project needs.\n\n## Tech Stack\n\n- [Next.js](https://nextjs.org)\n- [Lucia](https://lucia-auth.com/)\n- [tRPC](https://trpc.io)\n- [Drizzle ORM](https://orm.drizzle.team/)\n- [PostgreSQL](https://www.postgresql.org/)\n- [Stripe](https://stripe.com/)\n- [Tailwind CSS](https://tailwindcss.com)\n- [Shadcn UI](https://ui.shadcn.com/)\n- [React Hook Form](https://www.react-hook-form.com/)\n- [React Email](https://react.email/)\n- [Playwright](https://playwright.dev/)\n\n## Get Started\n\n1. Clone this repository to your local machine.\n2. Copy `.env.example` to `.env` and fill in the required environment variables.\n3. Run `pnpm install` to install dependencies.\n4. `(for node v18 or lower):` Uncomment polyfills for `webCrypto` in `src/lib/auth/index.ts`\n5. Update app title, database prefix, and other parameters in the `src/lib/constants.ts` file.\n6. Run `pnpm db:push` to push your schema to the database.\n7. Execute `pnpm dev` to start the development server and enjoy!\n\n## Testing\n\n1. Install [Playwright](https://playwright.dev/) (use this command if you want to install chromium only `pnpm exec playwright install chromium --with-deps`)\n2. Build production files using `pnpm build`\n3. Run `pnpm test:e2e` (add --debug flag to open tests in browser in debug mode)\n\n## Using Github actions\n\nAdd the following environment variables to your **github actions repository secrets** -\n`DATABASE_URL`, `DISCORD_CLIENT_ID`, `DISCORD_CLIENT_SECRET`\n\n## Roadmap\n\n- [ ] Update Password\n- [x] Stripe Integration\n\n- [ ] Admin Dashboard (under consideration)\n- [ ] Role-Based Access Policy (under consideration)\n\n## Contributing\n\nTo contribute, fork the repository and create a feature branch. Test your changes, and if possible, open an issue for discussion before submitting a pull request. Follow project guidelines, and welcome feedback to ensure a smooth integration of your contributions. Your pull requests are warmly welcome.\n" }, { "path": "components.json", "content": "{\n \"$schema\": \"https://ui.shadcn.com/schema.json\",\n \"style\": \"default\",\n \"rsc\": true,\n \"tsx\": true,\n \"tailwind\": {\n \"config\": \"tailwind.config.ts\",\n \"css\": \"src/styles/globals.css\",\n \"baseColor\": \"zinc\",\n \"cssVariables\": true\n },\n \"aliases\": {\n \"components\": \"@/components\",\n \"utils\": \"@/lib/utils\"\n }\n}\n" }, { "path": "drizzle.config.ts", "content": "import { defineConfig } from \"drizzle-kit\";\nimport { DATABASE_PREFIX } from \"@/lib/constants\";\n\nexport default defineConfig({\n schema: \"./src/server/db/schema.ts\",\n out: \"./drizzle\",\n dialect: \"postgresql\",\n dbCredentials: {\n url: process.env.DATABASE_URL!,\n },\n tablesFilter: [`${DATABASE_PREFIX}_*`],\n});\n" }, { "path": "next.config.js", "content": "await import(\"./src/env.js\");\n\n/** @type {import(\"next\").NextConfig} */\nconst config = {};\n\nexport default config;\n" }, { "path": "package.json", "content": "{\n \"name\": \"next-lucia-auth\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"build\": \"next build\",\n \"db:push\": \"dotenv drizzle-kit push\",\n \"db:generate\": \"dotenv drizzle-kit generate\",\n \"db:migrate\": \"dotenv drizzle-kit migrate\",\n \"db:studio\": \"dotenv drizzle-kit studio\",\n \"dev\": \"next dev\",\n \"start\": \"next start\",\n \"lint\": \"next lint\",\n \"typecheck\": \"tsc --noEmit\",\n \"stripe:listen\": \"stripe listen --forward-to localhost:3000/api/webhooks/stripe --latest\",\n \"test:e2e\": \"playwright test\"\n },\n \"dependencies\": {\n \"@hookform/resolvers\": \"^3.9.0\",\n \"@lucia-auth/adapter-drizzle\": \"1.0.7\",\n \"@radix-ui/react-alert-dialog\": \"^1.1.1\",\n \"@radix-ui/react-dialog\": \"^1.1.1\",\n \"@radix-ui/react-dropdown-menu\": \"^2.1.1\",\n \"@radix-ui/react-icons\": \"^1.3.0\",\n \"@radix-ui/react-label\": \"^2.1.0\",\n \"@radix-ui/react-slot\": \"^1.1.0\",\n \"@radix-ui/react-tabs\": \"^1.1.0\",\n \"@react-email/components\": \"^0.0.12\",\n \"@react-email/render\": \"^0.0.10\",\n \"@t3-oss/env-nextjs\": \"^0.7.3\",\n \"@tanstack/react-query\": \"^4.36.1\",\n \"@trpc/client\": \"^10.45.2\",\n \"@trpc/next\": \"^10.45.2\",\n \"@trpc/react-query\": \"^10.45.2\",\n \"@trpc/server\": \"^10.45.2\",\n \"arctic\": \"^1.9.2\",\n \"class-variance-authority\": \"^0.7.0\",\n \"clsx\": \"^2.1.1\",\n \"lucia\": \"3.2.0\",\n \"next\": \"^14.2.5\",\n \"next-themes\": \"^0.2.1\",\n \"nodemailer\": \"^6.9.14\",\n \"oslo\": \"^1.2.1\",\n \"postgres\": \"^3.4.4\",\n \"react\": \"18.2.0\",\n \"react-dom\": \"18.2.0\",\n \"react-hook-form\": \"^7.52.1\",\n \"react-markdown\": \"^9.0.1\",\n \"react-syntax-highlighter\": \"^15.5.0\",\n \"rehype-raw\": \"^7.0.0\",\n \"remark-gfm\": \"^4.0.0\",\n \"server-only\": \"^0.0.1\",\n \"sonner\": \"^1.5.0\",\n \"stripe\": \"^14.25.0\",\n \"superjson\": \"^2.2.1\",\n \"tailwind-merge\": \"^2.4.0\",\n \"tailwindcss-animate\": \"^1.0.7\",\n \"vaul\": \"^0.8.9\",\n \"zod\": \"^3.23.8\"\n },\n \"devDependencies\": {\n \"@next/eslint-plugin-next\": \"^14.2.5\",\n \"@playwright/test\": \"^1.45.3\",\n \"@tailwindcss/typography\": \"^0.5.13\",\n \"@types/eslint\": \"^8.56.11\",\n \"@types/node\": \"^18.19.42\",\n \"@types/nodemailer\": \"^6.4.15\",\n \"@types/react\": \"^18.3.3\",\n \"@types/react-dom\": \"^18.3.0\",\n \"@types/react-syntax-highlighter\": \"^15.5.13\",\n \"@typescript-eslint/eslint-plugin\": \"^6.21.0\",\n \"@typescript-eslint/parser\": \"^6.21.0\",\n \"autoprefixer\": \"^10.4.19\",\n \"dotenv\": \"^16.4.5\",\n \"dotenv-cli\": \"^7.4.2\",\n \"drizzle-kit\": \"^0.23.0\",\n \"drizzle-orm\": \"^0.32.1\",\n \"eslint\": \"^8.57.0\",\n \"pg\": \"^8.12.0\",\n \"postcss\": \"^8.4.40\",\n \"prettier\": \"^3.3.3\",\n \"prettier-plugin-tailwindcss\": \"^0.5.14\",\n \"tailwindcss\": \"^3.4.7\",\n \"tsx\": \"^4.16.2\",\n \"typescript\": \"^5.5.4\"\n },\n \"ct3aMetadata\": {\n \"initVersion\": \"7.24.2\"\n }\n}\n" }, { "path": "playwright.config.ts", "content": "import { defineConfig, devices } from \"@playwright/test\";\nimport \"dotenv/config\";\n\nconst baseURL = `http://localhost:${process.env.PORT ?? 3000}`;\n\nexport default defineConfig({\n testDir: \"./tests/e2e\",\n outputDir: \"./tests/e2e/output\",\n timeout: 60 * 1000,\n fullyParallel: true,\n\n forbidOnly: !!process.env.CI,\n retries: process.env.CI ? 2 : 0,\n workers: process.env.CI ? 1 : undefined,\n reporter: \"html\",\n use: {\n trace: \"on-first-retry\",\n baseURL,\n },\n\n projects: [\n {\n name: \"chromium\",\n use: { ...devices[\"Desktop Chrome\"] },\n },\n ],\n webServer: {\n command: \"npx cross-env NODE_ENV=test npm run start\",\n url: baseURL,\n stdout: \"pipe\",\n stderr: \"pipe\",\n reuseExistingServer: !process.env.CI,\n },\n});\n" }, { "path": "postcss.config.cjs", "content": "const config = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n\nmodule.exports = config;\n" }, { "path": "prettier.config.js", "content": "/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */\nconst config = {\n plugins: [\"prettier-plugin-tailwindcss\"],\n tabWidth: 2,\n semi: true,\n singleQuote: false,\n printWidth: 100,\n};\n\nexport default config;\n" }, { "path": "src/app/(auth)/layout.tsx", "content": "import type { ReactNode } from \"react\";\n\nconst AuthLayout = ({ children }: { children: ReactNode }) => {\n return (\n
{children}
\n );\n};\n\nexport default AuthLayout;\n" }, { "path": "src/app/(auth)/login/discord/callback/route.ts", "content": "import { cookies } from \"next/headers\";\nimport { generateId } from \"lucia\";\nimport { OAuth2RequestError } from \"arctic\";\nimport { eq } from \"drizzle-orm\";\nimport { discord, lucia } from \"@/lib/auth\";\nimport { db } from \"@/server/db\";\nimport { Paths } from \"@/lib/constants\";\nimport { users } from \"@/server/db/schema\";\n\nexport async function GET(request: Request): Promise {\n const url = new URL(request.url);\n const code = url.searchParams.get(\"code\");\n const state = url.searchParams.get(\"state\");\n const storedState = cookies().get(\"discord_oauth_state\")?.value ?? null;\n\n if (!code || !state || !storedState || state !== storedState) {\n return new Response(null, {\n status: 400,\n headers: { Location: Paths.Login },\n });\n }\n\n try {\n const tokens = await discord.validateAuthorizationCode(code);\n\n const discordUserRes = await fetch(\"https://discord.com/api/users/@me\", {\n headers: {\n Authorization: `Bearer ${tokens.accessToken}`,\n },\n });\n const discordUser = (await discordUserRes.json()) as DiscordUser;\n\n if (!discordUser.email || !discordUser.verified) {\n return new Response(\n JSON.stringify({\n error: \"Your Discord account must have a verified email address.\",\n }),\n { status: 400, headers: { Location: Paths.Login } },\n );\n }\n const existingUser = await db.query.users.findFirst({\n where: (table, { eq, or }) =>\n or(eq(table.discordId, discordUser.id), eq(table.email, discordUser.email!)),\n });\n\n const avatar = discordUser.avatar\n ? `https://cdn.discordapp.com/avatars/${discordUser.id}/${discordUser.avatar}.webp`\n : null;\n\n if (!existingUser) {\n const userId = generateId(21);\n await db.insert(users).values({\n id: userId,\n email: discordUser.email,\n emailVerified: true,\n discordId: discordUser.id,\n avatar,\n });\n const session = await lucia.createSession(userId, {});\n const sessionCookie = lucia.createSessionCookie(session.id);\n cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);\n return new Response(null, {\n status: 302,\n headers: { Location: Paths.Dashboard },\n });\n }\n\n if (existingUser.discordId !== discordUser.id || existingUser.avatar !== avatar) {\n await db\n .update(users)\n .set({\n discordId: discordUser.id,\n emailVerified: true,\n avatar,\n })\n .where(eq(users.id, existingUser.id));\n }\n const session = await lucia.createSession(existingUser.id, {});\n const sessionCookie = lucia.createSessionCookie(session.id);\n cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);\n return new Response(null, {\n status: 302,\n headers: { Location: Paths.Dashboard },\n });\n } catch (e) {\n // the specific error message depends on the provider\n if (e instanceof OAuth2RequestError) {\n // invalid code\n return new Response(JSON.stringify({ message: \"Invalid code\" }), {\n status: 400,\n });\n }\n console.error(e);\n\n return new Response(JSON.stringify({ message: \"internal server error\" }), {\n status: 500,\n });\n }\n}\n\ninterface DiscordUser {\n id: string;\n username: string;\n avatar: string | null;\n banner: string | null;\n global_name: string | null;\n banner_color: string | null;\n mfa_enabled: boolean;\n locale: string;\n email: string | null;\n verified: boolean;\n}\n" }, { "path": "src/app/(auth)/login/discord/route.ts", "content": "import { cookies } from \"next/headers\";\nimport { generateState } from \"arctic\";\nimport { discord } from \"@/lib/auth\";\nimport { env } from \"@/env\";\n\nexport async function GET(): Promise {\n const state = generateState();\n const url = await discord.createAuthorizationURL(state, {\n scopes: [\"identify\", \"email\"],\n });\n\n cookies().set(\"discord_oauth_state\", state, {\n path: \"/\",\n secure: env.NODE_ENV === \"production\",\n httpOnly: true,\n maxAge: 60 * 10,\n sameSite: \"lax\",\n });\n\n return Response.redirect(url);\n}\n" }, { "path": "src/app/(auth)/login/login.tsx", "content": "\"use client\";\n\nimport Link from \"next/link\";\nimport { useFormState } from \"react-dom\";\nimport { Input } from \"@/components/ui/input\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { PasswordInput } from \"@/components/password-input\";\nimport { DiscordLogoIcon } from \"@/components/icons\";\nimport { APP_TITLE } from \"@/lib/constants\";\nimport { login } from \"@/lib/auth/actions\";\nimport { Label } from \"@/components/ui/label\";\nimport { SubmitButton } from \"@/components/submit-button\";\n\nexport function Login() {\n const [state, formAction] = useFormState(login, null);\n\n return (\n \n \n {APP_TITLE} Log In\n Log in to your account to access your dashboard\n \n \n \n
\n
\n
or
\n
\n
\n
\n
\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n\n {state?.fieldError ? (\n
    \n {Object.values(state.fieldError).map((err) => (\n
  • \n {err}\n
    • \n ))}\n
\n ) : state?.formError ? (\n

\n {state?.formError}\n

\n ) : null}\n \n Log In\n \n \n
\n \n \n );\n}\n" }, { "path": "src/app/(auth)/login/page.tsx", "content": "import { redirect } from \"next/navigation\";\nimport { validateRequest } from \"@/lib/auth/validate-request\";\nimport { Paths } from \"@/lib/constants\";\nimport { Login } from \"./login\";\n\nexport const metadata = {\n title: \"Login\",\n description: \"Login Page\",\n};\n\nexport default async function LoginPage() {\n const { user } = await validateRequest();\n\n if (user) redirect(Paths.Dashboard);\n\n return ;\n}\n" }, { "path": "src/app/(auth)/reset-password/[token]/page.tsx", "content": "import {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\";\nimport { ResetPassword } from \"./reset-password\";\n\nexport const metadata = {\n title: \"Reset Password\",\n description: \"Reset Password Page\",\n};\n\nexport default function ResetPasswordPage({\n params,\n}: {\n params: { token: string };\n}) {\n return (\n \n \n Reset password\n Enter new password.\n \n \n \n \n \n );\n}\n" }, { "path": "src/app/(auth)/reset-password/[token]/reset-password.tsx", "content": "\"use client\";\n\nimport { useEffect } from \"react\";\nimport { useFormState } from \"react-dom\";\nimport { toast } from \"sonner\";\nimport { ExclamationTriangleIcon } from \"@/components/icons\";\nimport { SubmitButton } from \"@/components/submit-button\";\nimport { PasswordInput } from \"@/components/password-input\";\nimport { Label } from \"@/components/ui/label\";\nimport { resetPassword } from \"@/lib/auth/actions\";\n\nexport function ResetPassword({ token }: { token: string }) {\n const [state, formAction] = useFormState(resetPassword, null);\n\n useEffect(() => {\n if (state?.error) {\n toast(state.error, {\n icon: ,\n });\n }\n }, [state?.error]);\n\n return (\n
\n \n
\n \n \n
\n Reset Password\n
\n );\n}\n" }, { "path": "src/app/(auth)/reset-password/page.tsx", "content": "import { redirect } from \"next/navigation\";\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\";\nimport { SendResetEmail } from \"./send-reset-email\";\nimport { validateRequest } from \"@/lib/auth/validate-request\";\nimport { Paths } from \"@/lib/constants\";\n\nexport const metadata = {\n title: \"Forgot Password\",\n description: \"Forgot Password Page\",\n};\n\nexport default async function ForgotPasswordPage() {\n const { user } = await validateRequest();\n\n if (user) redirect(Paths.Dashboard);\n\n return (\n \n \n Forgot password?\n \n Password reset link will be sent to your email.\n \n \n \n \n \n \n );\n}\n" }, { "path": "src/app/(auth)/reset-password/send-reset-email.tsx", "content": "\"use client\";\n\nimport { useEffect } from \"react\";\nimport { useFormState } from \"react-dom\";\nimport Link from \"next/link\";\nimport { useRouter } from \"next/navigation\";\nimport { toast } from \"sonner\";\nimport { Input } from \"@/components/ui/input\";\nimport { Button } from \"@/components/ui/button\";\nimport { Label } from \"@/components/ui/label\";\nimport { SubmitButton } from \"@/components/submit-button\";\nimport { sendPasswordResetLink } from \"@/lib/auth/actions\";\nimport { ExclamationTriangleIcon } from \"@/components/icons\";\nimport { Paths } from \"@/lib/constants\";\n\nexport function SendResetEmail() {\n const [state, formAction] = useFormState(sendPasswordResetLink, null);\n const router = useRouter();\n\n useEffect(() => {\n if (state?.success) {\n toast(\"A password reset link has been sent to your email.\");\n router.push(Paths.Login);\n }\n if (state?.error) {\n toast(state.error, {\n icon: ,\n });\n }\n }, [state?.error, state?.success]);\n\n return (\n
\n
\n \n \n
\n\n
\n \n \n \n
\n\n Reset Password\n \n
\n );\n}\n" }, { "path": "src/app/(auth)/signup/page.tsx", "content": "import { redirect } from \"next/navigation\";\nimport { Signup } from \"./signup\";\nimport { validateRequest } from \"@/lib/auth/validate-request\";\nimport { Paths } from \"@/lib/constants\";\n\nexport const metadata = {\n title: \"Sign Up\",\n description: \"Signup Page\",\n};\n\nexport default async function SignupPage() {\n const { user } = await validateRequest();\n\n if (user) redirect(Paths.Dashboard);\n\n return ;\n}\n" }, { "path": "src/app/(auth)/signup/signup.tsx", "content": "\"use client\";\n\nimport { useFormState } from \"react-dom\";\nimport Link from \"next/link\";\nimport { PasswordInput } from \"@/components/password-input\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { DiscordLogoIcon } from \"@/components/icons\";\nimport { APP_TITLE } from \"@/lib/constants\";\nimport { Label } from \"@/components/ui/label\";\nimport { signup } from \"@/lib/auth/actions\";\nimport { SubmitButton } from \"@/components/submit-button\";\n\nexport function Signup() {\n const [state, formAction] = useFormState(signup, null);\n\n return (\n \n \n {APP_TITLE} Sign Up\n Sign up to start using the app\n \n \n \n
\n
\n
or
\n
\n
\n\n
\n
\n \n \n
\n
\n \n \n
\n\n {state?.fieldError ? (\n
    \n {Object.values(state.fieldError).map((err) => (\n
  • \n {err}\n
    • \n ))}\n
\n ) : state?.formError ? (\n

\n {state?.formError}\n

\n ) : null}\n
\n \n \n Already signed up? Login instead.\n \n \n
\n\n \n Sign Up\n \n \n
\n \n \n );\n}\n" }, { "path": "src/app/(auth)/verify-email/page.tsx", "content": "import {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\";\nimport { redirect } from \"next/navigation\";\nimport { validateRequest } from \"@/lib/auth/validate-request\";\nimport { VerifyCode } from \"./verify-code\";\nimport { Paths } from \"@/lib/constants\";\n\nexport const metadata = {\n title: \"Verify Email\",\n description: \"Verify Email Page\",\n};\n\nexport default async function VerifyEmailPage() {\n const { user } = await validateRequest();\n\n if (!user) redirect(Paths.Login);\n if (user.emailVerified) redirect(Paths.Dashboard);\n\n return (\n \n \n Verify Email\n \n Verification code was sent to {user.email}. Check\n your spam folder if you can't find the email.\n \n \n \n \n \n \n );\n}\n" }, { "path": "src/app/(auth)/verify-email/verify-code.tsx", "content": "\"use client\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@radix-ui/react-label\";\nimport { useEffect, useRef } from \"react\";\nimport { useFormState } from \"react-dom\";\nimport { toast } from \"sonner\";\nimport { ExclamationTriangleIcon } from \"@/components/icons\";\nimport { logout, verifyEmail, resendVerificationEmail as resendEmail } from \"@/lib/auth/actions\";\nimport { SubmitButton } from \"@/components/submit-button\";\n\nexport const VerifyCode = () => {\n const [verifyEmailState, verifyEmailAction] = useFormState(verifyEmail, null);\n const [resendState, resendAction] = useFormState(resendEmail, null);\n const codeFormRef = useRef(null);\n\n useEffect(() => {\n if (resendState?.success) {\n toast(\"Email sent!\");\n }\n if (resendState?.error) {\n toast(resendState.error, {\n icon: ,\n });\n }\n }, [resendState?.error, resendState?.success]);\n\n useEffect(() => {\n if (verifyEmailState?.error) {\n toast(verifyEmailState.error, {\n icon: ,\n });\n }\n }, [verifyEmailState?.error]);\n\n return (\n
\n
\n \n \n \n Verify\n \n
\n
\n \n Resend Code\n \n
\n
\n \n want to use another email? Log out now.\n \n
\n
\n );\n};\n" }, { "path": "src/app/(landing)/_components/copy-to-clipboard.tsx", "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon, CopyIcon } from \"@radix-ui/react-icons\";\nimport { useState } from \"react\";\nimport { toast } from \"sonner\";\n\nexport const CopyToClipboard = ({ text }: { text: string }) => {\n const [copied, setCopied] = useState(false);\n const copyToClipboard = async () => {\n setCopied(true);\n setTimeout(() => {\n setCopied(false);\n }, 2000);\n await navigator.clipboard.writeText(text);\n toast(\"Copied to clipboard\", {\n icon: ,\n });\n };\n return (\n
\n \n \n
\n );\n};\n" }, { "path": "src/app/(landing)/_components/feature-icons.tsx", "content": "import { forwardRef, type SVGProps } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst NextjsLight = forwardRef>(\n ({ className, ...props }, ref) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ),\n);\nNextjsLight.displayName = \"NextjsLight\";\n\nconst NextjsDark = forwardRef>(\n ({ className, ...props }, ref) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ),\n);\nNextjsDark.displayName = \"NextjsDark\";\n\nconst ReactJs = forwardRef>(\n ({ className, ...props }, ref) => (\n \n {\" \"}\n \n ),\n);\nReactJs.displayName = \"ReactJs\";\n\nconst TailwindCss = forwardRef>(\n ({ className, ...props }, ref) => (\n \n \n \n ),\n);\nTailwindCss.displayName = \"TailwindCss\";\n\nconst LuciaAuth = forwardRef>(\n ({ className, ...props }, ref) => (\n \n \n \n ),\n);\nLuciaAuth.displayName = \"LuciaAuth\";\n\nconst Drizzle = forwardRef>(\n ({ className, ...props }, ref) => (\n \n \n \n \n \n \n ),\n);\nDrizzle.displayName = \"Drizzle\";\n\nconst TRPC = forwardRef>(({ className, ...props }, ref) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n));\nTRPC.displayName = \"TRPC\";\n\nconst ShadcnUi = forwardRef>(\n ({ className, ...props }, ref) => (\n \n \n \n \n \n ),\n);\nShadcnUi.displayName = \"ShadcnUi\";\n\nconst ReactEmail = forwardRef>(\n ({ className, ...props }, ref) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ),\n);\nReactEmail.displayName = \"ReactEmail\";\n\nconst StripeLogo = forwardRef>(\n ({ className, ...props }, ref) => (\n \n \n \n ),\n);\nStripeLogo.displayName = \"StripeLogo\";\n\nexport {\n Drizzle,\n LuciaAuth,\n NextjsDark,\n NextjsLight,\n ReactEmail,\n ReactJs,\n ShadcnUi,\n StripeLogo,\n TailwindCss,\n TRPC,\n};\n" }, { "path": "src/app/(landing)/_components/footer.tsx", "content": "import { ThemeToggle } from \"@/components/theme-toggle\";\nimport { CodeIcon } from \"@radix-ui/react-icons\";\n\nconst githubUrl = \"https://github.com/iamtouha/next-lucia-auth\";\nconst twitterUrl = \"https://twitter.com/iamtouha\";\n\nexport const Footer = () => {\n return (\n \n );\n};\n" }, { "path": "src/app/(landing)/_components/header.tsx", "content": "import Link from \"next/link\";\nimport { RocketIcon } from \"@/components/icons\";\nimport { APP_TITLE } from \"@/lib/constants\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { HamburgerMenuIcon } from \"@radix-ui/react-icons\";\n\nconst routes = [\n { name: \"Home\", href: \"/\" },\n { name: \"Features\", href: \"/#features\" },\n {\n name: \"Documentation\",\n href: \"https://www.touha.dev/posts/simple-nextjs-t3-authentication-with-lucia\",\n },\n] as const;\n\nexport const Header = () => {\n return (\n
\n
\n \n \n \n \n \n \n \n
\n {routes.map(({ name, href }) => (\n \n {name}\n \n ))}\n
\n \n \n \n {APP_TITLE}\n \n \n
\n \n
\n
\n
\n );\n};\n" }, { "path": "src/app/(landing)/_components/hover-card.tsx", "content": "\"use client\";\nimport { Card, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport React, { useRef, useState } from \"react\";\n\ntype FeaturesProps = {\n name: string;\n description: string;\n logo: React.ReactNode;\n};\n\nconst CardSpotlight = (props: FeaturesProps) => {\n const divRef = useRef(null);\n const [isFocused, setIsFocused] = useState(false);\n const [position, setPosition] = useState({ x: 0, y: 0 });\n const [opacity, setOpacity] = useState(0);\n\n const handleMouseMove = (e: React.MouseEvent) => {\n if (!divRef.current || isFocused) return;\n\n const div = divRef.current;\n const rect = div.getBoundingClientRect();\n\n setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });\n };\n\n const handleFocus = () => {\n setIsFocused(true);\n setOpacity(1);\n };\n\n const handleBlur = () => {\n setIsFocused(false);\n setOpacity(0);\n };\n\n const handleMouseEnter = () => {\n setOpacity(1);\n };\n\n const handleMouseLeave = () => {\n setOpacity(0);\n };\n\n return (\n \n \n
{props.logo}
\n \n {props.name}\n {props.description}\n \n \n );\n};\n\nexport default CardSpotlight;\n" }, { "path": "src/app/(landing)/layout.tsx", "content": "import { APP_TITLE } from \"@/lib/constants\";\nimport { type Metadata } from \"next\";\nimport { type ReactNode } from \"react\";\nimport { Footer } from \"./_components/footer\";\nimport { Header } from \"./_components/header\";\n\nexport const metadata: Metadata = {\n title: APP_TITLE,\n description: \"A Next.js starter with T3 stack and Lucia auth.\",\n};\n\nfunction LandingPageLayout({ children }: { children: ReactNode }) {\n return (\n <>\n
\n {children}\n
\n