### Project Setup and Running Instructions

Source: https://github.com/zitadel/example-auth-nextjs/blob/main/README.md

Commands to clone the repository, install dependencies, and start the development server for the Next.js application. Assumes Node.js and npm are installed.

```bash
# 1. Clone the repository
git clone git@github.com:zitadel/example-auth-nextjs.git

cd example-auth-nextjs

# 2. Install the project dependencies
npm install

# 3. Start the development server
npm run dev
```

--------------------------------

### Next.js Security Headers Configuration

Source: https://github.com/zitadel/example-auth-nextjs/blob/main/README.md

Configuration for adding custom security headers in Next.js applications. This example sets X-Frame-Options, Content-Security-Policy, and Referrer-Policy for enhanced security.

```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
          {
            key: 'Content-Security-Policy',
            value:
              "default-src 'self'; script-src 'self' 'unsafe-eval' 'unsafe-inline';",
          },
          {
            key: 'Referrer-Policy',
            value: 'strict-origin-when-cross-origin',
          },
        ],
      },
    ];
  },
};

// At minimum, configure:
// - Content-Security-Policy (CSP)
// - X-Frame-Options / frame-ancestors
// - Referrer-Policy
// - Permissions-Policy
```

--------------------------------

### Environment Variables for ZITADEL Integration

Source: https://github.com/zitadel/example-auth-nextjs/blob/main/README.md

This section details the necessary environment variables for configuring your Next.js application to connect with ZITADEL. These variables include port settings, session management, ZITADEL instance domain, client ID, client secret, and callback URLs.

```dotenv
PORT=3000
SESSION_DURATION=3600
SESSION_SECRET="your-very-secret-and-strong-session-key"
ZITADEL_DOMAIN="https://your-zitadel-domain"
ZITADEL_CLIENT_ID="your-client-id"
ZITADEL_CLIENT_SECRET="your-randomly-generated-client-secret"
ZITADEL_CALLBACK_URL="http://localhost:3000/auth/callback"
```

--------------------------------

### Environment Variables for ZITADEL Integration

Source: https://github.com/zitadel/example-auth-nextjs/blob/main/README.md

Configuration variables for integrating ZITADEL with a Next.js application. ZITADEL_POST_LOGOUT_URL specifies the redirect URI after logout, and NEXTAUTH_URL is the base URL for NextAuth.js.

```env
ZITADEL_POST_LOGOUT_URL="http://localhost:3000/api/auth/logout/callback"
NEXTAUTH_URL="http://localhost:3000"
```

--------------------------------

### NextAuth.js Configuration for ZITADEL

Source: https://github.com/zitadel/example-auth-nextjs/blob/main/README.md

This snippet shows the configuration for NextAuth.js to integrate with ZITADEL. It includes details about the OIDC provider, client ID, client secret, and callback URLs, essential for establishing a secure authentication flow.

```javascript
import NextAuth from "next-auth";
import ZitadelProvider from "next-auth/providers/zitadel";

export const authOptions = {
  providers: [
    ZitadelProvider({
      clientId: process.env.ZITADEL_CLIENT_ID,
      clientSecret: process.env.ZITADEL_CLIENT_SECRET,
      issuer: process.env.ZITADEL_DOMAIN,
    }),
  ],
  callbacks: {
    async jwt({ token, account, profile }) {
      if (account) {
        token.id_token = account.id_token;
      }
      return token;
    },
    async session({ session, token }) {
      session.user.id = token.sub;
      session.idToken = token.id_token;
      return session;
    },
  },
};

export default NextAuth(authOptions);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.