Integrate Salesforce registration page with VanillaJS oidc-client-js, getting the error - No matching state found in storage

Question

Integrate Salesforce registration page with VanillaJS, getting the error - No matching state found in storage

We are redirecting the user to Salesforce registration page when Create Account button is created. Once the User registers in Salesforce, the user is redirected to our site but we are getting this error. ('No matching state found in storage').

We tried the below solution but still getting the same error.

As I stated in my answer, the oidc client maintains state information in the local storage so that it can verify that it got the response back from the intended server. You can mimic this by generating a secure random string and saving it in localStorage. Do this before sending a request to your auth server to register a new user.

Reference- Integrate third party login in from my registration page with IdentityServer4 and Angular 6 - 'No matching state found in storage'

Is there a function related to creating registration? How to fix this issue?

Thanks. Appreciate your help.

Answer 1

After spending days on this issue. Finally found the workaround as registration is not a feature of OIDC.

To overcome this issue, need to follow the Sign In process same as for Sign Up process, created the startSignupMainWindow method same as startSigninMainWindow and passing the signUpFlag:true as shown below in code.

/* This function is written to mimic the oidc library sign in process flow */
function startSignupMainWindow() {
  var someState = {
    message: window.location.href,
    signUpFlag: true
  };
  mgr.signinRedirect({
    state: someState,
    useReplaceToNavigate: true
  }).then(function() {
    log("signinRedirect done");
  }).catch(function(err) {
    log(err);
  });
}

Reading the signUpFlag:true in UserManager.js and swapping the Salesforce Sign In page Url with Sign Up page url and calling the Register function in Code.

UserManager.js(oidc - client - dev - js / src / UserManager.js)
//UserManager Customised Code :

return this.createSigninRequest(args).then(signinRequest => {
  Log.debug("UserManager._signinStart: got signin request");
  navigatorParams.url = signinRequest.url;
  navigatorParams.id = signinRequest.state.id;
  if (signinRequest.state._data.signUpFlag) {
    register(signinRequest.state._id, signinRequest.state._code_challenge);
  } else {
    return handle.navigate(navigatorParams);
  }
})

The below code is Register function written in code.

/* This function is written to send the code_challenge to salesforce server so that
salesforce server holds the code challenge and used to verify the further requests(token-request)
against the code_challenge it received initially.*/

//Customised register function written outside the library (Inside our App):

function register(_id, code_challenge) {
  var date = new Date();
  var baseUrl = "SALESFORCE_URL/login/SelfRegister?expid=id";
  var expId = "id";
  var userPage = encodeURIComponent(window.location.href);
  var appDetails = "response_type=code&" +
    "client_id=CLIENT_ID" +
    "client_secret=CLIENT_SECRET&" +
    "redirect_uri=CALLBACK_URL&" +
    "state=" + _id + "&code_challenge=" + code_challenge + "&code_challenge_method=S256&response_mode=query";
  var encodedapp = encodeURIComponent(appDetails);
  var startUrl = "/services/oauth2/authorize/expid?" + encodedapp;
  var signUpUrl = baseUrl + "&startURL=" + startUrl;
  window.open(signUpUrl, "_self");
};