Plugins Overview
What are plugins?
Plugins are well-defined sets of features that may be integrated with Vaken. These include things such as certain OAuth libraries, NFC, sponsor management, and Google Calendar event syncing, which also integrates with NFC.
Why plugins?
Plugins allow users to customize Vaken to their use case, and easily extend Vaken without having to heavily directly code within Vaken.
Plugin Patterns
We use the builder pattern to generate a package when it is needed rather than exporting the plugin from the nppm package itself. This means that we invoke the package as a function in the plugins
folder, and export authPlugins
and serverPlugins
from different plugins.ts
files.
Auth Plugins vs. Server Plugins
We have two patterns of integrating plugins with Vaken, which stems from how our authentication works. Since we use Passport to help us authenticate, then plugins that deal with authentication must hook into the server directly with Passport. In comparison, server plugins need to add resolvers, schema, etc. to the server, and follow different patterns on the frontend.
Client vs. Server Plugins
The server and client follow different patterns for integration, as we wanted to ensure that things such as environment variables could not be traced. Therefore, the client folder has its own plugins.ts
file, and the server folder also has its own plugins.ts
file. Both of these import plugins from the plugins folder
at the root of the application folder.
Frontend
The server plugins need to generate a frontend component, e.g. in the example of NFC, there needs to be a frontend NFC component so that organizers can check hackers in to events.
In contrast, the auth plugins need to export their name, displayName, and logo. The name is used for auth routes, while the display name is used for the frontend name, and the logo is used for the frontend button.
Backend
Server plugins need to export their schema and resolvers so that the server can use it. Auth plugins need to export an OAuth package that takes in a CLIENT_ID
, CLIENT_SECRET
, and CALLBACK_URL
, plus the processOAuthCallback
function that will get the callback from the OAuth strategy.
Installation
Our plugins are distributed on npm, under the organization @vandyhacks. In order to use them, first npm i <packagename>
. Next, we will demonstrate an example on a specific plugin.
Example
For simplicity of making an example, we will demonstrate how to use the @vandyhacks/github-oauth package.