How to use Credentials Provider to integrate with existing backend?

[michaelaflores]

Attempting to follow the relevant docs for integrating with an existing auth backend led me to this Issue, where the docs themselves don't lead to a working implementation against an existing auth backend. Is it known the docs for integration with existing auth is requiring usage of either unstable_getServerSession or some other code that's not in a guide? I've ended up going through various dev.to articles linked from the docs, and various iterations, to get next-auth in a new repo working against an existing auth backend, to no avail.

My problem is the client Sid code is not receiving any of the auth information returned in my authorize function. In the current iteration I began getting this Error serializing.session.user.imagereturned fromgetServerSidePropsin "/". Reason:undefinedcannot be serialized as JSON. Please usenull or omit this value. error, which after going through this for a few hours made me start thinking maybe next-auth just isn't supposed to be used in this manner. At this point I'm guessing next-auth isn't meant to be used against an existing auth backend perhaps.

Here's what I have set up, littered with a lot of logs due to this not working according to the docs so far.

// [...nextauth].ts
import NextAuth from 'next-auth';
import EmailProvider from 'next-auth/providers/email';
import CredentialsProvider from 'next-auth/providers/credentials';

export const authOptions = {
  // Configure one or more authentication providers
  providers: [
    // TODO: enable email links
    // EmailProvider({
    //   server: process.env.EMAIL_SERVER,
    //   from: process.env.EMAIL_FROM,
    // }),
    CredentialsProvider({
      // The name to display on the sign in form (e.g. 'Sign in with...')
      name: 'TUNE Admin Credentials',
      id: 'defaultprovider',
      // The credentials is used to generate a suitable form on the sign in page.
      // You can specify whatever fields you are expecting to be submitted.
      // e.g. domain, username, password, 2FA token, etc.
      // You can pass any HTML attribute to the <input> tag through the object.
      credentials: {
        username: {
          label: 'Username',
          type: 'text',
          placeholder: '[email protected]',
        },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials, req) {
        console.log('SERVER authorizing credentials', credentials);
        // You need to provide your own logic here that takes the credentials
        // submitted and returns either a object representing a user or value
        // that is false/null if the credentials are invalid.
        // e.g. return { id: 1, name: 'J Smith', email: '[email protected]' }
        // You can also use the `req` object to obtain additional parameters
        // (i.e., the request IP address)
        try {
          const body = {
            email: credentials?.username,
            password: credentials?.password,
          };
          const loginUrl = `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_LEGACY_AUTH__LOGIN}`;
          const res = await fetch(loginUrl, {
            method: 'POST',
            body: JSON.stringify(body),
            headers: { 'Content-Type': 'application/json' },
          });
          const user = await res.json();
          console.log('SERVER response from authorize', user);
          // If no error and we have user data, return it
          if (res.ok && user.user) {
            console.log('SERVER OK RESPONSE returning');
            return user.user;
          }
          // Return null if user data could not be retrieved
          return null;
        } catch (error) {
          if (typeof error === 'object' && error !== null) {
            console.log('SERVER problem during fetch: ', error.toString());
          } else {
            console.log('SERVER Unexpected error', error);
          }
        }
      },
    }),
  ],
};

export default (req, res) => NextAuth(req, res, authOptions);

// _app.tsx
import type { AppProps } from 'next/app';
import { ReactQueryDevtools } from 'react-query/devtools';
import { QueryClient, QueryClientProvider } from 'react-query';
import { SessionProvider } from 'next-auth/react';
import '@/styles/globals.css';

export default function MyApp({
  Component,
  pageProps: { session, ...pageProps },
}: AppProps) {
  const queryClient = new QueryClient();
  console.log('MyApp pageProps', pageProps, session);
  return (
    <SessionProvider session={session}>
      <div className="h-full bg-white">
        <div className="h-full overflow-hidden">
          <QueryClientProvider client={queryClient}>
            <Component {...pageProps} />
            <ReactQueryDevtools initialIsOpen={false} />
          </QueryClientProvider>
        </div>
      </div>
    </SessionProvider>
  );
}

// src/pages/index.tsx
// Unused import from getServerSession was when trying that, but still results in an error
import Head from 'next/head';
import Image from 'next/image';
import AppShell from '@/components/appShell';
import { unstable_getServerSession } from 'next-auth/next';
import { authOptions } from '@/pages/api/auth/[...nextauth]';
import styles from '@/styles/Home.module.css';
import { useSession, getSession } from 'next-auth/react';
import getServerSession from 'next-auth/next';

export default function Home(props) {
  console.log('home page props', props);
  const { data: session, status } = useSession();
  console.log('Home page session', session, status);
  return <AppShell />;
}

export async function getServerSideProps(context) {
  const { req, res } = context;
  console.log('Home page getServerSideProps');
  const test = await getSession(context);
  console.log(test);
  console.log('returning');
  return {
    props: {
      session: await unstable_getServerSession(req, res, authOptions),
    },
  };
}