Skip to main content

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? (30 h 50 min)

You also get:

55 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 })
}

We'd Love Your Feedback

Tell us what you like or what we can improve

Feel free to share anything you like or dislike about this page or the platform in general.