page_type	languages	products	description	urlFragment
sample	javascript	nodejs electron ms-graph azure-active-directory	Demonstrates how to use MSAL Node to sign-in users and acquire access tokens for a protected resource such as Microsoft Graph in an Electron desktop application using the OAuth 2.0 authorization code flow with PKCE.	ms-identity-javascript-nodejs-desktop

An Electron desktop application using MSAL Node on Microsoft identity platform

This sample demonstrates how to use MSAL Node to sign-in a user and acquire an access token for a protected resource such as Microsoft Graph in an Electron desktop application using the authorization code grant with PKCE flow.

ℹ️ Looking for a TypeScript implementation? See: ElectronTestApp

Features

This sample demonstrates the following MSAL Node concepts:

• Configuration
• Login and logout
• Acquiring an access token
• Calling a web API

Contents

File/folder	Description
AppCreationScripts/	Contains Powershell scripts for automating app registration.
App/authProvider.js	Main authentication logic resides here.
App/main.js	Application main process.
App/fetch.js	Axios HTTP client for calling endpoints with a bearer token.
App/renderer.js	Renderer processes and UI methods.
App/constants.js	Example user accounts in JSON .
App/CustomProtocolListener.js	Register and unregister a custom typed protocol.
App/UIManager.js	Application UI and elements.
App/preload.js	Give the Renderer process controlled access to some Node API.
App/authConfig.js	Configuration objects to be passed to MSAL instanc.

Getting Started

Prerequisites

• Node.js must be installed to run this sample.
• Visual Studio Code is recommended for running and editing this sample.

Register and Setup the application

Step 1: Register the application

1. Navigate to the Azure portal and select the Azure AD service.
2. Select the App Registrations blade on the left, then select New registration.
   • In the Name section, enter a meaningful application name that will be displayed to users of the app, for example msal-node-desktop.
   • In the Supported account types section, select Accounts in any organizational directory and personal Microsoft accounts (e.g. Skype, Xbox, Outlook.com).
   • Select Register to create the application.
3. In the list of pages for the app, select Authentication.
4. Select Add a platform, select Mobile and desktop applications
5. In the Redirect URIs list, under Suggested Redirect URIs for (mobile, desktop) be sure to add msal{Your_Application/Client_Id}}://auth.
6. Select Configure.

Step 2: Clone the repository

Clone this repository git clone https://github.com/Azure-Samples/ms-identity-javascript-nodejs-desktop.git

Step 3: Configure the Electron sample project

1. Open the .authConfig.js file and provide the required configuration values.
   1. Replace the string Enter_the_Application_Id_Here with your app/client ID on Azure AD portal.
   2. Replace the string Enter_the_Tenant_Info_Here with your tenant ID on Azure AD portal.
   3. Replace the string Enter_the_Redirect_Uri_Here with the default redirect uri generated by portal msal{Your_Application/Client_Id}://auth
   4. Replace the string Enter_the_Cloud_Instance_Id_Here with https://login.microsoftonline.com/ (see note below).
   5. Replace the string Enter_the_Graph_Endpoint_Here. with https://graph.microsoft.com/ (see note below).

ℹ️ note: This is for multi-tenant applications located on the Global Azure cloud. For more information, see: Use MSAL in a national cloud environment

ℹ️ note: This is for MS Graph instance located on the Global Azure cloud. For more information, see: Use Microsoft Graph in a national cloud environment

step 4: Run the sample

1. You'll need to install the dependencies of this sample once:

   cd ms-identity-javascript-nodejs-desktop
   npm install

2. Then, run the application via command prompt or console:

   npm start

Contributing

If you'd like to contribute to this sample, see CONTRIBUTING.MD.

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.