Auth.js Guide Created #7064
Auth.js Guide Created #7064
Conversation
Dangerous URL checkNo absolute URLs to prisma.io/docs found. |
Redirect checkThis PR probably requires the following redirects to be added to static/_redirects:
|
Deploying docs with
|
| Latest commit: |
bafa32e
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://48223a36.docs-51g.pages.dev |
| Branch Preview URL: | https://dc-3704-authjs-nextjs-guide.docs-51g.pages.dev |
WalkthroughAdded a new guide documenting wiring Auth.js with Prisma and Next.js (App Router) using PostgreSQL, plus sidebar registration and a cSpell entry for "Authjs". The guide includes setup steps, Prisma schema/client, Auth.js adapter and API route, middleware, UI components, and runtime/testing notes. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant NextApp as Next.js App
participant AuthJS as Auth.js
participant Prisma
participant Postgres as PostgreSQL
User->>NextApp: Request page
NextApp->>AuthJS: auth() check
AuthJS->>Prisma: Query session/user
Prisma->>Postgres: Read session/user
Postgres-->>Prisma: Return data
Prisma-->>AuthJS: Return user/session
AuthJS-->>NextApp: Auth state
alt Not authenticated
User->>NextApp: Click SignIn
NextApp->>AuthJS: signIn(provider)
AuthJS->>Prisma: Create account/session
Prisma->>Postgres: Write records
else Authenticated
User->>NextApp: Click SignOut
NextApp->>AuthJS: signOut()
AuthJS->>Prisma: Delete session
Prisma->>Postgres: Delete records
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
✨ Finishing Touches🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Caution No docstrings were generated. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
content/800-guides/350-authjs-nextjs.mdx (2)
232-232: Consider mentioning the beta version implications.Installing
next-auth@betamay introduce breaking changes or unstable features. Consider adding a note about this or specifying a more stable version if available.
516-526: Consider adding type safety for session.user.id.The code accesses
session.user?.idwithout ensuring it exists, which could cause runtime issues if the session user doesn't have an id property.Apply this diff to add proper type checking:
if (session) { + if (!session.user?.id) { + return // or handle this case appropriately + } user = await prisma.user.findUnique({ where: { - id: session.user?.id, + id: session.user.id, } }); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
content/800-guides/350-authjs-nextjs.mdx(1 hunks)sidebars.ts(1 hunks)
🧰 Additional context used
🪛 GitHub Actions: Documentation Checks
content/800-guides/350-authjs-nextjs.mdx
[error] 6-6: CSpell: Unknown word 'authjs' detected.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: runner / linkspector
- GitHub Check: Lost Pixel
🔇 Additional comments (8)
sidebars.ts (1)
449-449: LGTM! Sidebar integration is correct.The new Auth.js guide entry is properly added to the "Integration Solutions" category, following the established pattern and maintaining alphabetical sorting.
content/800-guides/350-authjs-nextjs.mdx (7)
1-9: LGTM! Well-structured metadata.The front matter includes all necessary metadata fields with appropriate values. The 25-minute completion time is realistic for this comprehensive guide.
74-74: Verify the unusual output path configuration.The
--output ../app/generated/prismapath is unconventional. Typically, Prisma generates the client innode_modules/@prisma/clientor a custom path within the project structure.Ensure this path aligns with the project structure and doesn't cause import issues. The standard approach would be to generate in the default location or use a path like
./generated/client.
188-203: LGTM! Proper Prisma Client setup with Accelerate.The client setup correctly uses the global singleton pattern to prevent multiple instances in development, and properly integrates the Accelerate extension for Prisma Postgres users.
325-327: LGTM! Minimal and effective middleware setup.The middleware configuration correctly exports the auth function to protect routes automatically.
337-409: LGTM! Well-structured auth components.The SignIn and SignOut components are properly implemented with server actions, following Next.js App Router best practices for form handling.
569-595: LGTM! Clear testing instructions.The testing section provides comprehensive steps for validating the implementation, including using Prisma Studio for database inspection.
11-595: Excellent comprehensive guide with minor improvements needed.This is a well-structured, thorough guide that effectively demonstrates Auth.js integration with Prisma and Next.js. The step-by-step approach, code examples, and explanations are clear and helpful for developers.
Key strengths:
- Clear prerequisites and setup instructions
- Proper separation of concerns between authentication and database layers
- Good use of modern Next.js patterns (App Router, Server Actions)
- Comprehensive testing instructions
|
Images automagically compressed by Calibre's image-actions ✨ Compression reduced images by 16.1%, saving 62.23 KB.
206 images did not require optimisation. |
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (2)
content/800-guides/350-authjs-nextjs.mdx (2)
6-6: Fix image filename to satisfy spellcheck and consistencyThe pipeline previously flagged "authjs". Use the hyphenated filename to avoid the token and match naming.
-image: '/img/guides/prisma-authjs-nextjs-cover.png' +image: '/img/guides/prisma-auth-js-nextjs-cover.png'
1-612: CSpell: ensure lowercase “authjs” isn’t still flaggedYou added “Authjs” to the dictionary, but this doc includes numerous lowercase “authjs” tokens (e.g., project name, image path). CSpell is often case-sensitive; consider adding the lowercase variant or adding a file-level ignore comment.
To verify occurrences:
#!/bin/bash # Find lowercase 'authjs' occurrences in docs (case-sensitive) rg -n --hidden -S '\bauthjs\b' content | sed -n '1,200p'Options:
- Add both variants to cSpell dictionary: ["Authjs", "authjs"].
- Or add a file header directive in this MDX: .
🧹 Nitpick comments (3)
content/800-guides/350-authjs-nextjs.mdx (3)
325-327: Limit middleware scope to avoid protecting assets and all routesExporting auth as middleware without a matcher applies it broadly. Add a matcher to target only the app routes you want to protect.
export { auth as middleware } from '@/lib/auth' + +// Only protect application routes; allow assets and auth endpoints +export const config = { + matcher: ['/((?!api/auth|_next/static|_next/image|favicon\\.ico).*)'], +}Adjust the matcher to your needs (for example, ['/dashboard/:path*']).
375-389: Polish provider label in the buttonThe UI will render "github" verbatim. Capitalize for brand consistency or map to a friendly label.
- <button className="bg-neutral-700 text-white p-2 rounded-md"> - Sign In with {provider} + <button className="bg-neutral-700 text-white p-2 rounded-md"> + Sign In with {(provider === 'github' ? 'GitHub' : provider) ?? 'Provider'} </button>
596-599: Use proper brand capitalization (“GitHub”) in textFor consistency and brand correctness, prefer “GitHub”.
-2. Navigate to `http://localhost:3000` in your browser. You should see the home page with a "Sign In with github" button. +2. Navigate to `http://localhost:3000` in your browser. You should see the home page with a "Sign In with GitHub" button.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
content/800-guides/350-authjs-nextjs.mdx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Check internal links
- GitHub Check: runner / linkspector
- GitHub Check: Lost Pixel
Summary by CodeRabbit
New Features
Documentation
Chores