Using Auth0 in Office Web Add-ins

Help
1

Perhaps I’m just overlooking it but I’m playing around with Web Add-ins and I see a lot of archived content for Auth0 but nothing seems up to date.

I’ve got what I understand to be the current best practice dialog in place via Office.context.ui.displayDialogAsync()

I see the login page, I can login, but things seem to fall apart on the callback (apparently on the client side).

There was a most excellent Blog post, “Securing Blazor WebAssembly Apps,” mid last year, I wonder if there is anything up-to-date for Office Web Addins.

Alternately if some kind soul can point me at a GitHub where they have things working, I can grab bits from there. :slight_smile: Any and all help would be appreciated.

My suspicion is that I have the wrong callback port and/or there is a nice js library that’ll do all the heavy lifting for me.

1 Like
2

Auth0 may change their UI, and terminology, after this readme is published. We have tried to make as few assumptions as possible about the UI, but if you need to you can use these steps to get the gist of what needs to be done and then use Auth0’s help for instructions.

  1. In your Auth0 dashboard create an account (or you can use an existing account). You will be prompted to choose and account name which will serve as the subdomain in
    auth0.com -FaceTime PC with which your add-in will interact; for example, officeaddin.auth0.com . Make a note of this name.
  2. When you are prompted to choose providers, select Facebook, Google, and Microsoft Account. This sample doesn’t use any others, so disable any others that are enabled by default, including the Database (or Username-Password-Authentication ) option. You can change this setting later, if you want to extend the sample to other providers.
  3. Auth0 creates a Default App (also called a Client ) in the account. Navigate to the Settings for this app.
  4. Make a note of the client ID for use in a later step.
  5. For Client Type , choose Single Page Application .
  6. In Allowed Callbacks , enter https://localhost:3000/popupRedirect.html .
  7. Leave all other settings at their defaults and click Save Changes .
3

Thanks. I have the Auth0 bits working, it’s the JS bits inside the Office Add-in that I was looking to see if anyone else had source to share. It’s a backburner project so I’ll take a crack at it sometime in the future. :slight_smile:

4

Hey there, I am also looking into some samples in creating VSTO Excel add in with Auth0.

Please share if you find any sample with regards to it which would be of great help.

Thanks
Sathish

5

I’m able to login using the Office.context.ui.displayDialogAsync() as you mentioned. The flow that I’m trying to get working is Authorization Code Flow with PKCE. All is fine with Chrome and Windows Desktop Outlook but Safari and Mac Outlook fails assuming because of the third-party cookie restrictions (ITP).

  • In the modal dialog I call Auth0 SPA JS client.loginWithRedirect(). The client is initialized with redirect_uri to callback.html page.
  • After the login on Auth0 universal login page the browser redirects to my callback.html page.
    There I’m able to send a message back to my parent task-panel with command:
Office.onReady(() => Office.context.ui.messageParent(window.location.search))
  • task-panel is listening to this event. It closes the dialog and reloads the panel with the given url parameters code and state:
dialog.addEventHandler(Office.EventType.DialogMessageReceived, event => { ​
    ​dialog.close();
    ​window.location.search = event.message;
})
  • This way on Chrome I’m able to initialize Auth0 client in the task-panel, call client.getTokenSilently() which will then finalize the authentication with a call to /authorize endpoint passing the verification code that was received from the modal dialog.

My problem is that with Safari (or any browser engine that blocks third-party cookies) the final step fails with error login_required

I also tried out with refresh token rotation in order to prevent the hidden iframe implementation but it wont work with Safari either.

Would be great to know if anyone has got a working implementation without a need to create your own login page.

1 Like
6

Hi @zgrose , @jani.siivola

Can you please provide sample code to understand the same? I am also trying to implement something similar but I cannot seem to find documentation that can help me on that.

7

I think you should direct that Q to jani. That project fell by the wayside for me so I never followed up on his post.

1 Like