Inicio de sesión social

Auris soporta nueve proveedores de identidad social de serie. Cuando el inicio de sesión social está habilitado para un proveedor, el botón de inicio de sesión correspondiente aparece automáticamente en la página de inicio de sesión alojada — sin cambios en el código del frontend.

El inicio de sesión social usa el mismo flujo OAuth2 Authorization Code + PKCE que el Login Alojado. La configuración del SDK de tu aplicación no cambia — solo se necesita la configuración en la Consola para cada proveedor.

Proveedores compatibles: Google, GitHub, Microsoft, Apple, Facebook, Discord, LinkedIn, Twitter/X, Slack

Configuración en la Consola

Instrucciones de configuración por proveedor

Google

1. Ve a Google Cloud Console  → APIs y servicios → Credenciales
2. Haz clic en Crear credenciales → ID de cliente de OAuth 2.0
3. Establece el tipo de aplicación como Aplicación web
4. Añade https://auth.tudominio.com/api/auth/social/google/callback a las URIs de redirección autorizadas
5. Copia el Client ID y el Client Secret en la Consola Auris

Asegúrate de que la Google People API esté habilitada en tu proyecto de Google Cloud.

GitHub

1. Ve a Configuración de desarrolladores de GitHub  → OAuth Apps → New OAuth App
2. Establece la URL de callback de autorización como https://auth.tudominio.com/api/auth/social/github/callback
3. Copia el Client ID y genera un Client Secret

Microsoft

1. Ve a Azure Portal  → Azure Active Directory → Registros de aplicaciones → Nuevo registro
2. Establece la URI de redirección como https://auth.tudominio.com/api/auth/social/microsoft/callback
3. En Certificados y secretos, crea un nuevo secreto de cliente
4. Copia el ID de aplicación (cliente) y el valor del secreto

Para permitir el inicio de sesión desde cualquier tenant de Microsoft (no solo el tuyo), selecciona Cuentas en cualquier directorio organizativo y cuentas Microsoft personales durante el registro de la app.

Apple

1. Ve al Portal de desarrolladores de Apple  → Certificates, Identifiers & Profiles → Identifiers
2. Crea un nuevo Services ID y habilita Sign in with Apple
3. Configura la URL de redirección: https://auth.tudominio.com/api/auth/social/apple/callback
4. Descarga la clave privada (archivo .p8) desde Keys
5. En la Consola Auris, introduce tu Team ID, Key ID, Services ID (client ID) y el contenido de la clave privada

Facebook

1. Ve a Meta for Developers  → Mis apps → Crear app
2. Elige Consumidor como tipo de app y añade el producto Facebook Login
3. Establece las URIs de redirección OAuth válidas como https://auth.tudominio.com/api/auth/social/facebook/callback
4. Copia el App ID y el App Secret del panel de la app

Asegúrate de que tu app de Facebook esté en modo Live para permitir que usuarios fuera de tu equipo de desarrolladores se autentiquen.

Discord

1. Ve al Portal de desarrolladores de Discord  → New Application
2. Ve a OAuth2 → Redirects y añade https://auth.tudominio.com/api/auth/social/discord/callback
3. Copia el Client ID y el Client Secret

LinkedIn

1. Ve al Portal de desarrolladores de LinkedIn  → Crear app
2. En Auth, añade https://auth.tudominio.com/api/auth/social/linkedin/callback a las URLs de redirección autorizadas
3. Solicita los scopes OAuth openid, profile y email
4. Copia el Client ID y el Client Secret

Twitter / X

1. Ve al Portal de desarrolladores de X  → Projects & Apps → Create App
2. Habilita OAuth 2.0 en la Configuración de autenticación de usuario
3. Establece la URL de callback como https://auth.tudominio.com/api/auth/social/twitter/callback
4. Establece los permisos de la app en Read (para acceso básico al perfil)
5. Copia el Client ID y el Client Secret

Twitter/X usa OAuth 2.0 con PKCE de forma nativa. Auris gestiona esto de forma transparente.

Slack

1. Ve a Slack API  → Create New App → From scratch
2. En OAuth & Permissions, añade https://auth.tudominio.com/api/auth/social/slack/callback a las Redirect URLs
3. Solicita los scopes: openid, profile, email
4. En Basic Information, copia el Client ID y el Client Secret

Uso del SDK

Cuando usas los SDKs de Auris, puedes activar un proveedor social específico directamente — omitiendo la pantalla de selección de proveedor de la página de inicio de sesión alojada:

import { AurisClient } from '@auris/js'
 
const auris = new AurisClient({
  domain: 'auth.tudominio.com',
  clientId: 'tu-client-id',
  redirectUri: 'http://localhost:3000/callback',
})
 
// Redirigir directamente al inicio de sesión con Google
await auris.loginWithSocial('google')
 
