[solved] Toast in a Redwood Login Page

Hello RW community,
I am working to add authentication to my web app. I used the yarn rw generate dbAuth command that comes with RW. One of the files that it generates is ./web/src/pages/LoginPage/LoginPage.js. I was able to successfully add login to my page but there is one issue. I am not able to see the toast message. Looking further into the LoginPage.js script, it looks like:

const LoginPage = () => {
  const { isAuthenticated, logIn } = useAuth()

  useEffect(() => {
    if (isAuthenticated) {
  }, [isAuthenticated])

  const usernameRef = useRef()
  useEffect(() => {
  }, [])

  const onSubmit = async (data) => {
    const response = await logIn({ ...data })

    if (response.message) {
    } else if (response.error) {
    } else {
      toast.success('Welcome back!')
return (
      <MetaTags title="Login" />

      <main className="rw-main">
        <Toaster toastOptions={{ className: 'rw-toast', duration: 6000 }} />
        <div className="rw-scaffold rw-login-container">
/// Removed the remainder for brevity
export default LoginPage

It seems like once authenticated, it will immediately navigate to home and renders the home so no time for the toast message to appear?

useEffect(() => {
    if (isAuthenticated) {
  }, [isAuthenticated])

Should the toast message still appear on the screen given this? Any tips on how to make the toast message persist for the duration that I specify?

Hi @rouzbeh. Do you see a component in your project? If not stick one in there. I usually put it in a layout file that wraps around everything else.

From there my experience has been that the Toast message will persist despite navigation.

More info Toast Notifications | RedwoodJS Docs


Thanks @shansmith01
The link was the key. I had the Toaster component in the wrong place. I had it inside login component. I moved it to the MainLayout component and Now it works.