splash image

October 12, 2024

No-code authentication with Cloudflare Zero Trust

Zero Trust is a convenient way to quickly add authentication to your site.

This post covers:

  1. Configuring your Zero Trust account.
  2. Adding a new "application" for the protected routes on your site.
  3. 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.

Screenshot of Zero Trust prompt for team name

Next, customize your login page under Settings > Custom Pages.

Screenshot of Zero Trust Custom Pages Login Page condfiguration

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.

Screenshot of Zero Trust Application Configuration

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.

Screenshot of Zero Trust Policy Name Configuration

Enter a policy name and then scroll down to Configure Rules. I configured the rule Emails ending in.

Screenshot of Zero Trust Policy Rule Configuration

Try it out

The remaining defaults are fine. After you click Add application you should see it in the applications list.

Screenshot of Zero Trust Applications List

Point your browser to the URL you configured in the application. You should see the prompt to email a One-time PIN.

Screenshot of Zero Trust Login Page

When you enter the PIN you should be authenticated, and allowed to access the site.

Screenshot of Zero Trust Login Page

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.

Screenshot of Zero Trust Access Headers


💡💡

It took longer to write this post than to configure auth for jldec.me.

debug

user: unauthenticated

{
  "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![Screenshot of Zero Trust prompt for team name](/images/access-team-name.webp)\n\nNext, customize your [login page](https://developers.cloudflare.com/cloudflare-one/applications/login-page/) under `Settings > Custom Pages`.\n\n![Screenshot of Zero Trust Custom Pages Login Page condfiguration](/images/access-customize-login.webp)\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![Screenshot of Zero Trust Application Configuration](/images/access-application-configuration.webp)\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![Screenshot of Zero Trust Policy Name Configuration](/images/access-policy-name.webp)\n\nEnter a policy name and then scroll down to `Configure Rules`. I configured the rule `Emails ending in`.\n\n![Screenshot of Zero Trust Policy Rule Configuration](/images/access-policy.webp)\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![Screenshot of Zero Trust Applications List](/images/access-application-done.webp)\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![Screenshot of Zero Trust Login Page](/images/access-login.webp)\n\nWhen you enter the PIN you should be authenticated, and allowed to access the site.\n\n![Screenshot of Zero Trust Login Page](/images/access-login-2.webp)\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![Screenshot of Zero Trust Access Headers](/images/access-headers-2.webp)\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 &quot;application&quot; 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 &quot;team&quot; name for the login URL at <code>&lt;team-name&gt;.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 &gt; 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 &gt;  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 &quot;Identity Providers&quot; 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 &gt; 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"
}