Bug: is there any way to update authConfig conditionally

[garima2094]

 const authConfig = {
    clientId: "L8T6bECXcwNV7Fdi4i4Yt8QO2nt4xfu8",
    authorizationEndpoint: "https://sdl-preprod.eu.auth0.com/authorize",
    tokenEndpoint: "https://sdl-preprod.eu.auth0.com/oauth/token",
    redirectUri: `${factory.config.GoGlobalFrontend.URL}login`,
    scope: "openid profile email",
    clearURL: false,
    extraAuthParameters: {
      audience: "https://api-preprod.sdl.com",
      **signup: false,**
    },
    onRefreshTokenExpire: (event) =>
      window.confirm(
        "Session expired. Refresh page to continue using the site?"
      ) && event.login(),
    logoutEndpoint: "https://sdl-preprod.eu.auth0.com/logout",
    //logoutRedirect: `${factory.config.GoGlobalFrontend.URL}logout`,
    extraLogoutParameters: {
      returnTo: `${factory.config.GoGlobalFrontend.URL}logout`,
    },
    autoLogin: false,
    decodeToken: false,
  };

In UI I have two button sign in and sign up,
I have to send signup: true if sign up button click and called login function, provided by authContext
but authProvider only taking the initial authConfig which declare at initial load, it is not taking updated one

<ThemeProvider theme={theme}>
      <CssBaseline />
      <ServiceFactoryProvider factory={factory}>
        <AuthProvider authConfig={authConfig}>

I want authConfig to be updated based on condition

---

_Converted from issue by @sebastianvitterso _

[soofstad]

Did just a bit of testing. But creating two AuthProviders where one has the extraAuthParameters and the other does not, seem to work fine.
Now this is not quite how the package was designed and intended to work, so you might hit some other issues.
But as far as I can see, this works.

An other idea could be to have the authConfig-object in a react state. Clicking the signup-button then updates the state and calls login.

[getsnoopy]

Just for context, we ran into this same issue, and doing it by updating the authConfig upon clicking the button was not at all trivial. The issue was that updating the authConfig triggers a React chain of state updates, and getting the timing right such that the code to call logIn runs after the update has happened was quite the balancing act.

In the end, we had to solve it with a "hack" where we implemented a useEffectAllDepsChange hook that had to be used in conjunction with a flag that we set (e.g., registrationInProgress) when the Signup button is pressed that then triggers the logIn functionality.

I really wish this library had a way to simply pass in a config or some config parameters directly to the logIn function upon calling it so that this whole ordeal can be avoided, as this clearly seems like a common enough use case.

[soofstad]

Hi,
I agree. The login function already takes the "state" parameter and "extraAuthParameters", so adding "extraAuthParameters" that is passed when calling the function is not a stretch. And I see how this would be useful.

Will see if I can get that done quite soon. Or perhaps you want to look into it yourself? #145

[soofstad]

This is now supported for login() in version 1.18.0 (https://github.com/soofstad/react-oauth2-pkce?tab=readme-ov-file#api)