EmoteAnarchy.com was designed & programmed by SM Sith Lord over 48-hours as a way to get working experience with Firebase Authentication, Firebase Security Rules, and Twitch Authentication. Oh, also to create something useful. :D
EmoteAnarchy.com uses Firebase Authentication to handle the templated user registration flow & generic user database, which includes login credentials, email, displayName, and photoURL.
Firebase Authentication & the Firebase Console manage the sensitive credentials securely, automatically send out password reset emails - when requested, and provide the site adminstrator with generic admin panels to manually reset user passwords or ban/remove users - when needed.
Firebase Auth Documentation: Open Link
EmoteAnarchy.com uses the FirebaseUI Auth for drop-in templated login menus integrated with Firebase Authentication - specifically the menus for creating a new account, signing in, or requesting a password reset email.
FirebaseUI Auth Documentation: Open Link
The generic templated solutions of Firebase Authentication & FirebaseUI Auth only get you so far. They must be combined with an additional custom database to provide users with meaningful interaction with shared data.
EmoteAnarchy.com uses Firebase Realtime Database to manage public emote data & public/private user data. Public user data includes a public copy of the user's account displayName. Private data includes a Twitch access token to import the user's Twitch name/avatar & run the local Twitch Bot on the OVERLAY page.
Firebase Realtime Database Documentation: Open Link
EmoteAnarchy.com utilizes Security Rules integrated with Firebase Authentication to allow the authenticated user securely access & write to data that they own.
Security Rules allow users to securely create, edit, and delete emotes that they own - and rest assured that no unauthorized user will ever be able to do those actions.
Security Rules also protect sensitive private user data - such as a user's Twitch access token - from being accessed by an unauthorized user. And they protect public user data from being tampered with by an unauthorized user.
Firebase Security Rules Documentation: Open Link
EmoteAnarchy.com uses the Twitch API OAuth Implicit Code Flow to import a user's Twitch avatar image/display name, and link a user's Twitch account to their EmoteAnarchy.com account.
The Twitch access token that EmoteAnarchy.com requests uses the "user_read" and "chat:read" permission scopes. These permissions allow the twitch avatar image/display name to be imported and allow for the Twitch Bot to function on the OVERLAY page, respectively.
After the Twitch access token for the user is obtained, it is securely stored in private user data & linking between the EmoteAnarchy.com user account & the Twitch user account is complete.
Twitch API OAuth Implicit Code Flow Documentation: Open Link
EmoteAnarchy.com features a Twitch Bot on the OVERLAY page that is implemented using the Twitch IRC Interface powered by WebSockets.
The Twitch Bot is a very basic IRC client written in JavaScript that logs-in as the user & monitors the chat for play emote commands. When the bot detects the command to play an emote, it pulls up the associated emote data & plays it.
The Twitch Bot runs locally using a user access token that was obtained using a client-side authorization flow.
Twitch IRC Interface Documentation: Open Link
The entire application of EmoteAnarchy.com is serverless - meaning that, other than 3rd party servers & a website server, EmoteAnarchy.com has no always-running server handling API requests. All cloud interactions are managed by Firebase & automatically scale.