- Node >= 18.x
- Git Bash (Windows users)
npm install
npm run dev
Welcome to your Module Project! In this project, you will use front end authentication to register new users, log in existing users and control access to one of the routes.
The main goal is to implement a form that can POST register and login requests, and handle authentication tokens appropriately, in order to fetch data from a protected endpoint.
Watch the first few minutes of the Module Project Solution Video to get a demo of the finished product.
This endpoint allows to log users in by sending a valid username and password in the request body.
The response includes an authorization token in its body.
The following users already exist in the system:
{ "username": "fish", password: "12345678" }
{ "username": "ben", password: "password" }
❗ You should never use passwords like that in the real world!
This endpoint allows to create a new user by sending a valid username and password in the request body.
The response includes a welcome message in its body.
Example of a new user:
{ "username": "jess", password: "abcdefgh" }
This endpoint allows you to GET a list of Hollywood stars by sending a valid token in the Authorization header of the request, otherwise the response is a 401 Unauthorized.
Example of the Authorization header:
Authorization:eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidXNlcm5hbWUiOiJiZW4etc
Inside AuthForm.js lives the one form used to log in and register
- Import
axios
from Axios and theuseNavigate
hook from React Router - Create a submit handler for the form and wire it to the JSX
- The component tracks in state whether the mode is login or register
- On register, POST username and password to the proper endpoint and set the welcome message (or error) in component state
- On login, POST username and password to the proper endpoint:
- If login succeeds, set the token in browser local storage and navigate to the Stars route
- If login fails, set the error message in component state
Inside StarsList.js lives the list of stars obtained from the API
- Import
axios
from Axios and theuseNavigate
hook from React Router - Create a
logout
handler for the logout button and wire it to the JSX - On logout, the token is removed from local storage, and the user navigated to the Auth route
- Create an effect that fires after first render
- If after first render there is no token in local storage, log the user out
- Else GET the stars from the proper endpoint, appending the token to the
Authorization
header of the request - If the response arrives with a 401 Unauthorized, log the user out
I feel very stuck. What can I do?
Do not struggle for an unreasonable amount of time! Watch the Solution Video. Request support via one of the available channels.
How do I run tests against my code?
This project includes no tests, but feel free to write some.
I am getting errors when I run npm install. What is going on?
This project requires Node to be correctly installed on your computer to work. Try deleting the node_modules
folder and running npm install
. If that fails, try deleting both node_modules
and package-lock.json
before reinstalling. If all fails, please request support!
Do I need to install extra libraries with NPM?
No. Everything you need should be installed already.
Can I edit the styles?
Of course! Have at it. But solve the challenges first.