NextAuth and IPFS error when hosting on app.fleek.co

Question

I have a NextJS13 project with a dashboard. I am using NextAuth.js for authentication (credentials provider) with a django backend. When working locally, I am able to successfully sign in and out of my dashboard successfully. However, when I attempt to sign in to my dashboard in production on a site hosted on app.fleek.co, I'm shown an IPFS 404 error stating

404 Not Found

The content path you requested cannot be found. There's likely an invalid or missing DAG node.

failed to resolve /ipfs/bafybeiatukfplopy6hbrlwirxbqjmqtiecg64gjfpxos6qjhtqx3gutrzy/api/auth/error: no link named "api" under bafybeiatukfplopy6hbrlwirxbqjmqtiecg64gjfpxos6qjhtqx3gutrzy

Here's my NextAuth code:

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import axios from "axios";

const BACKEND_ACCESS_TOKEN_LIFETIME = 45 * 60; // 45 minutes
const BACKEND_REFRESH_TOKEN_LIFETIME = 6 * 24 * 60 * 60; // 6 days

const getCurrentEpochTime = () => {
  return Math.floor(new Date().getTime() / 1000);
};

const SIGN_IN_HANDLERS = {
  credentials: async (user, account, profile, email, credentials) => {
    return true;
  },
};
const SIGN_IN_PROVIDERS = Object.keys(SIGN_IN_HANDLERS);

export const authOptions = {
  secret: process.env.NEXTAUTH_SECRET,
  session: {
    strategy: "jwt",
  },
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        email: { label: "Email", type: "text" },
        password: { label: "Password", type: "password" },
      },

      async authorize(credentials) {
        try {
          const response = await axios({
            url: process.env.API_ROUTE + "/api/token/",
            method: "post",
            data: credentials,
          });
          const data = response.data;
          
          if (data) {
            return data;
          }
        } catch (error) {
          console.error(error);
        }
        return null;
      },
    }),
  ],
  callbacks: {
    async signIn({ user, account, profile, email, credentials }) {
      if (!SIGN_IN_PROVIDERS.includes(account.provider)) return false;
      return SIGN_IN_HANDLERS[account.provider](
        user,
        account,
        profile,
        email,
        credentials
      ) ;
    },
    async jwt({ user, token, account }) {
      if (user && account) {
        let backendResponse =
          account.provider === "credentials" ? user : account.meta;
        token.user = backendResponse.user;
        token.access = backendResponse.access;
        token.refresh = backendResponse.refresh;
        token.ref = getCurrentEpochTime() + BACKEND_ACCESS_TOKEN_LIFETIME;
        return token;
      }
      return token;
    },

    async session({ user, token }) {
      return { ...token, user };
    },
  },

  pages: {
    signIn: "/homepage/login",
    error: '/',
  },
};
//

export default NextAuth(authOptions);

And the error I get upon an attempted sign in:

404 Not Found

The content path you requested cannot be found. There's likely an invalid or missing DAG node.

failed to resolve /ipfs/bafybeiatukfplopy6hbrlwirxbqjmqtiecg64gjfpxos6qjhtqx3gutrzy/api/auth/error: no link named "api" under bafybeiatukfplopy6hbrlwirxbqjmqtiecg64gjfpxos6qjhtqx3gutrzy

How you can proceed:

• Check the Discussion Forums for similar errors.
• Try diagnosing your request with the diagnostic tools.
• Self-host and run an IPFS client that verifies your data.
• Inspect the CID or DAG.

Answer 1

It sounds like the app is trying to use Next.js’ api routes which unfortunately will only work on Vercel or a platform with an actual backend. With IPFS being immutable the website has to be static or at least send calls to an external API. You could try running the auth on Railway.app or something similar.