Organization picker doesn't show up on login

Help
,
1

Hi,
Im trying to achieve the out-of-the-box flow which user type his credentials and then he should be prompt to organization picker component (if his email is connected to multiple organizations)
I created 2 organizations and added user with same email to both
for some reason when I submit with credentials it loges me in to the first organization.
any idea why? maybe Im missing something

Im using react with typescript, here is a snippet:
main.tsx

 <Auth0Provider
      domain="xxx"
      clientId="yyy"
      authorizationParams={{
        redirect_uri: window.location.origin
      }}
    >
      <App />
    </Auth0Provider>

App.tsx:

function App() {
  const { logout, loginWithRedirect, user, isAuthenticated, isLoading } =
    useAuth0()
  if (isLoading) {
    return <div>Loading ...</div>
  }

  if (isAuthenticated && user) {
    return (
      <div>
        <img
          src={user.picture}
          alt={user.name}
        />
        <h2>{user.name}</h2>
        <p>{user.email}</p>
        <p>{JSON.stringify(user)}</p>
        <button onClick={() => logout({})}>Log Out</button>
      </div>
    )
  }

  return <button onClick={() => loginWithRedirect()}>Log In</button>
}

export default App

here some of the configurations:

Screenshot 2024-07-28 at 17.30.27
Screenshot 2024-07-28 at 17.30.27959×899 60.8 KB

2

Choose Prompt for Organization in the Above screenshot Login flow menu.

3

in this way I need to type the name of the organization I want to login to, this is not the behavior I want, I see that in the flow preview of “propmpt for credentials” you get to a step where you have a list of organization you can select from

@vigneshSivasamy

4

I think you can try Forms Option in Auth0. During Authentication you can customize with Low Code solution. I am not sure if Auth0 have an option to display Organization.