DEV Community: Sohini Pattanayak

Skip the Extra Login Screen with Auth0’s `authorizationParams`

Sohini Pattanayak — Fri, 13 Jun 2025 19:48:15 +0000

Disclaimer: The views expressed in this post are my own and do not reflect those of Okta or its affiliates.

What We're Trying to Achieve?

In many enterprise environments - especially SMBs using digital portals, customers ask for a streamlined login experience:

User clicks “Log In” in your App.
They are immediately redirected to their company’s IdP (e.g. Azure AD, Okta).
They do not want to see an Auth0-branded login page.
After authentication, they return to your application seamlessly.

In this flow, Auth0 acts purely as a broker between your application and the enterprise IdP. It handles OAuth 2.0/OIDC mechanics security, PKCE, state, tokens-while allowing you to maintain full control over the user experience and comply with enterprise firewall requirements.

The Role of `authorizationParams`

Using the @auth0/auth0-react SDK, I've passed key parameters directly to Auth0’s /authorize endpoint through authorizationParams:

loginWithRedirect({
  authorizationParams: {
    connection: 'your-connection-name',
    redirect_uri: 'https://yourapp.com/callback'
  }
});

connection specifies the enterprise IdP to use, skipping Auth0's Universal Login entirely.

redirect_uri defines where Auth0 sends users after successful login.

The SDK automatically includes essential OAuth parameters (client_id, state, PKCE, etc.).

This yields a one-click, one-redirect flow, matching user expectations in a polished enterprise portal.

But then what's the point of Auth0 here?

Auth0 simplifies authentication without compromising enterprise standards:

Identity broker: Supports OIDC, SAML and multiple IdPs with minimal configuration.
Secure token handling: Issues ID tokens and refresh tokens securely, following best practices.
Controlled redirects: Enforces redirect_uri whitelist—critical for firewall compliance.
Scalable and flexible: Handling multiple enterprise IdPs requires only updating the connection parameter.
Minimal build effort: No need to build or manage login UIs, PKCE, session handling, or protocol compliance.

As a Solutions Engineer, I've worked with multiple SMBs requiring:

White‑label branding: Users should see only the company portal and their corporate IdP—not Auth0 branding.
Firewall whitelisting: Login URLs must be static and predictable.
Multiple enterprise clients: They may serve partners using Azure AD, Okta, Ping, etc.

This pattern delivers a seamless, compliant, branded experience with minimal overhead.

Here's a sample react code that i wrote using the auth0-react sdk for a short demo i created -

// App.js
import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';

function App() {
  const { loginWithRedirect, isAuthenticated, user, logout } = useAuth0();

  const loginToIdP = () => {
    loginWithRedirect({
      authorizationParams: {
        connection: 'your-connection-name'
      }
    });
  };

  return (
    <div style={styles.container}>
      {!isAuthenticated ? (
        <div style={styles.loginBox}>
          <img src="/logo.png" alt="Company Logo" style={styles.logo} />
          <h1 style={styles.heading}>Welcome to Evolve</h1>
          <p style={styles.description}>
            Log in using your company’s single sign-on.
          </p>
          <button style={styles.loginButton} onClick={loginToIdP}>
            Log in
          </button>
        </div>
      ) : (
        <div style={styles.sessionBox}>
          <h3>Welcome, {user.name}</h3>
          <button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}>
            Log Out
          </button>
        </div>
      )}
    </div>
  );
}

// ... styles omitted for brevity

export default App;

And this is the index.js - It Defines key OAuth parameters: redirect_uri for where users return after login
client_id, token settings, and PKCE flows are handled under the hood by the SDK

// index.js
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Auth0Provider } from '@auth0/auth0-react';
import App from './App';

const domain = "your-auth0-app-domain-name";
const clientId = "your-auth0-app-client-id";

createRoot(document.getElementById('root')).render(
  <Auth0Provider
  domain={domain}
  clientId={clientId}
  authorizationParams={{
    connection: 'your-connection-name',
    response_type: 'code',
    redirect_uri: 'http://localhost:3000/callback',
  }}
>

    <App />
  </Auth0Provider>
);

One button triggers direct login via Azure AD. From the user's perspective, it’s a single click experience. Auth0 manages the entire auth protocol quietly in the background.

What’s Configured in the Auth0 Tenant?

In the Auth0 dashboard, you’ll set up:

Application with:

Allowed Callback URL matching https://yourapp.com/callback
Enterprise connection
Optional custom domain for full branding (auth.yourcompany.com)

By combining Auth0’s enterprise-grade broker capabilities with a simple authorizationParams configuration, you get:

A frictionless, branded login experience.
Full enterprise security and compliance.
Scalable support for multiple IdPs—all with minimal development effort.
This pattern is ideal for partner portals, retailer dashboards, and B2B apps needing polished user experiences with enterprise authentication standards.

Watch this video to get a demo!

Using Auth0 to Authenticate External Users into SharePoint via Microsoft Entra

Sohini Pattanayak — Tue, 27 May 2025 11:21:16 +0000

Disclaimer: The views expressed in this post are my own and do not reflect those of Okta or its affiliates.

This write-up walks through how to set up Auth0 as a SAML Identity Provider (IdP) with Microsoft Entra ID, specifically to support external user login to SharePoint Online without needing to pre-create their accounts in Azure AD.

It’s especially useful if you already manage your external customers or partners in Auth0 and want Microsoft Entra to take care of Just-in-Time (JIT) provisioning the first time a user logs in.

While Okta Workforce Identity is a more complete solution for this scenario, the same can be achieved using Auth0 — especially if you're already using Auth0 to manage authentication for other apps.

Let's assume that users do not yet exist in Auth0. They will be created at the time of login via an invite flow built through sharepoint site, your app or signup portal.

Flow

