Next-auth with app directory

[supple onyx]

Hi @slender helm. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the information provided in the extracts, here's how you can configure NextAuth.js for authentication with GitHub OAuth and JWT:

1. First, log into your GitHub account and navigate to Settings > Developer Settings > OAuth Apps. Click on "Register a new application" or "New OAuth App" to create a new OAuth application.

2. Fill out the registration form for your app. The Authorization callback URL should be the Next.js /api/auth route. Note that the Authorization callback URL field only supports a single URL. If you want to deploy your app later with a production URL, you will need to set up a new GitHub OAuth app.

3. After registering the application, you will find your newly generated Client ID and Client Secret. Copy and paste this info into the .env file in the root directory as the GITHUB_ID and GITHUB_SECRET environment variables. Also set the NEXTAUTH_URL to the same value of the Authorization callback URL that you configured on GitHub.

Your .env file might look like this:

# .env

# GitHub OAuth
GITHUB_ID=your_client_id
GITHUB_SECRET=your_client_secret
NEXTAUTH_URL=<http://localhost:3000/api/auth>

4. If you're using JWT for session handling, you'll need to set up a JWT_SECRET_KEY in your .env.local file. This secret will be used to sign the JWTs.

# .env.local

JWT_SECRET_KEY=your_random_secret

5. If you're using the src directory for your application code, move the app Router folder or pages Router folder to src/app or src/pages respectively. Note that the /public directory, config files like package.json, next.config.js and tsconfig.json, and .env.* files should remain in the root of your project.

Please note that the specific configuration of callbacks for JWT and session handling is not provided in the extracts. For more detailed information, you may want to refer to the NextAuth.js documentation (https://next-auth.js.org/).

Sources:

• Vercel Guide (https://vercel.com/guides/nextjs-prisma-postgres)
• Next.js Documentation (https://nextjs.org/docs/app/building-your-application/configuring/src-directory)
• Vercel Template (https://vercel.com/templates/next.js/jwt-authentication)

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@slender helm kapa.ai is still learning and improving, please let us how it did by reacting below