No HTTP methods exported in Route.ts file

Question

Facing the error when trying to implement a code which is originally on Next JS 12 with pages router using Javascript, by using Next JS 13 with typescript.

⨯ Detected default export in 'vibe\src\app\api\auth[...nextauth]\route.ts'. Export a named export for each HTTP method instead.

⨯ No HTTP methods exported in 'vibe\src\app\api\auth[...nextauth]\route.ts'. Export a named export for each HTTP method. [next-auth][error][CLIENT_FETCH_ERROR] https://next-auth.js.org/errors#client_fetch_error Unexpected end of JSON input { error: {

message: 'Unexpected end of JSON input', stack: 'SyntaxError: Unexpected end of JSON input\n' + ' at JSON.parse ()\n' + ' at packageData (node:internal/deps/undici/undici:6403:23)\n' + ' at specConsumeBody (node:internal/deps/undici/undici:6381:14)\n' +
' at process.processTicksAndRejections (node:internal/process/task_queues:95:5)', name: 'SyntaxError'
}, url: 'http://localhost:3000/api/auth/providers',

t for each HTTP method instead.

⨯ No HTTP methods exported in 'src\app\api\auth[...nextauth]\route.ts'. Export a named export for each HTTP method.

Here's the route.ts file you can refer to,

import NextAuth from "next-auth";
import SpotifyProvider from "next-auth/providers/spotify";
import spotifyApi from "@/lib/spotify";
import { LOGIN_URL } from "@/lib/spotify";

async function refreshAccessToken(token: any) {

  try {
    spotifyApi.setAccessToken(token.accessToken);
    spotifyApi.setRefreshToken(token.refreshToken);

    const { body: refreshedToken } = await spotifyApi.refreshAccessToken();
    console.log("refreshed token is", refreshedToken);

    return {
      ...token,
      accessToken: refreshedToken.access_token,
      accessTokenExpires: refreshedToken.expires_in * 1000 + Date.now(),
      refreshToken: refreshedToken.refresh_token || token.refreshToken,
    };
    

  } catch (error) {
    console.log(error);

    return {
      ...token,
      error: "RefreshAccessTokenError",
    };
  }
}

const authOptions = {

  providers: [
    SpotifyProvider({
      clientId: `${process.env.NEXT_PUBLIC_CLIENT_ID}`,
      clientSecret: `${process.env.NEXT_PUBLIC_CLIENT_SECRET}`,
      authorization: LOGIN_URL,
    }),
    // ...add more providers here
  ],
  secret: process.env.JWT_SECRET,
  pages: {
    signIn: "/login",
  },
  callback: {
    async jwt({
      token,
      account,
      user,
    }: {
      token: any;
      account: any;
      user: any;
    }) {

      if (account && user) {
        return {
          ...token,
          accessToken: account.accessToken,
          refreshToken: account.refreshToken,
          username: account.providerAccountId,
          accessTokenExpires: account.expires_at + 1000,
        };
      }

      if (Date.now() < token.accessTokenExpires) {
        console.log("token is valid");
        return token;
      }

      console.log("token is invalid");
      return await refreshAccessToken(token);
    },

    async session({ session, token }: { session: any; token: any }) {
      session.user.accessToken = token.accessToken;
      session.user.refreshToken = token.refreshToken;
      session.user.username = token.username;

      return session;
    },
  },
};

export default NextAuth(authOptions);

for the entire code you can refer to https://github.com/dipesh2508/Vibe

Answer 1

API Routes were replaced with Route Handlers in Next.js v13.
v12: https://nextjs.org/docs/pages/building-your-application/routing/api-routes
v13: https://nextjs.org/docs/app/building-your-application/routing/route-handlers
route.js: https://nextjs.org/docs/app/api-reference/file-conventions/route

You're errors are explaining that there are no HTTP methods exported from your route handler. e.g. GET()

This page from the NextAuth documentation showcases each version.
https://next-auth.js.org/configuration/initialization#route-handlers-app
Although note the new docs are at this domain: https://authjs.dev/

Hope this helps!