question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

App not re-rendering after token refresh

See original GitHub issue

Describe the bug After user has had the site open for some time, a page navigation or refresh causes a token refresh. The token refresh is successful, but the AzureAD component gets stuck at authenticationState: 1, instead of going to authenticationState: 2, like it does when first acquiring the token.

To Reproduce Steps to reproduce the behavior:

  1. Acquire first token
  2. Browse site for X amount of time (unsure of length until refresh)
  3. Token gets refreshed silently
  4. Page does not render. AzureAD stuck on authenticationState: 1 until page is manually refreshed.

Expected behavior When the token silently refreshes, the authenticationState in AzureAD state should be set to 2 instead of 1, as it does when the user first acquires the token.

Desktop (please complete the following information):

  • Windows 10
  • Chrome
  • Version 74.0.3729.169

Additional context index.js

class Index extends Component {
  state = {
    userInfo: null,
  }
  
  userJustLoggedIn = (accInfo) => {
    this.setState({
      userInfo: accInfo
    })
  }

  render() {
    return(
      <AzureAD
        provider={
          new MsalAuthProviderFactory(msalConfig, authParams, LoginType.Redirect)
        }
        forceLogin={true}
        accountInfoCallback={this.userJustLoggedIn}
      >
        <HashRouter>
          <App userInfo={this.state.userInfo}/>
        </HashRouter>
      </AzureAD>
    );
  }
}


  ReactDOM.render(
    <Index/>, document.getElementById('root')
  );

msalConfig.js

export const msalConfig = {
  auth: {
    authority: process.env.REACT_APP_AUTHORITY,
    clientId: process.env.REACT_APP_CLIENT_ID,
    redirectUri: process.env.REACT_APP_REDIRECT
  },
  cache: {
    cacheLocation: "localStorage",
    storeAuthStateInCookie: true
  }
};

export const authParams = {
  scopes: [
    'https://graph.microsoft.com/Calendars.ReadWrite.Shared',
    'https://graph.microsoft.com/User.ReadBasic.All',
    'https://graph.microsoft.com/email',
    'https://graph.microsoft.com/profile',
    'https://graph.microsoft.com/User.Read'
  ]
}

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:11 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
AndrewCraswellcommented, Jul 26, 2019

PR was merged and a release was created. I’ve tested in my app and it seems resolved. Since there were several different types of problems reported, please let me know if the latest release does not resolve your issue, and we can reopen, or open a new issue specific to the particular edge case.

0reactions
korinercommented, Jul 28, 2019

Thanks @AndrewCraswell - I’ll let you know if I notice any more issues

Read more comments on GitHub >

github_iconTop Results From Across the Web

Component doesn't re-render on follow up request after token ...
In the axios-hooks docs there's a link to a working example to implement a refresh token feature. It is running in CodeSandbox at...
Read more >
How and when to force a React component to re-render
React automatically re-renders components, but what happens when a component is not updating as expected? Find out what you can do here.
Read more >
Why is authentication lost after refreshing my single page ...
A workaround for this is to use Refresh Token Rotation and set the cacheLocation to “localstorage” when initializing the Auth0 client. Note: ...
Read more >
Refreshing access and refresh tokens via Apollo in React - Help
I am trying to implement the logic for working with refresh and access tokens through Apollo in React. In the process of writing...
Read more >
Refreshing Your Security Token
Sometimes, you may need to refresh your Formstack Security Token in order to get the app to work properly. Usually, an email will...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found