I am trying to setup Steam Authentication via Next-Auth and next-auth-steam. I am getting this error when I try to build/deploy. For further information, the Steam Authentication does work perfectly when using "npm run dev" and testing it via multiple devices, etc.

Here is my error:

src/app/api/auth/[...nextauth]/route.ts
Type error: Route "src/app/api/auth/[...nextauth]/route.ts" has an invalid "GET" export:
  Type "NextApiRequest" is not a valid type for the function's first argument.
    Expected "Request | NextRequest", got "NextApiRequest".

Here is my route.js file:

import NextAuth, { NextAuthOptions } from 'next-auth';
import SteamProvider from 'next-auth-steam';
import { NextApiRequest, NextApiResponse } from 'next';

declare module 'next-auth' {
    interface Session {
        user: {
            id: string;
            email?: string;
            image?: string;
            name?: string;
            personastate?: string;
            player_id: string;
            steam_id: string;
        }
    }
}

if (!process.env.STEAM_API_KEY)
    throw Error("Must provide env STEAM_API_KEY");

const authOptions: NextAuthOptions = {
    providers: [],
    secret: process.env.NEXTAUTH_SECRET,
    callbacks: {
        async session({ session, token }) {
            const steamId = token?.sub;
            if (steamId) {
                session.user.steam_id = steamId; // Adding steam_id to session
                session.user.player_id = steamId; // Adding player_id to session
                session.user.id = steamId;
            }
            if (!session.user.name && token?.name) {
                session.user.name = token.name;
            }
            if (!session.user.email && token?.email) {
                session.user.email = token.email;
            }
            if (token?.personastate !== undefined) {
                session.user.personastate = String(token.personastate); // Convert to string
            } else {
                session.user.personastate = 'Offline'; // Default to 'Offline' if not available
            }
            if (!session.user.image && token?.picture) {
                session.user.image = token.picture;
            }
            return session;
        }
    }
}

async function handler(request: NextApiRequest, response: NextApiResponse) {
    authOptions.providers = [
        SteamProvider(request, {
            clientSecret: process.env.STEAM_API_KEY!,
            callbackUrl: `${process.env.NEXTAUTH_URL}/api/auth/callback`
        })
    ];
    return NextAuth(request, response, authOptions);
}

export { handler as GET, handler as POST }

I have tried literally every. single. thing. I can find, and nothing seems to work for me. I have tried doing everything from github issue fixes to using all the suggestions in every single search result. They all provide the same error or worse errors.

Here are my current versions:

"dependencies": {
    "next": "15.0.2",
    "next-auth": "^4.24.10",
    "next-auth-steam": "^0.3.0",
    "react": "19.0.0-rc-02c0e824-20241028",
    "react-dom": "19.0.0-rc-02c0e824-20241028",
    "react-loader-spinner": "^6.1.6",
    "steam-next-auth": "^1.0.2"
  },

In my latest attempt to fix my issue, I have also tried removing authOptions into its own file by changing route.ts to the following and updating app/lib/auth to the following:

import { handler } from '@/app/lib/auth';

declare module 'next-auth' {
    interface Session {
        user:
        {
            id: string;
            email?: string;
            image?: string;
            name?: string;
            personastate?: string;
            player_id: string;
            steam_id: string;
        }
    }
}

export { handler as GET, handler as POST }

import NextAuth, { NextAuthOptions } from 'next-auth';
import SteamProvider from 'next-auth-steam';
import { NextApiRequest, NextApiResponse } from 'next';

export async function handler(req: NextApiRequest, res: NextApiResponse) {
    const authOptions: NextAuthOptions = {
        providers: [
            SteamProvider(req, {
                clientSecret: process.env.STEAM_API_KEY!,
                callbackUrl: `${process.env.NEXTAUTH_URL}/api/auth/callback`
            })
        ],
        secret: process.env.NEXTAUTH_SECRET,
        callbacks: {
            async session({ session, token }) {
                const steamId = token?.sub;
                if (steamId) {
                    session.user.steam_id = steamId;
                    session.user.player_id = steamId;
                    session.user.id = steamId;
                }
                if (!session.user.name && token?.name) {
                    session.user.name = token.name;
                }
                if (!session.user.email && token?.email) {
                    session.user.email = token.email;
                }
                if (token?.personastate !== undefined) {
                    session.user.personastate = String(token.personastate);
                } else {
                    session.user.personastate = 'Offline';
                }
                if (!session.user.image && token?.picture) {
                    session.user.image = token.picture;
                }
                return session;
            },
        }
    };
    return NextAuth(req, res, authOptions);
}

I have no idea if this is even correct, but after these changes, the authentication still works with no errors. I am still unable to deploy with the exact same error.

I am trying to setup Steam Authentication via Next-Auth and next-auth-steam. I am getting this error when I try to build/deploy. For further information, the Steam Authentication does work perfectly when using "npm run dev" and testing it via multiple devices, etc.

Here is my error:

src/app/api/auth/[...nextauth]/route.ts
Type error: Route "src/app/api/auth/[...nextauth]/route.ts" has an invalid "GET" export:
  Type "NextApiRequest" is not a valid type for the function's first argument.
    Expected "Request | NextRequest", got "NextApiRequest".

Here is my route.js file:

import NextAuth, { NextAuthOptions } from 'next-auth';
import SteamProvider from 'next-auth-steam';
import { NextApiRequest, NextApiResponse } from 'next';

