QueueLab / QueueLab/QCX

Discord

Open
#737 9 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
19
Forks
7
Avg merge
59m
Merged PRs (30d)
16

Description

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 DashboardSSO connections.
  • Click Add connectionFor 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!

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue provides Clerk and Discord OAuth setup guidance but names no repository files, entry points, or tests. First confirm the project's existing Clerk sign-in and user-management integration, then clarify whether the goal is basic Discord authentication, guild membership checks, role syncing, or another behavior. Done should be defined by explicit acceptance criteria for the requested Discord flow.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, react, typescript
Domain
authentication
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.