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?