Cloudflare Access Integration

Cloudflare Access allows you to secure your web applications by restricting who can reach your application by applying configured identity-aware Access policies. Cloudflare Access is part of Cloudflare's Zero Trust offerings.

NuxtHub fully supports Cloudflare Access across the NuxtHub admin, module and CLI.

Setup Cloudflare Access

These steps covers setting up Cloudflare Access for a deployed NuxtHub project.

1. Create a Cloudflare Access service token in the Cloudflare Zero Trust dashboard
   1. In Zero Trust, go to Access → Service Auth → Service Tokens
   2. Select Create Service Token
   3. Name the service token. For example, the NuxtHub project's name
      • The name allows you to easily identify events related to the token in the logs
   4. Choose a Service Token Duration. This sets the expiration date for the token
   5. Select Generate token. You will see the generated Client ID and Client Secret for the service token
      This is the only time Cloudflare Access will display the Client Secret. If you lose the Client Secret, you will need to rotate the service token
2. Configure the Cloudflare Access integration within NuxtHub admin
   1. In the NuxtHub admin, go to Projects → Settings → General → Cloudflare Access
   2. Provide the Client ID and Client Secret generated in the previous step
3. Enable Cloudflare Access on the Pages project
   1. On the Cloudflare dashboard → Workers & Pages → Your Pages project
   2. Go to Settings → General → Access Policy
   3. Select Enable to create a Cloudflare Access application.
      The default policy covers the preview environments on the pages.dev subdomain, adds an allow policy with all members of the account, and uses the email one-time-pin IdP.
4. Add an Access policy to permit the service token
   1. In Zero Trust, go to Access → Applications and select the application
   2. Create a new policy with the name "NuxtHub" and the action Service Auth
   3. Enable the 401 Response boolean
   4. Within Configure rules, set Selector to Service Token and the value to the service token created earlier
   5. Save the policy
5. Optionally edit your Allow Access policy
   Learn more about Cloudflare Access policies on Cloudflare's documentation.
6. Optionally add additional domains to your Access application
   1. In Zero Trust, go to Access → Applications and select the application
   2. From the header, select Overview
   3. Add additional application domains, such as the production domain, or any custom domains assigned to the project

Importing Pages projects

We plan to directly support importing existing Pages projects that are protected with Cloudflare Access enabled in the future.

Currently, you will need to temporarily create an Access application which sets a Bypass policy for Everyone on the project's default pages.dev domain and the path /api/_hub/manifest.

Service token expiry and rotation

Service token expiry

When a service token is expired, it can be rotated from the Cloudflare dashboard.

1. In Zero Trust, go to Access → Service Auth → Service Tokens
2. Click ... on the expired token
3. Select Rotate

Service token rotation

If a service token is rotated, the new Client Secret needs to be provided on NuxtHub admin.

1. In the NuxtHub admin, go to Projects → Settings → General → Cloudflare Access
2. Click Disable integration
3. Provide the Client ID and Client Secret generated in the previous step
4. Click Enable integration

Remote storage

These steps will cover using remote storage with an environment protected by Cloudflare Access.

1. Open .env
2. Set the following variables with your service token's Client ID and Client Secret
   • NUXT_HUB_CLOUDFLARE_ACCESS_CLIENT_ID
   • NUXT_HUB_CLOUDFLARE_ACCESS_CLIENT_SECRET

CLI

The following environment variables can be passed to the CLI

• NUXT_HUB_CLOUDFLARE_ACCESS_CLIENT_ID
• NUXT_HUB_CLOUDFLARE_ACCESS_CLIENT_SECRET

export NUXT_HUB_CLOUDFLARE_ACCESS_CLIENT_ID=""
export NUXT_HUB_CLOUDFLARE_ACCESS_CLIENT_SECRET=""
npx nuxthub database migrations list --preview

nuxt.dev subdomain with Cloudflare Access

Due to a technical Cloudflare limitation, when using Cloudflare Access with NuxtHub, the nuxt.dev subdomain is unavailable.

If the nuxt.dev subdomain is the primary domain, enabling the Cloudflare Access integration will set the primary domain to the pages.dev subdomain.