Issue Tracker App

In the previous chapter, we built a Project Planner, a multi-project kanban where anyone with the URL could create projects, add tasks, and move them between columns. It worked, but it had no concept of a user. Anyone could do anything to anyone’s data.

In this chapter, we will rebuild the Project Planner into an Issue Tracker. It is the same kanban board, but now it has users and rules about who can do what. We will add authentication (sign in with GitHub) and authorization (rules enforced on the backend about who can change which data), then mirror those rules in the UI, so a control the user is not allowed to use is not shown at all.

Getting Started

Go to the issue-tracker repository and click “Use this template” → “Create a new repository” to create your own copy.

Clone your repository to your computer:

git clone <your-repo-url> issue-tracker
cd issue-tracker
code .

The starter is the completed Project Planner from the previous chapter, renamed throughout. “Project Planner” is now “Issue Tracker,” and the tasks table is now issues. Everything still works exactly as it did at the end of last chapter. By the end of this chapter, the UI will look about the same, but there will be a lot of new rules behind it.

If you get stuck at any point, you can view the complete solution on the master branch of the original repository.

Learning Outcomes

  • Distinguish authentication from authorization and know where each belongs in a full-stack app
  • Add GitHub OAuth sign-in with Convex Auth and gate UI by auth state
  • Read the signed-in user’s identity on the server and use it to record ownership of created data
  • Write and reuse backend guards that enforce ownership and state-based authorization rules, including cross-table checks
  • Mirror backend authorization rules in the UI so disallowed actions are hidden rather than just rejected
  • Deploy an app with working authentication to production

Sections

  1. Set Up the Starter App
  2. Authentication vs Authorization
  3. Install and Configure Convex Auth
  4. Complete the Convex Auth Setup
  5. Set Up a GitHub OAuth App
  6. Build the Sign-In Flow
  7. The Current User on the Server
  8. Display the User in the Header
  9. Record Ownership When Creating Projects and Issues
  10. Update the Seed Script
  11. Hide Create Buttons from Unauthenticated Users
  12. Authorize Project Deletion
  13. Authorize Issue Edit and Delete
  14. Build the Edit Dialog
  15. Wire the Edit Dialog to the Dropdown Menu
  16. Authorize Status Changes
  17. Hide Move Items From Non-Owners
  18. Reflect Rules in Drag-and-Drop
  19. Deploy with Auth
  20. Practice Questions