Deploy and Host Advanced Customizations

Each Advanced Customization that you build must be deployed to a content delivery network (CDN). The following code examples demonstrate how you can deploy your customizations.

Build your application

Bundle configuration in Vite

// vite.config.js
export default {
  build: {
    rollupOptions: {
      // Bundle into single files
      output: {
        entryFileNames: 'index.js',
        assetFileNames: 'index.css'
      }
    },
    // Disable code splitting
    cssCodeSplit: false
  }
}

Was this helpful?

/

Bundle configuration in Webpack

// webpack.config.js
module.exports = {
  output: {
    filename: 'index.js',
  },
  optimization: {
    // Create single bundle
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: 1,
      minSize: 0
    }
  }
}

Was this helpful?

/

CI/CD Examples

name: Deploy Login App
on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'
        cache: 'npm'
    - name: Install dependencies
      run: npm ci
    - name: Build
      run: npm run build
    - name: Deploy to CDN
      # Example for AWS CloudFront
      uses: aws-actions/configure-aws-credentials@v1
      with:
        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        aws-region: us-east-1
    - name: Upload to S3
      run: aws s3 sync dist/ s3://your-bucket/
    - name: Invalidate CloudFront
      run: |
        aws cloudfront create-invalidation \\\\
          --distribution-id ${{ secrets.CLOUDFRONT_ID }} \\\\
          --paths "/*"

Was this helpful?

/

CDN Deployment Options

AWS Cloudfront settings

{
  "DefaultCacheBehavior": {
    "AllowedMethods": ["GET", "HEAD", "OPTIONS"],
    "CachedMethods": ["GET", "HEAD"],
    "DefaultTTL": 3600,
    "ForwardedValues": {
      "Headers": ["Origin"],
      "QueryString": false
    }
  }
}

Was this helpful?

/

CORS settings for AWS Cloudfront

{
  "CORSRules": [
    {
      "AllowedHeaders": ["*"],
      "AllowedMethods": ["GET"],
      "AllowedOrigins": ["https://*.auth0.com"],
      "MaxAgeSeconds": 3600
    }
  ]
}

Was this helpful?

/

Cloudflare Pages settings

# _headers
/*
  Access-Control-Allow-Origin: https://*.auth0.com
  Access-Control-Allow-Methods: GET, OPTIONS
  Cache-Control: public, max-age=3600

Was this helpful?

/

Version Management

URL Structure

<https://your-cdn.com/v1/index.js>
<https://your-cdn.com/v2/index.js>

Was this helpful?

/

Cache Invalidation

For each deployment, you must build the new version, upload it to the new path, and update your Auth0 configuration.

Below is an example of CloudFront invalidation:

aws cloudfront create-invalidation  --distribution-id DISTRIBUTION_ID   --paths "/v1/*"

Was this helpful?

/

Security Requirements

CORS Configuration

Access-Control-Allow-Origin: https://*.auth0.comAccess-Control-Allow-Methods: GET, OPTIONS

Was this helpful?

/

Content Security Policy

Content-Security-Policy: frame-ancestors 'self' *.auth0.com

Was this helpful?

/

Cache Headers

Cache-Control: public, max-age=3600

Was this helpful?

/

Test Deployment

CORS Check

curl -I -H "Origin: <https://login.your-tenant.auth0.com>"   <https://your-cdn.com/v1/index.js>

Was this helpful?

/

Cache Check

curl -I <https://your-cdn.com/v1/index.js>

Was this helpful?

/