Adding A SSO Login To Cloudflare Application

hi and welcome to programming Percy today we will be looking at how we can add an SSO login in front of our cloudflare applications if you're not familiar with cloudflare tunnels I do recommend that you watch my other video or read my article about it because this video will expect that you know what an access tunnel is because this video will expect that you know what an access tunnel is and that you have a cloudflare zero trust account with a tunnel up and running so I recommend that video first if you haven't done it in this video we will be looking at how we can add SSO in front of the applications so what we have so far is an API running on my Raspberry Pi which is exposed through my domain maybe I don't want everybody to be able to visit this website or maybe I want to protect some certain path such as slash admin or anything and we can do that by adding SSO login screen in front of our applications which can really come in handy and to begin doing that to begin protecting our resources so you need the serial trust up and running you need a tunnel up and running exposing some kind of service hopefully you have that by now otherwise again my previous video will show you how to do that once you have that going to settings and there's a tab here called authentication there's a login method and we want to add login methods we want to add new methods that we can use to log in and as you can see there's a bunch of identity providers which are supported in this video I will show you how to add GitHub most of them are and work the same way what's nice is if you press on one of them such as GitHub it will actually give you a detailed instruction on how to set it up and register a application now this one is really nice I'm just going to go ahead and jump to GitHub and I will showcase GitHub for you guys but you can do this for whatever identity provider that you have so if you visit GitHub you can go inside up here and go down to the settings then scroll down to the developer settings tab you should see a setting called oauth applications currently I have no applications so let's add a application basically what we're doing is that we're telling GitHub that there's a website at a given URL which will send requests and we want to allow them to authenticate using these methods so inside here we need to apply a application name this can be whatever it should be something that you understand what it is I'm going to call mine test API the home page URL is going to be the URL to your cloudflare tunnel xero team you can find the team by going to cloudflare I'm just going to go back I'm going to go to settings go to the general tab if you're uncertain you can find your team name here and this is actually the URL that we will need the team name followed by dot cloudflareaccess.com so go ahead and copy that I was going to quickly go back to adding GitHub navigate back to GitHub paste in that URL because we need it let's prefix it with 80 https it's going to be https programming proceed cloudflareaccess.com it looks good and some a demo application and then there's the Callback URL the Callback URL is going to be the same thing as your home page URL but cloudflare actually hosts a callback URL to handle SSO for you so we need to append a few values to the path and it's going to be CDN Dash CGI slash access slash callback you can find these URLs if you look in the detailed instructions on how to use it you can actually find the URLs right here it also tells you to replace the team name such as what we did whatever identity provider you choose these instructions will be there and it should be pretty basic to follow so let's go ahead let's register that application you see a client ID here this is important you need to copy the client ID it's going to go inside app ID that's the ID for the GitHub application let's jump back to GitHub we need a client secret and you see there's no client Secrets right now so press generate new client secrets and I will need to authenticate for that to work now once you have authenticated you should see a secret being shown here don't share your secrets I'm sharing mine right now but by the time you're watching this I will have deleted this application so copy that go to the cloudflare again and at this place we're going to paste in the secret you should be presented with a URL now this URL you can either click finish setup or you can copy and paste this URL if you're using a headless device I'm on my main computer right now so I'm just going to go ahead and click finish setup it will ask you to authorize the cloudflare application to access your GitHub application and I'm just going to go ahead and authorize it success you have added an identity provider that's basically it so let's go ahead and look at my API again I'm hosting my API on a URL which is test API Percy Balmer slash work I'm going to go ahead and copy that for now we will need that URL Sue to begin adding to begin adding protection to a tunnel we actually need to set up something called a application inside of the zero trust platform if you go to access tabs you can see we have a tunnel we've been working with tunnels and tunnels is the access layer we can go up here and press applications applications are basically these access policies that you can apply to your endpoints that are being hosted we can use these access policies to determine who can access the resources that we are serving we're going to look more at the rules whether we can apply very soon let's go ahead let's press add application there's a bunch of different things that you can add we're doing it for a self-hosted application so just go ahead and select cell phone the application name in this field you can put whatever you want it should be something so you understand what it is I'm just going to call mine test API again the session duration is how long their token will be remembered once they have logged in now this is important it's going to ask you the domain to apply access rules and this has to match this has to match the URL that you're hosting your service on if these things doesn't matter match the access lists won't be applied to your tunnel so my API is hosted on test API as a subdomain followed by percybalmer.org I have added an application rule to this domain now we can scroll down and you can see here that it asks you if you want to use a some kind of logo and if you want to show it in the application launcher we haven't covered the application launcher because we don't have an application yet we're creating one now but once you create more applications you can have this nice little card view showing all your applications if you visit the URL which is your team's name which is programming Percy for me dot cloudflare access dot com so if you go to your team name dot cloudflareaccess.com you will see this little splash screen now I haven't I haven't enabled the app launcher so I'm not seeing anything that's what they are asking for so I'm just going to go ahead and enable it if I want to use the app launcher it's pretty nice but then here comes the fun part so identity providers now you should see GitHub appearing if you have added it or if you added something else you should see Google for instance appear here select the identity providers that you want to support to log in on the domain I'm going to go ahead scroll back to the top and select next at this place we can start defining the rules and the rules here are access rules so or policies so who are allowed to access this domain now in my case I'm going to create a policy rule called API users and I'm going to allow you don't have to allow you can also block if you want to block certain if you want to bypass or have a service OS now the session duration I'm just going to go ahead and leave it to the same as the application in which we set to 24 hours before this is the name of the policy and this is the action if it should allow or block and as you see here it tells us that we can actually create groups if we have these common policies that we reuse across many applications for instance and maybe I have a admin rule which allows all the admins such as my my own email for instance I want to be able to be an admin I can add that as a access Group which I can then reuse across these policies now I'm just going to go ahead and see here we can add rules here so if we go into the selector the selector is what value it will use as you can see we can use emails IP ranges countries and a lot of the different things GitHub organization I want to have a rule depending on the email I'm only going to allow I'm actually going to set the selector to Sweden Maybe I only want to allow logins from Sweden so I also only want to allow a certain email which is this is wrong email I'm actually putting in the wrong email here to show you what happens when I try to log in with a wrong email so enter the correct email here and it should allow that email if I log in with another email I should be blocked so I'm going to test this policy very soon so let's go ahead you can set a bunch of other stuff if they want justifications if you have like this ultra high security if they're going to log into the admin page they need to apply a reason why they are logging in I don't want anything like that so I'm just going to go ahead if I'm from Sweden if I have this email I will be allowed otherwise I will be blocked so it's really nice you can have all these things set up IPS emails and all these rules of who should be able to access another nice thing is that we can also set up course settings which can become important if you have this web application for instance running you need to add a maybe if you if you should add the get parameter for instance Etc I'm just going to leave this at default I won't cover course in this video that would be a whole video by itself we can also have cookie settings I mean if you should have a strict setting for the same site and HTTP only for instance again I'm just going to leave them empty for now we're not doing that here there's a great explanation in the cloudflare documentations as what setting will have what effect so once we have done this let's go ahead and add the application and the application was successfully added we can see a little bit of information on the here we can see that we have one policy assigned right now you can have multiple policies of course if I go back to my URL now and I'm going to refresh and I'm actually going to be met with this login screen so it's telling me do you want to log in to these websites and I do I'm going to go ahead and authenticate with GitHub now remember I have the wrong email so I should get an error right I do not have access to and enter this website this is great so our rule is working now I kind of want to get into my website so I'm gonna go ahead go into the policy click on edit and as you can see we can modify this we can remove we can add multiple I'm just going to go ahead and add myself sort of app I can access my own websites so I'm going to change the email save the policy I'm going to go back I'm gonna re-authenticate and this time voila working as a summary we can add access policies as something called applications to protect our self-hosted services and adding them is really easy and very smooth the UI to do it is very simplistic and it feels easy even for a beginner to get started you also get a bunch of metrics in the analytics view so if I go to the analytics right now I will see two failed login attempts I tried this before so naturally I have two failed attempts so it adds a little bit of those metrics as well if you apply this and you have a service which also needs authentication it's going to be a double authentication which kind of sucks but if you have control over that application you can add the jvt token that comes from cloudflare and there's a great explanation in the documentation there's a few example Snippets for different languages how you can extract the cloudflare jvt and verify it if you want to use that as your main authentication token and yeah also if you go into settings and we're going to General and there's a login page where you can access the login page which looked like this you can see the preview here and you can actually modify this you can change the background color you can change the text and you can do a little bit of customization to make it look a little bit better I really have to say I'm super impressed by these cloudflare services so far I do hope you enjoyed this tutorial I do hope you had the chance to follow along I would love to hear from you guys what do you think have you used cloudflare zero trusts platform what was your experience did it work out great for you I find it super amazing so far if you want to get started with self-hosting smaller applications you can get by with a Raspberry Pi 4. I'm going to put a link in the description to a Amazon link which is full disclosure a affiliate link so if you purchase from them they will sponsor me and I'm using a Raspberry Pi myself and it's working great so far and I just love it thank you for watching this video if you liked it don't forget to like And subscribe my channel and I hope to see you guys more bye

