Add Authentication to Apps in Minutes

Add authentication to applications in minutes with Microsoft Entra External ID extension for Visual Studio Code (GA). 

Compromised user credentials are one of the most frequent targets for hackers seeking to infiltrate organizations' networks through methods such as malware, phishing, and social engineering. 

Nowadays, attackers don’t break in, they log in.

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

 

Introducing the Entra External ID Visual Studio Code extension

You might be wondering how to set up secure authentication for your apps, we’re thrilled to announce the Microsoft Entra External ID extension for Visual Studio Code which is now Generally Available.

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

• Create external tenants, a tenant is a dedicated and trusted instance of Microsoft Entra External ID that contains an organisation's resources, including registered apps and a directory of users.
• Configure sign-in experiences for external users, this allows you to configure things like company logo, background color and alignment and more to ensure the branding guidelines of your company is used.
• Set up your first External ID sample, you will be able to choose a code sample for your favourite tech stack and authentication will be automatically configured to work in your environment.

— all directly within VS Code.

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

 

Install Microsoft Entra External ID Extension for VS Code

 

How it works

Whether you're new to customer identity or an experienced developer, the extension simplifies the typically complex process of configuring authentication for your new projects.

By automating tenant creation and prepopulating required values during sign-in configuration, it:

• Eliminates manual setup,
• Allowing you to stay focused on your code.

Here’s the steps the extension is about to take you through:

1. Tenant setup: The Microsoft Entra External ID extension creates a tenant in an external configuration, which contains your app and directory of external users. Easily create an external tenant using your Azure subscription or opt for a 30-day free trial (currently in preview).
2. ‘Manage Resources’ section to view your external tenants, applications, user flows, and branding settings—all in one place.
3. Sample app: The extension will configure a sample app of your choice based on the sign-in experience you set up.

 

1. Set up External ID

Once you’ve installed the Microsoft Entra External ID extension, navigate to the extension and open the extension walkthrough to begin setting up External ID. The walkthrough has the following steps:

1. Set up an external tenant – This step helps you set up a tenant. If you don’t have an Azure Account, you can Set up a free trial. If you already have an Azure account, select Use my subscription.

2. Set up sign-in for your users - You can configure your app to allow users to sign in with their email and a password or a one-time passcode. You can also customize the log in page with your company branding (including logo, background color, and sign-in layout).

    

3. Try out your sign-in experience – Selecting the Run it now button allows you to preview the sign-in experience you configured in the previous step.

I configured my log in page to look as below. To create a user, Select No account? Create one to create a new user in the tenant.

 

Typically, once the user signs in, they're redirected back to your app. However, since you haven’t set up an app at this step, you're redirected to JWT.ms instead, where you can view the contents of the token issued during the sign-in process.

4. Set up and run a sample app – By selecting Set up sample app, the extension helps you set up a fully configured sample External ID based on your choices. 

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

I selected the third option; a file explorer windows open. Choose where to save the sample repository then select Download repository here. When complete, a new Visual Studio Code project workspace opens.

 

2. Manage the resources

Once you’ve created your tenant, you can inspect the resources deployed from within Visual Studio Code. 

As the last step in extension guide you should see “View your resources”, this is the last step where you can see all the resources.

Navigate to ‘Manage Resources’ section to view your external tenants, applications, user flows, and branding settings—all in one place. You should see the resources list similar to the below image:

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

 

3. Try out the sample app

At this point, we’ve set up our External ID Tenant and we have a running instance of Visual Studio Code with our downloaded sample in it. Let’s focus on running this sample and explain how the extension has already added code for us that we can use to authenticate towards our External ID instance.

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

 

Our sample project

Let’s inspect our sample project and understand the important files that was added that will help us authenticate.

• authConfig.js, this file contains configuration information that will be provided to Microsoft Authentication Library, MSAL.  clientId is updated with your application ID, and the authority is set to the subdomain for your new tenant.

 

1. Select Run > Run without debugging, to run the project. The build script will run, and a new browser tab opens to http://localhost:3000 . You should see the app looking like below window in your browser:

2. Select ‘Sign in’ this will redirect to the login page configured earlier. You should see a page rendering all your claims in a table.

 

How authentication works using a library and a framework

There are usually two major libraries that makes your app work:

• An authentication library, for example for JavaScript it’s referred to as MSAL (Microsoft Authentication library), there’s more than one library with the msal prefix but it just means it’s related to authentication management.
• A framework specific library. The idea is for this library to play well with the authentication library and make it clear what parts of the app should render what content based on whether a user is logged in or not.

Let’s look at a specific example leveraging the JavaScript framework React. For a React app, we need the libraries azure/msal-browser and @msal-react. Using azure/msal-browser, you can connect to your Entra instance in the cloud and manage login and logit. With azure/msal-react your specific components that help you with rendering.  Let’s showcase the following:

 

1 . Set account, get account, listening to events.

Here’s how you use azure/msal-browser to manage your account.

 

import { PublicClientApplication, EventType } from 'azure/msal-browser';

const msalInstance = new PublicClientApplication(msalConfig);

// Retrieving account

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

    // Setting account

    msalInstance.setActiveAccount(msalInstance.getActiveAccount()[0]);

}

// Listen for sign-in event and set active account

msalInstance.addEventCallback((event) => {

    if (event.eventType === EventType.LOGIN_SUCCESS && event.payload.account) {

        const account = event.payload.account;

        msalInstance.setActiveAccount(account);

    }

});

 

In the preceding code, the following happens:

• An msalInstance is created using configuration (this is prefilled for you by the Visual Studio Code extension).
• Retrieving an account, here you fetch the account to read interesting information from it, for example what permissions “claims” it has.
• Listening to important events. In this case, you listen for login success and set the account instance to it so that you can later inspect it in your app.

 

2. Rendering content

As was said earlier, you need to define in your app what content to render when you’re logged in and when you’re not logged in. In React azure/msal-react library has components for this.

Here’s how the Authenticated and NonAuthenticated template can be used to render content depending on which logged in state you’re in:

<AuthenticatedTemplate>

{activeAccount ? (

  <Container>

    <IdTokenData idTokenClaims={activeAccount.idTokenClaims} />

  </Container>

) : null}

</AuthenticatedTemplate>

<UnauthenticatedTemplate>

  <Button className="signInButton" onClick={handleRedirect} variant="primary">

  Sign up

  </Button>

</UnauthenticatedTemplate>

 

Kudos, you’ve successfully configured Microsoft Entra External ID using the Visual Studio Code extension!

Next steps

We’re excited to see how you innovate with the Microsoft Entra External ID VS Code extension. Keep the feedback coming!

Share your thoughts as we work to bring more features and enhancements to the extension, making it even better. Stay tuned for updates as we continue to improve the developer workflows.

Continue exploring Microsoft Entra External ID extension by checking out the Marketplace page and the Quickstart guide.

You can also explore other features in the Microsoft Entra portfolio by visiting our

• Developer center
• Identity blog 
• YouTube for tutorials, deep dives, and the latest news.

 

Install Microsoft Entra External ID Extension for VS Code