Example code for checking GitHub Sponsors status and gating features on your site—similar to Patreon-style membership tiers, but using GitHub's payment infrastructure.
📖 Read the full article: Use GitHub Sponsors Like Patreon: Gate Features and Check Sponsorships
Server-side:
server/check-sponsor.js- Checks if a user sponsors your GitHub account via GraphQLserver/api-route.js- API endpoint that exposes sponsor status to the frontend
Client-side:
client/sponsor-status-hook.js- React hook that fetches and manages sponsor statusclient/sponsor-gate.jsx- Components for gating content based on sponsor status
The server queries GitHub's GraphQL API to get a list of accounts the user sponsors, then checks if your account is in that list. The result is exposed as a simple isSponsor boolean to your frontend, which uses it to conditionally render content.
The API response includes a list of sponsored accounts—you just need to check if your username appears in that list. See server/check-sponsor.js for the example response structure.
This example assumes you already have:
- GitHub OAuth authentication set up (users can sign in with GitHub)
- A way to store and retrieve GitHub access tokens (session or database)
- A server that can make API calls and return JSON responses
If you need help setting up GitHub OAuth, see the GitHub OAuth guide or Supabase's auth guide.
- Replace
YOUR_GITHUB_USERNAMEwith your actual GitHub username in the relevant files (api-route.jsandsponsor-gate.jsx) - Ensure you have GitHub OAuth configured.
- Adapt the code to your framework (Express, Next.js, etc.)
For production use, consider maintaining a database backup of sponsor information, as GitHub's API may stop returning one-time sponsors after 30 days. The system can also be extended to support tiered sponsorships by checking tier information from the API response.
MIT