msal-streamlit-auth 1.1.4

Streamlit auth library based on MSAL.JS

Streamlit - Microsoft MSAL Authentication

This project is a fork of Ploomber's msal-streamlit-authentication

A Streamlit component for Microsoft Authentication Library (MSAL) integration

pip install msal-streamlit-auth

Example: Local Project With Docker

Overview

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",
           "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

Acknowledgments

Built with inspiration from:

• Official Streamlit Component Template
• Streamlit NPM Component Library
• Based on Ploomber's msal-streamlit-authentication