How to remove response_mode = web_message from loginwithPopup url?

Question

I am working on authentication using Auth0 and react. I am using loginWithPopup() for the login popup screen. But every time I end up getting misconfiguration error(like you can see in the attachment). But if I remove the response_mode = web_message from the URL it works, is there any way to remove response_mode from code. I am using the react-auth0-spa.js given my auth0 quick start

import React, { Component, createContext } from 'react';
import createAuth0Client from '@auth0/auth0-spa-js';


// create the context
export const Auth0Context = createContext();

// create a provider
export class Auth0Provider extends Component {
  state = {
    auth0Client: null,
    isLoading: true,
    isAuthenticated: false,
    user: false,
  };
  config = {
    domain: "dev-ufnn-q8r.auth0.com",
    client_id: "zZh4I0PgRLQqLKSPP1BUKlnmfJfLqdoK",
    redirect_uri: window.location.origin,
    //audience: "https://reachpst.auth0.com/api/v2/"
  };

  componentDidMount() {
    this.initializeAuth0();
  }

  // initialize the auth0 library
  initializeAuth0 = async () => {
    const auth0Client = await createAuth0Client(this.config);
    const isAuthenticated = await auth0Client.isAuthenticated();
    const user = isAuthenticated ? await auth0Client.getUser() : null;

    this.setState({ auth0Client, isLoading: false, isAuthenticated, user });
  };

  loginWithPopup = async () => {

    try {
      await this.state.auth0Client.loginWithPopup();
    }
    catch (error) {
      console.error(error);
    }

    this.setState({
      user: await this.state.auth0Client.getUser(),
      isAuthenticated: true,
    });
  };

  render() {
    const { auth0Client, isLoading, isAuthenticated, user } = this.state;
    const { children } = this.props;

    const configObject = {
      isLoading,
      isAuthenticated,
      user,
      loginWithPopup: this.loginWithPopup,
      loginWithRedirect: (...p) => auth0Client.loginWithRedirect(...p),
      getTokenSilently: (...p) => auth0Client.getTokenSilently(...p),
      getIdTokenClaims: (...p) => auth0Client.getIdTokenClaims(...p),
      logout: (...p) => auth0Client.logout(...p)
    };

    return (
      <Auth0Context.Provider value={configObject}>
        {children}
      </Auth0Context.Provider>
    );
  }
}

Answer 1

After a bit of research, I found an answer to my own question. So if we use response_mode = web_message then we need to configure our callback URL in allowed web origin field as well. In my case, I am using loginWithPopup() so which typically adds response_mode = web_message in the login URL because loginWithPopup() from auth0 SDK is a combination of PKCE + web_message https://auth0.com/docs/protocols/oauth2 (under how response mode works?) https://auth0.com/blog/introducing-auth0-single-page-apps-spa-js-sdk (under behind the curtain)