Streamlit - Microsoft MSAL Authentication

A Streamlit component for Microsoft Authentication Library (MSAL) integration

pip install msal-streamlit-authentication

Example: Local Project With Docker | Example: Deploy MSAL on Ploomber | Enterprise Support

Deploy Streamlit on Ploomber Cloud for Free

Overview

Important

🏢 Enterprise Support Available: Looking for advanced features, SLA, or dedicated support? Contact our team →

This Streamlit component enables seamless client-side authentication using:

• Azure Active Directory (AAD) work and school accounts
• Microsoft personal accounts (MSA)
• Social identity providers (Facebook, Google, LinkedIn, etc.) through Azure AD B2C

Built on the Microsoft MSAL JS Library, it supports any provider using OpenID Connect Authorization Code Flow (PKCE).

Quick Start

1. Register Your Application

   • Register a Single Page Application in Azure AD
   • Note your Client ID and configure redirect URIs for targeted final URI

2. Install the Package

   pip install msal-streamlit-authentication

3. Implementation Example

   value = msal_authentication(
       auth={
           "clientId": "YOUR_CLIENT_ID",
           "authority": "https://login.microsoftonline.com/YOUR_TENANT_ID",
           "redirectUri": "/",
           "postLogoutRedirectUri": "/"
       },
       cache={
           "cacheLocation": "sessionStorage",
           "storeAuthStateInCookie": False
       },
       login_request={
           "scopes": ["YOUR_SCOPE/.default"]
       }
   )

Configuration Guide

Required Configuration

• Client ID: Found in Azure Portal under "Application (client) ID"

  📷 Where to find Client ID

  

• Tenant ID: Found in Azure Portal under "Directory (tenant) ID"

  📷 Where to find Tenant ID

  

Optional Parameters

msal_authentication(
    # ... required config ...
    login_button_text="Login",          # Default: "Login"
    logout_button_text="Logout",        # Default: "Logout"
    class_name="css_button_class",      # CSS class selector
    html_id="button_id",                # HTML ID
    key="1"                             # Streamlit component key
)

Scopes Configuration

For more information on configuring scopes and permissions, see the official documentation.

Basic scope example:

login_request={
    "scopes": ["https://graph.microsoft.com/.default"]
}

Redirect URI

By default, MSAL uses the current page as the redirect URI. To customize:

auth={
    # ... other config ...
    "redirectUri": "/custom-path",
}

⚠️ All redirect URIs must be registered in your Azure portal application settings.

Additional Resources

• MSAL Documentation
• Azure AD B2C Overview
• MSAL JS GitHub Repository
• Deploy on Ploomber

Tip

Deploy Streamlit apps for free on Ploomber Cloud!

Acknowledgments

Built with inspiration from:

• Official Streamlit Component Template
• Streamlit NPM Component Library