Frontend Authentication | React Todos
Table of Contents
- Step 1 - axios
- Step 2 - Authorization Requests
- Step 3 - The Auth Component
- Step 4 - Login
- Step 5 - Wrap Up
Step 1 - axios
To allow users to sign in to the
Todos
application we'll need to prompt them for the username and password and then verify it with the backend. To make the HTTP request to the backend we'll use a library called axios. First, install axios as a dependency in theweb
subfolder:cd web
npm install axiosWe'll want to configure axios to use a user's access token when making requests to the backend and have easy access to the axios library, so we'll need to set up an interceptor as well as some other functions. Create the following file
web/src/lib/http.js
and at the top of the file import axios.import axios from "axios";
Then paste in the following code:
const apiUrl = "http://localhost:3000";
const jwtKey = "accessToken";
axios.interceptors.request.use(
(config) => {
const { origin } = new URL(config.url);
const allowedOrigins = [apiUrl];
const accessToken = localStorage.getItem(jwtKey);
if (allowedOrigins.includes(origin)) {
config.headers.authorization = `Bearer ${accessToken}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);Now every request that axios makes will take the user's JWT access token, which will be stored in local storage, and assign it to the Authorization header of every request.
To simplify some tasks we'll add a function that generates the full URL of an API request when provided the endpoint, a function that checks if an access token already exists in local storage, and a function to save an access token in local storage.
export const createUrl = (endpoint) => new URL(endpoint, apiUrl).href;
export const isStoredJwt = () => Boolean(localStorage.getItem(jwtKey));
export const setStoredJwt = (accessToken) =>
localStorage.setItem(jwtKey, accessToken);Finally, we'll want to expose the
get
,patch
, andpost
methods axios provides.export const get = axios.get;
export const patch = axios.patch;
export const post = axios.post;
Step 2 - Authorization Requests
Instead of calling our API endpoints with axios directly from our components, we will abstract the logic of the requests so if we ever need to make changes to the behavior of the code we can do it in just one place.
Create the following file
web/src/lib/auth.js
and at the top of the file, we'll import some of the functions we created in theweb/src/lib/http.js
file.import { createUrl, get, isStoredJwt, post, setStoredJwt } from "./http";
First, add the
me
function:export const me = async () => {
return isStoredJwt()
? (await get(createUrl("/api/me")).catch(() => null))?.data
: null;
};me
will check if we have an access token stored, because if there is none then there is no way this request would succeed. If the token exists, it will make aGET
request to the/api/me
endpoint we created in Tutorial Step 3. On the success of the request, the current user's user object will be returned.Next, add the
login
function:export const login = async (username, password) => {
const result = (
await post(createUrl("/api/login"), { username, password }).catch(
() => null
)
)?.data;
if (!result) {
return alert("Could not login");
}
setStoredJwt(result.accessToken);
return me();
};login
will make aPOST
request to the/api/login
endpoint, sending the username and password of our user. If the request fails, like when a user doesn't exist, an alert will pop up notifying the user of the failure. If the request succeeds the access token will be saved into local storage, and then theme
function will be called to return the current user's user object.Finally, add the
signup
function:export const signup = async (username, password) => {
const result = (
await post(createUrl("/api/signup"), { username, password }).catch(
() => null
)
)?.data;
if (!result) {
return alert("Could not sign up");
}
setStoredJwt(result.accessToken);
return me();
};signup
will make aPOST
request to the/api/signup
endpoint, which we also created in Tutorial Step 3, sending the username and password of our new user. If the request fails, like if the username is already used, an alert will pop up notifying the user of the failure. If the request succeeds the access token will be saved into local storage, and then theme
function will be called to return the current user's user object.
Step 3 - The Auth Component
We need a component that can collect the username and password from the user and then make the appropriate request with the functions we just added. Create
web/src/Auth.js
and paste the following code:import { useState } from "react";
import { login, signup } from "./lib/auth";
export default function Auth({ setUser }) {
const [isLogin, setIsLogin] = useState(true);
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [confirm, setConfirm] = useState("");
const handleUsernameChange = (e) =>
setUsername(e.target.value.toLowerCase());
const handlePasswordChange = (e) => setPassword(e.target.value);
const handleConfirmChange = (e) => setConfirm(e.target.value);
const handleSubmit = async (e) => {
e.preventDefault();
const func = isLogin ? login : signup;
if (!isLogin) {
if (password !== confirm) {
return alert("Passwords do not match");
}
}
const result = await func(username, password);
setUser(result);
};
return (
<div>
<form onSubmit={handleSubmit}>
<h2>{isLogin ? "Login" : "Sign Up"}</h2>
<input
name="username"
type="text"
placeholder="username"
value={username}
onChange={handleUsernameChange}
required
/>
<input
name="password"
type="password"
placeholder="password"
value={password}
onChange={handlePasswordChange}
required
/>
{!isLogin && (
<input
name="confirmPassword"
type="password"
placeholder="confirm password"
value={confirm}
onChange={handleConfirmChange}
required
/>
)}
<button type="submit">Submit</button>
<button type="button" onClick={() => setIsLogin(!isLogin)}>
{isLogin ? "Need an account?" : "Already have an account?"}
</button>
</form>
</div>
);
}This component renders a form to the user prompting them for their username and password to log in. If they don't have an account yet then a button on the bottom of the page will toggle the form to be for creating a new account, which adds a new field for a user to confirm their password.
On submit the
login
orsignup
function fromweb/src/lib/auth.js
is called, and the result is passed into thesetUser
function.
Step 4 - Login
With the authentication component created we just need to show it to users. Start by replacing the imports at the top of
web/src/App.js
with this:import { useState, useEffect } from "react";
import "./App.css";
import { me } from "./lib/auth";
import Auth from "./Auth";
import CreateTask from "./CreateTask";
import Tasks from "./Tasks";Then create a
user
andsetUser
and add the followinguseEffect
hook.function App() {
+ const [user, setUser] = useState();
const [tasks, setTasks] = useState([]);
+ useEffect(() => {
+ async function getUser() {
+ const result = await me();
+ setUser(result);
+ }
+ getUser();
+ }, [setUser]);We've created our
user
variable and can update it with thesetUser
function. We've also implemented theuseEffect
hook, which will allow code to be executed when the component mounts. So, when theApp
component mounts, we call theme
function fromweb/src/lib/auth.js
to set the current user to ouruser
variable.Finally, replace the
return
with this:return (
<div>
{user ? (
<div>
<CreateTask addTask={addTask} />
<Tasks tasks={tasks} toggleCompleted={toggleCompleted} />
</div>
) : (
<Auth setUser={setUser} />
)}
</div>
);Now if a
user
object exists, which only occurs when they're logged in, the application will show the user's tasks. If auser
object doesn't exist they are shown the auth screen, which when a user logs in or signs up, will set theuser
variable with thesetUser
function that is passed into it.
Step 5 - Wrap Up
Run the application and try creating a new account.
Users are now able to login to the Todos
application, but we're not saving their tasks in our backend yet... That'll have to be next.
To view the changes for this step, visit here.