Enable Authentication for visitors in Web Widget

Hi Vikas, we don't listen for window changes, instead you will need to call updateSettings when a route has changed or the page is refreshed. 

Hi Daniel,

                 We are using updateSettings to authenticate the user after he logs in . Unfortunately the jwtFn callback does not get called on updateSettings.

I see the color is changed which confirms that the updateSettings is being run.

Here is the sample code:

this.zE('webWidget', 'updateSettings', {
  webWidget: {
    color: {theme: '#FFFF00'},
    authenticate: {
      jwt: jwtToken,
      chat: {
        suppress: false,
        jwtFn: function (callback) {
            this.apiService.ssoPost(this.zendeskAPIURL, null, null).subscribe((response) => {
              console.log('Response from Zendesk Chat API - Identify', response.zendeskToken);
              console.log('Call back', callback);
          callback(jwtToken);
            });
        },
        },
      },
    },
  });

Hi Vikas, apologies I may have misunderstood your initial question. Correct, you can't use updateSettings in combination with authenticate to renew the JWT. There is an existing way to renew the JWT for Chat authentication which I believe you're aware of and is described in this document. We plan to provide a similar solution to renew the JWT for Support authentication, i'll provide an update here when we have an ETA.

Hi Daniel, I am running into the same issue as described above.

Using an SPA Framework (such as angular) means that we need to be able to 'refresh' the authentication method for the web widget / chat AFTER a user logs in, but without a page reload. Is this possible?

Hi Brian, yes this is now possible. You can now refresh the authentication method for an SPA by using the jwtFn, similar to the code snippet here.

Note: The code in the example would authenticate with both chat and help center.

Hi Daniel. When you say this is now possible, this is in regards to applying via the `updateSettings` endpoint? I see the docs still mention it's not possible. We need to conditionally authenticate based on a user's chatting status, which we obviously can't get until after the widget has been loaded. The reason for this is so we don't lose an active chat if the user signs into our app during the chat session. Here's my code: 

const chatInProgress = zE("webWidget:get", "chat:isChatting");
  if (!chatInProgress) {
    zE("webWidget", "updateSettings", {
      webWidget: {
        authenticate: {
          chat: {
            jwtFn: function(callback) {
              fetch(`${window.location.origin}/generate_jwt_token`).then(function(res) {
                res.text().then(function(jwt) {
                  callback(jwt);
                });
             });
           }
         }
       }
     }
   }
);

If it's still not possible to do via `updateSettings`, how can I refresh authentication outside of page load?

Hi Miranda,

My name is Miranda also! :)  Thanks for your message.  Unfortunately, it isn't possible to refresh authentication outside of page load.

The jwtFn is not invoked when setting or updating the widget settings.  Rather, it is invoked when the websocket connection is made to Chat. This happens on page load (unless connectOnPageLoad is set to false), which is the only time the function gets called.  Setting the jwtFn after page load has happened will not have any effect as it can not be updated once the websocket connection has been made.

Apologies I don't have better news.  If you can provide a little more information about your particular use case, I'm happy to see if we can help.

Thanks,

- Miranda.

I'm struggling with this issue as well using a SPA (React).

My flow would be:
1. users loads my web app
2. User creates an account
3. On account creation i want to authenticate that user

All of the above currently happens without a page load.

Has anyone been able to find a solution for this? Seems crazy that you wouldn't be able to do this without actually refreshing the page?

Hi @Bo Bissict,

Thanks for your message!  As mentioned above, unfortunately, there isn't a way to authenticate a user outside of page load at the moment.  Apologies I don't have better news.  I will make a note of your feature request on our side, along with your contact details.  If we solve for this in the future, I'll be sure to reach out to let you know.

Thanks,

- Miranda.

I'm in the same situation—I work on a SPA and I want to authenticate a user in the widget after they log in, which happens after page load. Currently we do this by manually triggering a reload after a successful log in.

