La autenticación social permite a los usuarios iniciar sesión en aplicaciones web utilizando sus cuentas de redes sociales como Google y Facebook. AWS Cognito facilita la integración con múltiples proveedores de identidad a través de OAuth, simplificando el manejo de sesiones y permisos. En este artículo, veremos cómo implementar esta funcionalidad en una aplicación web usando React y AWS Cognito.

¿Por qué Usar AWS Cognito para Autenticación Social?

AWS Cognito proporciona autenticación segura y escalable, integrándose fácilmente con múltiples proveedores de identidad. Utiliza JWT para manejar sesiones de forma segura, ofreciendo una experiencia de inicio de sesión fluida para los usuarios.

Beneficios de esta integración:

  • Inicio de sesión con cuentas populares (Google, Facebook).
  • Gestión segura de sesiones con tokens JWT.
  • Integración directa con aplicaciones frontend modernas.
  • Control de acceso detallado con permisos basados en roles.

Arquitectura General

  1. AWS Cognito: Manejo de autenticación y almacenamiento de usuarios.
  2. OAuth con Google y Facebook: Proveedores de identidad.
  3. React: Interfaz frontend.

Paso 1: Crear el Pool de Usuarios en AWS Cognito

Crear un Pool de Usuarios

  1. Ve a la consola de AWS Cognito.
  2. Haz clic en Administrar usuarios y luego en Crear un pool de usuarios.
  3. Asigna un nombre (por ejemplo, social-login-pool).

Habilitar la Autenticación Social

  1. Ve a Proveedores de identidad (Identity Providers).
  2. Agrega Google y Facebook como proveedores.

Configuración de Google

  • Crea un Proyecto de API en la consola de Google Developers.
  • Habilita la API de OAuth 2.0 y obtén el Client ID y Client Secret.
  • Ingresa las credenciales en Cognito.

Configuración de Facebook

  • Crea una Aplicación de Facebook en Meta for Developers.
  • Habilita Inicio de Sesión con Facebook y obtén el App ID y App Secret.
  • Ingresa las credenciales en Cognito.

Paso 2: Configurar el App Client en Cognito

  1. Crea un App Client en el Pool de Usuarios.
  2. Habilita Iniciar Sesión en la Web.
  3. Activa los siguientes flujos de autenticación:
    • Authorization Code Grant
    • Implicit Grant
  4. Configura la URL de redirección (por ejemplo, http://localhost:3000).
  5. Anota el App Client ID para usarlo en el frontend.

Paso 3: Crear un Dominio en Cognito

Para que el flujo de OAuth funcione, necesitas un dominio propio.

aws cognito-idp create-user-pool-domain \
  --domain my-social-app \
  --user-pool-id us-east-1_example

Paso 4: Configuración del Frontend con React

Instalar Dependencias 

npm install aws-amplify @aws-amplify/ui-react

Configuración de AWS Amplify

aws-exports.js 

const awsConfig = {
  Auth: {
    region: "us-east-1",
    userPoolId: "us-east-1_example",
    userPoolWebClientId: "example1234",
    oauth: {
      domain: "my-social-app.auth.us-east-1.amazoncognito.com",
      scope: ["email", "openid", "profile"],
      redirectSignIn: "http://localhost:3000/",
      redirectSignOut: "http://localhost:3000/",
      responseType: "code"
    }
  }
};

export default awsConfig;

Inicialización en React

index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Amplify } from 'aws-amplify';
import awsConfig from './aws-exports';

Amplify.configure(awsConfig);

ReactDOM.render(<App />, document.getElementById('root'));

Paso 5: Implementación de la Autenticación

App.js 

import React, { useEffect, useState } from 'react';
import { Amplify, Auth } from 'aws-amplify';
import awsConfig from './aws-exports';

Amplify.configure(awsConfig);

function App() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    Auth.currentAuthenticatedUser()
      .then(user => setUser(user))
      .catch(() => setUser(null));
  }, []);

  const signIn = async () => {
    try {
      await Auth.federatedSignIn({ provider: 'Google' });
    } catch (error) {
      console.error("Error al iniciar sesión", error);
    }
  };

  const signOut = async () => {
    await Auth.signOut();
    setUser(null);
  };

  return (
    <div>
      <h2>Autenticación Social</h2>
      {user ? (
        <div>
          <p>Bienvenido, {user.username}</p>
          <button onClick={signOut}>Cerrar Sesión</button>
        </div>
      ) : (
        <button onClick={signIn}>Iniciar Sesión con Google</button>
      )}
    </div>
  );
}

export default App;

Uso de Tokens JWT para Sesiones Seguras

Una vez autenticado, puedes acceder al token JWT:

const getToken = async () => {
  const session = await Auth.currentSession();
  const token = session.getIdToken().getJwtToken();
  console.log("JWT Token:", token);
};

Buenas Prácticas de Seguridad

  1. Renovación de Tokens: Utiliza el flujo de actualización para mantener la sesión activa.
  2. Almacenamiento Seguro: No almacenes el token directamente en el localStorage o sessionStorage.
  3. Políticas de IAM: Restringe el acceso a los recursos de AWS utilizando políticas detalladas.
  4. Control de Acceso: Define roles específicos en Cognito para limitar el acceso a recursos.

Conclusión

La autenticación social usando AWS Cognito y OAuth ofrece una experiencia de usuario fluida y segura, integrando múltiples proveedores en un solo flujo de inicio de sesión. Siguiendo estos pasos, tendrás una aplicación web moderna con soporte para autenticación social lista para producción.

¿Tienes dudas o sugerencias? ¡Déjalas en los comentarios!