"undefined" is not valid JSON while authenticating once deployed, working fine in local.

[bhargavmullakuru]

Issue and Steps to Reproduce

Hi @guillaume-chervet , App was working fine in local, After deploying to server, it was throwing the below error.

"undefined" is not valid JSON at getLoginParams, Could you pls help me with this. Her is my config format.

{
authority:''
client_id:''
redirect_uri:''
response_type:''
scope:''
 storage: localStorage,
demonstrating_proof_of_possession : true
demonstrating_proof_of_possession_configuration : config
}

Versions

7.14.1

Screenshots

Expected

Actual

Additional Details

• Installed packages:

[bhargavmullakuru]

@guillaume-chervet, Seems like storage is not working when deployed in server. When debugged, the same storage object in local has diff values, whereas server Storage object doesn't have any values.

In local.

in Dev, Storage was not created properly

[guillaume-chervet]

hi @bhargavmullakuru , do you have a video which can help me to unsderstand user flow on your server?

At which stage does this happen?

[bhargavmullakuru]

@guillaume-chervet Just normally deployed and tried to access Dev URL, it is throwing that error. Let me do and send a screen recording

[guillaume-chervet]

hi @bhargavmullakuru ,

You may have a wrong configuration somewhere. I need more information to be able help you.

[bhargavmullakuru]

Yes @guillaume-chervet , but it's working fine in local. 🫣🥲

[Moraissz]

@bhargavmullakuru We have the same problem, but even local it doesn't work

We figure out that its because the redirect uri param did not finish with '/authentication/callback'.

It's mandatory to end with '/authentication/callback' @guillaume-chervet ?

[guillaume-chervet]

Hi @Moraissz , the callback url can be whatever you want. OidcProvider need to be before any router in the component hierarchie to prevent router to catch the flow.

[guillaume-chervet]

@Moraissz what happen with your configuration set on this repository demo?

[Moraissz]

I didn't try my configuration set on the react demo , could try later to see what happens

That's strange, but somehow this undefined problem vanished when we put the /authentication/callback in the redirect url, without changing anything else.

We put the OidcProvider before everything in App.tsx

[bhargavmullakuru]

hi @bhargavmullakuru ,

You may have a wrong configuration somewhere. I need more information to be able help you.

@guillaume-chervet Here is my configuration.

{
    "authority": "https://idpstg.ice.ibmcloud.com/oauth2",
    "client_id": "6f4906fd-2e64-4296-a0e5-874773300c81",
    "redirect_uri": "https://appsdev.schools.nyc/msi/",
    "response_type": "code",
    "scope": "openid profile email offline_access",
    "post_logout_redirect_uri": "https://appsdev.schools.nyc/msi",
    "demonstrating_proof_of_possession": true,
    "demonstrating_proof_of_possession_configuration": {
        "importKeyAlgorithm": {
            "name": "RSASSA-PKCS1-v1_5",
            "hash": {
                "name": "SHA-256"
            }
        },
        "signAlgorithm": {
            "name": "RSASSA-PKCS1-v1_5",
            "hash": {
                "name": "SHA-256"
            }
        },
        "generateKeyAlgorithm": {
            "name": "RSASSA-PKCS1-v1_5",
            "modulusLength": 2048,
            "publicExponent": {
                "0": 1,
                "1": 0,
                "2": 1
            },
            "hash": {
                "name": "SHA-256"
            }
        },
        "digestAlgorithm": {
            "name": "SHA-256"
        },
        "jwtHeaderAlgorithm": "RS256"
    }
}

it was working fine in local. no idea why it's failing while accessing url.

[bhargavmullakuru]

@guillaume-chervet is is possible to set and get when object key is undefined?

[guillaume-chervet]

hi @bhargavmullakuru ,

you redirect_uri is equal to post_logout_uri.

it shoulb be an unique url that OIDC client can use to catch the redirection :)

in the demo it looks like : redirect_uri: window.location.origin + '/authentication/callback',

[bhargavmullakuru]

@guillaume-chervet I think library is not using post_logout_uri key. Let me try it by appending redirect_uri with '/authentication/callback'

[bhargavmullakuru]

after appending with '/authentication/callback' with redirect_uri it worked. Thanks for help @guillaume-chervet , if any issue, i will let you know.

[guillaume-chervet]

Hi @bhargavmullakuru feel free to close the issue when you think it is done.

[bhargavmullakuru]

@guillaume-chervet ... Now after login, it was not redirecting properly to home.

It's displaying blank page with console errors.

any suggestion ? my jsx is below.

<OidcProvider
      configuration={configuration}
      callbackSuccessComponent={CallbackSuccessComponent}
      onEvent={(configurationName, eventName, data) => {
        console.log("event...", configurationName, eventName, data);
      }}
    >
      <BrowserRouter basename={BASE_PATH}>
        <SettingsContext.Provider value={{ ...settings, configuration }}>
          <App />
        </SettingsContext.Provider>
      </BrowserRouter>
    </OidcProvider>

and my callback success component is here,..

const CallbackSuccessComponent = () => {
  const navigate = useNavigate();
  const { idToken } = useOidcIdToken();
  useEffect(() => {
    if (idToken) {
      navigate("/", { replace: true });
      window.location.reload();
    }
  }, [idToken]);

  return <div>CallbackSuccessComponent</div>;
};

Help needed. Thanks in advance.

[guillaume-chervet]

hi @bhargavmullakuru , I hope it is your last problem.

What does look like your BASE_PATH value?

Do you have something if you set up

<OidcProvider
      configuration={configuration}
      callbackSuccessComponent={CallbackSuccessComponent}
      onEvent={(configurationName, eventName, data) => {
        console.log("event...", configurationName, eventName, data);
      }}
    >
      <h1>Welcome :) </h1>
    </OidcProvider>

[bhargavmullakuru]

@guillaume-chervet . My base path value is /

[guillaume-chervet]

Just for test @bhargavmullakuru what happen if you removed it?

[bhargavmullakuru]

@guillaume-chervet ...one more thing, do we really need /authentication/callback in URL. I think /callback is enough right ? seems like it is looking for /msi/authentication/static/ which the path doesn't exist. it should be /msi/static/. since /msi is the base url in server for my application.

[guillaume-chervet]

Hi @bhargavmullakuru callback can be what you want. It just need to to interfer with your application routes.

[bhargavmullakuru]

Okay @guillaume-chervet .. i will try to register my app url with URL + /callback and will give it a try. Thanks.

[guillaume-chervet]

hi @bhargavmullakuru, is it okey for you, may we close this issue?

[bhargavmullakuru]

Yes, closing it.