Skip to content

ACMEAtronOmatic/ms-identity-ciam-javascript-tutorial

 
 

Repository files navigation

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

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 users with a Vanilla JavaScript SPA Sign in using a Vanilla JavaScript SPA Sign in users Sign in users
React SPA Sign in users with a React SPA Sign in using a React SPA Sign in users Sign in users
Angular SPA Sign in users with an Angular SPA Sign in using an Angular SPA Sign in users ---
Electron desktop app Sign in users with an Electron desktop app Sign in using an Electron desktop app Sign in users ---
Node.js browserless app Sign in users with a 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 users with a 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 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 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 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 Sign in users and call an API using a React SPA --- ---
Angular SPA Sign in users and call an API using an 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:

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.

Releases

No releases published

Packages

No packages published

Languages

  • PowerShell 46.6%
  • JavaScript 29.1%
  • TypeScript 9.9%
  • C# 9.3%
  • HTML 3.9%
  • CSS 0.8%
  • Handlebars 0.4%