Añade el inicio de sesión a tu aplicación Flask

Añade la autenticación de Auth0 a una aplicación web de Flask con inicio de sesión, rutas protegidas y perfiles de usuario

Requisitos previos: Antes de comenzar, asegúrese de tener instalados los siguientes componentes:

• Python 3.9 o posterior
• pip 20.0 o posterior
• jq - Necesario para configurar la CLI de Auth0

Compatibilidad de versiones de Flask: Esta guía de inicio rápido usa Flask 2.0+ con el extra [async] para habilitar la compatibilidad asíncrona.

​

Primeros pasos

Esta guía de inicio rápido muestra cómo agregar la autenticación de Auth0 a una aplicación Flask. Crearás una aplicación web segura con funcionalidad de inicio de sesión, rutas protegidas y acceso al perfil del usuario mediante el SDK web de Python de Auth0.

1. Configura tu entorno

   Crea un nuevo directorio para tu proyecto de Flask:

   mkdir auth0-flask-app && cd auth0-flask-app
   

   Crea un entorno virtual:

   python -m venv venv
   source venv/bin/activate  # En Windows: venv\Scripts\activate
   
2. Instala las dependencias

   Cree el archivo requirements.txt para registrar sus dependencias:

   requirements.txt

   auth0-server-python>=1.0.0b7
   flask[async]>=2.0.0
   python-dotenv>=1.0.0
   

   El archivo requirements.txt enumera todas las dependencias del proyecto. Para instalarlas, ejecute:

   pip install -r requirements.txt
   
3. Configura tu aplicación de Auth0

   A continuación, debes crear una nueva aplicación en tu tenant de Auth0 y agregar las variables de entorno a tu proyecto.

   Puede hacerlo automáticamente ejecutando un comando de CLI o de forma manual a través del Dashboard:

   CLI

   Ejecuta el siguiente comando de shell en el directorio raíz de tu proyecto para crear una aplicación de Auth0 y generar un archivo .env:

   Mac

   AUTH0_APP_NAME="My Flask App" && brew tap auth0/auth0-cli && brew install auth0 && auth0 login --no-input && auth0 apps create -n "${AUTH0_APP_NAME}" -t regular -c http://localhost:5000/callback -l http://localhost:5000 -o http://localhost:5000 --reveal-secrets --json > app-details.json && CLIENT_ID=$(python3 -c "import json; print(json.load(open('app-details.json'))['client_id'])") && CLIENT_SECRET=$(python3 -c "import json; print(json.load(open('app-details.json'))['client_secret'])") && DOMAIN=$(auth0 tenants list --json | python3 -c "import sys, json; print([t['name'] for t in json.load(sys.stdin) if t.get('active')][0])") && SECRET=$(openssl rand -hex 64) && echo "AUTH0_DOMAIN=${DOMAIN}" > .env && echo "AUTH0_CLIENT_ID=${CLIENT_ID}" >> .env && echo "AUTH0_CLIENT_SECRET=${CLIENT_SECRET}" >> .env && echo "AUTH0_SECRET=${SECRET}" >> .env && echo "AUTH0_REDIRECT_URI=http://localhost:5000/callback" >> .env && rm app-details.json && echo ".env file created with your Auth0 details:" && cat .env
   

   Dashboard

   Antes de comenzar, crea un archivo .env en la raíz de tu proyecto:

   .env

   # Configuración de Auth0
   AUTH0_DOMAIN=YOUR_AUTH0_DOMAIN
   AUTH0_CLIENT_ID=YOUR_CLIENT_ID
   AUTH0_CLIENT_SECRET=YOUR_CLIENT_SECRET
   AUTH0_SECRET=YOUR_GENERATED_SECRET
   AUTH0_REDIRECT_URI=http://localhost:5000/callback
   

   1. Ve a Auth0 Dashboard → Applications → Applications
   2. Haz clic en Create Application
   3. Asigna un nombre a tu aplicación (por ejemplo, “My Flask App”) y selecciona Regular Web Application
   4. Haz clic en Create
   5. En la pestaña Settings, configura lo siguiente:
      • Allowed Callback URLs: http://localhost:5000/callback
      • Allowed Logout URLs: http://localhost:5000
      • Allowed Web Origins: http://localhost:5000
   6. Haz clic en Save Changes
   7. Reemplaza YOUR_AUTH0_DOMAIN en .env por tu dominio de la pestaña Settings (por ejemplo, your-tenant.auth0.com)
   8. Reemplaza YOUR_CLIENT_ID en .env por tu ID de cliente
   9. Reemplaza YOUR_CLIENT_SECRET en .env por tu Secreto del cliente

   Genera un secreto seguro para AUTH0_SECRET:

   openssl rand -hex 64
   

   Importante: Nunca subas tu archivo .env al control de versiones. Agrégalo a .gitignore.