declare module 'next-auth' {
    interface Session {
        user: {
            id: string;
            email?: string;
            image?: string;
            name?: string;
            personastate?: string;
            player_id: string;
            steam_id: string;
        }
    }
}

if (!process.env.STEAM_API_KEY)
    throw Error("Must provide env STEAM_API_KEY");

const authOptions: NextAuthOptions = {
    providers: [],
    secret: process.env.NEXTAUTH_SECRET,
    callbacks: {
        async session({ session, token }) {
            const steamId = token?.sub;
            if (steamId) {
                session.user.steam_id = steamId; // Adding steam_id to session
                session.user.player_id = steamId; // Adding player_id to session
                session.user.id = steamId;
            }
            if (!session.user.name && token?.name) {
                session.user.name = token.name;
            }
            if (!session.user.email && token?.email) {
                session.user.email = token.email;
            }
            if (token?.personastate !== undefined) {
                session.user.personastate = String(token.personastate); // Convert to string
            } else {
                session.user.personastate = 'Offline'; // Default to 'Offline' if not available
            }
            if (!session.user.image && token?.picture) {
                session.user.image = token.picture;
            }
            return session;
        }
    }
}

async function handler(request: NextApiRequest, response: NextApiResponse) {
    authOptions.providers = [
        SteamProvider(request, {
            clientSecret: process.env.STEAM_API_KEY!,
            callbackUrl: `${process.env.NEXTAUTH_URL}/api/auth/callback`
        })
    ];
    return NextAuth(request, response, authOptions);
}

export { handler as GET, handler as POST }

I have tried literally every. single. thing. I can find, and nothing seems to work for me. I have tried doing everything from github issue fixes to using all the suggestions in every single search result. They all provide the same error or worse errors.

Here are my current versions:

"dependencies": {
    "next": "15.0.2",
    "next-auth": "^4.24.10",
    "next-auth-steam": "^0.3.0",
    "react": "19.0.0-rc-02c0e824-20241028",
    "react-dom": "19.0.0-rc-02c0e824-20241028",
    "react-loader-spinner": "^6.1.6",
    "steam-next-auth": "^1.0.2"
  },

In my latest attempt to fix my issue, I have also tried removing authOptions into its own file by changing route.ts to the following and updating app/lib/auth to the following:

import { handler } from '@/app/lib/auth';

declare module 'next-auth' {
    interface Session {
        user:
        {
            id: string;
            email?: string;
            image?: string;
            name?: string;
            personastate?: string;
            player_id: string;
            steam_id: string;
        }
    }
}

export { handler as GET, handler as POST }

import NextAuth, { NextAuthOptions } from 'next-auth';
import SteamProvider from 'next-auth-steam';
import { NextApiRequest, NextApiResponse } from 'next';

export async function handler(req: NextApiRequest, res: NextApiResponse) {
    const authOptions: NextAuthOptions = {
        providers: [
            SteamProvider(req, {
                clientSecret: process.env.STEAM_API_KEY!,
                callbackUrl: `${process.env.NEXTAUTH_URL}/api/auth/callback`
            })
        ],
        secret: process.env.NEXTAUTH_SECRET,
        callbacks: {
            async session({ session, token }) {
                const steamId = token?.sub;
                if (steamId) {
                    session.user.steam_id = steamId;
                    session.user.player_id = steamId;
                    session.user.id = steamId;
                }
                if (!session.user.name && token?.name) {
                    session.user.name = token.name;
                }
                if (!session.user.email && token?.email) {
                    session.user.email = token.email;
                }
                if (token?.personastate !== undefined) {
                    session.user.personastate = String(token.personastate);
                } else {
                    session.user.personastate = 'Offline';
                }
                if (!session.user.image && token?.picture) {
                    session.user.image = token.picture;
                }
                return session;
            },
        }
    };
    return NextAuth(req, res, authOptions);
}

I have no idea if this is even correct, but after these changes, the authentication still works with no errors. I am still unable to deploy with the exact same error.

• next.js
• next-auth

Share Improve this question Follow asked Nov 16, 2024 at 8:22 Noxx1ousNoxx1ous 111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You're mixing up Next.js "API routes" (which where the way to go before Next.js 14) with "Route handlers" (an alternative approach available with Next.js 14).

API routes must reside in for example in src/pages/api/auth/[...nextauth]/route.ts and must export a handler function like async function handler(request: NextApiRequest, response: NextApiResponse), so basically what you've created.

Route handlers, on the other hand, must reside at locations like src/app/api/auth/[...nextauth]/route.ts and must export function like GET or POST with a method like export async function GET(request: Request) (or request: NextRequest, which extends Web API Request resp. its Node.js implementation).

What you were doing: You've created an API route, put it into the place where a route handler is expected (so: app/ instead of pages/), and exported a method named GET which is expected as a route handler, but isn't. So you've created an API route in the disguise of a route handler basically.

Since I figure you're rather new to all of this (no offense intended), a general advise: I'ld recommend you not to just try random stuff to find out where an error comes from, but to pay attention to the error message. In this case, it's not related to NextAuth or authOptions or whatever, and just tells you that you're using NextApiRequest where a Request or NextRequest was expected. If you just google NextApiRequest vs NextRequest, you'll find plenty of answers. ;)