How should I safely add Discord login to my website?
Asked by
MellowBirch42
I'm a high school student building a website and I'm trying to add login with Discord. I originally thought I needed a Discord bot token to check whether someone has a Discord account, but I've learned that exposing a bot token—or any client secret—in frontend JavaScript would be dangerous.
I'm confused about how the usual flow works. I've been told the browser should send the user to Discord's OAuth authorization page, Discord should redirect back to a Firebase Cloud Function, and that function should verify the user and save information in Firestore. I'm not sure what the Cloud Function does or which parts belong in the frontend versus the backend.
I'd also like to create a user record such as `{ generalInfo, clients: {} }` after login. Should that record be created by the frontend or by the backend? I'm considering Firebase Authentication and Firestore, so I'd appreciate a beginner-friendly explanation of the safest basic setup.
Answers
The frontend is fine for displaying forms and sending requests, but treat everything in it as visible and changeable by the visitor. A useful rule is: if someone could read a value in browser developer tools, it cannot be a secret. The OAuth code exchange belongs in a backend function because it uses the client secret.
For a beginner setup, Firebase Authentication plus Firestore can work well. Let the backend or trusted authentication integration create the user record, and configure Firestore security rules so users can only read or change the fields they are allowed to access. Avoid having the frontend freely write objects containing roles, permissions, or other security-sensitive data.
Reply to this answer
If all you want is sign-in, you probably do not need a bot token. Discord OAuth has scopes, and `identify` is the basic scope for getting the user’s Discord ID and profile information. It does not let your application control the user’s account. You send the user to Discord with the `identify` scope, receive the authorization code on your backend, exchange it using your client secret, and then use the returned identity to log them into your site.
Reply to this answer
That general flow is right. The browser sends the user to Discord’s OAuth URL, Discord redirects back with a temporary authorization code, and your Cloud Function exchanges that code for Discord’s user information. The function is basically a small backend endpoint that runs when requested. Your Discord client secret or bot token stays on the server, ideally in protected environment configuration, and never appears in browser code.
After Discord verification succeeds, the backend can create or update the user document in Firestore. It should then give the browser your app’s own login session or Firebase Auth token. The frontend can use that session to call your backend, but it should not receive Discord secrets or be trusted to write important user data directly.
Reply to this answer
Add your answer
Answers are reviewed before publication.
MellowBirch42: So the `identify` scope is enough to confirm who the person is after they approve the login? I don’t need to check whether they are currently logged into Discord separately?