Let external users authenticate through Auth0
Redirect login requests from Microsoft Entra to Auth0
Automatically create the user in Microsoft Entra ID (JIT) when they log in for the first time
Grant access to SharePoint Online

Set Up a SAML Connection in Auth0

Go to Auth0 Dashboard → Applications → Applications → + Create Application
- Name it something like SAML for Entra
- Choose Regular Web Application

In the newly created application, go to Addons → Enable SAML2 Web App

Once enabled, it pops up a few configurations, simply click on download

From the usage tab, switch over to the settings tab and don't forget to paste this - https://login.microsoftonline.com/login.srf in the Application Callback URL. The SAML token will be posted in this URL when the user tries to sign in.

Close the SAML add on pop up and navigate to the settings tab of your Regular Web App, scroll down to the section that says - Application URIs and make sure that you place the same URL on these 3 input fields - Allowed Callback URLs, Allowed Logout URLs, Allowed Web Origins

Configure Microsoft Entra to Trust Auth0

Go to Microsoft Entra Admin Center
- Navigate to: Entra ID → External Identities → All Identity Providers → Custom

Click Add new > SAML/WS-Fed

Fill in the following:
- Display name: Auth0 Federation
- Protocol: SAML
- Domain name of federating IdP: You can put down the domain name from your Auth0 Regular Web App. To fetch that, go to your Auth0 Tenant > Applications > Saml for Entra > Settings > Domain or if you'd like to use your own domain e.g., customers.example.com, you'd need to look at the next step on how to add DNS TXT Record for Federation Validation (the domain of the users you'll authenticate)

💡 In Auth0, domain names of apps are defined by the tenant name. However, if you'd want to learn more about custom domains, this is a good documentation to go over that - Custom Domains

After you've put in the domain in your Entra ID Tenant (Refer to the first image above), navigate to the dropdown field that says - Select a method for populating metadata
and choose - Parse metadata file, and upload the metadata XML downloaded from Auth0

Add DNS TXT Record for Federation Validation

If your Auth0 domain (e.g., your-tenant.auth0.com) does not match the email domain of your users (e.g., @customers.example.com), you'll need to prove domain ownership by adding a DNS TXT record.

In the DNS settings for customers.example.com, add:

@ IN TXT DirectFedAuthUrl=https://your-tenant.auth0.com/samlp/<client_id>

Replace <client_id> with the client ID of your Auth0 SAML app
Wait 10–30 minutes for the DNS to propagate
Use tools like nslookup or Google’s DIG to verify

Enable User Sign-ins using Auth0

Ensure that:

The application has that database connection enabled under Connections → Database

Optional: Customize the signin page using Auth0's Universal Login

For this demo - the name of my organization is Echoes Enterprise, and so I have kept the branding that way. You'll also see my sharepoint site url to be the same.

Invite the User in SharePoint

To invite a user, navigate to the Sharepoint Site, and click on Site Access.

Enter the user's email (e.g., alice@identity-stack-001.cic-demo-platform.auth0app.com)
Click Invite
Go to your Auth0 Tenant and now create the same user

The user will receive a link to access the resource. When they click it:

Microsoft Entra detects the federated domain
Redirects to Auth0
Auth0 authenticates the user
Microsoft Entra JIT-provisions the user
The user is granted access (e.g., SharePoint Online)

Success Criteria (What Happens Behind the Scenes) - Important for your understanding!

When the user clicks the invite link or tries to access SharePoint:

Microsoft Entra detects the user’s email domain and recognizes it as federated.
Entra redirects the login request to Auth0’s SAML endpoint.
The user lands on Auth0’s Universal Login Page and enters their credentials.
Auth0 authenticates the user, then issues a SAML Response back to Entra with claims like: NameID (persistent format), emailaddress(optional), upn, name, etc.
Microsoft Entra validates the SAML assertion, and if successful:
- Creates a guest user (JIT)
- Grants access to the SharePoint resource
At no point is the user created ahead of time in Entra — they are auto-provisioned upon first successful login.

To watch the end user flow for Alice, watch this video

🛠 Common Pitfalls

Issue	Fix
`AADSTS50020` (user not found)	Make sure the user was invited in Entra
Federation domain rejected	Add the required TXT record in DNS
Auth0 doesn't send correct claims	Check `mappings` and SAML Action overrides
JIT fails despite invite	Ensure SAML assertion contains `NameID` and `emailaddress` claims

Final Thoughts

This integration allows you to decouple external user authentication from Azure AD, while still keeping governance within Microsoft Entra. It's ideal if you're managing users in Auth0 and want a seamless way to provide access to Microsoft resources — like SharePoint — without duplicating identities across systems.

Building a Real-Time Collaborative Notes Application with htmx 2.0

Sohini Pattanayak — Fri, 05 Jul 2024 22:05:54 +0000

Hey everyone! 👋

If you caught my blog last week about Remix and React Router, you know I've been diving into new technologies over the weekends. This time, I decided to play around with htmx 2.0, and I came up with a neat little project: a real-time collaborative notes application. Let me tell you all about it! 🚀

What I Built

I built a collaborative notes application where you can add, edit, and delete notes in real-time. The coolest part? All of this is done with minimal JavaScript, thanks to htmx!

Why htmx 2.0?

htmx 2.0 is pretty awesome for a few reasons:

Partial Page Updates: You can update specific parts of a webpage without refreshing the whole thing.
Enhanced Interactivity: It helps you create interactive web apps with less JavaScript.
Simplified Data Handling: Managing data operations dynamically is super easy with htmx.

Key Features

Real-time Updates: Add, edit, and delete notes, and see changes instantly.
Minimal JavaScript: htmx handles dynamic content updates for us.
Server-Side Rendering: Notes are rendered on the server and updated dynamically on the client side.

Code Snippets

Here are some snippets to show how I used htmx:

Adding a New Note:

<form id="add-note-form" hx-post="/add-note" hx-swap="beforeend:#notes-list" class="add-note-form">
    <input type="text" name="title" placeholder="Note Title" required>
    <textarea name="content" placeholder="Note Content" required></textarea>
    <button type="submit">Add Note</button>
</form>

This form uses htmx’s hx-post to send the new note to the server and hx-swap to append the note to the list without reloading the page.

Editing a Note:

<button class="edit-button" hx-get="/edit-note/${note.id}">Edit</button>

The edit button sends a GET request to fetch the edit form for a specific note, allowing in-place editing.

Deleting a Note:

<button class="delete-button" hx-delete="/delete-note/${note.id}">Delete</button>

The delete button sends a DELETE request to remove the note, instantly updating the UI.

Project Structure

index.html: The main HTML file.
server.js: A simple Express.js server to handle requests.
style.css: Basic styling for the application.

You can find the complete code for this project on my GitHub repository.

Conclusion

This project was a lot of fun and showcased the power of htmx 2.0 for creating dynamic web applications. I hope you find this project as exciting as I did!

Check out the screenshot below to see the app in action:

Happy coding! ✨
Sohini

Building a Modern Blog with Remix and React Router

Sohini Pattanayak — Sat, 29 Jun 2024 18:46:48 +0000

Hey everyone! 🎉

This weekend, I decided to roll up my sleeves and dive into something new: building a blog using Remix and React Router. As someone who loves staying hands-on with the latest tech, this was the perfect opportunity to explore what these tools have to offer.

Why Remix and React Router?

Remix and React Router are a powerful combo for modern web development. Remix is a full-stack framework that leverages the best of React and the web platform to create fast, slick, and scalable applications. React Router, as the go-to standard for routing in React apps, complements Remix perfectly.

The Project: What We Did with Remix

Setting Up the Project

Getting started with Remix is straightforward. Here's a quick rundown:

Install Remix: Create a new Remix project with this command:

   npx create-remix@latest

Set Up Your Routes: In Remix, routing is file-based. Just create files in the routes directory, and they automatically become routes in your app.

Here's a peek at my routes:

`app/routes/index.jsx`

import { Link } from "@remix-run/react";

export default function Index() {
  return (
    <div>
      <h1>Welcome to the Blog</h1>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/posts">Posts</Link></li>
        </ul>
      </nav>
    </div>
  );
}

This snippet shows off Nested Routing. The navigation links let users switch between different routes (/, /about, and /posts), rendering components within the main layout.

`app/routes/about.jsx`

export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This blog is built with Remix and React Router, showcasing modern web development.</p>
    </div>
  );
}

