Login Page with React

Today we will only discuss about the basic login Page flow

1. LoginPage component Make the basic component wiht the help of two input fileds name email and password , make the state for the 4 variable email, password, loading and error. After creating all of this make a simple form accepting email and password and event onSubmit we will hit a event handler we will create by our own

import {useState} from ‘react’

import { useNavigate } from ‘react-router-dom’

import api from “../services/api”

const LoginPage = () => {

const [email, setEmail] = useState(“”)

const [password, setPassword] = useState(“”)

const [loading, setLoading] = useState(false)

const [error, setError] = useState(“”)

const navigate = useNavigate()

const handleSubmit = async (event) => {

event.preventDefault()

try {

const response = await api.post(“/auth/login/”, {email, password})

localStorage.setItem(“accessToken”, response.data.access_token)

localStorage.setItem(“refreshToken”, response.data.refresh_token)

navigate(“/dashboard”)

console.log(response.data)

} catch (error) {

console.log(error)

setError(“Login Failed”)

} finally {

setLoading(false)

}

}

return (

<div>

<form onSubmit={handleSubmit}>

<div>

<label >Email</label>

<input

type=”email”

value={email}

onChange={(event) => setEmail(event.target.value)}

/>

</div>

<div>

<label >Password</label>

<input

type=”password”

value={password}

onChange={(event) => setPassword(event.target.value)} />

</div>

<button

type=”submit”

disabled={loading}

{loading ? “Signing in…” : “Sign in”}

</button>

</form>

</div>

)

}

export default LoginPage

Above I have shared the whole login page component wihtout any styling You can direct copy paste or write it manually Recommanded is to read the code and do the process step by step as mentioned in first step

2. Now make axios instance and with the baseURL so that we can use our api eveyrwhere . You can refer the Axios documentaiton for this ther eyou can find the snipet in “Creating Axios instance ”

3. this is it the only requriement of making a basic login page is only this one component

4. Remember the token are being currently being stored in the local storage which is not recommanded as our applicaiton is prone to the XSS attacks so it is recommande dto stor eit in the HTTP only cookies