azure-samples/ms-identity-ciam-javascript-tutorial

CIAM JavaScript samples

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 Microsoft Entra External ID	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-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 [email protected] with any additional questions or comments.

ms-identity-ciam-javascript-tutorial's Issues

documentation or setup not working for angular spa vs .net core api

Please provide us with the following information:

This issue is for a: (mark with an x)

- [X] bug report -> please search issues before submitting
- [ ] feature request
- [X] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

I followed tutorial at https://github.com/azure-samples/ms-identity-ciam-javascript-tutorial/tree/main/2-Authorization/2-call-api-angular, I am able to run the solution and launch the angular, when I click login I am forwarded to microsoft login prompt.

This is the url at this time which shows a correct redirect uri (in my opinion localhost/auth)

REDACTED

But after logging in I get a screen saying
We're unable to complete your request
invalid_request: The provided value for the input parameter 'redirect_uri' is not valid. The expected value is a URI which matches a redirect URI registered for this client application.

In the configuration of the spa we can see the redirect urls configured correctly :

Any log messages given by the failure

invalid_request: The provided value for the input parameter 'redirect_uri' is not valid. The expected value is a URI which matches a redirect URI registered for this client application.

Expected/desired behavior

redirect to spa /auth path.

OS and Version?

Windows 7, 8 or 10. Linux (which distribution). macOS (Yosemite? El Capitan? Sierra?)
Windows 11

Versions

Mention any other details that might be useful

---

Thanks! We'll be in touch soon.

Error AADSTS50049 when testing 0-call-api-vanillajs

Please provide us with the following information:

