"Authority mismatch on settings vs. signin state" with OIDC Client when trying to grant access between 2 client Applications

Question

. 。 Answers to this question are eligible for a +50 reputation bounty. Dah Sra is looking for an . 。

We have two .net core with angular applications where we have used Openid server and client https://localhost:80: Parent Application https://localhost:85: Child Application

We want to authenticate the child application within the parent application. In the angular end, we used oidc-client and updated the UserManager dynamically inside the child application.

The flow we are trying to achieve is

Login Page child application (https://localhost:85) -> Click Login -> it redirects to parent app Login Page (https://localhost) -> entering credentials and After successful signing in the redirection URL will be (https://localhost:85) and it will grant access to that child application.

While redirecting to the child application by redirect URL after login it throws the below error "Authority mismatch on settings vs. signin state" [![enter image description here][1]][1]

Can someone help me with the flow of authentication of multiple client applications via openid client?

 Error: authority mismatch on settings vs. signin state
at t [as _processSigninParams] (oidc-client.min.js:1:57198)
at t [as validateSigninResponse] oidc-client.min.js:1:55646)
at oidc-client.min. js:1:27449 at
ZoneDelegate. invoke (zone, js:372÷26) at Object.onInvoke (core.mjs:26356:33) at
ZoneDelegate. invoke (zone. js:371:52)
at Zone.run (zone. js:134:43)
at zone. js:1275:36 at
ZoneDelegate. invokeTask (zone. js:496:31)
at Object.onInvokeTask (core.mijs:26343:33)

Answer 1

Ok i had this error before with Reactjs oidc-react and .net backend. the problem was that the configuration defined in SigninCallBack.js(here i init the storage and redirect) was not same as the configuration defined in identity server. this config was from the test app that throws that error

import React from 'react'
import { WebStorageStateStore } from 'oidc-client-ts';
import { UserManager } from 'oidc-react';

    const SigninCallBack = () => {
        var config = {
            userStore: new WebStorageStateStore({store: window.localStorage}),
            authority: "https://localhost:9001/",
            client_id: "myappid",
            redirect_uri: "https://localhost:3000/signincallback",
            client_secret: "thesecretkey_but_i_used_PKCE",
            response_type: "code",
            scope:"openid profile someApi",
            post_logout_redirect_uri : "https://localhost:3000/signout-callback-oidc",
            loadUserInfo: true
            };
     
        
    
        var userManager = new UserManager(config);
    
        userManager.signinCallback().then(res => {
            
            window.location.href = '/';
        });
    }
     
    export default SigninCallBack;

and mine was the client url which here i was defined with http but in the identityserver config i defined it with https. however it could be any of them such as response type,client Id etc.