`app/routes/posts.jsx`

import { Link, useLoaderData } from "@remix-run/react";

// Define the loader function to fetch data
export let loader = async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await response.json();
  return posts;
};

export default function Posts() {
  const posts = useLoaderData();
  return (
    <div>
      <h1>Posts</h1>
      <Link to="new">Create New Post</Link>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link to={`/posts/${post.id}`}>{post.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

This part highlights Data Loading and Mutations. The loader function fetches data from an API endpoint (https://jsonplaceholder.typicode.com/posts), and the useLoaderData hook accesses this data within the component. It makes data fetching a breeze, integrating seamlessly into the component lifecycle.

Handling Layouts and Links

In Remix, you can define a root component (this is key ⭐️) to handle the layout, including meta tags, links, scripts, and live reload functionality. Here’s how my app/root.jsx looks:

import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

export const links = () => {
  return [
    { rel: "stylesheet", href: "/styles.css" }
  ];
};

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <header>
          <h1>Welcome to the Blog</h1>
        </header>
        <nav>
          <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/posts">Posts</a></li>
          </ul>
        </nav>
        <div className="container">
          <Outlet />
        </div>
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

This setup shows off Progressive Enhancement and Nested Routing. The Links, Meta, and Scripts components ensure the app is well-structured, SEO-friendly, and progressively enhanced. The Outlet component is used for nested routing, rendering different child components within the main layout.

Lessons Learned

Working on this project, I faced some challenges with environment configuration and resolving module issues. But overcoming these hurdles wasn't tiring at all! Fun experience 😎

Conclusion

This project was more than just building a blog, it was about exploring the capabilities of Remix and React Router and keeping my technical skills sharp. It's a powerful tool that can enhance your development workflow significantly for sure!!

Stay tuned for more updates, and happy coding! 🚀

Sohini ❤️

Part 1 - LittleHorse Advanced Concept Series: Conditionals

Sohini Pattanayak — Wed, 27 Mar 2024 11:09:54 +0000

Welcome to our blog series on IT Incident Management using LittleHorse! If you're into coding, workflow automation, or just looking to up your IT game, you're in the right place. This series will walk you through creating responsive and efficient workflows to manage IT incidents like a pro. As a bonus, this series will introduce many key LittleHorse concepts that will allow you to apply LittleHorse to any domain, not just IT incident management.

While dealing with IT incident management, being able to make decisions based on different scenarios is key. That's where conditionals come into play. Think of conditionals as the decision-makers in your workflow, helping your system figure out what to do next based on what's happening.

Conditionals allow your workflows to behave differently depending on the situation, rather than repeatedly doing the same thing over-and-over (like BB-8 above).

Let's set the stage for our incident management system.

Our mission?

To develop a workflow that can identify IT incidents, figure out how serious they are, and take action. We'll break it down into two main types of incidents: the "Oh no!" kind (critical) and the "We've got this" kind (non-critical). Along the way, we’ll become LittleHorse pro’s so that you can apply LittleHorse to any business domain, whether related to IT incident management or otherwise.

To get started, make sure you have completed the below steps:

Have LittleHorse installed on your computer.
Have docker up and running

Once we’re all set with the above prerequisites, we’ll build a system that intelligently assesses IT incidents and decides the best course of action.

Creating the Workflow

Our first step is to create the file ConditionalsExample.java. This is where we'll map out the logic that determines how our workflow will handle incidents. Open up your favorite Java IDE or text editor, and let's get started.

Defining the Workflow Structure

In ConditionalsExample.java, we'll start by defining our workflow structure. Here's a simple outline to get us started:

package lh.it.demo;

import io.littlehorse.sdk.common.proto.*;
import io.littlehorse.sdk.wfsdk.*;

public class ConditionalsExample {

    public static final String WF_NAME = "it-incident";
    public static final String VERIFY_TASK = "verify-incident";
    public static final String SEND_CRITICAL_ALERT_TASK = "send-critical-alert-task";
    public static final String PERIODIC_CHECK_TASK = "periodic-check-task";

    public void defineWorkflow(WorkflowThread wf) {
        // We'll flesh this out in a moment
    }

    public Workflow getWorkflow() {
        return Workflow.newWorkflow(WF_NAME, this::defineWorkflow);
    }

    // Additional methods will go here

}

This sets up a class ConditionalsExample that will hold our workflow logic. We've also declared constants for our workflow name and task names, which will come in handy later. These constants have specific use case:

WF_NAME: Identifies the workflow, used to start or reference it within LittleHorse.

VERIFY_TASK: Represents a task that checks and categorizes the incident details.

SEND_CRITICAL_ALERT_TASK: Triggers an alert mechanism for incidents deemed critical.

PERIODIC_CHECK_TASK: Executes regular checks to update the status of an ongoing incident.

The variables we define in our workflow are not standalone; they interact and often depend on each other. For instance, the incidentSeverity variable determines whether to run the VERIFY_TASK or not. Similarly, the outcome of VERIFY_TASK might affect whether SEND_CRITICAL_ALERT_TASK is executed.

Implementing Conditional Logic

Now, we'll add the brains of our operation: the conditional logic. This logic checks incident severity and routes the workflow accordingly:

// Inside ConditionalsExample.defineWorkflow method

WfRunVariable incidentSeverity = wf.addVariable("severity", VariableType.INT);

WorkflowCondition isCritical = wf.condition(incidentSeverity, Comparator.GREATER_THAN, 5);

wf.doIf(
    isCritical,
    ifBody -> {
        ifBody.execute(VERIFY_TASK, incidentSeverity);
        // We'll add more here later
    }
);

This code snippet introduces a workflow variable incidentSeverity and a conditional isCritical. If the severity of an incident is above 5, the workflow considers it critical and executes the VERIFY_TASK. You can check out our youtube tutorial on this example to develop a comprehensive idea of how conditionals work out!

Building Out the Workflow

With our conditionals set up, we'll now chalk out what happens in the critical and non-critical paths. But before we do that, let's pause and understand why this matters.

Conditionals are powerful because they allow our workflow to be not just a static sequence of tasks but a dynamic, decision-making process. Depending on the severity of an incident, our workflow can trigger alerts, involve different team members, or escalate issues automatically.

Why can’t we test the command yet?

To test if conditionals are fully working, we need to pass a command through our terminal. We cannot run it at this point because our workflow is not fully implemented. We have just begun to sketch out the structure in ConditionalsExample.java. The lhctl run command is used to initiate a workflow when all components, including the main application file (App.java) and the task definition files, are complete and integrated.

Next Steps

In our next blog post, we'll continue building our ConditionalsExample.java, adding more tasks and integrating more advanced LittleHorse features. We'll see how our workflow can not only detect and verify incidents but also take proactive steps to resolve them.

Interpreting Loan Predictions with TrustyAI: Part 3

Sohini Pattanayak — Wed, 08 Nov 2023 13:56:07 +0000

Implementing Visualizations

Hello again, dear readers! In our previous sessions, we understood LIME explanations in TrustyAI and implemented a simple linear model to explain loan approvals. While seeing the saliency values of each feature is insightful, a graphical representation can offer a clearer understanding of model decisions. Let's delve deeper!

Creating a LIME Feature Impact Visualization

Before we begin, ensure you've gone through Part 2 of our series.

1. Setting Up:

Ensure you've imported the necessary libraries:

import matplotlib.pyplot as plt

2. Generating LIME Explanations:

Using the TrustyAI library, generate the LIME explanations for your model as shown in the previous tutorial.

3. Visualizing Feature Impact:

Each feature's impact can be visualized as a bar in a bar chart. The height (positive or negative) indicates the magnitude of influence, and the color (blue for positive, red for negative, and green for the most influential) signifies the nature of the impact.

# Transform the explanation to a dataframe and sort by saliency
    exp_df = lime_explanation['output-0'].sort_values(by="Saliency")

4. Extract feature names and their saliencies

 y_axis = list(exp_df['Saliency'])
    x_axis = ["Annual Income", "Number of Open Accounts", "Late Payments", "Debt-to-Income Ratio", "Credit Inquiries"]

    # Color-coding bars
    colors = ["green" if value == max(y_axis) else "blue" if value > 0 else "red" for value in y_axis]

    # Plotting
    fig, ax = plt.subplots()
    ax.set_facecolor("#f2f2f2")
    ax.bar(x_axis, y_axis, color=colors)
    plt.title('LIME: Feature Impact on Loan Approval Decision')
    plt.xticks(rotation=45, ha='right')
    plt.axhline(0, color="black")  # x-axis line
    plt.show()

And there you go!

Like the blog? Do hit a Like, send me some unicorns, and don't forget to share it with your friends!

Thank you!

Interpreting Loan Predictions with TrustyAI: Part 2

Sohini Pattanayak — Sat, 28 Oct 2023 10:22:04 +0000

A Developer’s Guide

In the previous blog, we gained a good overview of the use case of TrustyAI and developed an understanding of the goal of our tutorial today. If not, you can go through the previous blog again - Part 1: An Overview

Let’s get started now! 🚀

Once we have our environment ready with our demo.py file open, we’ll first import all the necessary libraries for this tutorial -

import numpy as np
from trustyai.model import Model
from trustyai.explainers import LimeExplainer

In the first three lines, we're importing the necessary libraries:

numpy: A library in Python used for numerical computations. Here, it will help us create and manipulate arrays for our linear model.
Model: This class from TrustyAI wraps our linear model, allowing it to be used with various explainers. TrustyAI library supports any type of model, it is enough to specify the predict function to invoke.
LimeExplainer: The main attraction! LIME (Local Interpretable Model-Agnostic Explanations) is a technique to explain predictions of machine learning models.

You can learn more about LIME from here - How does the LIME Method for Explainable AI work?

Now, we'll define a set of weights for our linear model using the numpy function np.random.uniform(). These weights are randomly chosen between -5 and 5 for our five features. These weights determine the importance of each feature in the creditworthiness decision.

weights = np.random.uniform(low=-5, high=5, size=5)
print(f"Weights for Features: {weights}")

We’ll build the Linear Model now, it’ll represent our predictive model. It will calculate the dot product between the input features x and the weights. This dot product gives a score, representing the creditworthiness of an applicant.

def linear_model(x):
    return np.dot(x, weights)

It’s time to wrap up our linear function, Using TrustyAI's Model class preparing it for explanation.

model = Model(linear_model)

Let us create a random sample of data for an applicant. The data is an array of five random numbers (each representing a feature like annual income, number of open accounts, etc.). We then feed this data to our model to get predicted_credit_score.

applicant_data = np.random.rand(1, 5)
predicted_credit_score = model(applicant_data)

Once this is done, the crucial part comes in. We initialize the LimeExplainer with specific parameters.

lime_explainer = LimeExplainer(samples=1000, normalise_weights=False)
lime_explanation = lime_explainer.explain(
    inputs=applicant_data,
    outputs=predicted_credit_score,
    model=model)

We then use this explainer to explain our model's prediction on the applicant's data. The lime_explanation object holds the results.

And then we display the explanation -

print(lime_explanation.as_dataframe())

Based on the predicted_credit_score, we provide a summary. If the score is positive, it indicates the applicant is likely to be approved, and vice versa.

And finally, we loop through our features and their respective weights, printing them out for clarity.

print("Feature weights:")
for feature, weight in zip(["Annual Income", "Number of Open Accounts", "Number of times Late Payment in the past", "Debt-to-Income Ratio", "Number of Credit Inquiries in the last 6 months"], weights):
  print(f"{feature}: {weight:.2f}")

And that is it! You can now find the complete code below!

import numpy as np
from trustyai.model import Model
from trustyai.explainers import LimeExplainer

# Define weights for the linear model.

weights = np.random.uniform(low=-5, high=5, size=5)
print(f"Weights for Features: {weights}")

# Simple linear model

def linear_model(x):
    return np.dot(x, weights)

model = Model(linear_model)

# Sample data for an applicant

applicant_data = np.random.rand(1, 5)
predicted_credit_score = model(applicant_data)

lime_explainer = LimeExplainer(samples=1000, normalise_weights=False)
lime_explanation = lime_explainer.explain(
    inputs=applicant_data,
    outputs=predicted_credit_score,
    model=model)

print(lime_explanation.as_dataframe())

# Interpretation

print("Summary of the explanation:")
if predicted_credit_score > 0:
  print("The applicant is likely to be approved for a loan.")
else:
  print("The applicant is unlikely to be approved for a loan.")

# Display weights

print("Feature weights:")
features = ["Annual Income", "Number of Open Accounts", "Number of times Late Payment in the past", "Debt-to-Income Ratio", "Number of Credit Inquiries in the last 6 months"]
for feature, weight in zip(features, weights):
  print(f"{feature}: {weight:.2f}")

Interpretation of the Output:

Running the code gives us the following output:

These weights are influential in shaping the model's decision. For instance, the "Annual Income" has a weight of -2.56, suggesting that an increase in the annual income might negatively impact the creditworthiness in this model – a rather unexpected observation, highlighting an area Jane might want to reassess.

Additionally, with the help of the LimeExplainer, we obtain the saliency of each feature. A higher absolute value of saliency indicates a stronger influence of that feature on the decision.

Conclusion:

Through TrustyAI, Jane not only developed a predictive model but also successfully interpreted its decisions, ensuring compliance with financial regulations. This tutorial underscores the importance of interpretability in machine learning models and showcases how developers can harness TrustyAI to bring transparency to their solutions.

Developers keen on adopting TrustyAI should consider its vast range of capabilities that go beyond LIME, offering a comprehensive suite of tools to make AI/ML models trustworthy. As data-driven decisions become ubiquitous, tools like TrustyAI will become indispensable, ensuring a balance between model accuracy and transparency.

Like the blog? Do hit a Like, send me some unicorns, and don't forget to share it with your friends!

Interpreting Loan Predictions with TrustyAI: Part 1

Sohini Pattanayak — Fri, 27 Oct 2023 09:32:22 +0000

An Overview

Introduction

AI/ML predictive models are essential for decision-making, but they need to be both accurate and interpretable, especially in regulated industries. TrustyAI provides the tools to understand and explain model decisions.

Imagine a bank using a machine learning model as part of the logic to approve loans. The model is accurate and has helped the bank make more profitable decisions. However, the bank needs to be able to explain why the model approved or denied a loan to a particular applicant. This is where TrustyAI can help!

TrustyAI can provide the bank with insights into the model's decision-making process, helping to ensure transparency and fairness.

Background

Jane, a data scientist at a bank, is building a model to predict applicant’s loan creditworthiness based on specific features. But there's a catch. Regulatory mandates stipulate that any loan decisions made by the bank must be interpretable. Hence, declining an application isn't enough!

There has to be an explanation behind this decision.

The Predictive Model:

The features Jane considers for her model are:

Annual Income
Number of Open Accounts
Number of times Late Payments in the past
Debt-to-Income ratio
Number of Credit Inquiries in the last 6 months

Jane's initial model is a straightforward linear one, with weights assigned to each feature based on their importance.

Before we get started on the actual code in the next part of this blog, make sure to follow the prerequisites before you plan on executing the code.

Prerequisites

Python: Ensure you have Python version 3.8 or higher. If not, download and install it from the official Python website.

Pip: Pip, the package installer for Python, should be installed by default with Python >=3.8, or we can also use an online platform like Binder or Google Collab

IDE: An Integrated Development Environment (IDE) makes it easier to write and run Python code. Some popular options include PyCharm or VsCode

A virtual environment is a self-contained directory that contains a Python installation for a particular version of Python, plus a number of additional packages, hence please create that.

With your virtual environment activated, it's time to install the trustyAI package: pip install trustyai

You're now ready to proceed with the tutorial.

For this tutorial, I have taken all references from the TrustyAI Python Documentation website - https://trustyai-explainability-python.readthedocs.io/en/latest/, you can follow this to build similar examples.

Follow the next blog to get started with the technical tutorial for this example!

Entando 7.2: The ultimate feature release

Sohini Pattanayak — Wed, 14 Jun 2023 08:23:52 +0000

Entando has just released its latest version, Entando 7.2. This new release builds on the platform's strengths and provides even more powerful tools for enterprises that need to create scalable, modular, and flexible web applications.

This latest version of Entando introduces several new features that enhance the platform's capabilities for modernising and building web applications.

In this blog post, we'll take a closer look at the key features and benefits of Entando 7.2.

What's New in Entando 7.2?

This release will provide users with several new capabilities to enhance their experience.

Hub 3.1 - Private Catalogs and More

Entando 7.2 presents an upgraded Hub 3.1, with the option to create private catalogs. Each installation of the enterprise Entando Hub can have many catalogs, some public and some private, all managed from the Hub UI. A new feature in the Hub UI generates API keys, which is required for connecting a private catalog to an Entando App Builder, making it easier to access shared components.

Multitenancy

A significant new feature on Entando 7.2 is multitenancy. With it, a single Entando instance can support multiple tenants, each with its own subdomain or domain. This allows for full isolation of data and content associated with each tenant. Additionally, each tenant has its own identity domain, managed via distinct realms of the same or different Keycloak instances. Redis is used for cache management, Apache Solr for enterprise search, and Entando's Content Delivery Server (CDS) for static asset and content delivery. And with Liquibase implementation to configure and update databases, managing multiple tenants has never been easier.

Entando Blueprint Upgrade to JHipster 7.9.3 and Keycloak 18+ Support

The Entando Blueprint has been upgraded to JHipster 7.9.3, including updates to the Entando bill of materials (BOM) and support for Keycloak 18+.

Performance, Security, and Dependency Improvements

In addition to multitenancy and other major upgrades, Entando 7.2 includes numerous performance, security, and dependency improvements.

Entando 7.2 is a major feature release that brings a wealth of new options and improvements to the platform. With support for multitenancy, private catalogs with the Entando Hub, and upgrades to the Entando Blueprint, your enterprise can take advantage of the latest and significant web development technologies.

So what are you waiting for? Upgrade to Entando 7.2 today and take your enterprise's web development to the next level!

Take a look at the complete release notes, and we’ll be back with new blog posts soon!

The Transition from Developer Advocacy to Product

Sohini Pattanayak — Tue, 15 Nov 2022 18:55:21 +0000

And sometimes, taking a "risk" 💣 pays off! 🚀

I switched to product management lately from developer advocacy. I'll be frank— I was afraid. I couldn't stop wondering if this was the best course of action. However, I've always wanted this, so it makes sense. I've always wanted to grow, learn, and help build products. As a result, I understood that I needed to make this move even though I knew it could be a little challenging for me at first.

I initially thought I had stopped coding(which happens sometimes when you come from an engineering background). But I decided not to put the blame on my job or role. I continue to spend some of my evenings learning new languages and occasionally developing new tools, frameworks, libraries, and languages.

I was a little anxious when my role changed as an APM (Associate Product Manager). The first few days left me unsure of where to begin. But having a supportive team around me has made and continues to make me incredibly lucky. At Pragmatic Institute, I took two courses to get started, which was a great idea. However, I never feel like I've learned enough, so I continue to study product management for an hour every evening.

I won't go into detail on how to get started with product management in this article because there are many resources already available. But I would rather discuss how different it is for me to picture myself as an APM versus a Developer Advocate.

As a Dev Advocate, I would, however, primarily concentrate on producing written and video tutorials, live streaming, blog entries, community interaction, and much more. My daily tasks would be to learn about new subjects and produce content for developer and partner education. As a developer advocate, I, therefore, concentrated on increasing engagement for the product once it had been developed and released. However, things are a little bit different with being an APM. It's more like I've made progress toward the thing I was supporting!

Now, rather than evangelising the product, I spend most of my time focusing on building it. My current priorities include defining product requirements, developing user stories, conducting market research, understanding users and consumers, and contributing to product positioning. It's a lot of fun, but occasionally scary. It would be scary because I would feel imposter syndrome. Given that I am relatively new to the product, I would experience it even more. But that's what motivates us to improve, isn't it?

This concludes this short article. I won't make it any longer. I'll continue to share my opinions, insights, and thoughts in the future! If you have any questions or comments for me before then, please don't hesitate to contact me!

Sohini

Entando 7.1 Release Overview

Sohini Pattanayak — Tue, 08 Nov 2022 09:48:48 +0000

Entando Application Composition Platform Version 7.1 is now available to support enterprises who are modernizing applications to accelerate development, reduce runtime costs, and streamline maintenance through the use of a composable application architecture. Entando brings developer joy to the creation, curation, and composition of modular enterprise applications.

Background:

Even before the 21st century, enterprises have been advancing infrastructure and strategies to solve business problems. From the development of web applications on-prem, to their subsequent move to the cloud, and now, modularization in the cloud, each move has accelerated development, lowered cost and streamlined maintenance.

This new phase of modularity focused on decoupling (or breaking up) both the backend code and the monolithic frontend by bundling microservices and micro frontends into Packaged Business Capabilities (PBCs). These PBCs could be shared across development teams and projects within an Enterprise Hub and assembled into applications via a low-code Application Builder, all within a unified Application Composition Platform.

The updates available in Entando Application Composition Platform v7.1 are focused on the pro-code creators. It provides many new capabilities to support the development of modern composable applications, which include:

New: Entando Platform Capability (EPC)

To accelerate application development, Entando 7.1 now supports a pluggable framework to allow Creators and Composers to easily expand the functionality of the Entando App Builder, add external services. Like the PBC, an EPC is a packaged capability and it adds functionality to the platform like menu options or an API management page. An EPC can be a headless CMS like Strapi, that is bundled, stored on Entando Cloud Hub, and implemented in the App Builder.

A sample configuration is shown below:

The headless system (e.g., Strapi) uses the Entando App Builder as a templating mechanism to create and manage pages, content layout, and content versioning.

1) An EPC can be deployed to the Entando Hub (or Entando Cloud Hub, the publically accessible version of the hub),

2) Composers can access and install EPCs into the Entando App Builder, adding a new menu item to the builder, which

3) when accessed, opens the headless interface, where content can be managed and you can return to the App Builder at any time.

4) Users can access the external system’s APIs and resources, deploying them into applications using the page designer. Many types of EPCs can be built for Entando 7.1, including Headless CMS (Strapi.io is coming soon), Workflow, AI/ML, API Mgmt, and more.

