Speckle V2 Auth workflow in React Excel plugin

tluther · 7 December 2021 20:02

Sorry to @ you, but I know you did a lot of the work on the official excel plugin (and let’s be honest, you were probably gonna be the first to respond anyway).

I’m working on updating this excel add-in we had previously created for v1 and I’m trying to implement the SSO with Arup’s servers.

My current understanding is that I first need to register an app, then redirect the user here:
https://${server}/authn/verify/${appId}/${challenge}
then once the user says yes to giving the app access, they get back an access code which they can exchange for a token by posting the access code to the “/auth/token” endpoint.

The only trouble is, in the first step, I’m trying to redirect the user to the “/authn/verify” page by loading it in an iframe, and when I do this, I don’t see the page that asks if you want to give the app access. Instead I’m just seeing a sign in page like this:

Any idea’s why this would be happening?

I also tried just redirecting them in a new window, but I had troubles with then accessing the code that’s received after the user agrees.

izzylys · 8 December 2021 16:45

heya @tluther,

the excel connector is actually @teocomi’s lovely work!

I didn’t work on this, but had a quick look at the code and it seems we’re creating a new window for the auth flow. I vaguely remember that an iframe wouldn’t work which is why we went with the window, but I can’t remember the details. maybe when teo has a moment, he can chip in a bit!

but anyway, you can see how the login is working in the snippets below:
a new window is created and the challenge and the server url are being set and accessed from localStorage. a dialog is displayed asking the user for permission and the result is immediately exchanged for an auth token which is then also saved to localStorage

github.com

specklesystems/speckle-excel/blob/c3e133e730be4cc5ae575b508f0961e4d5efe3ed/src/store/index.js#L115-L147

    
      
          async redirect(_, data) {
            //go to login and refresh token
            window.location = `${data.serverUrl}/authn/verify/${process.env.VUE_APP_SPECKLE_ID}/${data.challenge}`
          },
          async login({ dispatch }, serverUrl) {
            // Generate random challenge
            var challenge =
              Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
            // Save challenge in localStorage
            localStorage.setItem(CHALLENGE, challenge)
            localStorage.setItem('serverUrl', serverUrl)
          
          
  // Send user to auth page
            await window.Office.context.ui.displayDialogAsync(
              `${window.location.origin}/redirect?challenge=${challenge}&serverUrl=${encodeURIComponent(
                serverUrl
              )}`,
              {
                height: 80,
                width: 30,

This file has been truncated. show original

github.com

specklesystems/speckle-excel/blob/c3e133e730be4cc5ae575b508f0961e4d5efe3ed/src/store/index.js#L168-L195

    
      
          async exchangeAccessCode(_, accessCode) {
            try {
              let serverUrl = localStorage.getItem('serverUrl')
              let response = await fetch(`${serverUrl}/auth/token/`, {
                method: 'POST',
                headers: {
                  'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                  accessCode: accessCode,
                  appId: process.env.VUE_APP_SPECKLE_ID,
                  appSecret: process.env.VUE_APP_SPECKLE_SECRET,
                  challenge: localStorage.getItem(CHALLENGE)
                })
              })
              let data = await response.json()
          
          
    if (data.token) {
                localStorage.removeItem(CHALLENGE)
                localStorage.setItem(TOKEN, data.token)

This file has been truncated. show original

tluther · 8 December 2021 17:01

ahh my bad, got my names mixed up!

Thanks for your help. I think I was kind of going in the same direction, but still ran into a few issues. But I’ll have another look into it and see if I can figure it out.

One other thing I wasn’t sure of is how to deal with the redirect after the user grants the app access. Should I just set the redirect to the server URL? Does it even matter since nothing else is being done in the browser after that point?

izzylys · 8 December 2021 17:26

no prob!

if you’re referring to what to set the redirect url to when creating the app on the speckle server, the url should point back to the app that you’re building. in dev, it works fine just to be localhost, but in prod you’ll need to point it to wherever your app is deployed

you can read more about authenticating speckle apps at the speckle guide here:

https://speckle.guide/dev/apps.html#authenticating-with-the-server

tluther · 9 December 2021 00:00

Yeah I set it to localhost for dev. But I’m opening it in a new browser window so after allowing access I end up seeing this:

and then I’m not sure how to get that access code back into my react app inside excel… Maybe I’m just overlooking something really obvious… I’m definitely by no means an expert when it comes to front end stuff

teocomi · 9 December 2021 15:36

So, in the excel plugin we’re using the Excel JS API and in order to authenticate, you need to fire up a dialog with their dialog API.

The domains you’re using for this should also be included in you plugin manifest, hopefully the guides linked above and our existing code can help figure it out