Authorizing Sport: Firebase + Permit.io

Na-Dev — Thu, 15 May 2025 20:02:05 +0000

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

Forem: Na-Dev