Exposing Secure Services with Cloudflare tunnels is easy, but sometimes we want to protect them with a Login You can also find this video as a written Article at https://programmingpercy.tech/blog/adding-sso-login-to-cloudflare-application/ *** Links *** Cloudflare Zero Trust - https://www.cloudflare.com/products/zero-trust/ Cloudflare Applications - https://developers.cloudflare.com/cloudflare-one/applications/ Cloudflare Application SSO Architecture - https://developers.cloudflare.com/cloudflare-one/applications/configure-apps/self-hosted-apps/ Cloudflare App Launcher - https://developers.cloudflare.com/cloudflare-one/applications/app-launcher/ Cloudflare Policies - https://developers.cloudflare.com/cloudflare-one/policies/access/ CORS - https://developers.cloudflare.com/cloudflare-one/identity/authorization-cookie/cors/ Cloudflare Cookie Settings - https://developers.cloudflare.com/cloudflare-one/identity/authorization-cookie/#cookie-settings Cloudflare JWT token - https://developers.cloudflare.com/cloudflare-one/identity/authorization-cookie/validating-json/ ** Affiliate Links *** Raspberry PI - https://amzn.to/3vrv5Se 00:00 Introduction 01:30 Adding An Identity Provider 05:20 Creating An Application And Access Policies 12:56 Conclusion