This issue is for a: (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

Followed instructions in README.md for the sample in a trial Entra tenant. App registrations created and config files updated.
Both dotnet (API) and node (SPA) samples running
Visited localhost:3000 and clicked the 'Sign-in' link. Small pop-up (size of normal 'login or register' or 'pick account' style screen) flashed momentarily then closed before loading any content.

Any log messages given by the failure

AADSTS50049: Unknown or invalid instance

{
"error": "invalid_instance",
"error_description": "AADSTS50049: Unknown or invalid instance. Trace ID: 4bb4a35a-fe66-4c56-b09b-754782482900 Correlation ID: 57cc2ed3-5425-47ae-bec5-46115860868b Timestamp: 2023-11-27 15:26:54Z",
"error_codes": [
50049
],
"timestamp": "2023-11-27 15:26:54Z",
"trace_id": "4bb4a35a-fe66-4c56-b09b-754782482900",
"correlation_id": "57cc2ed3-5425-47ae-bec5-46115860868b",
"error_uri": "https://login.microsoftonline.com/error?code=50049"
}

Expected/desired behavior

Login/register popup expected to load

OS and Version?

Windows 11 23H2 22631.2787; Node v21.2.0

Versions

Mention any other details that might be useful

---

Thanks! We'll be in touch soon.

No code provided for claimUtil.js in React step-by-step CIAM tutorial

Please provide us with the following information:

This issue is for a: (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [x] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

In Tutorial: Prepare a React single-page app (SPA) for authentication in a customer tenant, code for claimUtil.js was not provided.

Any log messages given by the failure

N/A

Expected/desired behavior

Should provide code for claimUtil.js

OS and Version?

N/A

Versions

N/A

Mention any other details that might be useful

---

Thanks! We'll be in touch soon.

issue with [tenant].ciamlogin.com in authConfig.js

Recently, the domain ciamlogin.com was flagged by multiple sites and propagated into chrome and safari on iphone showing red screen as attached. My company Cisco Umbrella shows it as phishing site. I can't proceed with using my trial tenant or this sample. Any information would be appreciated. I've submitted an Azure Q&A in the Community yesterday. No reply yet.

Redirect URI Issue: input parameter redirect URI is invalid (despite verification of exact match and correct configuration)

Please provide us with the following information:

This issue is for a: (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

I followed along with the tutorial provided at this website: https://learn.microsoft.com/en-us/entra/external-id/customers/sample-web-app-node-sign-in

I have confirmed several times that the redirect URI - http://localhost:3000/auth/redirect - which is identical to the tutorial, is exactly correct in my configuration of the Web Redirect URI on Azure, and present in the body of the URL request (redacted / shortened version below).

https://##########.ciamlogin.com/#############/oauth2/v2.0/authorize?client_id=#######&scope=openid%20profile%20offline_access&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Fredirect&client-request-id=etc., etc.

I have found several StackOverflows, Microsoft Community Submissions, etc. dating the last 4 years with similar issues. Each solution appears to be unique and not a global resolution to the problem.

Any log messages given by the failure

The error message provided is:
invalid_request: The provided value for the input parameter 'redirect_uri' is not valid. The expected value is a URI which matches a redirect URI registered for this client application.

Expected/desired behavior

That the error message contain the actual values of the URIs (so that the developer can more easily identify where there is an inconsistency), or for this issue to be investigated in case there is a bigger issue at hand here.

I can see throughout logging during the application that the redirect URI is always the same value, all the way through it landing in the parameters of the URL, and I have confirmed that it is exactly correct in the Azure configuration. I've poked this every which way the last few hours and am stumped.

OS and Version?

macOS Sonoma

Versions

Microsoft Edge, v 120
Azure msal-node v. 2.6.4 (tested on version 1.17.2 and had the same response)

Mention any other details that might be useful

---

Thanks! We'll be in touch soon.

Action required: migrate or opt-out of migration to GitHub inside Microsoft

Migrate non-Open Source or non-External Collaboration repositories to GitHub inside Microsoft

In order to protect and secure Microsoft, private or internal repositories in GitHub for Open Source, which are not related to open source projects or requiring collaboration with 3rd parties (customer, partners, etc.) must be migrated to GitHub inside Microsoft a.k.a GitHub Enterprise Cloud with Enterprise Managed User (GHEC EMU).

Action

✍️ Please RSVP to opt-in or opt-out of the migration to GitHub inside Microsoft.

❗Only users with admin permission in the repository are allowed to respond. Failure to provide a response will result to your repository getting automatically archived.🔒

Instructions

Reply with a comment on this issue containing one of the following optin or optout command options below.

✅ Opt-in to migrate

@gimsvc optin --date <target_migration_date in mm-dd-yyyy format>

Example: @gimsvc optin --date 03-15-2023

OR

❌ Opt-out of migration

@gimsvc optout --reason <staging|collaboration|delete|other>

Example: @gimsvc optout --reason staging

Options:

• staging : My project will ship as Open Source
• collaboration : Used for external or 3rd party collaboration with customers, partners, suppliers, etc.
• delete : This repository will be deleted because it is no longer needed.
• other : Other reasons not specified

Need more help? 🖐️

• Email [email protected]. ✉️
• Post your questions in GitHub inside Microsoft Team in Microsoft Teams. 🗨️

Update dead links in React CIAM tutorial

https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial/blob/main/1-Authentication/1-sign-in-react/README.md#create-user-flows (which links this dead tutorial)

Sort of pivotal links to this tutorial's usefulness could be updated

This issue is for a: (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [x] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Scope Formatting in CIAM Tenants

Please provide us with the following information:
Scope Formatting in CIAM Tenants has changed to api:{app_id}

This issue is for a: (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

Any log messages given by the failure

Expected/desired behavior

OS and Version?

Windows 7, 8 or 10. Linux (which distribution). macOS (Yosemite? El Capitan? Sierra?)

Versions

Mention any other details that might be useful

---

Thanks! We'll be in touch soon.

Unable to perform SSO in react application

Please provide us with the following information:

This issue is for a: (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [x] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

I just cloned your repo & trying SSO authentication (msal) in react SPA.
I updated my client id & respective autority with tenant id, but i;m unable to perform SSO, can you please help?
Folder path : ms-identity-ciam-javascript-tutorial-main\1-Authentication\1-sign-in-react\SPA

Any log messages given by the failure

Expected/desired behavior

OS and Version?

Windows 7, 8 or 10. Linux (which distribution). macOS (Yosemite? El Capitan? Sierra?)

Versions

Mention any other details that might be useful

---

Thanks! We'll be in touch soon.

AuthProvider.js breaks on line 130 when Authentication provider is Google

Please provide us with the following information:

This issue is for a: (mark with an x)

- [ x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

Add Google as an external authentication provider, add it to the user flow and use it to authenticate

Any log messages given by the failure

\ms-identity-ciam-javascript-tutorial\2-Authorization\4-call-api-express\App\auth\AuthProvider.js:130
codeVerifier: req.session.pkceCodes.verifier, // PKCE Code Verifier
^

TypeError: Cannot read properties of undefined (reading 'verifier')
at AuthProvider.handleRedirect (C:\GitHub\ms-identity-ciam-javascript-tutorial\2-Authorization\4-call-api-express\App\auth\AuthProvider.js:130:49)
at exports.handleRedirect (C:\GitHub\ms-identity-ciam-javascript-tutorial\2-Authorization\4-call-api-express\App\controller\authController.js:8:25)
at Layer.handle [as handle_request] (C:\GitHub\ms-identity-ciam-javascript-tutorial\2-Authorization\4-call-api-express\App\node_modules\express\lib\router\layer.js:95:5)
at next (C:\GitHub\ms-identity-ciam-javascript-tutorial\2-Authorization\4-call-api-express\App\node_modules\express\lib\router\route.js:144:13)
at Route.dispatch (C:\GitHub\ms-identity-ciam-javascript-tutorial\2-Authorization\4-call-api-express\App\node_modules\express\lib\router\route.js:114:3)
at Layer.handle [as handle_request] (C:\GitHub\ms-identity-ciam-javascript-tutorial\2-Authorization\4-call-api-express\App\node_modules\express\lib\router\layer.js:95:5)
at C:\GitHub\ms-identity-ciam-javascript-tutorial\2-Authorization\4-call-api-express\App\node_modules\express\lib\router\index.js:284:15
at Function.process_params (C:\GitHub\ms-identity-ciam-javascript-tutorial\2-Authorization\4-call-api-express\App\node_modules\express\lib\router\index.js:346:12)
at next (C:\GitHub\ms-identity-ciam-javascript-tutorial\2-Authorization\4-call-api-express\App\node_modules\express\lib\router\index.js:280:10)
at Function.handle (C:\GitHub\ms-identity-ciam-javascript-tutorial\2-Authorization\4-call-api-express\App\node_modules\express\lib\router\index.js:175:3)

Expected/desired behavior

Not to crash

OS and Version?

Windows 7, 8 or 10. Linux (which distribution). macOS (Yosemite? El Capitan? Sierra?)

Versions

Windows 11

Mention any other details that might be useful

I changed the line to "codeVerifier: req.session.pkceCodes.verifier || 'Not verified', // PKCE Code Verifier" just to be able to continue with Entra External ID testing.

---

Thanks! We'll be in touch soon.

Update the readme for calling the API samples to include Acquire a token using MSAL.js.

Please provide us with the following information:

This issue is for a: (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

Any log messages given by the failure

Expected/desired behavior

OS and Version?

Windows 7, 8 or 10. Linux (which distribution). macOS (Yosemite? El Capitan? Sierra?)

Versions

Mention any other details that might be useful

---

Thanks! We'll be in touch soon.