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

My Journey

Using Permit.io for Authorization