page_type: sample languages:
- javascript
- typescript products:
- msal-angular
- msal-node
- msal-react
-
entra-external-id description: "Tutorial: Enable your JavaScript applications to sign-in users and call APIs with Microsoft Entra External ID" urlFragment: "ms-identity-ciam-javascript-tutorial"
Tutorial: Enable your JavaScript application to sign-in users and call APIs with Microsoft Entra External ID
This tutorial aims to take you through the fundamentals of modern authentication with Microsoft Entra External ID, using the Microsoft Authentication Library for JavaScript.
Prerequisites
- Node.js v14 LTS or later
- Visual Studio Code
- A modern web browser (to use the popup experience during sign-in and token acquisition, your browser should allow popups)
Please refer to each sample's README for sample-specific prerequisites.
The following tables are a summary of code samples alongside links to tutorials on how to integrate various app types with Microsoft Entra External ID:
-
The Explore and run code sample guide uses a sample app to show you how to add identity and access management (IAM) capabilities to your applications using Microsoft Entra External ID for customers.
-
The Build and integrate tutorial offers detailed guidance on how to build an app from the ground up, walking you through the packages and code needed to add IAM support to both new or existing applications.
Chapter 1: Sign-in a user to your application with Microsoft Entra External ID
| Language/platform + app type | Scenario | GitHub code sample | Explore and run code sample | Build and integrate tutorial |
|---|---|---|---|---|
| VanillaJS SPA |  |
Sign in using a Vanilla JavaScript SPA | Sign in users | Sign in users |
| React SPA |  |
Sign in using a React SPA | Sign in users | Sign in users |
| Angular SPA | |
Sign in using an Angular SPA | Sign in users | --- |
| Electron desktop app |  |
Sign in using an Electron desktop app | Sign in users | --- |
| Node.js browserless app |  |
Sign in using a Node.js browserless app | Sign in users | Sign in users |
| Node.js & Express web app |  |
Sign in using a Node.js & Express web app | Sign in users | Sign in users |
Chapter 2: Protect an API and call the API from your client app
The following table summarizes resources with guidance on how to protect your web API with the Microsoft Entra External ID. You then use a client application to sign-in a user, acquire an Access Token for your app to call the protected web API.
| Language/platform + app type | Scenario | GitHub code sample | Explore and run code sample | Build and integrate tutorial |
|---|---|---|---|---|
| Node.js & Express web app |  |
Sign in users and call an API using a Node.js & Express web app | Sign in users and call an API | Sign in users and call an API |
| Node.js daemon application |  |
Call an API using a Node.js daemon application | Call an API | Call an API |
| Vanilla JavaScript SPA |  |
Sign in users and call an API using a Vanilla JavaScript SPA | --- | --- |
| React SPA |  |
Sign in users and call an API using a React SPA | --- | --- |
| Angular SPA |  |
Sign in users and call an API using an Angular SPA | --- | --- |
If you're looking for more samples on different authentication and authorization scenarios, see Samples for External ID developers
More information
Learn more about the Microsoft Entra External ID for customers:
- Identity Platform Developer Center
- Microsoft Entra External ID for customers
- Overview of Microsoft Authentication Library (MSAL)
- Supported features in Microsoft Entra External ID for customers
- Authentication methods and identity providers for customers
- Microsoft Entra External ID for customers frequently asked questions
We'd love your feedback
Were we successful in addressing your learning objective? Consider taking a moment to share your experience with us.
Community help and support
-
Post a question to Microsoft Q&A to get answers to your identity app development questions directly from Microsoft engineers, Azure Most Valuable Professionals (MVPs), and members of our expert community.
-
Use Stack Overflow to get support from the community. Ask your questions on Stack Overflow first and browse existing issues to see if someone has asked your question before. Make sure that your questions or comments are tagged with [
ms-identitymicrosoft-entra-external-idmsal]. -
If you find a bug in the sample, please raise the issue on GitHub Issues.
Contributing
This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit cla.opensource.microsoft.com.
Code of conduct
This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.