Tutorial: Prepare your external tenant to authenticate users in an Angular single-page app
This tutorial series demonstrates how to build an Angular single-page application (SPA) and prepare it for authentication using the Microsoft Entra admin center. You'll use the Microsoft Authentication Library for JavaScript to authenticate your app with your external tenant. Finally, you'll run the application and test the sign-in and sign-out experiences.
In this tutorial:
- Register a SPA in the Microsoft Entra admin center, and record its identifiers
- Define the platform and URLs
- Grant permissions to the SPA to access the Microsoft Graph API
- Create a sign-in and sign-out user flow in the Microsoft Entra admin center
- Associate your SPA with the user flow
Prerequisites
- An external tenant. To create one, choose from the following methods:
- (Recommended) Use the Microsoft Entra External ID extension to set up an external tenant directly in Visual Studio Code.
- Create a new external tenant in the Microsoft Entra admin center.
- This Azure account must have permissions to manage applications. Any of the following Microsoft Entra roles include the required permissions:
- Application Administrator
- Application Developer
- Cloud Application Administrator
Register the SPA and record identifiers
To enable your application to sign in users with Microsoft Entra, Microsoft Entra External ID must be made aware of the application you create. The app registration establishes a trust relationship between the app and Microsoft Entra. When you register an application, External ID generates a unique identifier known as an Application (client) ID, a value used to identify your app when creating authentication requests.
The following steps show you how to register your app in the Microsoft Entra admin center:
Sign in to the Microsoft Entra admin center as at least an Application Developer.
If you have access to multiple tenants, use the Settings icon
in the top menu to switch to your external tenant from the Directories + subscriptions menu.Browse to Identity >Applications > App registrations.
Select + New registration.
In the Register an application page that appears;
- Enter a meaningful application Name that is displayed to users of the app, for example ciam-client-app.
- Under Supported account types, select Accounts in this organizational directory only.
Select Register.
The application's Overview pane displays upon successful registration. Record the Application (client) ID to be used in your application source code.
Add a platform redirect URL
To specify your app type to your app registration, follow these steps:
- Under Manage, select Authentication
- On the Platform configurations page, select Add a platform, and then select Single-page application.
- For the Redirect URIs enter
http://localhost:4200/. - Select Configure to save your changes.
Grant admin consent
Once you register your application, it gets assigned the User.Read permission. However, since the tenant is an external tenant, the customer users themselves can't consent to this permission. You as the admin must consent to this permission on behalf of all the users in the tenant:
From the App registrations page, select the application that you created (such as ciam-client-app) to open its Overview page.
Under Manage, select API permissions.
- Select Grant admin consent for <your tenant name>, then select Yes.
- Select Refresh, then verify that Granted for <your tenant name> appears under Status for the permission.
Create a user flow
Sign in to the Microsoft Entra admin center as at least an External ID User Flow Administrator.
If you have access to multiple tenants, use the Settings icon
in the top menu to switch to your external tenant from the Directories + subscriptions menu.Browse to Identity > External Identities > User flows.
Select + New user flow.
On the Create page:
Enter a Name for the user flow, such as SignInSignUpSample.
In the Identity providers list, select Email Accounts. This identity provider allows users to sign-in or sign-up using their email address.
Under Email accounts, you can select one of the two options. For this tutorial, select Email with password.
Email with password: Allows new users to sign up and sign in using an email address as the sign-in name and a password as their first factor credential.
Email one-time-passcode: Allows new users to sign up and sign in using an email address as the sign-in name and email one-time passcode as their first factor credential.
Note
Email one-time passcode must be enabled at the tenant level (All Identity Providers > Email one-time-passcode) for this option to be available at the user flow level.
Select Create. The new user flow appears in the User flows list. If necessary, refresh the page.
Associate the application with your user flow
For the customer users to see the sign-up or sign-in experience when they use your app, you need to associate your app with a user flow. Although many applications can be associated with your user flow, a single application can only be associated with one user flow.
On the sidebar menu, select Identity.
Select External Identities, then User flows.
In the User flows page, select the User flow name you created earlier, for example, SignInSignUpSample.
Under Use, select Applications.
Select Add application.
Select the application from the list such as ciam-client-app or use the search box to find the application, and then select it.
Choose Select.
Once you associate your app with a user flow, you can test your user flow by simulating a user’s sign-up or sign-in experience with your application from within the Microsoft Entra admin center. To do so, use the steps in Test your sign-up and sign-in user flow.