Login Dialog is not showing up

[code-flu]

I'm encountering an issue when attempting to use the useSignIn function from auth.ts within the AppToolbar.tsx file. Despite calling the signIn function on button click, the login dialog fails to appear, and there are no error messages logged to the console. Below are the relevant code snippets for reference:

In auth.ts:

export function useSignIn() {
  const openLoginDialog = useOpenLoginDialog();
  return React.useCallback(
    async function (options?: SignInOptions) {
      if (options?.method) {
        try {
          return await signIn(options);
        } catch (err) {
          return await openLoginDialog({ error: err as Error });
        }
      } else {
        return await openLoginDialog();
      }
    },
    [openLoginDialog],
  );
}

In AppToolbar.tsx:

import { useCurrentUser, useSignIn } from "../../core/auth.js";

export function AppToolbar(props: AppToolbarProps): JSX.Element {
  const signIn = useSignIn();
  const handleSignIn = async () => {
    try {
      await signIn();
      // Handle successful sign-in
    } catch (error) {
      // Handle sign-in error
    }
  };

  // ... other code ...

  return (
    <Button
      variant="text"
      onClick={handleSignIn}
      color="inherit"
      children="Log in"
    />
  );
}

Despite following this structure, the login dialog does not appear, and there are no apparent errors in the console logs. Any insights into what might be causing this issue would be greatly appreciated.