IdentityServer 4 is used to handle authorization and authentication requirements. For example, when my application is “complete”, users will be able to sign up and have the ability to submit new artists and lyrics.
The IdentityServer 4 team have created this frontend library called oidc-client-js that is supposed to help with the complexities of token management in the frontend.
I suspect such a thing does not exist for Elm. What are my options for getting my Elm SPA behaving and working with IdentityServer4?
The flow is that when a user clicks the login button, they get redirected to the IdentityServer4 login page, which in effect is a separate website/application. Once the user logs in, he/she will be redirected back to the Elm SPA and that’s where oidc-client-js usually kicks in to do whatever it has to do, and I suspect my Elm code has to do things too because I need to pass the token with each API request after that.
I don’t know about IdentityServer4 specifically, but when I have a token that needs to be provided with each request I wrap Http.request in a custom function which requires the token as an argument. This has the nice side-effect of making it impossible to issue a request requiring authentication when the user isn’t authenticated.
As for the token itself, I have a few lines of JavaScript which periodically checks if the user is logged in (looking in localStorage and revalidating the token with the server to ensure it hasn’t expired or been revoked) and communicating any changes to Elm through a port. The token is placed in localStorage by a separate part of the application during login.
I can see if I can pull out or summarize the two or three relevant functions, but there really isn’t that much to it. Store the token in the root model, pass it down to the client pages as an extra argument to update and init for those pages which require the user to be authenticated (which has the side-effect of making it impossible to render a secure page for an unauthenticated user), and require it as an argument to request. Listen for authorization state changes through a port subscription at the top level of the application and update the model accordingly.