New: Pro-code bundle Templates

v7.1 introduces Pro-code Bundle Templates to enable developers, system integrators, and enterprises to create new Packaged Business Capabilities by reusing existing micro frontends and microservices allowing consistency and acceleration from a core PBC library.

New: Service Discovery

With v7.1, communication between micro frontends and microservices is decoupled and service discovery is made simpler with the API claims mechanism orchestrated by the ent CLI. It eliminates the need to define and manage API endpoints, both in local development and within a running instance.

Updated: Create Tooling

v7.1 mainly focuses on developers. The local development process was improved and now developers can easily initialize a bundle from scratch or download one from a hub. They can add components and populate the bundle descriptor with micro frontends, microservices, and platform components with the ent CLI. They can run, build, and install with only a few commands. Bundles that have worked on 7.0 will work on 7.1 as well. More details can be found here: https://developer.entando.com/v7.1/docs/getting-started/ent-bundle.html#entando-7-1-bundle-development

Updated: Docker Image Specification

Previously, developers used Git repositories to manage both code sources and bundle versioning. Now bundle packaging and publishing has moved to Docker which handle the image specifications. With this, one can still manage code sources on their preferred Git provider but each release will be done through an image registry.

Updated: Entando Command Line Interface (CLI)

We have enhanced the Entando CLI for Mac and Windows. The CLI can now create new bundles from templates downloaded from the Hub, providing a wider range of commands to perform various actions. Some examples:

