Create a Toaster inside a React app when user logs in

Help
,
1

Hello everyone,
I’ve been creating a React app and I’m using Auth0 for my authentication and I was trying to implement my toaster that welcomes my user: Everything is ready but I just need a function that tells the toaster when it’s the right moment to appear.
I was looking in the docs if there’s a method that returns true when my user successfully logs in (and get redirected to the page), but I couldn’t find a method or any way that reliably returns me true in this specific situation.
Has anyone has any idea how to do it? Here it is my Login Button and my Toaster Context,

import { useAuth0 } from "@auth0/auth0-react";
import { useToaster } from "@/hooks/useToaster";
import React, { useEffect } from "react";

export const LoginButton: React.FC = () => {
  const { loginWithRedirect, isAuthenticated, isLoading } = useAuth0();
  const { showToaster } = useToaster();

  const handleLogin = async () => {
    await loginWithRedirect();
  };

  useEffect(() => {
    if (isAuthenticated && !isLoading) {
      showToaster();
    }
  }, [isAuthenticated, isLoading, showToaster]);

  return (
    <button
      className="w-full py-2 px-4 rounded-lg hover:bg-[#0B1D32]"
      onClick={handleLogin}
      disabled={isLoading}
    >
      Accedi
      <i className="fa-solid pl-2 fa-right-to-bracket lg:inline hidden"></i>
    </button>
  );
};
export default LoginButton;

ToasterContext:

import React, { createContext, useState, ReactNode } from "react";

type ToasterContextType = {
  showToaster: () => void;
  setIsToasterVisible: (value: boolean) => void; // Prenderà un valore booleano quando richiamato
  isToasterVisible: boolean; // Avrà un valore booleano
};

export const ToasterContext = createContext<ToasterContextType | undefined>(
  undefined
);

type ToasterProviderProps = {
  children: ReactNode;
};

export const ToasterProvider: React.FC<ToasterProviderProps> = ({
  children,
}) => {
  const [isToasterVisible, setIsToasterVisible] = useState<boolean>(false);

  const showToaster = () => {
    setIsToasterVisible(true); // Mostra il toaster
    setTimeout(() => setIsToasterVisible(false), 3000); // Naconde il toaster dopo 3 secondi
  };

  return (
    <ToasterContext.Provider
      value={{
        showToaster,
        setIsToasterVisible,
        isToasterVisible,
      }}
    >
      {children}
    </ToasterContext.Provider>
  );
};

The ToasterComponent is literally just a div and I just put it on top of my page so I don’t think it’s really relevant, but just in case:

import React from "react";
import { useToaster } from "../hooks/useToaster";

export const Toaster: React.FC = () => {
  const { isToasterVisible } = useToaster();

  if (!isToasterVisible) return null;

  return (
    <div className="ps-4 text-sm font-normal"> Welcome! </div>