Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Discord

オープン
  • 何か問題がありますか？
#737 コメント 9 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
5/5
見積もり時間
1週間以上
初心者へのやさしさ
25/100
issue の種類
機能追加
明瞭さ
説明が足りない
活発さ
静か
技術スタック
nextjs, react, typescript
領域
authentication

調査の方向性

この issue には Clerk と Discord OAuth のセットアップ手順が示されていますが、リポジトリのファイル、エントリーポイント、テストについては何も記載されていません。まず、プロジェクトに既存の Clerk によるサインインおよびユーザー管理の統合があることを確認し、次に目的が基本的な Discord 認証、guild メンバーシップのチェック、ロールの同期、または別の挙動のいずれなのかを明確にしてください。要求された Discord フローについて、明示的な受け入れ基準によって Done を定義する必要があります。

索引モデルが issue の本文から書いたものです。

説明

Clerk + Discord OAuth is a great fit for this use case. When users sign up/sign in via Discord, Clerk automatically creates (or links) a SaaS user account for them. This is standard social login behavior in Clerk—no extra "upon joining" logic needed for basic auth.

1. Enable Discord in Clerk (Quick Setup)
Development Instance (easiest for testing)
  • Go to your Clerk Dashboard → SSO connections.
  • Click Add connection → For all users → Select Discord.
  • Enable it (Clerk uses shared credentials—no extra config needed).
Production Instance

  1. In Clerk Dashboard → SSO connections → Add Discord connection.

  2. Toggle on Enable for sign-up and sign-in and Use custom credentials.

  3. Copy the Redirect URI shown (e.g., https://your-domain.accounts.dev/sign-in or similar for production).

  4. Create Discord OAuth App:

    • Go to Discord Developer Portal.
    • New Application → Go to OAuth2 tab.
    • Add the Redirect URI from Clerk under Redirects.
    • Copy Client ID and Client Secret (reset secret if needed).

  5. Paste Client ID + Secret back into Clerk and save.

Test via your app's Account Portal (sign-in page) or <SignIn /> component.

2. Frontend Integration (Next.js / React example)

Assuming you already have Clerk set up:

import { SignIn } from "@clerk/nextjs";

export default function Page() {
  return <SignIn path="/sign-in" routing="path" signUpUrl="/sign-up" />;
}

Discord button appears automatically once enabled. Users signing in with Discord become SaaS users in Clerk (with externalAccounts linked to their Discord profile).

Clerk handles:

  • Sign-up / sign-in equivalence (new users auto-created).
  • User metadata (name, email, avatar from Discord).
  • Session management, JWTs, etc.
3. Backend / User Management
  • Use Clerk's Backend API or SDK to fetch user details: clerkClient.users.getUser(userId).
  • Access Discord-linked data via user.externalAccounts.
  • Webhooks (recommended for SaaS): Listen to user.created, user.updated to sync to your database (e.g., create a profile, assign default role, send welcome email).
4. Advanced: Discord Guild/Member Features

If you want to:

  • Check if the user is in your Discord server (guild).
  • Sync roles, grant access on join, or manage members.

After auth:

  • Get the OAuth access token from Clerk: const { getToken } = useAuth(); then request Discord token with appropriate scopes.
  • Use Discord API endpoints (/users/@me/guilds, etc.) with the token.

Scopes (add in Clerk when using custom credentials):

  • Default: identify email
  • Extra for guilds: guilds (list servers), guilds.members.read (member details).

Example flow from community projects: After Clerk sign-in, use server actions to call Discord API for role management.

Bot Integration Tip: For automatic role assignment on server join, combine this with a Discord bot that listens for member joins and checks against your Clerk user database (via Discord ID).

Common Gotchas
  • Redirect URI mismatches → Exact match required (including protocol, no trailing slashes issues). Use Clerk's provided one.
  • Production vs Dev: Always use custom credentials in prod.
  • Rate limits / permissions: Be careful with Discord API calls.
  • Existing users: Allow linking Discord in user profile if they signed up another way.
Next Steps / Resources
  • Official: Clerk Discord Guide.
  • Clerk + Next.js social connections overview.
  • For full Discord member/role management examples, check tutorials using Clerk + Discord API (e.g., Brian Morrison's projects).

If you share more details (tech stack like Next.js, what "upon joining" specifically means—e.g., auto-role, server invite, paid gating), I can give more targeted code/webhook examples or help debug!

主要言語
TypeScript
スター
19
フォーク
7
平均マージ
24分
マージ済み PR（30日）
9

環境構築

  • Dockerfile または Docker Compose ファイルあり
  • プルリクエストのテンプレートなし
  • コントリビューションガイドなし

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

QueueLab/QCX のほかの issue

QueueLab/QCX の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。