This is disruptive to the user experience and analytics (e.g. misreported page views that are just from refreshing the page).

I can't imagine this is an uncommon use case, but it's really difficult to know that it's not possible as it's not stated in your documentation.

It seems reauthenticating is possible for help center, as the docs explicitly acknowledge that SPAs exist (source):

You can use the helpCenter:reauthenticate command to trigger user authentication after widget page load. This is particularly useful in a single page application (SPA).

I'm puzzled why this isn't also the case for chat. Please consider this another vote for a feature request.

@Ethel Ng, Mine is a similar use case. I delayed loading the "https://static.zdassets.com/ekr/snippet.js" file until user successfully login into my app. Then i load the snippet.js and inside onload function, i initialize the zeSettings object. This way, It is working fine for me without a hard reload.

The only problem I have now is, when the user logout of my app and login back again in the same browser tab, even though i call zE.logout() and unload the js file from app during logout, chat.authenticate method is not invoked again. When i do browser hard reload, then it works.

Thanks Sivakumar, I had considered that but it's not right for us as we also want to allow non-authenticated visitors to use the chat.

Hi @Ethel Ng, @Sivakumar,

Thanks for providing the additional information.  Much appreciated.  As above, I'll make a note of your requirements on our side, along with your contact details.  If we solve for this in the future, I'll be sure to reach out to let you know.

Thanks,

- Miranda.

We had the same problem in our application. We have a SPA and we needed to set the correct user information after our login, however, it only worked after a page refresh.

One (hacky) alternative we've found so far is to capture the callback and call it later on, after we've performed our authentication.

Here are the two relevant pieces:

window.zESettings = {
  webWidget: {
    authenticate: {
      chat: {
        jwtFn: (callback) => {
          // Intercepting Zendesk Widget Callback
          window.ZENDESK_AUTHENTICATION_CALLBACK = callback

          // When user is already logged, just pass through the token
          if (userIsLoggedIn) {
            getChatToken().then(callback)
          }
        }
      }
    }
  }
}

Then, as now we have the callback control, we can just pass the token after logging in:

myApplication.login().then(
  () => getChatToken().then(window.ZENDESK_AUTHENTICATION_CALLBACK)
)

I know it's probably not the best solution, however, we've tried some other approaches and this one, even though hacky, worked like a charm for us. :)

---

My personal opinion is that the Widget should have at least an option to be destroyed and constructed again, this way, it's possible to make those kind of configuration easier. Something like:

zE.destroy()
ze.createNewInstance(options)

Of course, if possible, it should be nice to only pass new parameters and the widget reconfigures itself, however, I know that this might be hard to accomplish, with some trade offs.

Anyway, hope it helps someone and shed some light on how to fix this problem at least when there's no official solution.

I would be happy to collaborate with Zendesk in order to find a good solution for this problem.

Hi William,

I am also planning to integrate the zendesk live chat in our angular application. I find this npm package(https://www.npmjs.com/package/ngx-zendesk-webwidget) very good to integrate .

But the problem is i am not sure where we can inject authentication mechanism for zendesk chat. It will be great if you can share your approach. How have you included it in your application

What the Zendesk use in the JWT token to identify the user? Is it only the external_id field?

After troubleshooting we found out that we filled the external_id with a non global id (an id local to a data center).

Is there something we can do to keep the user history if we change the external_id from local id to global id? All other fields in the JSON are the same.

Best regards,

Christian

Hi Dave,

Thank you for the answer it is very helpful. But where is the "Allow update of external IDs" setting in the Zendesk portal? 

Best regards,

Christian

Hi again,

I came accross this page: https://mydomain.zendesk.com/admin/security/sso, but it's about staff and end user SSO, but my problem with the external_id is with the Zendesk Chat Widget, I don't want to active a custom SSO, I want to use the JWT end user authentication implementation in the widget only.

Best regards,

Christian