Table of Contents
Setting up Descope
This tutorial was written by Gideon Idoko, a solution-driven software engineer and technical writer. Connect with him on his website or X to see more of his work!
With over a 96 percent increase in interest in the past year, Streamlit has rapidly gained popularity among data scientists and developers as a preferred tool for constructing interactive data applications. Its simplicity and powerful capabilities enable users to effortlessly transform data scripts into web apps that can be easily shared with others. However, as the usage of Streamlit applications continues to rise, there is an increasing need for effective user authentication and single sign-on (SSO) techniques.
User authentication is essential for safeguarding sensitive data and guaranteeing that only authorized users can access specific features of an app. SSO streamlines the login process, enabling users to authenticate once and effortlessly access multiple applications without the need to log in repeatedly.
In this article, you’ll learn how to use Descope, a flexible authentication and user management platform, to add authentication, SSO, and role-based access control to your Streamlit app.
Prerequisites
Before diving into the integration process, ensure you understand the basics of Python and Streamlit. You also need a Descope account, but don’t worry if you don’t have one yet—you’ll learn how to set one up shortly. The free tier will be sufficient for you to follow along.
Setting up Descope
Initially, go to the Descope sign-up page and register for an account. After that, you are taken to your Descope console. Create a new project by selecting + Project
from the drop-down menu on the top-left part of the console. The key functionalities of the console include creating projects, managing user roles, and configuring authentication flows. It also lets you configure your project settings in Settings > Project:

The Settings
page shows your project ID, among other information. The project ID uniquely identifies your project within the Descope platform. This ID is essential for the integration process as it’s required to connect your application to Descope. Make sure that you don’t store it directly in your codebase. Rather, employ environment variables to ensure the security of your credentials. Later, you will discover a good way to securely store and use the project ID in your Streamlit app.
Creating a Streamlit app
Now, let’s create a simple Streamlit app. Begin by creating a directory and, optionally, a virtual environment for the app on your local machine.
Install Streamlit with the following command:
Create an app.py
file in your app directory and paste the following snippet:
This creates a simple Streamlit app with title and text elements. Run the app using streamlit run app.py
. Streamlit then spins up the app on port 8051
in your browser.
You should get an output like this:

Implementing OAuth social logins with Descope
OAuth social logins enhance the user experience by simplifying registration and login processes. It leverages trusted platforms, such as Google or GitHub, to log users in. This system reduces security and increases conversion rates by lowering barriers to entry.
Configuring Descope as a federated identity provider for Streamlit
This section walks you through setting up Descope as a federated identity provider (IdP) for Streamlit and seamlessly integrating Google login with the application you created earlier.
Navigate to Build > Authentication Methods > Social Login (OAuth/OIDC) to see the various supported social logins that are available. Then select Google
:

Note: The Descope console provides an authentication account for all common social logins. There’s also an option to specify a different account for authentication if you prefer.
Let’s proceed with the Descope authentication account for Google and specify the redirect URL. The redirect URL is the location to send a user to after successful OAuth authentication. In this case, you want the user to return to the Streamlit app, so include the app’s URL, http://localhost:8051
, in the configuration provided, like this:

Remember, you can also provide the redirect URL programmatically.
Integrating Descope with your Streamlit app as its OAuth provider
Your Streamlit app needs to communicate with Descope, so install its Python SDK to facilitate the interaction:
You need a project ID to initialize Descope, so copy yours from the console settings, create a .streamlit/secrets.toml
file in the root directory of your app, and include the project ID, like this:
Initialize Descope in your app:
Next, update the code to create a button that starts the OAuth flow using the descope_client.oauth.start()
method:
Descope generates a Google sign-in URL upon starting the OAuth flow. The preceding code then redirects the user to that URL for authentication.
Your Streamlit app should now look like this:

Click the Sign In with Google
button, and you are redirected to the app with a code
query parameter after successfully authenticating via Google. This flow is called the authorization code flow. Shortly, you’ll exchange the code sent back to the app with a token to authenticate your users.
You can leverage the Streamlit st.query_params
method to pick the code from the URL state and the descope_client.sso.exchange_token()
method to exchange the code for a token. Descope also provides other information, like the user’s data and a refresh token that refreshes the short-lived token. With the Streamlit session state, you can persist this information across multiple runs and conditionally display the app’s content only if the token is available in the session state.
To persist the tokens and user data, update your code like this:
Now, your app’s content shows only when a user has been authenticated:

