Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix error from the auth docs. #60829

Merged
merged 2 commits into from
Jan 18, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -5,15 +5,15 @@ description: Learn how to implement authentication in Next.js, covering best pra

To implement authentication in Next.js, familiarize yourself with three foundational concepts:

- **[Authentication](#authentication)** verifies if the user is who they say they are. It requires the user to prove their identity with something they have, such as username and password.
- **[Session Management](#session-management)** tracks the users state (e.g. logged in) across multiple requests.
- **[Authorization](#authorization)** decides what parts of the application the user is allowed to access.
- **[Authentication](#authentication)** verifies if the user is who they say they are. It requires the user to prove their identity with something they have, such as a username and password.
- **[Session Management](#session-management)** tracks the user's state (e.g. logged in) across multiple requests.
- **[Authorization](#authorization)** decides what parts of the application the user is allowed to access.

This page demonstrates how to use Next.js features to implement common authentication, authorization and session management patterns, so you can choose the best solutions based on your applications needs.
This page demonstrates how to use Next.js features to implement common authentication, authorization, and session management patterns so you can choose the best solutions based on your application's needs.

## Authentication

Authentication verifies a user's identity. This happens when a user logs in, either with a username and password or through a service like Google. It's all about confirming that users are really who they claim to be, protecting both the user's personal data and the application from unauthorized access or fraudulent activities.
Authentication verifies a user's identity. This happens when a user logs in, either with a username and password or through a service like Google. It's all about confirming that users are really who they claim to be, protecting both the user's data and the application from unauthorized access or fraudulent activities.

### Authentication Strategies

@@ -191,13 +191,13 @@ This approach ensures a secure and efficient authentication process, laying the

## Authorization

Once a user is authenticated, youll need to ensure the user is allowed to visit certain routes, and perform operations such as mutating data with Server Actions and calling Route Handlers.
Once a user is authenticated, you'll need to ensure the user is allowed to visit certain routes, and perform operations such as mutating data with Server Actions and calling Route Handlers.

### Protecting Routes with Middleware

[Middleware](/docs/app/building-your-application/routing/middleware) in Next.js helps you control who can access different parts of your website. This is important for keeping areas like the user dashboard safe, while letting everyone see public pages like those for marketing. It's recommended to apply middleware across all routes and specifying exclusions for public access.
[Middleware](/docs/app/building-your-application/routing/middleware) in Next.js helps you control who can access different parts of your website. This is important for keeping areas like the user dashboard protected while having other pages like marketing pages be public. It's recommended to apply Middleware across all routes and specify exclusions for public access.

Here's how to implement middleware for authentication in Next.js:
Here's how to implement Middleware for authentication in Next.js:

1. **Setting Up Middleware:**
- Create a `middleware.ts` or `.js` file in your project's root directory.
@@ -278,13 +278,13 @@ export default function Page() {
}
```

After successful authentication, it's important to manage user navigation based on their roles. For example, an admin user might be redirected to an admin dashboard, while a regular user is sent to a different page. This flexibility is crucial for role-specific experiences and conditional navigation, such as prompting users to complete their profile if needed.
After successful authentication, it's important to manage user navigation based on their roles. For example, an admin user might be redirected to an admin dashboard, while a regular user is sent to a different page. This is important for role-specific experiences and conditional navigation, such as prompting users to complete their profile if needed.

When setting up authorization, it's important to ensure that the main security checks happen where your app accesses or changes data. While middleware can be useful for initial validation, it should not be the sole line of defense in protecting your data. The bulk of security checks should be performed in the Data Access Layer (DAL). This approach, highlighted in [this security blog](https://nextjs.org/blog/security-nextjs-server-components-actions), advocates for consolidating all data access within a dedicated DAL. Such a strategy ensures consistent data access, minimizes authorization bugs, and simplifies maintenance. To ensure comprehensive security, consider the following key areas:

- Server Actions: Implement security checks in server-side processes, especially for sensitive operations.
- Route Handlers: Manage incoming requests with security measures to ensure access is limited to authorized users.
- Data Access Layer (DAL): Directly interacts with the database and is crucial for validating and authorizing data transactions. Its vital to perform critical checks within the DAL to secure data at its most crucial interaction point—access or modification.
- Data Access Layer (DAL): Directly interacts with the database and is crucial for validating and authorizing data transactions. It's vital to perform critical checks within the DAL to secure data at its most crucial interaction point—access or modification.

For a detailed guide on securing the DAL, including example code snippets and advanced security practices, refer to our [Data Access Layer section](https://nextjs.org/blog/security-nextjs-server-components-actions#data-access-layer) of the security guide.

@@ -494,16 +494,16 @@ export async function getSessionData(req) {

### Database Sessions

Database session management involves storing session data on the server, with the users browser only receiving a session ID. This ID references the session data stored server-side, without containing the data itself. This method enhances security, as it keeps sensitive session data away from the client-side environment, reducing the risk of exposure to client-side attacks. Database sessions are also more scalable, accommodating larger data storage needs.
Database session management involves storing session data on the server, with the user's browser only receiving a session ID. This ID references the session data stored server-side, without containing the data itself. This method enhances security, as it keeps sensitive session data away from the client-side environment, reducing the risk of exposure to client-side attacks. Database sessions are also more scalable, accommodating larger data storage needs.

However, this approach has its trade-offs. It can increase performance overhead due to the need for database lookups at each user interaction. Strategies like session data caching can help mitigate this. Additionally, reliance on the database means that session management is as reliable as the databases performance and availability.
However, this approach has its trade-offs. It can increase performance overhead due to the need for database lookups at each user interaction. Strategies like session data caching can help mitigate this. Additionally, reliance on the database means that session management is as reliable as the database's performance and availability.

Here's a simplified example of implementing database sessions in a Next.js application:

**Creating a Session on the Server**:

```js
import db from 'path/to/databaseModule'
import db from './lib/db'

export async function createSession(user) {
const sessionId = generateSessionId() // Generate a unique session ID
@@ -516,10 +516,10 @@ export async function createSession(user) {

```js
import { cookies } from 'next/headers'
import db from 'path/to/databaseModule'
import db from './lib/db'

export async function getSession() {
const sessionId = cookies().get('sessionId')?.value // Assuming session ID is stored in a cookie
const sessionId = cookies().get('sessionId')?.value
return sessionId ? await db.findSession(sessionId) : null
}
```
@@ -532,11 +532,11 @@ With [authentication solutions](#authentication-solutions) such as NextAuth.js,

Regardless of your choice, prioritize security in your session management strategy. For cookie-based sessions, using secure and HTTP-only cookies is crucial to protect session data. For database sessions, regular backups and secure handling of session data are essential. Implementing session expiry and cleanup mechanisms is vital in both approaches to prevent unauthorized access and maintain application performance and reliability.

## Authentication Solutions
## Examples

Here are authentication solutions compatible with Next.js, please refer to the quickstart guides below to learn how to configure them in your Next.js application:

{/* TODO: Change link to authjs.dev when new documentation is ready */}
{/* TODO: Change link to authjs.dev when new documentation is ready */}

- [AuthO](https://auth0.com/docs/quickstart/webapp/nextjs/01-login)
- [Clerk](https://clerk.com/docs/quickstarts/nextjs)
@@ -546,7 +546,7 @@ Here are authentication solutions compatible with Next.js, please refer to the q

## Further Reading

To continue learning about authentication and security, checkout the following resources:
To continue learning about authentication and security, check out the following resources:

- [Understanding XSS Attacks](https://vercel.com/guides/understanding-xss-attacks)
- [Understanding CSRF Attacks](https://vercel.com/guides/understanding-csrf-attacks)