Add Authentication to Apps in Minutes

Add authentication to your applications in minutes Use the Microsoft Entra external identity extension for Visual Studio Code (GA).

Compromised user credentials are one of the most frequent targets for hackers seeking to infiltrate an organization’s network through methods such as malware, phishing, and social engineering.

These days, attackers log in, not break in.

This highlights the essential role of strong authentication measures in preventing unauthorized access and protecting sensitive data.

Introducing the Entra External ID Visual Studio Code extension

You may be wondering how to set up secure authentication for your app. Microsoft Entra External Identity Extension for Visual Studio Code It is now generally available.

This extension is designed to help developers using Visual Studio Code to:

• Create an external tenantlessee A dedicated, trusted Microsoft Entra external identity instance that contains your organization’s resources, including registered apps and user directories.
• Configuring the login environment For external users, you can configure the company logo, background color, alignment, etc. to ensure that your company’s brand guidelines are used.
• Setting up your first external ID sampleyou can select a code sample for the technology stack you want and the certification will be automatically configured to work in that environment.

— All directly from within VS Code.

Doesn’t that seem like a great way to add authentication right from within the IDE?

Install the Microsoft Entra external identity extension for VS Code

How it works

Whether you’re new to Customer Identity or an experienced developer, the extension simplifies the usually complex process of configuring authentication for a new project.

By automating tenant creation and pre-populating the required values ​​during login configuration, you:

• Eliminate manual settings,
• You can stay focused on your code.

Here are the steps the extension will guide you through:

1. Tenant settings: The Microsoft Entra external identity extension creates a tenant in the external configuration that contains the external user’s apps and directories. Easily create an external tenant using your Azure subscription or choose a 30-day free trial (currently in preview).
2. ‘Resource Management’ section External tenants, applications, user flows, and branding settings can all be viewed in one place.
3. sample app: The extension configures a sample app of your choice based on the login experience you set up.

1. External ID setting

After installing the Microsoft Entra External Identity extension, go to Extensions and open the extension walkthrough to start setting up your external identity. The exercise has the following steps:

1. External tenant setup – These steps will help you set up your tenant. If you don’t have an Azure account, you can: Set up a free trial. If you already have an Azure account, select Next. Use my subscription.

2. User’s login settings – You can configure your app to allow users to log in using their email and password or a one-time password. You can also customize the login page with your company branding (including logo, background color, and login layout).

3. Test out your login experience. – select Run now The button allows you to preview the login experience you configured in the previous step.

The login page is structured as follows. To create a user, select: Don’t have an account? make one Create a new user in your tenant.

Typically, when the user logs in, they are redirected back to the app. However, since we haven’t set up the app at this stage, we are instead redirected to JWT.ms, where we can view the contents of the token issued during the login process.

4. Set up and run the sample app – by choosing Sample app settingswill help you set up a fully configured sample external ID based on your selections.

Select a sample project to download. Samples are provided for single-page applications (JavaScript, React, Angular) and web applications. [Node.js (Express), ASP.NET Core, Python Django, Python Flask, Java Servlet]. Simply select a sample within the extension and the application will automatically be configured to match your login experience.

I chose the third option. A File Explorer window opens. Select a location to save the sample repository, then select Download repository here. Once complete, a new Visual Studio Code project workspace will open.

2. Resource Management

After you create your tenant, you can inspect your deployed resources from within Visual Studio Code. As the final step in the extended guide, “View resources”, This is the final step where you can see all the resources.

Go to next ‘Resource Management’ section External tenants, applications, user flows, and branding settings can all be viewed in one place. You will see a list of resources similar to the image below.

[Optional] Additionally, for further configuration, you can right-click on the resource to open it directly in the Microsoft Entra admin center and update your company branding within the extension.

3. Try our sample app

At this point, you’ve set up your external identity tenant and have a running instance of Visual Studio Code that contains the samples you downloaded. Let’s focus on running this sample and demonstrate how the extension already has code added that can be used to authenticate against an external identity instance.

When the extension downloads the application, it automatically updates the Microsoft Authentication Library (MSAL) configuration to connect to the new tenant and apply the login experience you configured. No additional setup is required. As soon as the project is built, you can run the application.

sample project

Let’s examine the sample project and understand the important files added that help in authentication.

• authConfig.jsThis file contains configuration information to be provided to the Microsoft Authentication Library (MSAL). client id It is updated with the application ID and permissions are set to the new tenant’s subdomain.

1. Run the project by selecting Run > Run without debugging. The build script runs and a new browser tab opens. http://localhost:3000 . Your browser should display the app as shown in the window below.

2. Select ‘Sign In’ and you will be redirected to the login page you configured earlier. You will see a page that renders all the claims as a table.

How authentication works using libraries and frameworks

There are generally two main libraries that make an app work:

• For example, in JavaScript, there is at least one authentication library called the Microsoft Authentication Library (MSAL) with the msal prefix, but that only means that it is concerned with authentication management.
• Framework-specific libraries. The idea is that this library works well with the authentication library and makes it clear which parts of the app should render which content depending on whether the user is logged in or not.

Let’s look at a specific example leveraging the JavaScript framework React. For React apps, you’ll need a library. @azure/msal-browser and @msal-react. use @azure/msal-browser allows you to access Entra instances in the cloud to log in and manage logs. with @azure/msal – Reacts to certain components to help with rendering. Let me introduce the following.

1. Set up an account, get an account, and listen to events.

Here’s how to use it: @azureUse /msal-browser to manage your account.

import { PublicClientApplication, Event type } from ‘@azure/msal-browser‘;

const msalinstance = new PublicClientApplication(msalConfig);

// Searching for account

if (!msalInstance.getActiveAccount() && msalInstance.getAllAccounts().length > 0) {

// account settings

msalInstance.Set up an active account(msalInstance.getActiveAccount()[0]);

}

// Listen for login events and set up the active account.

msalInstance.addEventCallback(((event) => {

if (event.event type === Event type.LOGIN_SUCCESS && event.payload.account) {

const account = event.payload.account;

msalInstance.Set up an active account(account);

}

});

In the preceding code, the following occurs:

• not msalinstance Generated using a configuration (pre-populated by the Visual Studio Code extension).
• If you search for an account, you can get it from here and read interesting information from it. For example, what permissions the account “claims”.
• We are hearing about an important incident. In this case, we’ll listen for a successful login and set up an account instance for later inspection by the app.

2. Content rendering

As mentioned earlier, your app needs to define what content to render when logged in and when not logged in. In React @azureThe /msal-react library has components for this.

Here’s how to render content using the Authenticated and NonAuthenticated templates based on the current login status:

<Certified template>

{Active account? (

<container>

<ID token data idTokenClaim={activeAccount.idTokenClaims} />

container>