Skip to content

Latest commit

 

History

History
122 lines (72 loc) · 5.6 KB

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

File metadata and controls

122 lines (72 loc) · 5.6 KB
Raw
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

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