| Event | Day | Date | Time |
|---|---|---|---|
| Release | Sun | Dec 1 | 09:00 AM ET |
| Due | Sun | Dec 8 | 05:00 PM ET |
In this assignment, you will add authentication and authorization to your fullstack Flashcards application from HW6. You will implement a session-based user authentication system using cookies and secure the API endpoints to ensure that only authenticated users can access their own data. You will also implement user registration, login, and logout functionality in the web application.
Your task is to implement a robust authentication system for your Flashcards application. This includes creating new API endpoints for user registration, login, and logout, as well as securing existing endpoints to require authentication. On the frontend, you will add forms for user registration and login, and update the UI to reflect the user’s authentication status.
Delete the .keep file in the api folder and copy the contents of the api folder from your HW6 submission. Your API server application should adhere to all the specifications from HW5 and HW6. Additionally, implement the following new features:
POST /sign-up: Register a new userPOST /sign-in: Log in a userPOST /sign-out: Log out a userPOST /validate-session: Validate the user’s sessionDelete the .keep file in the web folder and copy the contents of the web folder from your HW6 submission. Your web application should adhere to all the specifications from HW4 and HW6. Additionally, implement the following new features:
Please see the demo on Panopto.
Begin by logging into your GitHub account at https://github.com/. Then, accept the invitation by clicking on this link. This action will create a private GitHub repository with the starter code.
Please keep the repository private. Do not change its visibility or add collaborators. Clone this repository to your local machine to start your work.
Clone the repository to your local machine and follow the instructions in the README file to set up the project. Develop the app according to the provided description, demo, and specifications.
You don’t need to deploy this application. However, don’t forget to update the info.json file with links to your GitHub repository:
{
"repo": "",
}Make sure to commit and push the updated info.json file to your GitHub repository. After doing so, submit your work on Gradescope.
If you need to resubmit, push the changes to your repository first, then re-submit on Gradescope.
Teaching assistants will evaluate your submission using the following criteria:
Spec 1: The API server should be implemented using Hono.js and should provide all endpoints for managing decks and cards as specified in HW5 and HW6, as well as new endpoints for user authentication (/sign-up, /sign-in, /sign-out). The server should start without errors using the pnpm dev command in the api directory and should not crash under any circumstances, including erroneous requests.
Spec 2: To register a user when the server is running locally, send a POST request to http://localhost:3000/sign-up with the name, username, and password provided in the request body. A successful request should receive a response with a 201 status code.
Spec 3: To log in a user when the server is running locally, send a POST request to http://localhost:3000/sign-in and provide the username and password. A successful request should receive a response with a 200 status code and set a session cookie.
Spec 4: To log out a user when the server is running locally, send a POST request to http://localhost:3000/sign-out. The request must include the session cookie in the header. A successful request should receive a response with a 200 status code and clear the session cookie.
Spec 5: Authenticated users should only be authorized to perform CRUD operations on their own decks (and associated cards). An attempt to access or modify another user’s deck must be rejected by the server with a 403 status code and “Forbidden resource” message.
Spec 6: Every request to the decks and cards endpoints must include a valid session cookie for user authentication. These endpoints should be secured and protected against unauthenticated users. A request to the decks or cards endpoints that is missing the session cookie or bears an expired or invalid one must be rejected by the server with a 401 status code and “Unauthorized” message.
Spec 7: Successful registration, login, and logout replies must conform to the same JSON format as the other API endpoints, i.e., { success: true, message: "User registered successfully", data: { ... } }. Additionally, the login and registration responses should include a session cookie and user information. The cookie should be set through the Set-Cookie header in the response. The user information should be included in the response body as part of the data object and it should include the user’s name, username, and id, excluding the password.
Spec 8: An incomplete or invalid registration request should result in an HTTP 400 Bad Request error. A valid username must be longer than 3 characters and shorter than 20, while a user’s name should be 50 characters or less. Passwords must be at least 8 characters long. Passwords must contain at least one lowercase letter, one uppercase letter, and one number.
Spec 9: Invalid login details return an HTTP 401 Unauthorized error. The server should not provide any hints about whether the username or password was incorrect.
Spec 10: The authentication strategies must be implemented using Lucia Auth. Moreover, passwords must be hashed before database storage.
Spec 11: The Web app should be implemented using React.js and should provide all functional requirements as specified in HW4 and HW6. The application should start without errors using the pnpm dev command in the web directory and should not crash under any circumstances, including erroneous requests.
Spec 12: The web application should include a user registration form with fields for name, username, and password. This form must be available to unauthenticated users at the /register route. The form should include a link to the login page. Upon successful registration, the user should be redirected to the home page.
Spec 13: The web application should include a login form with fields for username and password. This form must be available to unauthenticated users at the /login route. The form should include a link to the registration page. Upon successful login, the user should be redirected to the home page.
Spec 14: When the web app starts, it should check if the user is authenticated. If the user is not authenticated, the app should redirect to the login page. If the user is authenticated, the app should display the home page. This behavior should be consistent across all routes. That is, the web application should redirect unauthenticated users to the login page if they try to access protected routes.
Spec 15: For authenticated users, the web application should display the user’s name in the sidebar (to the right of the Feed component) and provide a logout option. The user’s name should be displayed as “Welcome, {name}“.
Spec 16: The web application should include a logout button that allows authenticated users to log out. When the user logs out, the session cookie should be cleared, and the user should be redirected to the login page.
Spec 17: The web application should redirect users to the login page when their session expires or is invalidated. This should happen automatically as the user interacts with the application. The web application should check this through the /validate-session endpoint.
Spec 18: All API calls from the frontend should include the necessary authentication information (cookies). Moreover, the web application should handle authentication errors gracefully, displaying appropriate error messages to the user for failed registration or login attempts.
Spec 19: The code should be well-organized, following best practices for both the API (Hono.js) and the web application (React). This includes proper use of components, hooks, and state management in React, and appropriate use of middleware and error handling in Hono.js.