1. Node >= 18.x
2. Git Bash (Windows users)

1. npm install
2. 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

1. Import axios from Axios and the useNavigate hook from React Router
2. Create a submit handler for the form and wire it to the JSX
3. The component tracks in state whether the mode is login or register
4. On register, POST username and password to the proper endpoint and set the welcome message (or error) in component state
5. 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

1. Import axios from Axios and the useNavigate hook from React Router
2. Create a logout handler for the logout button and wire it to the JSX
3. On logout, the token is removed from local storage, and the user navigated to the Auth route
4. Create an effect that fires after first render
5. If after first render there is no token in local storage, log the user out
6. Else GET the stars from the proper endpoint, appending the token to the Authorization header of the request
7. If the response arrives with a 401 Unauthorized, log the user out