Fable App with OpenId Connect authentication

This repository reproduces the exact effect achieved by following the "Adding a JavaScript client" tutorial of IdentityServer4, but in F#. It also shows how to use the Fable.OidcClient package. Here's a post explaining the client configuration and code step by step.

Requirements

• dotnet SDK 3.0 or higher
• node.js with npm
• An F# editor like Visual Studio, Visual Studio Code with Ionide or JetBrains Rider.

Building and running the app

• dotnet tool restore to install Fake
• dotnet fake build -t Run to spin up a webpack dev server, API and IdentityServer4 services.
• After the first compilation is finished, in your browser open: https://localhost:5003/

You might need to accept the risk of invalid local certificate in your browser.

Project structure

F#

The solution consists of 4 projects:

• Api: Saturn framework web server that returns the user identity when called under /identity, works exactly the same as the API defined in "Protecting an API using Client Credentials tutorial of IdentityServer4.
• IdentityServer: Identity Provider service, works exactly the same as the Identity Provider defined in "Protecting an API using Client Credentials tutorial of IdentityServer4.
• Client directory contains these two projects:
  • App: Main logic of the SPA (single page application)
  • Auth: Small bit of code needed for handling the OpenId Protocol redirection.

npm

JS dependencies are declared in package.json, while package-lock.json is a lock file automatically generated.

Webpack

Webpack is a JS bundler with extensions, like a static dev server that enables hot reloading on code changes. Fable interacts with Webpack through the fable-loader. Configuration for Webpack is defined in the webpack.config.js file. Note this sample only includes basic Webpack configuration for development mode, if you want to see a more comprehensive configuration check the Fable webpack-config-template.

This configuration produces two separate outputs:

• app - main code of the SPA (single page application)
• auth - small bit of code needed for handling the OpenId Protocol redirection.

Web assets

Assets like html pages or an icon can be found in the public folder. The index.html file wraps the application (uses the code from src/Client/App), callback.html is used for handling the OpenId Protocol redirection (uses the code from src/Client/Auth).