Skip to main content

Black Friday 2025! Only until December 1st: coupon FRIDAY25 for 40% off Yearly/Lifetime membership!

Read more here

Login page

Premium
7 min read

Developing a login page has become a straightforward task, as we have already established all the necessary features for our application. It will closely resemble the registration page.

Login page

When a user logs in we want him to be redirected to the active parking list, so let's create a new empty component for this purpose, we will implement the active parking list later.

Login redirect

  1. Create a new src/views/parkings/ActiveParkings.jsx component...

The Full Lesson is Only for Premium Members

Want to access all of our courses? (29 h 14 min)

You also get:

54 courses
Premium tutorials
Access to repositories
Private Discord
Get Premium for $129/year or $29/month

Already a member? Login here

Comments & Discussion

CS
Cesar Schefer ✓ Link copied!

Hi there! If you login and then go to "/login" on the address bar , the login form should not be there because you are already logged in. It should redirect to the vehicle or parking list. I'm not a great frontender, but I suppose this could be resolved within the routes file by checking if the user is authenticated and redirecting to /parkings or /vehicles, for example.

J
Joffrey ✓ Link copied!

Hey Cesar, Thanks for your comment. Regarding this issue, I've found an article with a video explaining exactly how to fix that here.

For our app, here is how I fixed it:

In routes/index.jsx:

<Route element={<AuthRoutes/>}>
    <Route path={route('vehicles.index')} element={<VehiclesList/>}/>
    <Route path={route('parkings.active')} element={<ActiveParkings/>}/>
</Route>

Then, create a component, in file components/AuthRoutes.jsx:

import useAuth from '@/hooks/useAuth.jsx'
import {Navigate, Outlet} from 'react-router-dom'
import {route} from '@/routes/index.jsx'

const AuthRoutes = () => {
  const {isLoggedIn} = useAuth()
  return (
    isLoggedIn ? <Outlet/> : <Navigate to={route('login')}/>
  )
}

export default AuthRoutes

Hope that helps!

A
augusto-dmh ✓ Link copied!

The "remember" functionality is not being applied:

  // currently
  async function handleSubmit(event) {
    event.preventDefault()
 
    await login({ email, password })
 
    setPassword('')
  }

  // how the code should be
  async function handleSubmit(event) {
    event.preventDefault()
 
    await login({ email, password, remember_me: remember })
 
    setPassword('')
  }
A
augusto-dmh ✓ Link copied!

An observation: since there's no UI change, data fetch or any other client-side operation that depends upon email, password or remember state variables, there's no reason for them to exist.

We could simply have static variables referencing the input DOM elements and getting the value to pass it to login from useAuth - the only place the input values are necessary:

    async function handleSubmit(event) {
        event.preventDefault()

        const email = document.querySelector('input[type="email"]').value
        const password = document.querySelector('input[type="password"]').value
        const remember = document.querySelector('input[type="checkbox"]').checked

        await login({ email, password, remember_me: remember })
    }