Sample of token expiration handling

Feature Request

Is your feature request related to a problem? Please describe.

It is not clear how to handle tokens after they expires. All the samples in this repo call the token API once and not handling token expiration.

Currently, I handle the token expiration on my own - when the token is about to expire, I get a refreshed token use createDirectLine({ token }) with the new token. I’m not sure if this the desired approach. Since I believe that the directline should be created once (the current conversation will be interrupted)

Describe the suggestion or request in detail

Please add a sample to this repo of how to handle token expiration.

Describe alternatives you have considered

Additional context

[feature-request]

[stevkan]

@hraz-msft, I suspect the issue is how you are introducing the refreshed token into your Web Chat component. In the example I provide below, I am able to refresh the token while maintaining the conversation context without issue.

In short, I get my initial token and pass it into a function, createDirectLine, to create a Direct Line object with it. The output of this is passed into startWebChat which initiates renderWebChat. Lastly, I have a function, conversationTimer, which is called immediately to start the countdown.

When the countdown is completed, a refreshed token is acquired, createDirectLine is called again with the refreshed token passed into it followed by calling startWebChat once more which reconnects the Web Chat component using the new token. Then the countdown/process begins, again.

FYI, I use locally hosted endpoints for calling a “token server” where I exchange my Direct Line secret for a token. I also set the timer to just 15 secs for effect.

<script>
  ( async function () {

    let directLine;

    const refreshToken = async () => {
      const res2 = await fetch( 'http://localhost:3500/directline/refresh', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify( { token: sessionStorage.getItem( 'token' ) } )
      } );
      const { token: token2 } = await res2.json();
      return token2;
    }

    const conversationTimer = () => {
      setInterval( async () => {
        const sessionToken = await refreshToken();
        sessionStorage.setItem( 'token', sessionToken );
        directLine = createDirectLine( sessionToken )
        startWebChat();
      }, 15000 );
    };

    conversationTimer();

    const createDirectLine = ( token ) => {
      const dl = window.WebChat.createDirectLine( {
        token
      } )
      return dl;
    }

    const res1 = await fetch( 'http://localhost:3500/directline/conversations', { method: 'POST' } );
    const { token: token1 } = await res1.json();
    sessionStorage.setItem( 'token', token1 );
    
    directLine = createDirectLine(token1);

    const startWebChat = () => {
      window.WebChat.renderWebChat(
        {
          directLine: directLine
        },
        document.getElementById( 'webchat' )
      );
      document.querySelector( '#webchat > *' ).focus();
    }

    startWebChat();

  } )().catch( err => console.error( err ) );
</script>

[hrazmsft]

Thanks @stevkan for this sample! I think I’ve found the issue on our side. I’m closing the issue now, and I will re-open it again and tag you if other issues will come up due to the refresh