Ajouter la connexion à votre application Flask

Ajoutez l’authentification Auth0 à une application Web Flask avec connexion, routes protégées et profils utilisateur

Prérequis : Avant de commencer, assurez-vous d’avoir installé les éléments suivants :

• Python 3.9 ou une version ultérieure
• pip 20.0 ou une version ultérieure
• jq - Nécessaire pour configurer l’Auth0 CLI

Compatibilité avec les versions de Flask : Ce guide de démarrage rapide utilise Flask 2.0+ avec l’extra [async] pour la prise en charge de l’asynchrone.

​

Commencer

Ce guide de démarrage rapide montre comment ajouter l’authentification Auth0 à une application Flask. Vous créerez une application Web sécurisée avec une fonction de connexion, des routes protégées et l’accès au profil utilisateur à l’aide du SDK Python Auth0 WebApp.

1. Configurez votre environnement

   Créez un nouveau répertoire pour votre projet Flask :

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

   Créez un environnement virtuel :

   python -m venv venv
   source venv/bin/activate  # Sur Windows : venv\Scripts\activate
   
2. Installer les dépendances

   Créez requirements.txt pour suivre vos dépendances :

   requirements.txt

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

   Le fichier requirements.txt répertorie toutes les dépendances du projet. Pour les installer, exécutez :

   pip install -r requirements.txt
   
3. Configurez votre Auth0 App

   Ensuite, vous devez créer une nouvelle application sur votre tenant Auth0 et ajouter les variables d’environnement à votre projet.

   Vous pouvez configurer automatiquement votre application Auth0 en exécutant une commande CLI ou le faire manuellement via le Dashboard :

   CLI

   Exécutez la commande shell suivante dans le répertoire racine de votre projet pour créer une application Auth0 et générer un fichier .env :

   Mac

   # Installez Auth0 CLI (s’il n’est pas déjà installé)
   brew tap auth0/auth0-cli && brew install auth0
   
   # Configurez l’application Auth0 et générez le fichier .env
   auth0 qs setup --app --type regular --framework vanilla-python --port 5000 --name "My Flask App"
   

   Cette commande va :

   1. Vérifier si vous êtes authentifié (et vous inviter à vous connecter au besoin)
   2. Créer une Auth0 Regular Web Application configurée pour http://localhost:5000
   3. Générer un fichier .env avec AUTH0_DOMAIN, AUTH0_CLIENT_ID, AUTH0_CLIENT_SECRET, AUTH0_SECRET et AUTH0_REDIRECT_URI

   Dashboard

   Avant de commencer, créez un fichier .env à la racine de votre projet :

   .env

   # Configuration d’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. Accédez à Auth0 Dashboard → Applications → Applications
   2. Cliquez sur Create Application
   3. Donnez un nom à votre application (par ex., “My Flask App”) et sélectionnez Regular Web Application
   4. Cliquez sur Create
   5. Dans l’onglet Settings, configurez les éléments suivants :
      • Allowed Callback URLs : http://localhost:5000/callback
      • Allowed Logout URLs : http://localhost:5000
      • Allowed Web Origins : http://localhost:5000
   6. Cliquez sur Save Changes
   7. Remplacez YOUR_AUTH0_DOMAIN dans .env par votre Domain de l’onglet Settings (par ex., your-tenant.auth0.com)
   8. Remplacez YOUR_CLIENT_ID dans .env par votre Client ID
   9. Remplacez YOUR_CLIENT_SECRET dans .env par votre Client Secret

   Générez un secret sécurisé pour AUTH0_SECRET :

   openssl rand -hex 64
   

   Important : N’ajoutez jamais votre fichier .env au contrôle de version. Ajoutez-le à .gitignore.

4. Créez la configuration d’authentification, les routes et les modèles

   Créer des fichiers

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

   Et ajoutez les extraits de code suivants :

   Développement seulement : Cet exemple utilise de simples classes de stockage en mémoire (MemoryStateStore et MemoryTransactionStore) à des fins de démonstration. Ces mécanismes de stockage perdront toutes les données de session au redémarrage de votre application et ne fonctionneront pas dans des déploiements à plusieurs instances.

   Pour les applications de production, vous devez mettre en place un stockage persistant. Le SDK est indépendant du framework et exige que vous fournissiez des implémentations personnalisées de StateStore et de TransactionStore. Consultez les exemples officiels de stockage du SDK pour des conseils détaillés sur la mise en œuvre de Redis, PostgreSQL ou d’autres systèmes de stockage persistants.

