How do I display Job Title and other user properties in my Next Auth app using Azure AD / Entra ID.

[charan-vendra]

How do I display Job Title and other user properties in my Next Auth app using Azure AD / Entra ID.

I am using next-auth v5 and Next.js V14 so I have an app directory and no pages directory.

This is my route.tsx (placed in [...nextauth]/):

import NextAuth from "next-auth";
import { options } from "./options";

export const {
    handlers: { GET, POST },
    auth,
    signIn,
    signOut,
  } = NextAuth(options);

this is my options.tsx:

import type { NextAuthOptions } from "next-auth";
import AzureADProvider from "next-auth/providers/azure-ad";

export const options: NextAuthOptions = {
    providers: [
        AzureADProvider({
            clientId: process.env.AZURE_AD_CLIENT_ID,
            clientSecret: process.env.AZURE_AD_CLIENT_SECRET,
            tenantId: process.env.AZURE_AD_TENANT_ID,
        }),
    ],
}

and this is my page.tsx:

import { auth, signOut } from "./api/auth/[...nextauth]/route"

function SignOut() {
  return (
    <form action={async () => {
      'use server';
      await signOut()
    }}>
      <button type="submit">Sign out</button>
    </form>
  )
}

export default async function Home() {
  const session = await auth();
  return (
    <>
      {session?.user ? (
        <div>
          <p>Welcome {session.user.name}!</p>
          <div><SignOut /></div>
        </div>
      ) : (
        <div>
          <p>You are signed out!</p>
          <a href="/api/auth/signin"><button>Sign in</button></a>
        </div>
      )}
    </>
  );
}

Please help me. Thanks in advance!

[Myles-J]

You can fetch the information you need from the microsoft graph API and add those to the JWT

auth.config.ts

callbacks: {
    async jwt({
        token,
        account
    }) {
        if (account?.access_token) {
            try {
                //Extract the roles from the id_token and add them to the token
                if (account?.id_token) {
                    const [_header, payload, _sig] = account.id_token.split(".");
                    const idToken = JSON.parse(
                        Buffer.from(payload, "base64").toString("utf8"),
                    );
                    token.roles = [...idToken.roles];
                }

                const userDetails = await getUserDetails(account.access_token);
                token.userDetails = {
                    ...userDetails,
                    roles: token.roles,
                };
            } catch (error) {
                console.error(
                    "Failed to fetch user details from Microsoft Graph API",
                    error,
                );
            }
        }
        return token;
    },
    async session({
        session,
        token
    }) {
        if (token.userDetails) {
            session.user = {
                ...session.user,
                ...token.userDetails
            };
        }
        return session;
    },
}

msGraphApi.ts

"use server";

import { Client } from "@microsoft/microsoft-graph-client";

export async function getUserDetails(accessToken: string) {
  // https://learn.microsoft.com/en-us/graph/sdks/create-client?tabs=typescript
  const client = Client.init({
    authProvider: (done) => done(null, accessToken),
  });
  const userDetails = await client.api("/me").get();

  return userDetails;
}