CUSTOM PROVIDER: Error: This action with HTTP GET is not supported by NextAuth.js

[OliverFluid]

Hi all, Trying to bake together a custom provider to handle Xbox Live sign in for users.

I initially created a route handler under /api/auth/azure-id/callback/route.ts to handle it all and realised it was incorrect, but the returns of all the API Calls for tokens etc were fine.

I went to bake the logic into the provider, as from outside the NextAuth area its unable to set the user / create a user / session etc.

The initial Auth screen comes up, requests access etc, but the callback URL bricks with a HTTP GET is not supported by NextAuth.

The return from the authorization call returns a GET request which is not being respected by NextAuth for some reason, is it because 'azure-id' (a custom provider, not AD, confusing i know) is not being read by nextauth as a needed callback url?

None of the functions get called as it bricks the callback url.

// src/nextauth-xbox/index.js
import { randomUUID } from "crypto";
import { OAuthUserConfig } from "next-auth/providers/oauth";
import { PROVIDER_ID, PROVIDER_NAME } from "./constants";

export interface XboxProfile extends Record<string, any> {}

export interface XboxProviderOptions
  extends Partial<OAuthUserConfig<XboxProfile>> {
  clientSecret: string;
}

export function Xbox(
  options: XboxProviderOptions
): OAuthUserConfig<XboxProfile> {
  return {
    options: options as OAuthUserConfig<XboxProfile>,
    id: PROVIDER_ID,
    name: PROVIDER_NAME,
    type: "oauth",
    clientId: "",
    authorization: {
      url: `https://login.live.com/oauth20_authorize.srf`,
      params: {
        response_type: "code",
        scope: "Xboxlive.signin Xboxlive.offline_access",
        redirect_uri: "http://localhost:3000/api/auth/azure-id/callback",
      },
    },
    token: {
      url: "http://localhost:3000/api/auth/azure-id/callback",
      async request(context) {
        // context contains useful properties to help you make the request.
        console.log({ context });
        // return { tokens };
      },
    },
    async authorize(credentials, req) {
      console.log({ credentials, req });
    },
    userinfo: {
      async request() {
        console.log("userinfo called");
        return {
          id: "",
          image: "",
          email: "",
          name: "",
        };
      },
    },
    async profile() {
      console.log("Profile was called...");

      return {
        id: "",
        name: "",
        email: "",
        image: "",
      };
    },
  };
}

// src/app/api/auth/[...nextauth]
import { authConfig } from "@/auth.config";
import { NextApiResponse } from "next";
import { AuthOptions } from "next-auth";
import SteamProvider from "next-auth-steam";
import NextAuth from "next-auth/next";
import type { NextRequest } from "next/server";
import { Xbox } from "../../../../../nextauth-xbox";

function getAuthOptions(req: NextRequest): AuthOptions {
  return {
    ...authConfig,
    providers: req
      ? [
          SteamProvider(req, {
            clientSecret: process.env.STEAM_SECRET as string,
            callbackUrl:
              "**callback**",
          }),
          Xbox({
            clientId: process.env.AZURE_CLIENT_ID,
            clientSecret: process.env.AZURE_SECRET_KEY as string,
          }),
        ]
      : [],
  };
}

async function handler(req: NextRequest, res: NextApiResponse) {
  console.log({ req, res });
  // @ts-expect-error
  return NextAuth(req, res, getAuthOptions(req));
}

export { handler as GET, handler as POST };

// src/auth.config.ts
import { findAccountById } from "@/lib/db/user";
import clientPromise from "@/lib/mongo";
import { MongoDBAdapter } from "@next-auth/mongodb-adapter";
import { AuthOptions } from "next-auth";
import { PROVIDER_ID } from "next-auth-steam";

export const authConfig: Partial<AuthOptions> = {
  session: {
    strategy: "jwt",
  },
  debug: true,
  secret: process.env.NEXTAUTH_SECRET,
  adapter: MongoDBAdapter(clientPromise),
  pages: {
    signIn: "/",
    signOut: "/",
    error: "/",
    newUser: "/",
  },
  callbacks: {
    async jwt({ token, account, profile, user }) {
      console.log("[JWT...]", { token, account, profile, user });
      if (account?.provider === PROVIDER_ID) {
        token.steam = profile;
      }
      if (token.sub) {
        const findUser = await findAccountById({ userId: token.sub });
        if (findUser) {
          token.twitchUserId = findUser.twitchUserId;
        }
      }

      if (user) {
        token.id = user.id;
      }

      return token;
    },
    session({ session, token, user }) {
      console.log("[JWT...]", { session, token, user });

      if ("steam" in token) {
        // @ts-ignore
        session.user.steam = token.steam;
      }
      if (token.twitchUserId && session.user) {
        // @ts-ignore
        session.user.twitchUserId = token.twitchUserId;
      }
      // @ts-ignore
      session.user.id = token.id;
      // @ts-ignore
      session.user.sub = token.sub;
      return session;
    },
  },
};

Any help would be greatly appreciated, at least getting over the GET request issue hurdle :)