5. Lancez votre application

   Démarrez le serveur de développement Flask :

   python app.py
   

   Votre application sera accessible à l’adresse http://localhost:5000. Le SDK Auth0 gère automatiquement les routes d’authentification.

Vérification

Vous devriez maintenant disposer d’une page de connexion Auth0 entièrement fonctionnelle accessible sur votre localhost

---

​

Utilisation avancée

Accéder aux jetons d’API

Si vous devez envoyer une requête à une API protégée, récupérez un jeton d’accès :

@app.route('/api-call')
@require_auth
async def api_call():
    try:
        # Obtenir un jeton d’accès pour votre API
        access_token = await auth0.get_access_token(
            audience='https://your-api.example.com',
            store_options=g.store_options
        )
        
        # Utiliser le jeton pour appeler votre 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

Pour utiliser cette fonctionnalité, vous devez :

1. Définir AUTH0_AUDIENCE dans votre fichier .env
2. Inclure offline_access dans vos scopes (pour les refresh tokens)
3. Mettre à jour authorization_params dans auth.py :
   authorization_params={
       'scope': 'openid profile email offline_access',
       'audience': os.getenv('AUTH0_AUDIENCE')
   }
   

Configuration du stockage personnalisé

Par défaut, le SDK utilise un stockage basé sur les cookies. Pour les environnements de production ayant des besoins particuliers (mise à l’échelle horizontale, partage de sessions entre services), vous pouvez configurer des backends de stockage personnalisés comme Redis ou PostgreSQL.

Quand utiliser un stockage personnalisé :

• Vous devez partager des sessions entre plusieurs serveurs
• Vos données de session dépassent les limites de taille des cookies
• Vous avez besoin d’une gestion centralisée des sessions pour le backchannel logout

Exemple avec Redis :

auth.py

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

# Initialiser un magasin d’état personnalisé
redis_client = redis.from_url(os.getenv('REDIS_URL', 'redis://localhost:6379'))
state_store = RedisStateStore(
    secret=os.getenv('AUTH0_SECRET'),
    redis_client=redis_client
)

# Passer à 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,  # Stockage personnalisé
    authorization_params={'scope': 'openid profile email'}
)

Pour la plupart des applications, le stockage par défaut basé sur les cookies suffit. Le stockage personnalisé exige l’implémentation de l’interface StateStore. Consultez les exemples du SDK pour voir des mises en œuvre détaillées.

---

​

Problèmes courants

MissingRequiredArgumentError

Problème : Vous voyez “MissingRequiredArgumentError: secret” au démarrage de l’application

Cause : La variable d’environnement AUTH0_SECRET est absente ou n’est pas chargée correctement.

Solution :

1. Vérifiez que votre fichier .env se trouve à la racine du projet
2. Assurez-vous que python-dotenv est installé : pip install python-dotenv
3. Générez un nouveau secret au besoin : openssl rand -hex 64
4. Ajoutez-le au fichier .env : AUTH0_SECRET=your_generated_secret
5. Redémarrez votre application Flask

Erreur : URL de rappel invalide

Problème : Vous voyez l’erreur “Callback URL mismatch” ou “invalid_request” lors de la connexion

Cause : Le Redirect URI dans votre code ne correspond pas à ce qui est enregistré dans Auth0 Dashboard.

Solution :

1. Vérifiez votre fichier .env : AUTH0_REDIRECT_URI=http://localhost:5000/callback
2. Accédez à Auth0 Dashboard → Applications → Votre application → Settings
3. Ajoutez http://localhost:5000/callback à Allowed Callback URLs
4. Cliquez sur Save Changes
5. Redémarrez votre application Flask

Erreurs de la boucle d’événements AsyncIO

Problème : Vous voyez “RuntimeError: This event loop is already running” ou une erreur asynchrone similaire

