how-to-desktop-app-electron-sample-sign-in.md

title	description	author	manager	ms.author	ms.service	ms.subservice	ms.topic	ms.date	ms.custom
Sign in users in a sample Electron desktop application.	Learn how to configure a sample Electron desktop to sign in and sign out users.	kengaderdus	mwongerapk	kengaderdus	entra-external-id	customers	how-to	06/27/2024	developer

Sign in users in a sample Electron desktop application

[!INCLUDE applies-to-external-only]

This how-to guide uses a sample Electron desktop application to show how to add authentication to a desktop application. The sample application enables users to sign in and sign out. The sample web application uses Microsoft Authentication Library (MSAL) for Node to handle authentication.

In this article, you do the following tasks:

• Register a desktop application in the Microsoft Entra admin center.

• Create a sign-in and sign-out user flow in Microsoft Entra admin center.

• Associate your web application with the user flow.

• Update a sample Electron desktop application using your own external tenant details.

• Run and test the sample desktop application.

Prerequisites

• Node.js.

• Visual Studio Code or another code editor.

• An external tenant. If you don't already have one, sign up for a free trial.

Register desktop app

[!INCLUDE active-directory-b2c-register-app] [!INCLUDE active-directory-b2c-app-integration-add-user-flow]

Grant admin consent

[!INCLUDE active-directory-b2c-grant-delegated-permissions]

Create a user flow

[!INCLUDE active-directory-b2c-app-integration-add-user-flow]

Associate the web application with the user flow

[!INCLUDE active-directory-b2c-app-integration-add-user-flow]

Clone or download sample web application

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.

Install project dependencies

1. Open a console window, and change to the directory that contains the Electron sample app:

   cd 1-Authentication\3-sign-in-electron\App

2. Run the following commands to install app dependencies:

   npm install && npm update

Configure the sample web app

1. In your code editor, open App\authConfig.js file.

2. Find the placeholder:

   1. Enter_the_Application_Id_Here and replace it with the Application (client) ID of the app you registered earlier.

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

Run and test sample web app

You can now test the sample Electron desktop app. After you run the app, the desktop app window appears automatically:

1. In your terminal, run the following command:

   npm start

   :::image type="content" source="media/how-to-desktop-app-electron-sample-sign-in/desktop-app-electron-sign-in.png" alt-text="Screenshot of sign in into an electron desktop app.":::

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

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

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

   :::image type="content" source="media/how-to-desktop-app-electron-sample-sign-in/desktop-app-electron-view-claims.png" alt-text="Screenshot of view token claims in an electron desktop app.":::

See also

• Enable password reset.
• Customize the default branding.
• Configure sign-in with Google.
• Explore the Electron desktop app sample code.