bad request returned for login page

[andristarr]

Here is the code I have right now.

export default function App() {
  return (
    <View style={styles.container}>
      <AuthProvider
        tenant="tenantName"
        appId="24c9fd0c-f595-485d-REST"
        loginPolicy="B2C_1_weatherappflow>"
        passwordResetPolicy="B2C_1_weatherappflow"
        profileEditPolicy="B2C_1_weatherappflow"
        redirectURI="https://APPNAME.b2clogin.com/oauth2/nativeclient"
      >
        <Text>Open up App.tsx to start working on your app!</Text>
        <Authenticated></Authenticated>
      </AuthProvider>
      <StatusBar style="auto" />
    </View>
  );
}

The Authenticated component

const Authenticated = () => {
  const { getTokensAsync, isLoading, error, isAuthentic } = useToken();

  useEffect(() => {
    const login = async () => {
      console.log("I was called to log in.");

      const token = await getTokensAsync();

      console.log("I am logged in: ", token);
    };

    login();
  }, []);

  return <></>;
};

In Azure I have a Mobile/Desktop application redirect URI as the following:

https://APPNAME.b2clogin.com/oauth2/nativeclient

When I run the app using expo's browser view: it opens a new browser window that just shows: Bad Request, while on the phone it does nothing.

What am I doing wrong, how the redirects should be set up?

How the redirect URL should be set and which one to use?

[imbimbo]

Same error here. Any resolution?