No-code authentication with Cloudflare Zero Trust
Zero Trust is a convenient way to quickly add authentication to your site.
This post covers:
- Configuring your Zero Trust account.
- Adding a new "application" for the protected routes on your site.
- Adding a policy to restrict access by email address.
Caveats: Your domain name has to be hosted by Cloudflare, and you will need to provide a credit card. The service is priced per-seat, but if you expect less than 50 users, you can use it for free.
Zero Trust includes other services like warp and tunnel and gateway. I'll talk more about those in future posts.
Configure your Zero Trust account
The first time you open the Zero Trust dashboard, you'll be prompted for a "team" name for the login URL at <team-name>.cloudflareaccess.com.
Choose a team name and then sign up for the free plan.
Next, customize your login page under Settings > Custom Pages.
The login page will be shared across all sites protected by Zero Trust.
Add a new application
Under Access > Applications, click Add Application and select Self Hosted. Then configure the paths you want to protect.
Scrolling down to "Identity Providers" you should see One-time PIN is preconfigured. This is the simplest way to get started.
Add a policy
The Next button will open another page to add a new policy. This restricts who can access the site.
Enter a policy name and then scroll down to Configure Rules. I configured the rule Emails ending in.
Try it out
The remaining defaults are fine. After you click Add application you should see it in the applications list.
Point your browser to the URL you configured in the application. You should see the prompt to email a One-time PIN.
When you enter the PIN you should be authenticated, and allowed to access the site.
If your email address does not match the policy, you won't receive any email and will not be able to access the site.
Next steps
If you prefer, you can replace the One-time PIN with another identity provider like GitHub or Google under Settings > Authentication.
Once users have been authenticated, you can use this information in your site by inspecting the cf-access-authenticated-user-email header or validating the JWT token in the cf-access-jwt-assertion header.
💡💡
It took longer to write this post than to configure auth for jldec.me.
debug
user: anonymous
{
"path": "/blog/no-code-authentication-with-cloudflare-zero-trust-access",
"attrs": {
"title": "No-code authentication with Cloudflare Zero Trust",
"layout": "BlogPostLayout",
"splashimage": "/images/autumn.webp",
"date": "2024-10-12"
},
"md": "# No-code authentication with Cloudflare Zero Trust\n\nZero Trust is a convenient way to quickly add authentication to your site.\n\n> This post covers:\n > 1. Configuring your Zero Trust account.\n > 2. Adding a new \"application\" for the protected routes on your site.\n > 3. Adding a policy to restrict access by email address.\n\n**Caveats:** Your domain name has to be hosted by Cloudflare, and you will need to provide a credit card. The service is priced [per-seat](https://www.cloudflare.com/plans/zero-trust-services/), but if you expect less than 50 users, you can use it for free.\n\nZero Trust includes other services like [warp](https://developers.cloudflare.com/cloudflare-one/connections/connect-devices/warp/) and [tunnel](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/) and [gateway](https://developers.cloudflare.com/cloudflare-one/policies/gateway/). I'll talk more about those in future posts.\n\n## Configure your Zero Trust account\nThe first time you open the Zero Trust [dashboard](https://dash.cloudflare.com/), you'll be prompted for a \"team\" name for the login URL at `<team-name>.cloudflareaccess.com`.\n\nChoose a team name and then sign up for the free plan.\n\n\n\nNext, customize your [login page](https://developers.cloudflare.com/cloudflare-one/applications/login-page/) under `Settings > Custom Pages`.\n\n\n\nThe login page will be shared across all sites protected by Zero Trust.\n\n## Add a new application\n\nUnder `Access > Applications`, click `Add Application` and select `Self Hosted`. Then configure the [paths](https://developers.cloudflare.com/cloudflare-one/policies/access/app-paths/) you want to protect.\n\n\n\nScrolling down to \"Identity Providers\" you should see `One-time PIN` is preconfigured. This is the simplest way to get started.\n\n## Add a policy\n\nThe `Next` button will open another page to add a new [policy](https://developers.cloudflare.com/cloudflare-one/policies/access/). This restricts who can access the site.\n\n\n\nEnter a policy name and then scroll down to `Configure Rules`. I configured the rule `Emails ending in`.\n\n\n\n## Try it out\n\nThe remaining defaults are fine. After you click `Add application` you should see it in the applications list.\n\n\n\nPoint your browser to the URL you configured in the application. You should see the prompt to email a `One-time PIN`.\n\n\n\nWhen you enter the PIN you should be authenticated, and allowed to access the site.\n\n\n\nIf your email address does not match the policy, you won't receive any email and will not be able to access the site.\n\n### Next steps\n\nIf you prefer, you can replace the `One-time PIN` with another identity provider like [GitHub](https://developers.cloudflare.com/cloudflare-one/identity/idp-integration/github/) or [Google](https://developers.cloudflare.com/cloudflare-one/identity/idp-integration/google/) under `Settings > Authentication`.\n\nOnce users have been authenticated, you can use this information in your site by inspecting the `cf-access-authenticated-user-email` header or validating the [JWT token](https://developers.cloudflare.com/cloudflare-one/identity/authorization-cookie/validating-json) in the `cf-access-jwt-assertion` header.\n\n\n\n---\n\n> 💡💡\n>\n> It took longer to write this post than to configure auth for [jldec.me](https://jldec.me/).",
"html": "<h1>No-code authentication with Cloudflare Zero Trust</h1>\n<p>Zero Trust is a convenient way to quickly add authentication to your site.</p>\n<blockquote>\n<p>This post covers:</p>\n<ol>\n<li>Configuring your Zero Trust account.</li>\n<li>Adding a new "application" for the protected routes on your site.</li>\n<li>Adding a policy to restrict access by email address.</li>\n</ol>\n</blockquote>\n<p><strong>Caveats:</strong> Your domain name has to be hosted by Cloudflare, and you will need to provide a credit card. The service is priced <a href=\"https://www.cloudflare.com/plans/zero-trust-services/\">per-seat</a>, but if you expect less than 50 users, you can use it for free.</p>\n<p>Zero Trust includes other services like <a href=\"https://developers.cloudflare.com/cloudflare-one/connections/connect-devices/warp/\">warp</a> and <a href=\"https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/\">tunnel</a> and <a href=\"https://developers.cloudflare.com/cloudflare-one/policies/gateway/\">gateway</a>. I'll talk more about those in future posts.</p>\n<h2>Configure your Zero Trust account</h2>\n<p>The first time you open the Zero Trust <a href=\"https://dash.cloudflare.com/\">dashboard</a>, you'll be prompted for a "team" name for the login URL at <code><team-name>.cloudflareaccess.com</code>.</p>\n<p>Choose a team name and then sign up for the free plan.</p>\n<p><img src=\"/images/access-team-name.webp\" alt=\"Screenshot of Zero Trust prompt for team name\"></p>\n<p>Next, customize your <a href=\"https://developers.cloudflare.com/cloudflare-one/applications/login-page/\">login page</a> under <code>Settings > Custom Pages</code>.</p>\n<p><img src=\"/images/access-customize-login.webp\" alt=\"Screenshot of Zero Trust Custom Pages Login Page condfiguration\"></p>\n<p>The login page will be shared across all sites protected by Zero Trust.</p>\n<h2>Add a new application</h2>\n<p>Under <code>Access > Applications</code>, click <code>Add Application</code> and select <code>Self Hosted</code>. Then configure the <a href=\"https://developers.cloudflare.com/cloudflare-one/policies/access/app-paths/\">paths</a> you want to protect.</p>\n<p><img src=\"/images/access-application-configuration.webp\" alt=\"Screenshot of Zero Trust Application Configuration\"></p>\n<p>Scrolling down to "Identity Providers" you should see <code>One-time PIN</code> is preconfigured. This is the simplest way to get started.</p>\n<h2>Add a policy</h2>\n<p>The <code>Next</code> button will open another page to add a new <a href=\"https://developers.cloudflare.com/cloudflare-one/policies/access/\">policy</a>. This restricts who can access the site.</p>\n<p><img src=\"/images/access-policy-name.webp\" alt=\"Screenshot of Zero Trust Policy Name Configuration\"></p>\n<p>Enter a policy name and then scroll down to <code>Configure Rules</code>. I configured the rule <code>Emails ending in</code>.</p>\n<p><img src=\"/images/access-policy.webp\" alt=\"Screenshot of Zero Trust Policy Rule Configuration\"></p>\n<h2>Try it out</h2>\n<p>The remaining defaults are fine. After you click <code>Add application</code> you should see it in the applications list.</p>\n<p><img src=\"/images/access-application-done.webp\" alt=\"Screenshot of Zero Trust Applications List\"></p>\n<p>Point your browser to the URL you configured in the application. You should see the prompt to email a <code>One-time PIN</code>.</p>\n<p><img src=\"/images/access-login.webp\" alt=\"Screenshot of Zero Trust Login Page\"></p>\n<p>When you enter the PIN you should be authenticated, and allowed to access the site.</p>\n<p><img src=\"/images/access-login-2.webp\" alt=\"Screenshot of Zero Trust Login Page\"></p>\n<p>If your email address does not match the policy, you won't receive any email and will not be able to access the site.</p>\n<h3>Next steps</h3>\n<p>If you prefer, you can replace the <code>One-time PIN</code> with another identity provider like <a href=\"https://developers.cloudflare.com/cloudflare-one/identity/idp-integration/github/\">GitHub</a> or <a href=\"https://developers.cloudflare.com/cloudflare-one/identity/idp-integration/google/\">Google</a> under <code>Settings > Authentication</code>.</p>\n<p>Once users have been authenticated, you can use this information in your site by inspecting the <code>cf-access-authenticated-user-email</code> header or validating the <a href=\"https://developers.cloudflare.com/cloudflare-one/identity/authorization-cookie/validating-json\">JWT token</a> in the <code>cf-access-jwt-assertion</code> header.</p>\n<p><img src=\"/images/access-headers-2.webp\" alt=\"Screenshot of Zero Trust Access Headers\"></p>\n<hr>\n<blockquote>\n<p>💡💡</p>\n<p>It took longer to write this post than to configure auth for <a href=\"https://jldec.me/\">jldec.me</a>.</p>\n</blockquote>\n"
}