Create a Docker Image of the Bundle
Docker-based bundle management commands
Easily Publish a bundle inside Docker Hub
API management

Updated: Entando Hub

The Entando Hub was introduced in v7.0 and provides a repository for PBCs, solution templates, components, and/or component collections. Enterprises, Development Teams, System Integrators and others can implement an Entando Hub as a central repository from which the Entando App Builder can discover and quickly access entries. Entando Hub updates include:

Docker bundle name generation update
Added security check on bundleGroupVersion details page
Update install instructions to use ent ecr deploy
Refined AppBuilder BundleGroups retrieval to sort if no pageSize provided.

Summary

To learn more about Entando 7.1, or to get started with Composable Applications, see:

A complete look at the 7.1 release notes
Docs - https://developer.entando.com/v7.1/docs/
Tutorials - https://developer.entando.com/v7.1/docs/
Base install guide (manual, not the one liner until official launch): https://developer.entando.com/v7.1/docs/getting-started/#install-kubernetes
Platform install guides: https://developer.entando.com/v7.1/tutorials/#operations
Watch a video with industry experts
Download the “What is an Application Composition Platform" whitepaper
Book a guided demo

What is the Entando Hub?

Sohini Pattanayak — Thu, 16 Jun 2022 10:33:50 +0000

What do you imagine when someone says Hub?