// Otros identificadores de proveedor:
// 'github', 'microsoft', 'apple', 'facebook', 'discord', 'linkedin', 'twitter', 'slack'
 
// Gestionar el callback (igual que el login alojado estándar)
const result = await auris.handleRedirectCallback()
console.log(result.user)

import { useAuris } from '@auris/react'
 
function SocialLoginButtons() {
  const { loginWithSocial } = useAuris()
 
  return (
    <div>
      <button onClick={() => loginWithSocial('google')}>
        Continuar con Google
      </button>
      <button onClick={() => loginWithSocial('github')}>
        Continuar con GitHub
      </button>
      <button onClick={() => loginWithSocial('microsoft')}>
        Continuar con Microsoft
      </button>
    </div>
  )
}

'use client'
import { useAuris } from '@auris/react'
 
export function SocialLoginSection() {
  const { loginWithSocial } = useAuris()
 
  const providers = [
    { id: 'google', label: 'Google' },
    { id: 'github', label: 'GitHub' },
    { id: 'microsoft', label: 'Microsoft' },
    { id: 'discord', label: 'Discord' },
  ] as const
 
  return (
    <div className="grid grid-cols-2 gap-3">
      {providers.map(({ id, label }) => (
        <button
          key={id}
          onClick={() => loginWithSocial(id)}
          className="btn-outline"
        >
          Continuar con {label}
        </button>
      ))}
    </div>
  )
}

Vinculación de cuentas

Cuando un usuario se autentica mediante un proveedor social usando una dirección de email que ya existe en Auris, la identidad social se vincula automáticamente a la cuenta existente. El usuario no crea una cuenta duplicada.

Esto significa que un usuario puede:

• Crear una cuenta con email/contraseña
• Más tarde iniciar sesión con Google (mismo email) — y acceder a la misma cuenta
• Iniciar sesión con cualquiera de los métodos a partir de entonces

Para desactivar la vinculación automática: Establece allowAccountLinking: false en Consola → Autenticación → Proveedores sociales → Avanzado. Cuando está desactivado, se crea una segunda cuenta para la identidad social, o se devuelve un error si la configuración de tu tenant impide emails duplicados.

Datos del perfil de usuario

Los siguientes campos se completan desde los perfiles de los proveedores sociales en el primer inicio de sesión y, opcionalmente, se actualizan en los siguientes:

Integración con la página de inicio de sesión alojada

Cuando los proveedores sociales están habilitados en la Consola, sus botones de inicio de sesión aparecen automáticamente en la página de inicio de sesión alojada de Auris. No se requieren cambios en el código de tu aplicación. Los botones tienen el estilo acorde a las directrices de marca de cada proveedor.

Para personalizar el orden de los botones o desactivar proveedores específicos en la página alojada (manteniendo disponible el método loginWithSocial() del SDK), usa Consola → Marca → Página de inicio de sesión → Orden de visualización de proveedores sociales.

Guías relacionadas

• Login alojado (PKCE) — El flujo OAuth2 subyacente usado para el inicio de sesión social
• Magic Links — Email sin contraseña como alternativa al inicio de sesión social
• SSO empresarial — Federación SAML 2.0 y OIDC para proveedores de identidad corporativos When social login is enabled for a provider, the corresponding login button appears automatically on the hosted login page — no frontend code changes required.

Social login uses the same OAuth2 Authorization Code + PKCE flow as Hosted Login. Your application SDK configuration does not change — only the Console configuration for each provider is needed.

Supported providers: Google, GitHub, Microsoft, Apple, Facebook, Discord, LinkedIn, Twitter/X, Slack

Console Setup

Provider Setup Instructions

Google

1. Go to Google Cloud Console  → APIs & Services → Credentials
2. Click Create Credentials → OAuth 2.0 Client ID
3. Set application type to Web application
4. Add https://auth.yourdomain.com/api/auth/social/google/callback to Authorized redirect URIs
5. Copy the Client ID and Client Secret into the Auris Console

Ensure the Google People API is enabled in your Google Cloud project.

GitHub

1. Go to GitHub Developer Settings  → OAuth Apps → New OAuth App
2. Set Authorization callback URL to https://auth.yourdomain.com/api/auth/social/github/callback
3. Copy the Client ID and generate a Client Secret

Microsoft

1. Go to Azure Portal  → Azure Active Directory → App registrations → New registration
2. Set the redirect URI to https://auth.yourdomain.com/api/auth/social/microsoft/callback
3. Under Certificates & secrets, create a new client secret
4. Copy Application (client) ID and the secret value

To allow login from any Microsoft tenant (not just your own), select Accounts in any organizational directory and personal Microsoft accounts during app registration.

Apple

