Finally, we are going to implement login, via requests using our custom route. After doing so, our blog app will be fully connected to the server.
Let's get started implementing login:
- First, edit src/user/Login.js and import the useEffect and useResource Hooks:
import React, { useState, useContext, useEffect } from 'react'
import { useResource } from 'react-request-hook'
- We define a new State Hook that will store a boolean to check if the login failed:
const [ loginFailed, setLoginFailed ] = useState(false)
- Then, we define a new State Hook for the Password field, because we did not handle it before:
const [ password, setPassword ] = useState('')
- Now, we define a handler function for the Password field, below the handleUsername function:
function handlePassword (evt) {
setPassword(evt.target.value)
}
- Next, we handle the value change in the input field:
<input type="password" value={password} onChange={handlePassword} name="login-username" id="login-username" />
- Now, we can define our Resource Hook below the State Hooks, where we are going to pass username and password to the /login route. Since we are passing them as part of the URL, we need to make sure that we encode them properly first:
const [ user, login ] = useResource((username, password) => ({
url: `/login/${encodeURI(username)}/${encodeURI(password)}`,
method: 'get'
}))
Please note that it is not secure to send the password in cleartext via a GET request. We only do this for the sake of simplicity when configuring our dummy server. In a real world application, use a POST request for login instead and send the password as part of the POST data. Also make sure to use Hypertext Transfer Protocol Secure (HTTPS) so that the POST data will be encrypted.
- Next, we define an Effect Hook, which will dispatch the LOGIN action if the request completes successfully:
useEffect(() => {
if (user && user.data) {
- Because the login route returns either an empty array (login failed), or an array with a single user, we need to check whether the array contains at least one element:
if (user.data.length > 0) {
setLoginFailed(false)
dispatch({ type: 'LOGIN', username: user.data[0].username })
} else {
- If the array was empty, we set loginFailed to true:
setLoginFailed(true)
}
}
- If we get an error response from the server, we also set the login state to failed:
if (user && user.error) {
setLoginFailed(true)
}
- We make sure that the Effect Hook triggers whenever the user object from the Resource Hook updates:
}, [user])
- Then, we adjust the onSubmit function of form, in order to call the login function:
<form onSubmit={e => { e.preventDefault(); login(username, password) }}>
- Finally, below the Submit button, we display the Invalid username or password message, in case loginFailed was set to true:
{loginFailed && <span style={{ color: 'red' }}>Invalid username or password</span>}
As we can see, entering a wrong Username or Password (or no Password) will result in an error, while entering the correct Username/Password combination will log us in:
Displaying an error message when the login failed
Now, our app is fully connected to the backend server!