It's a center or place to hold a collection of things, or several kinds of things. And an Entando Hub is a repository (local, remote, public, or private), that contains components. To be more specific, the App Builder, the UI of the Entando Platform, can connect to one or more Entando Hub.

In my recent blog on Entando 7.0 release, I wrote a bit about the Entando Hub. You can check that out here. But, in this blog, I’ll give a technical overview of the Hub.

Before I start, let’s find out why we needed a Hub.

In the previous blogs, we learned about the 4Cs. If you don’t know about that, you can take a look at this blog. from the 4 essential roles of application composition, one thing is clear: the set of components built by creators are reusable and absolutely flexible. But, to make them easy to reuse, there was a need to create a Hub, where they could reside and be available to a larger audience.

Now, the question is, what are some of the capabilities of the Hub?

The Hub lets you share Single Components, Component Collections, Solution Templates, Packaged Business Capabilities (PBCs) that creators build.

Single components are a building block for apps. It can be a page template, content template, micro frontend, microservice, UX Fragment,content type…

Component collections are a packaged set of single components. They are assembled components that are in some way functionally unrelated but useful to a Composer. (e.g. a set of Page Templates, a set of content templates or content types + widgets + MFE or a mix of them)

Solution templates are a pre-packaged set of PBCs, component collections, and single components providing full-featured, domain-specific solutions. (eg: Task Tracker, Supplier Portal, Customer Portal, Partner Portal, E-commerce, …)

