I'm attempting to use the oidc-client library in Vue.js to do authentication in a SPA. I've been following along with this tutorial: https://damienbod.com/2019/01/29/securing-a-vue-js-app-using-openid-connect-code-flow-with-pkce-and-identityserver4/ and my code is pretty much identical apart from obviously having changed the URLs to be my own localhost. I haven't used a code flow before so I just wanted to verify what the server should actually be returning after the login stage.
Essentially my problem is that when the app gets to callback.html I get an error that looks like this:
Error: No state in response
at e.t [as readSigninResponseState] (oidc-client.min.js:1)
at e.t [as processSigninResponse] (oidc-client.min.js:1)
at e.t [as _signinEnd] (oidc-client.min.js:47)
at e.t [as signinRedirectCallback] (oidc-client.min.js:47)
at callback.html:10
This occurs due to this call on callback.html:
var mgr = new Oidc.UserManager({ response_mode: 'query', userStore: new Oidc.WebStorageStateStore() }).signinRedirectCallback()
Up until this point everything looks normal - I can click the login, it redirects me to my IdentityServer login page, I can login and I can verify that no errors are thrown in the server. My worry though is that the redirect is not passing enough information. Essentially it does a full redirect back to callback.html but there is no data in the URL just the callback. Instead what I get in the request headers is an Asp.Net anti forgery cookie and a referrer that contains a returnUrl with information that includes response type, redirect uri, scopes etc.
I also get as part of the redirect from IdentityServer an extra cookie which is encrypted which is named .AspNetCore.Identity.Application. I assume this is what contains the auth data but I just wanted to make sure that what I have so far is normal. Is this the expected behaviour for a code flow?
Edit
After a bit more investigation I noticed that, although my callback.html file fails when I get redirected after login, if I go back to my home page and click the Login button again it redirects me back to the callback.html page with a query string that looks similar to the following:
https://localhost:44357/callback.html?code=aee0eafb34066958344bb53c01974224930bbdd2d94909f49c77d5157fb6aeed&scope=openid%20profile%20offline_access&state=921f726007c4431691d47340b433d097&session_state=rd7WVDvMIPWPqKviVZNSkbbhRoEoIftGbv9R841SuRs.a0674cdf7462338238499b73682dc5b5
Afterwards I am redirected back to the home page and I have successfully authenticated.
This is pretty much what I expected and what I was alluding to in my original question. This is a result of calling userManager.signinRedirect() on the oidc-client library.
What I'm not sure about is how it has managed to find that info and should the server have redirected to that URL in the first place? I'm slightly unclear whether this is a client side or server side expectation.