Cause : La prise en charge asynchrone de Flask 2.0+ peut poser problème avec certaines configurations.

Solution :

Installez Flask avec la prise en charge asynchrone :

pip install "flask[async]"

Redémarrez ensuite votre application Flask.

Erreurs « module introuvable »

Problème : Vous voyez “ModuleNotFoundError: No module named ‘auth0_server_python’” ou un message similaire

Cause : Le SDK n’est pas installé ou l’environnement virtuel n’est pas activé.

Solution :

1. Assurez-vous que votre environnement virtuel est activé :
   source venv/bin/activate  # macOS/Linux
   # ou
   venv\Scripts\activate  # Windows
   
2. Installez le SDK :
   pip install auth0-server-python "flask[async]" python-dotenv
   
3. Vérifiez l’installation :

pip list | grep auth0

ClaimDecodingFailed Error

Problème : Vous voyez l’erreur “ClaimDecodingFailed” ou “Failed to decode claims” pendant l’authentification

Cause : Le ID token ou le jeton d’accès reçu d’Auth0 n’a pas pu être décodé correctement, souvent pour l’une des raisons suivantes :

• Format JWT invalide
• Données de session corrompues
• Algorithmes de signature incompatibles
• Décalage horaire entre votre serveur et Auth0

Solution :

1. Assurez-vous que votre AUTH0_CLIENT_SECRET est correct dans le fichier .env
2. Vérifiez que l’heure de votre système est synchronisée (NTP) :
   # macOS
   sudo sntp -sS time.apple.com
   
   # Linux
   sudo ntpdate -s time.nist.gov
   
3. Effacez les cookies du navigateur et relancez l’authentification
4. Vérifiez que AUTH0_DOMAIN n’inclut pas le préfixe https://
5. Vérifiez que Auth0 Dashboard → Applications → Your App → Settings → Advanced → OAuth → JsonWebToken Signature Algorithm correspond à la configuration de votre SDK

Token expiré ou invalide

Problème : Vous voyez les erreurs “Token has expired” ou “invalid_token”

Cause : Le jeton d’accès ou l’ID token a dépassé sa durée de validité, ou la session a expiré.

Solution :

1. Le SDK gère automatiquement l’actualisation du jeton si vous incluez la portée offline_access :
   authorization_params={
       'scope': 'openid profile email offline_access',
   }
   
2. Pour les API, assurez-vous de demander de nouveaux jetons :
   access_token = await auth0.get_access_token(
       audience='https://your-api.example.com',
       force_refresh=True  # Forcer l’actualisation au besoin
   )
   
3. Ajustez la durée de validité des jetons dans Auth0 Dashboard → Applications → Your App → Settings → Advanced → OAuth
4. Prévoyez une gestion appropriée des erreurs afin de rediriger les utilisateurs vers la page de connexion lorsque les jetons expirent

CORS et erreurs d’origine croisée

Problème : Vous voyez des erreurs CORS ou “Blocked by CORS policy” dans la console du navigateur

Cause : L’origine de votre application n’est pas configurée correctement dans Auth0.

Solution :

1. Ajoutez l’origine de votre application dans 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. En Production, ajoutez vos URL de production :
   https://yourdomain.com
   https://yourdomain.com/callback
   
3. Assurez-vous que votre application Flask a une configuration CORS appropriée si elle envoie des requêtes aux API Auth0 depuis le code Javascript côté client :
   from flask_cors import CORS
   CORS(app, origins=['http://localhost:5000'])
   

Limite de requêtes dépassée

Problème : Vous voyez les erreurs “Too many requests” ou “Rate limit exceeded”

Cause : Votre application a dépassé les limites de débit d’Auth0 pour les requêtes d’authentification.

Solution :

1. Consultez Auth0 Dashboard → Monitoring → Logs pour obtenir des détails sur les limites de débit
2. Mettez en place une temporisation exponentielle pour les nouvelles tentatives :
   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. Vérifiez les limites de votre forfait d’abonnement Auth0
4. Optimisez le flux d’authentification pour réduire les requêtes de jeton inutiles
5. Mettez les jetons en cache de façon appropriée au lieu d’en demander souvent de nouveaux