在Next.js项目中配置Microsoft Azure AD时如何处理"empty_url_error"错误

Let's break down what's causing your empty_url_error and how to fix it. I've spotted a few critical issues in your code and configuration that are likely the culprits:

1. You're referencing a non-existent scopes property in your config #

Looking at your code:

• In config.js, you define loginRequest with scopes, but your exported config object only contains auth and cache properties.
• In index.js, when calling loginPopup, you use config.scopes—which doesn't exist. This passes undefined for scopes, and MSAL can't build a valid authentication URL without them, triggering the empty_url_error.

Fix:
First, import the loginRequest in index.js:

import { config, loginRequest } from '../config'

Then update your login method to use the correct scopes:

async login() {
  try {
    await this.PublicClientApplication.loginPopup(
      { scopes: loginRequest.scopes, prompt: "select_account" });
    this.setState({ isAuthenticated: true })
  } catch (err) {
    this.setState({ isAuthenticated: false, user: {}, error: err });
  }
}

Also, replace the placeholder "Scope" in config.js with a valid scope like User.Read (a common open scope for testing):

export const loginRequest = {
  scopes: ["User.Read"]
};

2. Incorrect state reference in your render method #

In your render function, you're checking this.isAuthenticated, but your authentication state is stored in this.state.isAuthenticated. This means your UI will never correctly show the "logged in" message, and could indirectly cause flow issues.

Fix:
Update the conditional check:

{this.state.isAuthenticated ? <p>Successfully logged in</p> : <p><Button onClick={() => this.login()}>Log in</Button></p> }

(Also fixed the typo "Succesfully" to "Successfully" here.)

3. Verify your Authority URL format #

Double-check that your authority URL follows the exact format:

https://login.microsoftonline.com/{your-tenant-id-or-domain}

Replace My tenant ID with either your Azure AD tenant's GUID or its domain (e.g., yourcompany.onmicrosoft.com). A malformed authority URL will result in an invalid auth request.

4. Azure AD App Registration Checks #

Don't forget to validate your app registration in the Azure Portal:

• Ensure https://localhost:3000 is added as a SPA-type Redirect URI under your app's "Authentication" settings.
• Confirm the scopes you're requesting (like User.Read) are allowed for your application.

Bonus: Best Practice for MSAL Initialization #

In React class components, it's better to initialize the PublicClientApplication in componentDidMount rather than the constructor to avoid timing issues. Here's how to adjust that:

class index extends Component {
  constructor(props) {
    super(props);
    this.state = { error: null, isAuthenticated: false, user: {} };
    this.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
    this.pca = null; // Initialize empty first
  }

  componentDidMount() {
    this.pca = new PublicClientApplication({
      auth: {
        clientId: config.clientId,
        redirectUri: config.redirectUri,
        authority: config.authority
      },
      cache: {
        cacheLocation: "sessionStorage",
        storeAuthStateInCookie: false
      }
    });
  }

  async login() {
    try {
      await this.pca.loginPopup(
        { scopes: loginRequest.scopes, prompt: "select_account" });
      this.setState({ isAuthenticated: true })
    } catch (err) {
      this.setState({ isAuthenticated: false, user: {}, error: err });
    }
  }

  logout() {
    this.pca.logoutPopup();
  }

  // ... rest of your render code
}

Try applying these fixes one by one—most likely the missing scopes reference is the immediate cause of your empty_url_error.

内容的提问来源于stack exchange，提问作者ellamusen