Authenticate with an OAuth provider in your Giraffe application (.Net Core 2.1)

Introduction (rambling)

When I started my F# learning journey some months ago, I planned to go full functional F#, to use what the community used. Suave, Code, FAKE, SQL Type Providers, Paket. But I found out that made it not easier and with the limited spare time to invest in F#, that plan has changed a bit. I realized that when I wrote my previous blog  about Using Entity Framework Core with F#. I’m now gonna use technologies closer to home and that’s more Microsoft stackish, so Entity Framework and now also Giraffe on Core. I hope this will make learning all this easier and I hope I’ll pickup the other technologies later on my path. You can say these technologies will be my gateway drugs to F#, my.. my gateway stack!  I would love to introduce F# at places I work; these are mostly Microsoft shops and I think it will be easier like this to get clients interested to try all this F# goodness out.

Setup the Giraffe solution

You can do dotnet new giraffe to create a complete giraffe web sample project and that’s what I did to play around and find out stuff for this blog. When I wrote code sample for this blog I created everything from scratch because I want to learn & understand this stuff. So first we start by creating the project. The complete sample code for this blog is on GitHub.

To create the project, go to the command line and enter the following commands:

I removed Startup.fs and added some files to organize the code I mostly copied from the Giraffe sample template.

Setup Https on local machine

When you develop and test your application you’ll do this locally and because OAuth providers like Facebook requires https you also need to run your local application on https. To do this you can follow these next steps.

First you need a certificate. I followed these instructions: Configuring HTTPS in ASP.NET Core across different platforms. You can export the certificate as a pfx file and place this in your web root for example.

From that same link I ported and simplified the example code to configure Kestrel to use only https and assign the correct certificate. Warning! I only aimed at using this locally and tested accordingly! First the code load the certificate, you need to change the settings in the appsetting.json. If you omit the file path and the password settings, the function will try to retrieve the certificate from the store.

The following code configures Kestrel to use this certificate on port 443.

Then you point the WebHostBuilder.UseKestrel method to the configureKestrel function.

Configure OAuth Providers

Configure GitHub App

Well it took some time to get this working, even with this great blog Authenticate with OAuth 2.0 in ASP.NET Core 2.0. I ported this to the Giraffe example but got in a redirect loop. With some help from someone in the functional programming slack channel (thanks damukles!) that was fixed and as it turned out I needed only half of the code. A newer version of Core might have also come in play there, with the current version it is just super easy!

Make sure you configure the app to use Authentication, this is simply done by the UseAuthentication method on the ApplicationBuilder:

Create GitHub App

First you need to create an OAuth application in GitHub. Go to OAuth Apps and click New OAuth App.

When you click Register application the application is created and Client Id and Client Secret are generated. You need these later to in your Giraffe application. The Authorization callback URL is also something we’ll need to configure in the application.

Create Facebook App

If you want to use Facebook as provider you also have to make an app. You can then go to Settings > Basic and retrieve the App Id App secrets there.  You’ll also need to add a product  ‘Facebook login’ to this app. Set the Valid OAuth Redirect URIs here, by default this is /signin-facebook.

Configure GitHub & Facebook

As you can see this really easy. There some default settings which meaning I didn’t really dive into, most important settings for now are the client id and secret and make sure the CallbackPath is the same as the one you configured in the GitHub App. For Facebook just add the app id and secret.


Now we gonna specify for which parts of the web application you should be authenticated, for this we use the mustBeLoggedIn HttpHandler. If not authenticated it will call the challenge function. This construction is something I still have to wrap my head around, I can use it but understanding it is something else…

We can use the same handler for unauthenticated and authenticated and check if the user is authenticated by checking the IsAuthenticated property of the User in the HttpContext.

That’s it! Not too difficult I think. In next blogs that will appear sooner than this one and then I want to explore creating a user in a database based on the authenticated user. I also would like to know how to apply this to a more front-end talking to api back-end scenario. Again, the sample code for this blog is on GitHub.