[Bug]: dbAuth template pages toast doesn't show

[Tobbe]

What's not working?

The login page you get when you generate auth pages during dbAuth setup include a toast that says "Welcome back!" after a successful login.

The problem is that the <Toaster> component that's supposed to host that toast is mounted on the same page, and when logging in you're redirected to another page, so <Toaster> unmounts and the toast never shows up.

When generating the pages the <Toaster> has to be placed in either a layout that wraps everything, or simply just in App.tsx.

[pkaramagi]

Expected Behavior

The toast should appear and be visible to the user after a successful login.

What I Found

When generating auth pages via yarn rw generate dbAuth, the LoginPage includes a toast notification (toast.success('Welcome back!')) that is intended to display upon successful login.

However, the <Toaster> component is mounted only on the LoginPage, and after login,

• isAuthenticated becomes true.
• The useEffect detects isAuthenticated === true and
• the user is immediately redirected (e.g. to routes.home()), which causes LoginPage (and its <Toaster>) to unmount before the toast can display. As a result, the "Welcome back!" toast doesn't appears.

Suggested Fix

To solve this, I moved the <Toaster> from the page-level into App.tsx, like this:

// App.tsx
import { Toaster } from '@redwoodjs/web/toast'
...
const App = ({ children }: AppProps) => (
  <FatalErrorBoundary page={FatalErrorPage}>
    <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
      <AuthProvider>
        <RedwoodApolloProvider useAuth={useAuth}>
          <Toaster toastOptions={{ className: 'rw-toast', duration: 6000 }} />
          {children}
        </RedwoodApolloProvider>
      </AuthProvider>
    </RedwoodProvider>
  </FatalErrorBoundary>
)