This is a submission for the Permit.io Authorization Challenge: Permissions Redefined

NB: This article was posted after the submission deadline for the Permit.io dev challenge.

Little League – Fine-Grained Authorization for Casual 3-a-Side Football Matches

Finding players for a casual game of soccer can be a headache — organizing who's in, who's out, and when to start often takes more time than the actual match. I built Little League to fix that.

This simple web app allows players to queue into 3-a-side soccer matches. The first three players are assigned to Team A, and the next three to Team B, all handled automatically. Each team is given a randomly generated team name using the unique-names-generator package to add some personality and fun to each match.

Behind the scenes, Permit.io handles all fine-grained authorization to keep role-based access secure and easy to manage.

🔧 Tech Stack

• Frontend: Angular
• Backend: Firebase Functions
• Database: Firebase Firestore
• Authentication: Firebase Auth (Gmail login)
• Authorization: Permit.io SDK (Node.js)

🎯 Project Purpose

This app demonstrates how to implement role-based authorization using Permit.io in a real-time booking scenario with Firebase handling identity and storage.

🔐 Firebase + Permit.io: A Dual I/O Model

This project uses:

• Firebase for authentication and real-time match state
• Permit.io for enforcing role-based permissions on the frontend and backend

Every feature tied to a user’s role is pre-checked using Permit.io’s API and SDK.

🚀 Getting Started

• Head to the homepage and log in via Gmail
• You’ll be automatically assigned a random display name and the "Player" role
• After logging in, you’ll be taken to the Matches page

👥 User Roles & Permissions

🧑‍💼 Club Manager

• Can create matches via the "+New" button
• Can view player profiles via a nav item
• On the Matches page: sees a View button but no booking controls

⚖️ Referee

• Cannot create matches or see player profiles
• Can view matches
• On the View Match page, has access to the Match Controller where they can:
  • Modify the score
  • Update match status (e.g., Not Started, In Progress, Completed)

👟 Player

• Can book in and book out of matches
• Automatically assigned to Team A or Team B depending on queue position
• Can see other players on a match
• Cannot create matches or access the match controller

🔄 How Authorization Works

Every feature above is permission-guarded using Permit.io’s Node SDK. For example:

const allowed = await permit.check(userId, "create", "match");
if (!allowed) {
  throw new Error("Unauthorized");
}

🧪 Live Demo

Curious to see how it all works in action?

👉 Launch the Live Demo

You can log in using Gmail — you'll automatically be assigned the Player role.

To test other roles:

• Demo credentials for Manager and Referee are available on the homepage
• After logging in, explore the Matches page and available actions depending on your role

Try:

• Booking into a match as a player
• Creating a match as a manager
• Controlling the match state as a referee