In this post, we look at a GitHub Action that creates an event in a user’s Outlook calendar with Microsoft Graph using MSAL for Node.
In a related post published previously, I have explained how we can do the same using PnP JS. In this post we will be modifying that approach to use MSAL for Node instead of PnP JS.
Example scenario
An example usage might be — when a pull request is submitted in the MAIN branch on the GitHub repository, an event is created in the repository owner’s calendar on the next day which contains the details of the pull request. The owner will get a reminder on the next day at the specified time and then the owner can review the pull request and can the required take action.
Setup
Firstly, if GitHub Actions are new to you, please have a quick look at this short video to understand what GitHub actions are and then have a look at this video by GitHub to understand more details.
Pre-requisites for using the action
App registration
Since the GitHub Action explained in this post uses Microsoft Graph, we need to create an app registration in Azure AD so that we can communicate with Office 365. To do that please follow the instructions mentioned in this video by Microsoft. Provide the app “Calendars.ReadWrite” permissions and create a client secret for that app.
Repository secrets
In the GitHub repository where this action will be used, create the following 3 secrets by navigating to “Settings > Secrets”
- CLIENT_ID : The Id of the app registration created above
- CLIENT_SECRET : A secret of the app registration created above.
- TENANT_ID : The Id of your Microsoft 365 tenant.
Using the action in workflow
In the GitHub repository, click on “Actions”. GitHub will recognize project type and will show us some predefined workflows which can be used. However, we will not use a predefined one and instead start from scratch. So click on “Set up a workflow yourself”.
This will open a YAML file with some code in it. Delete all of and enter the following
When there is a pull request, the above workflow will create an event for user ‘user@contoso.onmicrosoft.com’ on the next day from 12:00 to 13:00 (automatic as no start or end is specified).
If more information about the event is needed then, all of the information attached to an event is available in the github.event variable. We can use github.event object in the required steps — e.g. in the body of the calendar event github.event.compare .
More details on the usage of this action can be found here.
Repo related to the action
The entire code of the action can be found here. Please feel free to fork it and make changes accordingly.
The process-related to developing an Action (Node js) is similar to developing any Node js project. Once we are happy the code does what it is should do, we add some files related to make the code into a GitHub action. Instead of me rewriting the whole process, here is an article from GitHub which explains on how to create a simple JavaScript action.
Packages
The same concept was used to create the “Create an event with Microsoft Graph using MSAL” action. Once the base setup is ready, we install the MSAL for node package
npm install @azure/msal-node
We also install
- The package related to Microsoft Graph so that we can use the Graph client.
- date-fns package to help with the date related functionality
npm install @microsoft/microsoft-graph-client isomorphic-fetch date-fns
To make use of the code related to actions i.e. say getting inputs or providing outputs we install the ‘@actions/core’ library
npm install @actions/core
There are more such packages provided by the GitHub team which can be found here which will help in creating the code for Actions.
We can instead download the repository and install all the packages by running
npm i.
Code
The repo contains 3 typescript files.
- main.ts — Gets the inputs from the workflow and passes them to helper methods in other files.
- graph.ts — Has methods to create an event in a person’s calendar with the help of Graph client.
- auth.ts — Makes use of MSAL to get an access token which will then be used by methods in graph.ts
In main.ts we get the input variables using the example code shown below:
const subject = core.getInput('subject');
We do the same for all the inputs.
Once we have all the inputs, we perform the authentication with the help of client id, client secret and the tenant id. After that we compose the event object and pass it to the Graph API /users/{username}/calendars/events .
Summary
What we have seen above is a simple action that uses the power of MSAL and Microsoft Graph to create an event. With Microsoft Graph there are endless possibilities that we can think of developing.
