This is a ReactJS application that I made for any Discord server that wants to allow its users to appeal bans. It uses Oauth2 to prevent spam and Discord webhooks to alert moderators of new appeals. Moderators can approve those appeals directly from the webhook message if they want too! This application can be deployed and customized by anyone even with no prior coding knowledge!
Inspired by sylveon
REQUIREMENTS
NOTE: If you already have a custom bot in your server and access to its credentials, skip the first step
REACT_APP_CLIENT_ID
, REACT_APP_CLIENT_SECRET
, REACT_APP_DISCORD_BOT_TOKEN
)APPEALS_CHANNEL
REACT_APP_GUILD_ID
REACT_APP_JWT_SECRET
REACT_APP_ENABLE_HCAPTCHA
to false
unless you intend to add hCaptchaREACT_APP_ENABLE_SENDGRID
to false
unless you intend to use Sendgrid for unban notifications.GITHUB_PAT
(see table for information on how)https://[site-url]/callback
where [site-url]
is the site name netlify assigned you, or the one you changed it to.Environment Variable | Description | Optional? |
---|---|---|
REACT_APP_CLIENT_ID | Client ID of a Discord Application | No |
REACT_APP_CLIENT_SECRET | Client Secret of a Discord Application | No |
REACT_APP_DISCORD_BOT_TOKEN | The Bot token of a Discord Application | No |
REACT_APP_GUILD_ID | The Server/Guild ID where you are accepting ban appeals | No |
REACT_APP_JWT_SECRET | A really long string of characters used to establish a secure line of communication with the API of this app. I would recommend using a password generator to create this. You don't have to remember what its set to |
No |
REACT_APP_SKIP_BAN_CHECK | If set to "true" the application will not check if a user is banned before allowing them to fill out an appeal form |
Yes |
REACT_APP_BANNER_URL | Add a custom banner behind your server icon. Must be a direct link to an image (usually ends in .jpeg or .png etc.) |
Yes |
REACT_APP_SITE_TITLE | Use a custom title for your site (defaults to {server_name}'s Discord Ban Appeal Application if none is set) | Yes |
REACT_APP_SITE_DESCRIPTION | Use a custom SEO description for your site (defaults to {server_name}'s Discord Ban Appeal Application if none is set) | Yes |
APPEALS_CHANNEL | The channel where you want appeals to appear in | No |
REACT_APP_ENABLE_HCAPTCHA | Do you want to use hCaptcha in the form? (true/false) | Yes |
REACT_APP_HCAPTCHA_SITE_KEY | The hCaptcha site key generated by hCaptcha | Yes |
REACT_APP_HCAPTCHA_SECRET_KEY | The secret on your hCaptcha profile | Yes |
REACT_APP_GOOGLE_ANALYTICS_ID | Google Analytics Tracking ID like UA-000000-01. | Yes |
REACT_APP_ENABLE_SENDGRID | Sends users an email when they are unbanned (true/false) See Wiki if you don't know how to set this up | No |
SENDGRID_API_KEY | API Key for Sendgrid | Yes |
SENDGRID_SENDER_EMAIL | Single Sender Verification Email | Yes |
INVITE_URL | Discord invite that can be used in email template to unbanned users | Yes |
GITHUB_PAT | Github Personal Access Token for Deny and Block feature to work. Make sure it never expires and to select the repo scope |
No |
This if by far not the prettiest way to do this which is why I recommend you use netlify, but if you're smart enough to deploy this on your own then go for it!
Be aware this project uses serverless functions as its API layer. All the API requests are directed at /.netlify/functions because support issues with netlify's redirect rules. To deploy this yourself you will need to create a serverless API using AWS Lambda or an equivalent from Azure or GCP. I will go into specifics below.
.env.example
to .env
and fill in each valueyarn install
to install the dependenciesyarn build
to compile a production build./build/
directory/functions
will be an endpoint, and most of them will require both the files in the /functions/helpers
folderpackage.json
are installed and available for each function/.netlify/functions/
with your endpoint for each functionI've oversimplified a lot of the serverless portion here since it will vary based on your cloud provider but this covers the jist of things.