Documentation on Local Dev / Credentials Incomplete about next-auth HOT 4 CLOSED

//auth.js
import NextAuth from "next-auth"
import AzureAD from "next-auth/providers/azure-ad"
import Credentials from "next-auth/providers/credentials"

var providers = [];

if (process.env.NODE_ENV === "development") {
  providers.push(
    Credentials({
      id: "password",
      name: "Password",
      credentials: {
        password: { label: "", type: "password" },
      },
      authorize: (credentials) => {
        if (credentials.password === "password") {
          return {
            email: "[email protected]",
            name: "Test User",
            image: "https://avatars.githubusercontent.com/u/67470890?s=200&v=4",
          }
        }
      },
    })
  )
} else {

  providers.push(AzureAD({
    clientId: process.env.AUTH_AZURE_AD_ID,
    clientSecret: process.env.AUTH_AZURE_AD_SECRET,
    tenantId: process.env.AUTH_AZURE_AD_TENANT_ID,
    token: {
        url: `https://login.microsoftonline.com/${process.env.AUTH_AZURE_AD_TENANT_ID}/oauth2/v2.0/token`,
    },
    userinfo: {
        url: "https://graph.microsoft.com/oidc/userinfo",
    },
    authorization: {
        url: `https://login.microsoftonline.com/${process.env.AUTH_AZURE_AD_TENANT_ID}/oauth2/v2.0/authorize`,
        params: {
            scope: "openid email User.Read"
        }
    },
    async profile(profile, tokens) {
      const response = await fetch(
        `https://graph.microsoft.com/v1.0/me`,
        { headers: { Authorization: `Bearer ${tokens.access_token}` } }
      )
        
      const json = await response.json()
        
      return {
        id: profile.sub,
        name: profile.name,
        email: json.userPrincipalName,
      }
    },
}))

}

export const config = {
  debug: true,
  theme: {
    logo: "https://next-auth.js.org/img/logo/logo-sm.png",
  },
  providers: providers,
  callbacks: {
    authorized({ auth, request }) {

      //Allow unauthorized access to main page, /signin page
      //Users are redirected to /signin on logout or auth failures
      //https://next-auth.js.org/getting-started/client#signin
      //https://next-auth.js.org/getting-started/client#signout
      const whitelistURLs = ['/signin','/'];

      const { pathname } = request.nextUrl
      const isLoggedIn = !!auth?.user;
      if(!auth && pathname === '/signin'){
        return true;
      }

      if(!auth && !whitelistURLs.includes(pathname)){
        return false;
      }

      return true
    }
  }
  
} 

export const { handlers, auth, signIn, signOut } = NextAuth(config)

// /app/api/auth/[...nextauth]/route.js
import NextAuth from "next-auth"
import AzureAD from "next-auth/providers/azure-ad";
import Credentials from "next-auth/providers/credentials"

var providers = [];

if(process.env.ENV === 'development'){
    providers.push(Credentials)
} else {
    providers.push(AzureAD);
}

import { handlers } from "../../../../auth"
export const { GET, POST } = handlers

// /app/components/header.jsx
"use client"

import Link from 'next/link';
import Logo from './logo';

import { useState } from 'react';
import { Dialog, Menu } from '@headlessui/react';
import SignOutButton from './SignOutButton';
import SignInButton from './SignInButton';
import LocalSignInButton from './LocalSignInButton';

const navigation = [
  { name: 'Users', href: '/users', dropdown: false },
  { name: 'Organizations', href: '/organizations', dropdown: false },

];

export default function Header({ session }) {
  
  //From the template / component the layout started with
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  
  const isLocalDev = ( process.env.ENV === 'development' ? true : false);
  
  //visual indicator  for dev / local  (red dev, blue prod)
  const signInElement = (isLocalDev ? <LocalSignInButton/> : <SignInButton/>);

// /src/app/layout.js
import { Inter } from 'next/font/google'
import './globals.css'
import Header from './components/header'
import Footer from './components/footer'

import { auth } from "../auth"

const inter = Inter({ subsets: ['latin'] })

export default async function RootLayout({ children }) {

  const session = await auth()
  if(session) session.environment = process.env.ENV

  return (
    <html lang="en">
      <body className={inter.className}>
        <Header session={session}/>
        <main className="mt-28 grid justify-center max-h-max">
        {children}
        </main>
        <Footer/>
      </body>
    </html>
  )
}

import { handlers } from "@/auth" // Referring to the auth.ts we just created
export const { GET, POST } = handlers