And PBCs are encapsulated software components that represent a well-defined business capability, recognizable as such by a business user, and packaged for programmatic access.

Any and all of these can be assembled in the Hub, where new items and new versions are continuously made available. But to avoid errors or issues, we should follow some best practices.

The PBCs and/or components we build as a creator must be well sized. It shouldn’t either be too small or too big. It should be business-driven with a definite business value. There are several scenarios in this case. For example, a PBC can have many components which can make it large, or it can have fewer components, making the size smaller. But in this case, a Composer may need to install several items to get what they need. It is a tradeoff between functionality and ease of use. Hence, we must judge wisely, making sure the component isn’t too large or too small.
Our Components and PBCs should be easily configurable. By this I mean, we must avoid hard-coded stuff. It is preferable to use separate configuration files or database tables to store any value that’s needed in your component.
It is best to use a package manager as it can help us with the right dependency versioning strategy. A package manager helps us by updating all the packages and/or software frequently. These packages run tests to check security and other things. It also saves us a lot of time.
While we discuss these best practices, we must know that the Curator oversees the Hub, managing the components available there for the organization. Hence, the Curator should do a Security Analysis. They should perform a thorough analysis of the dependencies, security alert or code vulnerabilities.
Use code quality metrics to measure and determine if the code we have written for the PBC is of high quality. Certain variables are checked under this quality analysis, like code complexity, portability, reusability, etc.
And finally, we should add proper documentation for our PBC. It’s the first thing that provides clarity about our PBC. This documentation should be made in such a manner that it is well understood by both business and technical people. Also, it is a good coding practice!

