はじめに
24時間や48時間で成果物を仕上げるハッカソンでは、アイデアを形にする時間そのものが最大の資源です。ところが実際に手を動かし始めると、最初の数時間はログイン機能やパスワードリセット、メール送信の設定に消えてしまうことが少なくありません。「Sign in with Google」のボタン一つ実装するだけでも、OAuthアプリの登録・コールバックURLの設定・セッション管理と、地味に時間を食う作業が続きます。
Hackathon-Starterは、こうした「毎回同じことをやり直している」部分をまるごと肩代わりしてくれるNode.js製のボイラープレートです。git clone一発で、認証・ユーザー管理・API連携のひな形が揃った状態からアプリ開発を始められます。
なお、Hackathon-Starterはブラウザ単体で完結するライブラリではなく、Express・MongoDBを使うサーバーサイドのボイラープレートです。そのため本記事にはLiveCodesの実行可能サンプルは含めていません。
Hackathon-Starterとは
Hackathon-StarterはSahat Yalkabov氏が開発した、Node.js Webアプリケーション向けのボイラープレートです。GitHub上で長年にわたり多くのスターを集めており、「とりあえずログインできて、ユーザー管理ができるアプリ」を作るところから始めなくて済むようにすることを目的としています。バックエンドはExpress、データベースはMongoDB（Mongoose経由）、認証にはPassport.jsを採用しており、テンプレートエンジンにはPugとBootstrap 5.3を使ったUIが最初から用意されています。
主な特徴
- 豊富なOAuth認証 - Google、Microsoft、Facebook、LinkedIn、X（Twitter）、Twitch、GitHub、DiscordとのOAuth 2.0連携がPassport.jsベースで実装済みです
- ユーザー管理機能一式 - ローカル認証、パスワードリセット、メールアドレス検証、二要素認証（2FA）、WebAuthn/パスキー認証まで、サインアップからアカウント保護までの機能がそろっています
- APIサンプル集 - Stripe決済、Twilio、Google APIなど、外部サービスと連携するためのサンプルコードが同梱されており、そのまま参考実装として使えます
インストール
Node.js（24 LTS推奨）とMongoDBが動く環境を用意したら、リポジトリをクローンして依存パッケージをインストールします。
git clone https://github.com/sahat/hackathon-starter.git myproject
cd myproject
npm install
.envファイルにMongoDBの接続文字列（MONGODB_URI）やSMTP設定、使用するOAuthプロバイダーのクライアントIDなどを記入してから起動します。
npm start
ブラウザでhttp://localhost:8080にアクセスすると、サインアップ・ログイン画面が表示された状態のアプリがすでに動いています。
基本的な使い方
Hackathon-Starterの基本的な流れは、不要な機能を削ぎ落としてから自分のアイデアを積み上げていくことです。たとえばOAuthプロバイダーはデフォルトで多数設定されていますが、実際に使うのはGoogleとGitHubだけ、という場合にはapp.jsのルーティング定義から使わないプロバイダーの行を削除し、.envからも該当のキーを外すだけで整理できます。
ユーザーモデルはmodels/User.jsにMongooseスキーマとして定義されており、プロフィール項目やトークン情報がここに集約されています。自分のアプリ固有のフィールド（たとえば「参加チーム名」や「スキルタグ」など）を追加したい場合は、このスキーマにフィールドを足し、対応するコントローラーとPugテンプレートを編集する形で機能を拡張していきます。
// models/User.js への追加例（イメージ）
const userSchema = new mongoose.Schema({
email: { type: String, unique: true },
password: String,
// ハッカソン用に独自フィールドを追加する
teamName: String,
skills: [String],
});
ルーティングはcontrollers/配下にユースケースごとに分かれているため、「新しい画面を1枚追加したい」ときはコントローラー関数を書き、app.jsにルートを1行追加し、views/にPugテンプレートを置く、という3ステップで完結します。
実践的なユースケース
OAuth認証を絞り込んで最短導線を作る
ハッカソンの審査員やユーザーに使ってもらう前提だと、認証手段は多いほど良いわけではありません。選択肢が多いとかえって迷わせてしまうため、対象サービスに合わせて1〜2個のOAuthプロバイダーに絞り込むのが定石です。config/passport.jsにはGoogle、GitHub、Discordなど各プロバイダーのStrategyがすでに実装されているので、使わないものをコメントアウトし、.envの該当するクライアントID・シークレットだけを設定すれば、その場でログインボタンが機能します。
// config/passport.js（使うプロバイダーだけ有効化するイメージ）
passport.use(new GitHubStrategy({
clientID: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET,
callbackURL: '/auth/github/callback',
}, verifyCallback));
// 使わないプロバイダーのStrategyはコメントアウトする
外部APIサンプルを自分のプロダクトに転用する
Hackathon-Starterにはcontrollers/api.jsにStripe決済やGoogle Maps、Twilioなど各種APIの呼び出しサンプルがまとまっています。ゼロからAPIドキュメントを読んで実装するより、動作確認済みのコードをコピーしてAPIキーだけ差し替えるほうが、ハッカソン中の限られた時間では圧倒的に速く進みます。たとえば決済フローが必要なアイデアであれば、Stripeのサンプルコントローラーをベースにルートを追加し、自分のアプリの商品データに合わせて金額とメタデータを差し替えるだけでデモができる状態まで持っていけます。
2FAやパスキー認証でセキュリティ要件のあるデモに対応する
金融系や医療系のテーマを扱うハッカソンでは、単純なパスワードログインだけでは審査員に弱いと判断されることがあります。Hackathon-Starterは二要素認証（メールコード・認証器アプリ）とWebAuthn/パスキー認証の実装も含んでいるため、ユーザー設定画面から2FAを有効化するフローを組み込むだけで、セキュリティ面をアピールできるデモに仕上げられます。既存のユーザーモデルに2FA関連のフィールドが用意されているので、有効化・検証のロジックをそのまま呼び出す形で組み込めます。
まとめ
Hackathon-Starterは、Node.js・Express・MongoDB・Passport.jsという定番の組み合わせで、認証やユーザー管理といった「毎回同じものを作っている」部分をあらかじめ済ませてくれるボイラープレートです。OAuth連携、2FA、パスキー認証、各種API連携サンプルまで一通りそろっているため、ハッカソンの限られた時間をアイデアそのものの実装に集中させられます。次にアイデア出しから開発まで一気に走り切る機会があれば、まずこのリポジトリをcloneするところから始めてみてはいかがでしょうか。