Login con Discord usando OAuth en Auth0
Curso de Auth0: Implementación de Autenticación y Seguridad Web
Contenido del curso
Login con Discord usando OAuth en Auth0
Curso de Auth0: Implementación de Autenticación y Seguridad Web
Contenido del curso
0:00/10:05
Monitoreo de logs y amenazas en Auth0
Suscríbete para ver másIntegración de Firebase Authentication y Auth0 en Next.js
Suscríbete para ver másAutenticación Firebase con Auth0 y custom tokens
Suscríbete para ver másReglas de Firestore basadas en custom claims
Suscríbete para ver másChecklist de Auth0 antes de salir a producción
Suscríbete para ver másConfigurar un custom social login con Discord en Auth0 te permite controlar cada detalle del flujo OAuth en lugar de usar la conexión predefinida. Esta guía te muestra cómo conectar Discord con Auth0 paso a paso, ideal si trabajas con autenticación social y quieres entender qué pasa debajo del capó.
¿Por qué crear una conexión custom si Auth0 ya trae Discord?
Auth0 ya ofrece Discord como conexión social lista para usar, pero crear una custom connection te enseña cómo funciona realmente OAuth y te da flexibilidad para integrar cualquier servicio que no esté en el catálogo.
El punto fuerte aquí es que cualquier proveedor que use OAuth puede convertirse en social login dentro de Auth0. Eso multiplica tus opciones más allá de Google, Facebook o GitHub.
¿Qué es una custom social connection en Auth0? Es una conexión que tú configuras manualmente proporcionando el authorization URL, token URL, credenciales y un script para obtener el perfil del usuario.
¿Qué datos necesitas antes de empezar la configuración?
Antes de tocar Auth0, reúne todo lo que el formulario de Create Custom te va a pedir. Si vas con prisa, te vas a frustrar a la mitad.
¿Dónde encuentras el client ID y client secret en Discord?
Entra a discord.com/developers, ve a Applications y crea una nueva aplicación. Acepta términos y abre la sección OAuth. Ahí copias el client ID y, tras autenticarte por seguridad, el client secret.
Un detalle importante: no confundas el application ID o la public key con el client ID. Son campos distintos y pegar el incorrecto rompe la conexión.
¿Cómo obtener el authorization URL y el token URL?
En la documentación de Discord, busca el tópico OAuth. Ahí están los endpoints exactos que necesitas. Si tomaste el curso de introducción a OAuth y OpenID Connect, este paso te va a sonar familiar porque son los mismos endpoints que se usan en cualquier flujo OAuth estándar.
¿Cómo se escribe el script para obtener el perfil de Discord?
Auth0 necesita saber cómo pedir los datos del usuario una vez tiene el access token. Para eso defines una función llamada fetchDiscordUser que recibe tres parámetros: el access token, el contexto y un callback.
Escribir este script en Visual Studio Code te ahorra dolores de cabeza con el formato antes de pegarlo en el editor de Auth0.
¿Qué hace exactamente el fetchDiscordUser?
El script consume el endpoint discord.com/api/v10/users/@me con un header de autorización tipo bearer. Asegúrate de usar la versión actual de la API de Discord cuando lo implementes.
javascript function fetchDiscordUser(accessToken, ctx, cb) { const API_URL = 'https://discord.com/api/v10'; const CDN_URL = 'https://cdn.discordapp.com';
request.get({
url: ${API_URL}/users/@me,
headers: { 'Authorization': Bearer ${accessToken} }
}, (err, response, body) => {
if (err || response.statusCode !== 200) {
return cb(new Error('Algo salió mal obteniendo el usuario'));
}
try {
const data = JSON.parse(body);
const tag = ${data.username}#${data.discriminator};
const picture = ${CDN_URL}/avatars/${data.id}/${data.avatar}.png;
const profile = {
user_id: data.id,
name: tag,
nickname: data.username,
picture: picture
};
return cb(null, profile);
} catch (e) {
return cb(new Error('Error parseando el JSON'));
}
});
}
El tag combina el username con el discriminator, que es el número que Discord asigna a cada cuenta. El picture se arma concatenando el CDN con el id y el avatar en formato PNG.
¿Qué scopes necesitas para acceder al perfil de Discord?
Los scopes definen los permisos que pides al usuario. Para Discord, con identify y email ya obtienes lo necesario para construir el perfil básico.
Cada servicio documenta sus propios scopes, así que siempre revisa la documentación OAuth del proveedor antes de configurar la conexión.
¿Qué son los scopes en OAuth? Son etiquetas que indican qué información o acciones permitirá el usuario que tu aplicación acceda en su nombre.
¿Por qué falla la primera prueba de la conexión?
Al probar la conexión por primera vez, Auth0 suele mostrar un error de URL de redirección. No es un bug, es una protección.
Debes registrar en el panel de Discord la redirect URL de tu tenant de Auth0 con el formato https://tu-tenant.eu.auth0.com/login/callback. Sin ese registro, Discord rechaza el flujo por seguridad.
Probar antes de pasar a producción es justamente lo que evita que estos errores lleguen a tus usuarios reales.
¿Cómo confirmar que la conexión custom funciona?
Guarda los cambios en Discord, vuelve a Social Connections en Auth0 y prueba de nuevo. Deberías ver la pantalla de autorización de Discord pidiendo permiso para tu aplicación.
Forzar un logout en tu app y volver a entrar te muestra la nueva opción de login (en el ejemplo, Discordia). Al autorizar, tu perfil aparece con la foto y los datos mapeados por el script.
Ahora que dominas la integración custom con Discord, ¿qué otro servicio con OAuth te gustaría conectar? Cuéntalo en los comentarios y comparte tu implementación.
Alfredo David Sumosa
Guillermo Rodas
ProfesorAlfredo David Sumosa
Hola comunidad, estoy intentando usar Auth0 con una conexión social de google para no solo para obtener el perfil del usuario sino para requerir otros permisos permisos (ej. google photos) y entiendo que en un flujo típico OAuth 2.0. se incluye esto en los scopes de la authorization url.
Se podria hacer lo mismo usando Auth0 como intermediario, solamente incluyendo los scopes que deseo al configurar la conexión social? es necesario un custom connection?
En el caso del social login estamos hablando de autenticación, y lo que necesitas es una autorización del usuario. Esto sería un flujo totalmente independiente.
Gracias por la respuesta @glrodasz! 😀 Usé una conexión social custom configurada hacia google y adicionalmente requerí el scope de google photos. La conexión social me llevo al login y a consentir tanto los scopes de identidad (openid, email y profile) junto con el scope de photos, resultando en auth0 tokens que tienen enlazados los tokens de Google para consumir la API de google photos.
Me surge la pregunta de si hacerlo de esa manera esta bien, porque también pude haber hecho un flujo de autorización independiente solo para google photos a través de mi servidor de express y usar los tokens de google enlazados al auth0 token que obtengo como resultado? 🤔