Now, it’s time we take a look at the Hub.

As you see here, there are many PBCs, Component Collections, Solution Templates, and Single Components under “Catalog”. After the Curator performs the validation checks, these building blocks made by Creators are published in the Hub.

How can we use the Hub?

This Hub can be used with Entando 7.0. This documentation can help us get started after installing the Hub on Entando 7.0. But in the upcoming blogs, I’ll definitely share how it can be installed in our App Builder.

Is the Hub open source?

The Entando Hub is under the LGPL-3.0 license and is open source. We can easily contribute to it by referring to this repository.

Lastly, before we wrap up, I’d like to explain the Entando Cloud Hub.

The Entando Cloud Hub is a SaaS instance of an Entando Hub that contains a public and private collection of components.

Well, that’s all about the Hub for now. We are in the process of creating more tutorials around the Hub and those will be released over the next few weeks.

But, for now, I would love to see you all try out the Hub for yourselves and send in your feedback to the comment section below!

Lastly, we at Entando are building an exciting community that spreads awareness of composability and modular applications. We call it the Modular Squad, and we’d love to invite you to join us and be part of this journey!

Thank you!

DEV Community: Sohini Pattanayak

Skip the Extra Login Screen with Auth0’s `authorizationParams`

What We're Trying to Achieve?

The Role of authorizationParams

But then what's the point of Auth0 here?

What’s Configured in the Auth0 Tenant?

Using Auth0 to Authenticate External Users into SharePoint via Microsoft Entra

Flow

Set Up a SAML Connection in Auth0

Configure Microsoft Entra to Trust Auth0

Add DNS TXT Record for Federation Validation

Enable User Sign-ins using Auth0

Invite the User in SharePoint

Success Criteria (What Happens Behind the Scenes) - Important for your understanding!

🛠 Common Pitfalls

Final Thoughts

Building a Real-Time Collaborative Notes Application with htmx 2.0

What I Built

Why htmx 2.0?

Key Features

Code Snippets

Project Structure

Conclusion

Building a Modern Blog with Remix and React Router

Why Remix and React Router?

The Project: What We Did with Remix

Setting Up the Project

app/routes/index.jsx

app/routes/about.jsx

app/routes/posts.jsx

Handling Layouts and Links

Lessons Learned

Conclusion

Part 1 - LittleHorse Advanced Concept Series: Conditionals

Our mission?

Creating the Workflow

Defining the Workflow Structure

Implementing Conditional Logic

Building Out the Workflow

Why can’t we test the command yet?

Next Steps

Interpreting Loan Predictions with TrustyAI: Part 3

Implementing Visualizations

Creating a LIME Feature Impact Visualization

Interpreting Loan Predictions with TrustyAI: Part 2

A Developer’s Guide

Interpretation of the Output:

Conclusion:

Interpreting Loan Predictions with TrustyAI: Part 1

An Overview

Introduction

Background

Prerequisites

Entando 7.2: The ultimate feature release

What's New in Entando 7.2?

Hub 3.1 - Private Catalogs and More

Multitenancy

The Transition from Developer Advocacy to Product

Entando 7.1 Release Overview

New: Entando Platform Capability (EPC)

New: Pro-code bundle Templates

New: Service Discovery

Updated: Create Tooling

Updated: Docker Image Specification

Updated: Entando Command Line Interface (CLI)

Updated: Entando Hub

Summary

What is the Entando Hub?

The Role of `authorizationParams`

`app/routes/index.jsx`

`app/routes/about.jsx`

`app/routes/posts.jsx`