4. Crear la configuración de autenticación, las rutas y las plantillas

   Crear archivos

   mkdir templates static && touch app.py auth.py templates/index.html templates/profile.html static/style.css
   

   Y agrega los siguientes fragmentos de código:

   Solo para desarrollo: Este ejemplo usa clases simples de almacenamiento en memoria (MemoryStateStore y MemoryTransactionStore) solo con fines de demostración. Estos almacenamientos perderán todos los datos de sesión cuando la aplicación se reinicie y no funcionarán en implementaciones de varias instancias.

   Para aplicaciones de producción, debe implementar almacenamiento persistente. El SDK es independiente del framework y requiere que proporcione implementaciones personalizadas de StateStore y TransactionStore. Consulte los ejemplos oficiales de almacenamiento del SDK para obtener instrucciones detalladas sobre cómo implementar Redis, PostgreSQL u otros backends de almacenamiento persistente.

5. Ejecuta tu aplicación

   Inicia el servidor de desarrollo de Flask:

   python app.py
   

   Tu aplicación estará disponible en http://localhost:5000. El SDK de Auth0 gestiona automáticamente las rutas de autenticación.

Punto de control

Ahora deberías tener una página de inicio de sesión de Auth0 completamente funcional ejecutándose en localhost

---

​

Uso avanzado

Obtención de tokens de API

Si necesita llamar a una API protegida, recupere un token de acceso:

@app.route('/api-call')
@require_auth
async def api_call():
    try:
        # Obtener un token de acceso para su API
        access_token = await auth0.get_access_token(
            audience='https://your-api.example.com',
            store_options=g.store_options
        )
        
        # Usar el token para llamar a su API
        # headers = {'Authorization': f'Bearer {access_token}'}
        # response = requests.get('https://your-api.example.com/data', headers=headers)
        
        return f"Access token retrieved: {access_token[:20]}..."
    except Exception as e:
        return f"Error getting access token: {str(e)}", 500

Para usar esta función, debe:

1. Configurar AUTH0_AUDIENCE en su archivo .env
2. Incluir offline_access en sus alcances (para tokens de actualización)
3. Actualizar authorization_params en auth.py:
   authorization_params={
       'scope': 'openid profile email offline_access',
       'audience': os.getenv('AUTH0_AUDIENCE')
   }
   

Configuración de almacenamiento personalizada

De forma predeterminada, el SDK usa almacenamiento basado en cookies. En entornos de producción con necesidades específicas (escalado horizontal, uso compartido de sesiones entre servicios), puede configurar backends de almacenamiento personalizados, como Redis o PostgreSQL.

Cuándo usar almacenamiento personalizado:

• Necesita compartir sesiones entre varios servidores
• Tiene datos de sesión de gran tamaño que superan los límites de tamaño de las cookies
• Necesita administración centralizada de sesiones para el cierre de sesión por backchannel

Ejemplo con Redis:

auth.py

from auth0_server_python.stores.redis_state_store import RedisStateStore
import redis.asyncio as redis

# Inicializar almacenamiento de estado personalizado
redis_client = redis.from_url(os.getenv('REDIS_URL', 'redis://localhost:6379'))
state_store = RedisStateStore(
    secret=os.getenv('AUTH0_SECRET'),
    redis_client=redis_client
)

# Pasar a ServerClient
auth0 = ServerClient(
    domain=os.getenv('AUTH0_DOMAIN'),
    client_id=os.getenv('AUTH0_CLIENT_ID'),
    client_secret=os.getenv('AUTH0_CLIENT_SECRET'),
    secret=os.getenv('AUTH0_SECRET'),
    redirect_uri=os.getenv('AUTH0_REDIRECT_URI'),
    state_store=state_store,  # Almacenamiento personalizado
    authorization_params={'scope': 'openid profile email'}
)

Para la mayoría de las aplicaciones, el almacenamiento predeterminado basado en cookies es suficiente. El almacenamiento personalizado requiere implementar la interfaz StateStore. Consulte los ejemplos del SDK para ver implementaciones detalladas.

---

​

Problemas comunes

MissingRequiredArgumentError

Problema: Aparece “MissingRequiredArgumentError: secret” al iniciar la aplicación

Causa: Falta la variable de entorno AUTH0_SECRET o no se está cargando correctamente.

Solución:

1. Verifique que el archivo .env exista en la raíz del proyecto
2. Asegúrese de que python-dotenv esté instalado: pip install python-dotenv
3. Genere un nuevo secreto si es necesario: openssl rand -hex 64
4. Añádalo a .env: AUTH0_SECRET=your_generated_secret
5. Reinicie la aplicación Flask

Error de URL de callback inválida

Problema: Aparece el error “Callback URL mismatch” o “invalid_request” durante el inicio de sesión

Causa: El URI de redirección en tu código no coincide con el que está registrado en Auth0 Dashboard.

Solución:

