How to perform automatic redirect after login?

An automatic redirect after login means programmatically sending the user to a different route (e.g., dashboard) immediately once authentication succeeds, improving UX by guiding them to the appropriate page.

1. Authentication State Tracking 🛂

   • After the user submits credentials, your app updates an “authenticated” flag (in context, Redux store, or local state).
   • You watch this flag to know when login succeeds.

2. Routing Library Integration 🗺️

   • In React, you typically use React Router.
   • v5: useHistory() / <Redirect>
   • v6: useNavigate()

3. Triggering the Redirect 🚦

   • Inside an Effect: Once the auth state changes to “logged in,” call the navigation function.
   • After Promise Resolution: Redirect in the .then() of your login API call.

4. Protecting Routes 🛡️

   • Use a PrivateRoute (v5) or wrapper component (v6) that checks auth and redirects to /login if unauthorized.

Code Example (React Router v6 + Hooks)