Adding user authentication pages
On the first visit to our app, users will need to register, confirm their email, and log in. Whereas, on subsequent visits, they’ll just need to log in. Each of these actions will need to be a page in our app.
Registration
The first thing a new user needs to do when visiting our app is to register, so we’ll start by adding a registration page. To register, the user will need to enter their email and a password. Once the user has supplied these, we’ll use the members API to create the user and then redirect the user to the login page or, if the API call fails, display the relevant error.
We’ll start by adding this logic as a custom useRegister
hook to frontend/src/pages/Register.tsx:
import axios from "axios"; import { FormikHelpers } from "formik"; import { useContext } from "react"; import { useNavigate } from "react-router"; import { ToastContext } from "src/ToastContext...