I am trying to get my SPA App to support OAuth2's Open ID Connect (OIDC). I am NOT doing the implicit flow. I am doing the Authorization Code flow using Proof Key for Code Exchange (PKCE).
There is a javacript library out there that does much of the heavy lifting for OIDC. It is called oidc-client-js.
It has 2 sign in options.
- Redirect: Redirects the browser to the login page. Afterwards it directs the browser to the OIDC Callback page.
- Popup: Pops up a new browser window that loads the login page. Afterwards the popped up window loads the callback page.
The problem I have is that I end up loading my SPA app at least twice with either method.
For Redirect: The SPA app loads and I make the call to redirect to the login screen. After the user logs in, it then loads my call back page. Which loads the application again.
For Popup: The SPA app loads and I make the popup call to login. After the use logs in, it loads my SPA App again in the popped up window (for the callback).
What is the intended process for SPA apps that are using the Authorization Code flow with PKCE?