Microsoft Entra External ID Extension for Visual Studio Code

The Microsoft Entra External ID extension for Visual Studio Code helps you integrate customer identity and access management (CIAM) into applications without leaving the IDE. The extension offers a seamless, guided experience to set up a customized, branded sign-in experience for external users and enables you to configure a sample External ID application, all within the development environment.

This extension provides a quick basic setup that automatically creates a tenant for your application and prepares it for your users. It also streamlines your workflow by automatically populating values such as application IDs into your configuration file for a smoother setup process.

extension

Getting Started

Microsoft Entra External ID is a service that can be added on to an existing Azure subscription. If you don’t already have an Azure subscription, you can set up a free trial of Microsoft Entra External ID (preview) within VS code and get started by configuring a sample app.

For more information about Microsoft Entra External ID and how to use the extension, see Get started with Microsoft Entra External ID extension for Visual Studio Code.

Installing the extension

Download and install the Microsoft Entra External ID extension for Visual Studio Code.
Wait for the extension to finish installing. When prompted, reload Visual Studio Code.
Once completed, you will see an icon for Microsoft Entra External ID in the Activity Bar.

a. If your activity bar is hidden, you won't be able to see the extension icon. Show the Activity Bar by clicking View > Appearance > Show Activity Bar

Using the extension

A step by step series of examples that tell you how to get a development environment running

On the Visual Studio Code Welcome page, under Walkthroughs, select Get started with Microsoft Entra External ID. Alternatively, you can access the walkthrough directly by clicking on the extension’s icon and selecting Open extension walkthrough from Help and feedback section in the explorer view.
The get started page will guide you through the setup process. This setup can be run multiple times, allowing you to configure the sign-in experience and download sample apps as needed. For detailed steps for using the extension, refer to the documentation.

Overview

Integrating authentication into your customer-facing applications is a crucial step in securing resources and customer data. The Microsoft Entra External ID extension for Visual Studio Code helps you kickstart identity integration for customer-facing apps by enabling you to easily create external tenants, configure sign-in for external users, and set up an External ID sample, all within your IDE.

Based on whether you have an existing Azure account, you can get started by selecting one of the following:

If you don't already have an Azure Account, select Set up a free trial.
If you already have an Azure account, select Use my subscription.

Welcome

Free trial option (preview)

Microsoft Entra External ID provides a dedicated tenant that contains your customer-facing apps, External ID resources, and directory of user accounts. You can create a tenant from within this extension even if you don’t already have an Azure account, by setting up a free trial.

If you have an Azure subscription and are creating a tenant with customer configuration for the first time, you will also have an option to create a trial tenant.

Welcome

In the guided walkthrough, you can quickly configure sign-in methods and design the look and feel of the user experience. Choose a background color, image, or logo to be displayed in sign-up pages.

You can also configure sign-in experiences in the Getting Started section in the explorer view.

Getting Started

In the guided walkthrough, you can also preview your configured sign-in experience and test the flow by creating your first user

Try out your sign-in experience

Sample applications

The extension contains several code samples that demonstrate how authentication is implemented in different application types and development languages. You can choose one of the following application samples from the within the extension and it will automatically be configured with your sign-in experience:

Single Page Application (SPA): JavaScript, React, Angular
Web App: Node.js (Express), ASP.NET Core, Python (Flask), Python (Django), Java Servlet

Sample download

Manage resources

The manage resources view displays the resources in your tenant and lets you quickly view their properties. You can view configuration information about your registered applications, user flows, and company branding configuration. You can also navigate directly to the Microsoft Entra admin center from the explorer view if you need to further configure or manage the resource.

Manage resources

Issue reporting and feedback

Report Issues: Encountered a bug or facing a challenge with our extension? Report it directly on our GitHub repository.
Provide feedback: Have suggestions or want to share your thoughts on the extension? We’d love to hear from you! Fill out our feedback form to let us know how we can improve or what you love about the extension.

Telemetry

VS Code collects usage data and sends it to Microsoft to help improve our products and services. Read our privacy statement to learn more. If you don’t wish to send usage data to Microsoft, you can set the telemetry.enableTelemetry setting to false.. Learn more about telemetry handling in VS Code FAQ.