AzureADProvider authenticates but doesn't create session

[damonjmurray]

Hello all, I'm hoping for some guidance on what I am doing wrong here. I've had success with NextAuth.js in the past, but I am unable to get things working using the AzureADProvider.

Specifically, when using this provider, the authentication flow appears to work correctly but the session is always null. I've tested with the code below which is (for the most part) lifted from the examples. When following the log trace I can see that the jwt() callback and signIn() event fire after signing in through the Microsoft sign-in prompt, and that the user profile is sent back, but the session remains blank. Without the session object being populated, the user is never treated as signed in.

I am certain that I am just doing something bone-headed here, but I can't for the life of me see what it is. Any assistance or suggestions would be very much appreciated at this stage.

/// pages/_app.tsx

import { SessionProvider } from "next-auth/react";

const App = ({ Component, pageProps: { session, ...pageProps } }) => {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
};
export default App;

/// pages/index.tsx

import React from "react";
import { useSession, signIn, signOut, getSession } from "next-auth/react";
import { GetServerSideProps, GetServerSidePropsContext } from "next";

const HomePage = () => {
  const { data: session } = useSession();

  if (session) {
    return (
      <>
        Signed in as {session.user.email} <br />
        <button onClick={() => signOut()}>Sign Out</button>
      </>
    );
  }

  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </>
  );
};

export const getServerSideProps: GetServerSideProps = async (
  context: GetServerSidePropsContext
) => {
  const session = await getSession(context);
  console.debug("[getServerSideProps] session:", session);
  return { props: { session } };
};

export default HomePage;

/// pages/api/auth/[...nextauth].ts

import { NextApiRequest, NextApiResponse } from "next";
import NextAuth, { NextAuthOptions } from "next-auth";
import AzureADProvider from "next-auth/providers/azure-ad";

const config: NextAuthOptions = {
  providers: [
    AzureADProvider({
      clientId: process.env.AZURE_AD_CLIENT_ID,
      clientSecret: process.env.AZURE_AD_CLIENT_SECRET,
      tenantId: process.env.AZURE_AD_TENANT_ID,
    }),
  ],
  events: {
    signIn: async (message) => console.debug("[events] signIn:", message),
    signOut: async (message) => console.debug("[events] signOut:", message),
    session: async (message) => console.debug("[events] session:", message),
  },
  callbacks: {
    async signIn({ user, account, profile, email, credentials }) {
      console.debug("[callbacks] signIn");
      return true;
    },
    async redirect({ url, baseUrl }) {
      console.debug("[callbacks] redirect");
      return baseUrl;
    },
    async session({ session, user, token }) {
      console.debug("[callbacks] session");
      return session;
    },
    async jwt({ token, user, account, profile, isNewUser }) {
      console.debug("[callbacks] jwt");
      return token;
    },
  },
};

const handler = (req: NextApiRequest, res: NextApiResponse) =>  NextAuth(req, res, config);
export default handler;

[balazsorban44]

Might be related to #2524 (comment)

could you check if changing the profile picture size fixes your problem?

[damonjmurray]

Brilliant! Thanks so much for your prompt response. I stripped the picture out of the returned token in the jwt() callback and the session now works correctly.

    async jwt({ token, user, account, profile, isNewUser }) {
      const { picture, ...rest } = token;
      return rest;
    },

I'll downsample the image as suggested in the comment you linked to and track the existing issue for a subsequent fix. Thanks once again!