[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) {
      navigate(routes.home())
    }
  }, [isAuthenticated])

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

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

    if (response.message) {
      toast(response.message)
    } else if (response.error) {
      toast.error(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) {
      navigate(routes.home())
    }
  }, [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

2 Likes

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.