Problem
How can I get up to date with the existing code?
What is the most secure way to develop authentication?
How do I set up the authentication?
On the 2/3 of my semester, I got transferred to the team developing the Microsoft Word Add-in. Since the progress was happening slowly on both word editors, we decided that it would be better to focus all forces on MS Word and have one add-in done rather than two undone.
I was pleased about that news since from the beginning, and I knew the Word add-in was based on Node.js and thus had a lot more versatility in writing the code rather than Google Apps Script, which only supported two types of files (.gs google script and .html)
To get correctly introduced in the Word add-in, whose main scripts were now written in typescript as they were better suited for asynchronous coding using the Word API, I wrote small functions and immediately got them peer-reviewed by fellow teammates Elinor. Since we were both working on MS Word, we needed to reuse each others' code. This practice introduced me nicely to the code flow in the Word repo and made sure we were both reporting to the same guidelines.
Soon after, I was asked to help a colleague build the GILO app's authentication. This meant I had to create Single Sign-On federated authentication where the provider is Microsoft Login: Logging in via Microsoft and not asking for the user's credentials. This time, I tried dealing with the problem more professionally. Since we were already using Jira, I was introduced by Vas to yet another powerful scrum tool - Confluence. Since he was the task issuer for the authentication, we agreed to document every step of the authentication - from the literature study to the implementation. I was given a whole page in Confluence, where I was free to document any valuable findings and the resources from our architecture sketching (screenshots below).
The next step was registering the app on GILO, which was, in my opinion, the most complicated part of my semester since it required an immense amount of literature and documentation to be read in order to understand what every little option does and how only a checkbox could turn upside down the whole authentication flow. In the end, after establishing the right path by the method of trial and error, I documented everything here so no one has to do it ever again.
To not interfere with the development of Word add-in, I created a separate repository where I wrote the code for the authentication with the help of my technical supervisor and CTO Frank. Every half week we conducted a code review, mainly because there was a bug I could not manage to find. On a few occasions, we got so stuck that even he needed a day or two to get it working.
In the end, I managed to produce a separate MS Word add-in with the sole purpose of authentication to the GILO app via Microsoft. This could be treated as a piece of a puzzle ready to be attached to the GILO Microsoft Word Add-in. It is not yet implemented since GILO is not officially launched, and there are no users' subscriptions to be confirmed with that authentication. My technical supervisor Frank approved the code and the CSO Vas to pass the required security measures. Both appreciated the work done. Link to code zip
Result:
Creating the authentication was not part of the MVP, but it was an important milestone that will later boost the GILO product when it gets launched. It took me almost a month and many iterations, validations, and meetings to finish. In my opinion, that is the most valuable achievement I was able to contribute to GILO.
The code begins in the ssoAuthES6.js file. There we are calling the Office.onReady method from the Microsoft Office API as an event handler.
In the 'getGraphData()' function we are asking Office to retreive the bootstrap token from Azure AD, we are attempting to exchange it in order to get access to Microsoft Graph (a Microsoft developer platform that connects multiple services and devices. The gateway to data and intelligence in Microsoft 365). Then we are handling if additional form of authentication is required (like third party code verification). Then we are using the token to retrieve and display users credentials.
Azure Active Directory Explanation - YouTube
Covers these topics extensively:
Login with Microsoft, Azure AD (within a React app) - YouTube
*Auth0 Authentication within a React app (Google example, No Azure AD) - YouTube
0Auth and OpenID Guide and Explanation - YouTube
0Auth and OpenID Guide and Explanation (article) - Developer.Okta