Implementing SAML SSO with Descope
The Security Assertion Markup Language (SAML) is the open standard for exchanging authentication and authorization data between these applications, often classified as either IdPs, like Okta, or service providers (SPs), like your Streamlit app. SAML SSO is a user authentication process that uses SAML to allow users to access multiple applications with a single login. It’s particularly beneficial for organizations that have many applications and want to simplify the login process for their users.
In the world of SSO, businesses or applications that use your app are associated with SSO tenants. A tenant allows you to group and manage users, permissions, and other aspects of a business within your application.
Configuring Okta as the IdP and Descope as the SP
This example uses Okta IdP for user account management. Let’s configure it to enable users to log in to your Streamlit app, which acts as the SP.
The initial step is to create a tenant. Go to the Tenants page in your Descope console and click + Tenant
:

Navigate to the tenant Authentication Methods
section, choose the SAML
protocol, and enter your email domain in the SSO Domains
field under the Tenant Details
settings:

Because Descope communicates with Okta on behalf of your Streamlit app, these apps need a way to establish a secure and trusted connection. This is where a metadata XML document comes in. You need to share Descope’s metadata with Okta and vice versa. Luckily, the Okta Descope integration streamlines the setup of Okta as an IdP.
Visit your Okta account and click Admin
to access your admin dashboard:

Select Applications > Applications
in the sidebar of your admin dashboard and click Browse App Catalog
to explore a comprehensive list of available integrations:

Look for “descope” using the search function and seamlessly incorporate the Descope integration. A new Okta app is created once the Descope integration is added:

Specify a label for the new Okta app in the General Settings
tab:

Switch to the Assignments
tab and assign users to your Okta app to specify the users that will have access to your Streamlit app via SSO:

Switch to the Sign-On Options
tab and select SAML 2.0
. Copy the Metadata URL
you see and paste it into the provided field for your tenant’s SSO Configuration
. Copy the ACS URL
and Entity ID
values from the same configuration section into the Advanced Sign-on Settings
on Okta:

Expand and update the Attribute Statements
and map the names firstName
, lastName
, email
, and uid
to the values user.firstName
, user.lastName
, user.email
, and user.id
, respectively. An attribute statement is part of SAML that provides supplementary details about a user. The mapping here specifies how these user details are communicated to Descope:

Head back over to Descope and update your tenant’s SSO Mapping
settings to remap the attributes from Okta to those of Descope, like this:

This marks the end of the configuration.
It’s worth noting that Descope provides a self-service SSO configuration tailored for multi-tenant environments. This solution allows each tenant to have a unique SSO configuration and empowers tenant admins to manage their Descope SSO settings directly through your application.
To use this feature, embed the out-of-the-box sso-config
flow into your application’s administration interface or generate a configuration link for tenant admins. Refer to the Descope documentation for detailed guidance.
Implementing the SSO flow in Streamlit
Let’s add another button under the Sign In with Google
button that starts the SSO flow when a user clicks it. You need your tenant’s ID to trigger the SSO flow, so go to the tenant settings, copy the ID, and paste it into your .streamlit/secret.toml
file with the DESCOPE_TENANT_ID
key.
Update the st.container
element in your code to include the button, like this:
Your Streamlit app should now look like this:

Click the Sign In with SSO
button, and you’ll be taken to Okta for verification. Verify with one of the users you assigned earlier, and afterward, you are redirected to your Streamlit app with a code query parameter like in the OAuth flow. Since you’ve already implemented the code exchange, you are signed in automatically:

Managing authorization and user privileges
While authentication verifies the user’s identity, authorization controls their access to resources and functionalities based on predefined roles and permissions. The Descope console has features to manage user roles and permissions, allowing you to control access within your Streamlit app. Once a user logs in, Descope can provide information about their roles and permissions, which can be used to enforce access control in your application.
All roles and permissions are on the Authorization page. A Tenant Admin
role is created by default, so let’s assign that to a user and conditionally display admin-specific content in your Streamlit app. Go to the Users page, click the kebab menu of the user you want to assign, and click Edit
:

This shows you a modal; select Tenant Admin
in the Roles
field and click Save
to assign the admin role to the user:

Update your code to show an admin indicator:
This should now be the view of the admin user when they’re signed in:

This approach guarantees that only authorized users can access specific features, thus enhancing the security and integrity of your app.
You can find the full code on GitHub.
Conclusion
In this article, you learned how to add authentication and SSO functionalities to your Streamlit app using Descope. You also learned the importance of securing your applications. Moreover, you learned the step-by-step process of setting up Descope, integrating OAuth social logins, implementing SAML SSO, and managing user roles and permissions for effective access control.
To explore how Descope can help you add secure, frictionless authentication to your apps, sign up for the Free Forever tier. Have questions about the platform? Book time with the team for a dedicated demo.