1. Go to Apple Developer Portal  → Certificates, Identifiers & Profiles → Identifiers
2. Create a new Services ID and enable Sign in with Apple
3. Configure the redirect URL: https://auth.yourdomain.com/api/auth/social/apple/callback
4. Download the private key (.p8 file) from Keys
5. In Auris Console, enter your Team ID, Key ID, Services ID (client ID), and the private key contents

Facebook

1. Go to Meta for Developers  → My Apps → Create App
2. Choose Consumer as the app type and add the Facebook Login product
3. Set Valid OAuth Redirect URIs to https://auth.yourdomain.com/api/auth/social/facebook/callback
4. Copy the App ID and App Secret from the app dashboard

Ensure your Facebook app is in Live mode to allow users outside your developer team to authenticate.

Discord

1. Go to Discord Developer Portal  → New Application
2. Navigate to OAuth2 → Redirects and add https://auth.yourdomain.com/api/auth/social/discord/callback
3. Copy the Client ID and Client Secret

LinkedIn

1. Go to LinkedIn Developer Portal  → Create App
2. Under Auth, add https://auth.yourdomain.com/api/auth/social/linkedin/callback to Authorized redirect URLs
3. Request the openid, profile, and email OAuth scopes
4. Copy the Client ID and Client Secret

Twitter / X

1. Go to X Developer Portal  → Projects & Apps → Create App
2. Enable OAuth 2.0 under User authentication settings
3. Set the callback URL to https://auth.yourdomain.com/api/auth/social/twitter/callback
4. Set app permissions to Read (for basic profile access)
5. Copy the Client ID and Client Secret

Twitter/X uses OAuth 2.0 with PKCE natively. Auris handles this transparently.

Slack

1. Go to Slack API  → Create New App → From scratch
2. Under OAuth & Permissions, add https://auth.yourdomain.com/api/auth/social/slack/callback to Redirect URLs
3. Request scopes: openid, profile, email
4. Under Basic Information, copy the Client ID and Client Secret

SDK Usage

When using the Auris SDKs, you can trigger a specific social provider directly — bypassing the hosted login page’s provider selection screen:

import { AurisClient } from '@auris/js'
 
const auris = new AurisClient({
  domain: 'auth.yourdomain.com',
  clientId: 'your-client-id',
  redirectUri: 'http://localhost:3000/callback',
})
 
// Redirect directly to Google login
await auris.loginWithSocial('google')
 
// Other provider identifiers:
// 'github', 'microsoft', 'apple', 'facebook', 'discord', 'linkedin', 'twitter', 'slack'
 
// Handle the callback (same as standard hosted login)
const result = await auris.handleRedirectCallback()
console.log(result.user)

import { useAuris } from '@auris/react'
 
function SocialLoginButtons() {
  const { loginWithSocial } = useAuris()
 
  return (
    <div>
      <button onClick={() => loginWithSocial('google')}>
        Continue with Google
      </button>
      <button onClick={() => loginWithSocial('github')}>
        Continue with GitHub
      </button>
      <button onClick={() => loginWithSocial('microsoft')}>
        Continue with Microsoft
      </button>
    </div>
  )
}

'use client'
import { useAuris } from '@auris/react'
 
export function SocialLoginSection() {
  const { loginWithSocial } = useAuris()
 
  const providers = [
    { id: 'google', label: 'Google' },
    { id: 'github', label: 'GitHub' },
    { id: 'microsoft', label: 'Microsoft' },
    { id: 'discord', label: 'Discord' },
  ] as const
 
  return (
    <div className="grid grid-cols-2 gap-3">
      {providers.map(({ id, label }) => (
        <button
          key={id}
          onClick={() => loginWithSocial(id)}
          className="btn-outline"
        >
          Continue with {label}
        </button>
      ))}
    </div>
  )
}

Account Linking

When a user authenticates via a social provider using an email address that already exists in Auris, the social identity is automatically linked to the existing account. The user does not create a duplicate account.

This means a user can:

• Create an account with email/password
• Later log in with Google (same email) — and land in the same account
• Log in with either method going forward

To disable automatic linking: Set allowAccountLinking: false in Console → Authentication → Social Providers → Advanced. When disabled, a second account is created for the social identity, or an error is returned if your tenant configuration prevents duplicate emails.

User Profile Data

The following fields are populated from social provider profiles on first login, and optionally refreshed on subsequent logins:

Hosted Login Page Integration

When social providers are enabled in the Console, their login buttons appear automatically on the Auris hosted login page. No changes to your application code are required. The buttons are styled to match the provider’s brand guidelines.

To customize button order or disable specific providers from the hosted page (while keeping the SDK loginWithSocial() method available), use Console → Branding → Login Page → Social Provider Display Order.

Related Guides

• Hosted Login (PKCE) — The underlying OAuth2 flow used for social login
• Magic Links — Passwordless email as an alternative to social login
• Enterprise SSO — SAML 2.0 and OIDC federation for corporate identity providers