Modify the extraAuthParameters before calling login

[LazarescuAlexandru]

Hello,

I need to modify the extraAuthParameters before calling login() function. I tried to do it by simply adding the extraAuthParameter to the authConfig object but it is not taken into consideration:
authConfig.extraAuthParameters = {authhandler: 'some value'};
console.log(authConfig.extraAuthParameters);
login();
If I set the extraAuthParameters in the initial declaration of the authConfig, it works fine. But in my use case I need 2 buttons, one that will login without the extraAuthParameter and another with.

Thank you!

[LazarescuAlexandru]

Solved it:
Used State Variables for it.
Here is what I did.

1. In the WrappedSecureApp I declare the authConfig state variable and then pass the variable and the setter to the App:

function WrappedSecuredApp() {

const [authConfig, setAuthConfig] = React.useState({
  clientId: ...,
  authorizationEndpoint: ...,
  tokenEndpoint: ...,
  logoutEndpoint: ...,
  redirectUri: ...,
  scope: 'openid',
  onRefreshTokenExpire: (event) => window.confirm('Session expired. Refresh page to continue using the site?') && event.login('state'),
  autoLogin: false,
  clearURL: true,
  storage: 'session'
});


return (
      <AuthProvider authConfig={authConfig} >
          <App authConfig={authConfig} setAuthConfig={setAuthConfig}/>
      </AuthProvider>
    
);

}

export default WrappedSecuredApp;

2. In the app, I have a function to set the parameter I want:

function App(props) {
const {authConfig, setAuthConfig} = props;
.....
const doLoginWithAuthId = () => {
let updatedValue = {extraAuthParameters: {authhandler: ...}};
setAuthConfig (authConfig => ({
...authConfig,
...updatedValue
}));

}; 

.....}

3. Use the useEffect on authConfig and run login once it is changed.

useEffect(() => {
if (authConfig.extraAuthParameters) {
//this will not run in the first load se the extraAuthParameters is not set.
login(stateVar);
}
}, [authConfig]);