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.

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.

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

The Full Lesson is Only for Premium Members

Want to access all of our courses? (36 h 00 min)

You also get:

61 courses

Premium tutorials

Access to repositories

Private Discord

Get Premium for $129/year or $29/month

Already a member? Login here

Cesar Schefer 3 years ago

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.

👍 1

Joffrey 2 years ago

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!

augusto-dmh 1 year ago

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('')
 }

augusto-dmh 1 year ago

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

Login page

The Full Lesson is Only for Premium Members

We'd Love Your Feedback

Thank You!