page_type	languages	products	description	urlFragment
sample	javascript typescript	msal-angular msal-node msal-react entra-external-id	Tutorial: Enable your JavaScript applications to sign-in users and call APIs with Azure AD for Customers	ms-identity-ciam-javascript-tutorial

Tutorial: Enable your JavaScript application to sign-in users and call APIs with Azure AD for Customers

This tutorial aims to take you through the fundamentals of modern authentication with Azure AD Consumer Identity and Access Management (CIAM), 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 Azure AD for customers:

• 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 Azure AD for customers

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 Azure AD for Customers. 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 and guides for customer identity and access management (CIAM) in Azure Active Directory

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-identity microsoft-entra-external-id msal].

• 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.