Authenticated UserData is deleted when user reloads page (normal?)

[kodeschooler]

Can someone please explain why a page refresh (eg, authenticated user hits F5) causes the userData and User to be truncated and the library to make another attempt to authenticate with the backend provider?

Is that specific to this library or is that how the process should work with the OIDC client?

Thanks for any info, I wasn't able to locate any articles on what happens when an authenticated user refreshes the page.

[simenandre]

It should pick up on the stored session details. However, maybe you can share more on how you've implemented oidc-react?

[roelvdwater]

I am also running into this with a newly created React app using create-react-app with React v18.2 and oidc-react v2.0.0. I'm using the PKCE flow and the authentication works properly, but the session isn't stored so if you're navigating to another page or refresh the page, the library doesn't recognize that you're signed in. However, it also doesn't redirect me to the specified authority_url anymore.

I've created a PoC to keep it as simple as possible, using the following code:

const oidcConfig: AuthProviderProps = {
  onSignIn: () => {
    window.location.replace(window.location.toString().split(/[?#]/)[0]); // Remove authentication query part
  },
  authority: "https://my-fake-authority.com/",
  clientId: "my-client-id",
  redirectUri: window.location.toString(),
  scope: "openid profile",
};

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <AuthProvider {...oidcConfig}>
      <App />
    </AuthProvider>
  </React.StrictMode>
);

function App() {
  const auth = useAuth();

  if (auth.userData === null) {
    return <></>;
  }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>You are signed in, {auth.userData?.profile.email}</p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

I have experimented with downgrading to React v17 and oidc-react v1.5.0 and everything works as expected there. Could you please investigate what's causing the described issue in the most recent version?

[simenandre]

Thanks for reporting this, @roelvdwater! I'm not entirely sure what causes this. We've migrated to a new underlying package for 2.0.0, so there might be issues with that.

Any chance you could make your PoC available public? Or maybe just the parts you're having issues with?

[roelvdwater]

@cobraz I was hoping that the code snippets would be sufficient, but here you go. Let me know if there's anything else you need from me.

[roelvdwater]

@cobraz @m-irc-o I can confirm that the PR fixed the issue. Thanks for the quick fix!