1. Revisa tu archivo .env: AUTH0_REDIRECT_URI=http://localhost:5000/callback
2. Ve a Auth0 Dashboard → Applications → Your App → Settings
3. Agrega http://localhost:5000/callback a Allowed Callback URLs
4. Haz clic en Save Changes
5. Reinicia tu aplicación Flask

Errores en el bucle de eventos de AsyncIO

Problema: Aparece “RuntimeError: This event loop is already running” u otros errores asíncronos similares

Causa: La compatibilidad asíncrona de Flask 2.0+ puede presentar problemas con determinadas configuraciones.

Solución:

Instale Flask con compatibilidad asíncrona:

pip install "flask[async]"

Luego, reinicia la aplicación Flask.

Errores de «módulo no encontrado»

Problema: Aparece “ModuleNotFoundError: No module named ‘auth0_server_python’” o un mensaje similar

Causa: El SDK no está instalado o el entorno virtual no está activado.

Solución:

1. Asegúrese de que su entorno virtual esté activado:
   source venv/bin/activate  # macOS/Linux
   # o
   venv\Scripts\activate  # Windows
   
2. Instale el SDK:
   pip install auth0-server-python "flask[async]" python-dotenv
   
3. Verifique la instalación:

pip list | grep auth0

Error de ClaimDecodingFailed

Problema: Ves el error “ClaimDecodingFailed” o “Failed to decode claims” durante la autenticación

Causa: El token de ID o el token de acceso recibido de Auth0 no se pudo decodificar correctamente, normalmente por una de estas razones:

• Formato de JWT no válido
• Datos de sesión dañados
• Algoritmos de firma incompatibles
• Desajuste de reloj entre tu servidor y Auth0

Solución:

1. Asegúrate de que AUTH0_CLIENT_SECRET sea correcto en el archivo .env
2. Comprueba que la hora del sistema esté sincronizada (NTP):
   # macOS
   sudo sntp -sS time.apple.com
   
   # Linux
   sudo ntpdate -s time.nist.gov
   
3. Borra las cookies del navegador y reinicia la autenticación
4. Verifica que AUTH0_DOMAIN no incluya el prefijo https://
5. Comprueba que Auth0 Dashboard → Applications → Your App → Settings → Advanced → OAuth → JsonWebToken Signature Algorithm coincida con la configuración de tu SDK

Token caducado o inválido

Problema: Aparece el error “Token has expired” o “invalid_token”

Causa: El token de acceso o el token de ID ha superado su tiempo de validez, o la sesión ha expirado.

Solución:

1. El SDK gestiona automáticamente la renovación del token si incluye el scope offline_access:
   authorization_params={
       'scope': 'openid profile email offline_access',
   }
   
2. En el caso de las API, asegúrese de solicitar tokens nuevos:
   access_token = await auth0.get_access_token(
       audience='https://your-api.example.com',
       force_refresh=True  # Forzar la renovación si es necesario
   )
   
3. Ajuste el tiempo de validez de los tokens en Auth0 Dashboard → Applications → Your App → Settings → Advanced → OAuth
4. Implemente un manejo de errores adecuado para redirigir a los usuarios al inicio de sesión cuando los tokens expiren

CORS y errores entre orígenes

Problema: Aparecen errores de CORS o “Blocked by CORS policy” en la consola del navegador

Causa: El origen de tu aplicación no está configurado correctamente en Auth0.

Solución:

1. Añade tu origen en Auth0 Dashboard → Applications → Your App → Settings:
   • Allowed Web Origins: http://localhost:5000
   • Allowed Callback URLs: http://localhost:5000/callback
   • Allowed Logout URLs: http://localhost:5000
2. Para producción, añade las URL de producción:
   https://yourdomain.com
   https://yourdomain.com/callback
   
3. Asegúrate de que tu aplicación Flask tenga una configuración de CORS adecuada si llamas a las API de Auth0 desde JavaScript del frontend:
   from flask_cors import CORS
   CORS(app, origins=['http://localhost:5000'])
   

Se superó el límite de tasa

Problema: Ves errores de “Demasiadas solicitudes” o “Se superó el límite de tasa”

Causa: Tu aplicación ha superado los límites de tasa de Auth0 para las solicitudes de autenticación.

Solución:

1. Revisa Auth0 Dashboard → Monitoring → Logs para consultar los detalles del límite de tasa
2. Implementa retroceso exponencial para los reintentos:
   import time
   from auth0_server_python.error import ApiError
   
   async def login_with_retry():
       max_retries = 3
       for attempt in range(max_retries):
           try:
               return await auth0.start_interactive_login({}, g.store_options)
           except ApiError as e:
               if e.status_code == 429 and attempt < max_retries - 1:
                   wait_time = 2 ** attempt
                   time.sleep(wait_time)
               else:
                   raise
   
3. Revisa los límites de tu plan de suscripción de Auth0
4. Optimiza el flujo de autenticación para reducir las solicitudes de tokens innecesarias
5. Almacena los tokens en caché adecuadamente en lugar de solicitar nuevos con frecuencia