This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
In this quickstart, you’ll use a sample application to learn how to add authentication to a desktop application. The sample application enables users to sign in and sign out and uses the Microsoft Authentication Library (MSAL) to handle authentication.
Before you begin, use the Choose a tenant type selector at the top of this page to select tenant type. Microsoft Entra ID provides two tenant configurations, workforce and external. A workforce tenant configuration is for your employees, internal apps, and other organizational resources. An external tenant is for your customer-facing apps.
To register your application and add the app's registration information to your solution manually, follow these steps:
in the top menu to switch to the tenant in which you want to register the application from the Directories + subscriptions menu.msal-node-desktop. Users of your app might see this name, and you can change it later.http://localhost.*Extract the project, open the ms-identity-JavaScript-nodejs-desktop-main folder, and then open .authConfig.js file. Replace the value as follows:
| Variable | Description | Example(s) |
|---|---|---|
Enter_the_Cloud_Instance_Id_Here |
The Azure cloud instance in which your application is registered | https://login.microsoftonline.com/ (include the trailing forward-slash) |
Enter_the_Tenant_Id_Here |
Tenant ID or Primary domain | contoso.microsoft.com or aaaabbbb-0000-cccc-1111-dddd2222eeee |
Enter_the_Application_Id_Here |
Client ID of the application you registered | 00001111-aaaa-2222-bbbb-3333cccc4444 |
Enter_the_Redirect_Uri_Here |
Redirect Uri of the application you registered | msal00001111-aaaa-2222-bbbb-3333cccc4444://auth |
Enter_the_Graph_Endpoint_Here |
The Microsoft Graph API cloud instance that your app will call | https://graph.microsoft.com/ (include the trailing forward-slash) |
Your file should look similar to below:
const AAD_ENDPOINT_HOST = "https://login.microsoftonline.com/"; // include the trailing slash
const msalConfig = {
auth: {
clientId: "00001111-aaaa-2222-bbbb-3333cccc4444",
authority: `${AAD_ENDPOINT_HOST}/aaaabbbb-0000-cccc-1111-dddd2222eeee`,
},
system: {
loggerOptions: {
loggerCallback(loglevel, message, containsPii) {
console.log(message);
},
piiLoggingEnabled: false,
logLevel: LogLevel.Verbose,
}
}
}
const GRAPH_ENDPOINT_HOST = "https://graph.microsoft.com/"; // include the trailing slash
const protectedResources = {
graphMe: {
endpoint: `${GRAPH_ENDPOINT_HOST}v1.0/me`,
scopes: ["User.Read"],
}
};
module.exports = {
msalConfig: msalConfig,
protectedResources: protectedResources,
};
You'll need to install the dependencies of this sample once:
cd ms-identity-javascript-nodejs-desktop-main
npm install
Then, run the application via command prompt or console:
npm start
Select Sign in to start the sign-in process.
The first time you sign in, you're prompted to provide your consent to allow the application to sign you in and access your profile. After you're signed in successfully, you'll be redirected back to the application.
To learn more about Electron desktop app development with MSAL Node, see the tutorial:
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;
Select Register.
The application's Overview pane displays upon successful registration. Record the Application (client) ID to be used in your application source code.
To specify your app type to your app registration, follow these steps:
http://localhost, then select Configure.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 tenant administrator 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.
Follow these steps to create a user flow a customer can use to sign in or sign up for an application.
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.
Note
Additional identity providers will be listed here only after you set up federation with them. For example, if you set up federation with Google, Facebook, Apple or an OIDC identity provider, you'll be able to select those additional identity providers here.
Under Email accounts, you can select one of the two options. For this tutorial, select Email with password.
Under User attributes, choose the attributes you want to collect from the user upon sign-up. By selecting Show more, you can choose attributes and claims for Country/Region, Display Name, and Postal Code. Select OK. (Users are only prompted for attributes when they sign up for the first time.)
Select Create. The new user flow appears in the User flows list. If necessary, refresh the page.
To enable self-service password reset, use the steps in Enable self-service password reset article.
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.
To get the desktop app sample code, download the .zip file or clone the sample web application from GitHub by running the following command:
git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git
If you choose to download the .zip file, extract the sample app file to a folder where the total length of the path is 260 or fewer characters.
Open a console window, and change to the directory that contains the Electron sample app:
cd 1-Authentication\3-sign-in-electron\App
Run the following commands to install app dependencies:
npm install && npm update
In your code editor, open App\authConfig.js file.
Find the placeholder:
Enter_the_Application_Id_Here and replace it with the Application (client) ID of the app you registered earlier.
Enter_the_Tenant_Subdomain_Here and replace it with the Directory (tenant) subdomain. For example, if your tenant primary domain is contoso.onmicrosoft.com, use contoso. If you don't have your tenant name, learn how to read your tenant details.
You can now test the sample Electron desktop app. After you run the app, the desktop app window appears automatically:
In your terminal, run the following command:
npm start
On the desktop window that appears, select the Sign In or Sign up button. A browser window opens, and you're prompted to sign in.
On the browser sign-in page, type your Email address, select Next, type your Password, then select Sign in. If you don't have an account, select No account? Create one link, which starts the sign-up flow.
If you choose the sign-up option, after filling in your email, one-time passcode, new password and more account details, you complete the whole sign-up flow. You see a page similar to the following screenshot. You see a similar page if you choose the sign-in option. The page displays token ID claims.
Training
Module
Discover how Microsoft Entra External ID can provide secure, seamless sign-in experiences for your consumers and business customers. Explore tenant creation, app registration, flow customization, and account security.
Certification
Microsoft Certified: Identity and Access Administrator Associate - Certifications
Demonstrate the features of Microsoft Entra ID to modernize identity solutions, implement hybrid solutions, and implement identity governance.
