What is the proper way to set up callback urls?

[nicolasguasca1]

Hello. After reviewing the docs and checking the tutorial it seems like I have everything set up but Im geting the [next-auth][error][OAUTH_CALLBACK_ERROR] when using Github Provider.

Here is my [...nextauth].ts file:

import GitHubProvider from "next-auth/providers/github";
import TwitterProvider from "next-auth/providers/twitter";
import InstagramProvider from "next-auth/providers/instagram";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import prisma from "@/lib/prisma";

import type { NextAuthOptions } from "next-auth";

if (!process.env.GITHUB_ID || !process.env.GITHUB_SECRET)
  throw new Error("Failed to initialize Github authentication");

export const authOptions = {
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
      profile(profile) {
        return {
          id: profile.id.toString(),
          name: profile.name || profile.login,
          gh_username: profile.login,
          email: profile.email,
          image: profile.avatar_url
        };
      }
    }),
    TwitterProvider({
      clientId: process.env.TWITTER_ID || "",
      clientSecret: process.env.TWITTER_SECRET || "",
      version: "2.0"
    }),
    InstagramProvider({
      clientId: process.env.INSTAGRAM_CLIENT_ID,
      clientSecret: process.env.INSTAGRAM_CLIENT_SECRET
    })
  ],
  secret: process.env.SECRET, // Found as JWT_SECRET on the docs
  pages: {
    signIn: `/login`,
    verifyRequest: `/login`,
    error: "/login" // Error code passed in query string as ?error=
  },
  adapter: PrismaAdapter(prisma),
  callbacks: {
    session: ({ session, user }) => ({
      ...session,
      user: {
        ...session.user,
        id: user.id,
        username: user.username
      }
    })
  }
} as NextAuthOptions;

export default NextAuth(authOptions);

I set up the callback URL on my OAuth Github App as: https://localhost:3000/api/auth/callback/github (Im using ssl on local as my intention is to try Facebook login later).
I have NEXTAUTH_URL=https://localhost:3000 as well.

The error states a mismatch in the redirect uri but they are both the same. Am I missing any additional config? How does this relate to the "callbacks" parameter inside the [...nextauth].ts file? I might be confused so any help will be much appreciated.

[ThangHuuVu]

The config looks fine to me. Would it work if you use http://localhost:3000 instead?

[ThangHuuVu]

Try clean up by deleting the .next folder and re-run the dev command.
Where do you keep the env? I suggest you save it in a .env.local file 👀

[nicolasguasca1]

Already did, nothing happens...I have my env variable in a .env file. Does it have to be literally .env.local?

[ThangHuuVu]

I'm not sure but the official Next.js docs use .env.local as an example, so you could try it 🤷‍♂️
Normally halting the running process and restarting should help, you'll see something like Loaded env from .env.local
Also: This SO thread might help

[kaili-yang]

For me, I tried to run the app by iterm2 instead of IDE internal terminal, then it works.

[raolak]

this is what worked for me : http://localhost:3000/auth/callback/github. . I had to remove /api/ part