BlogNow.Tech logoBlogNow.Tech
DocsPricing

    Getting Started

    • Introduction
    • Quick Start
    • Authentication

    Integrations

    • Next.js
    • React
    • Vite
    • Vue.js
    • Nuxt
    • Astro

    SDK

    • Overview

    API Reference

    • Overview

    Authentication Guide

    Learn how to securely authenticate with BlogNow using API keys and protect your blog content with CORS domain restrictions.

    Security Overview

    BlogNow uses public API keys for authentication, designed specifically for client-side use. To protect your content and prevent unauthorized access, you can restrict API key usage to specific domains using CORS.

    • Public API keys are safe for client-side applications
    • CORS domain restrictions add an extra layer of security
    • No sensitive data exposed through public endpoints

    API Keys

    Public API Keys

    Your public API key is used to access published blog posts and public content

    Note: API keys are not created by default. You need to manually create them in your dashboard. This gives you full control over when and how API access is granted.

    How to Create Your API Key:

    1. Log in to your BlogNow Dashboard
    2. Navigate to Settings → API Keys
    3. Click Create New API Key
    4. Give your API key a descriptive name (e.g., ‘Production’, ‘Development’, ‘Staging’)
    5. Configure allowed domains (required) - Add at least one domain to the allowlist
    6. Click Create to generate your API key
    7. Copy the API key immediately - it won't be shown again for security reasons

    Example API Key Format:

    pk_live_1234567890abcdef1234567890abcdef

    Public API Keys are Client-Safe: BlogNow public API keys are specifically designed for client-side use and only provide read access to published content. They do not expose any sensitive data or allow modifications to your blog.

    CORS Domain Restrictions

    Protect Your API Key with Domain Restrictions

    Limit which domains can use your API key to prevent unauthorized access

    What are CORS Domain Restrictions?

    CORS (Cross-Origin Resource Sharing) domain restrictions allow you to specify which domains are authorized to make API requests using your public API key. This prevents other websites from using your API key to access your blog content.

    Required: CORS domain restrictions are mandatory. By default, all domains are blocked until you explicitly add them to the allowed domains list. Your API key will not work until you configure at least one allowed domain.

    How to Configure CORS Domains:

    1. Go to your BlogNow Dashboard
    2. Navigate to Settings → API Keys
    3. Find the Allowed Domains section
    4. Add your domain(s) to the allowlist
    5. Click Save Changes

    Example Domain Configurations:

    Production domain:

    https://yourblog.com

    Multiple domains (production + staging):

    https://yourblog.com
    https://staging.yourblog.com

    Development environment:

    http://localhost:3000

    Domain Format Guidelines:

    • Include the protocol: https:// or http://
    • Use exact domain matches (subdomains matter)
    • For localhost, include the port: http://localhost:3000
    • Add one domain per line

    Security Best Practice: Always configure CORS domain restrictions for production applications. This prevents unauthorized websites from using your API key and helps you maintain control over who can access your blog content.

    Using API Keys in Your Application

    Environment Variables

    Store your API key securely in environment variables

    Different frameworks use different environment variable naming conventions. Choose the appropriate format for your framework:

    # Next.js
    NEXT_PUBLIC_BLOGNOW_API_KEY=your_api_key_here
    
    # Vite / Astro
    VITE_BLOGNOW_API_KEY=your_api_key_here
    PUBLIC_BLOGNOW_API_KEY=your_api_key_here
    
    # Create React App
    REACT_APP_BLOGNOW_API_KEY=your_api_key_here
    
    # Nuxt 3
    NUXT_PUBLIC_BLOGNOW_API_KEY=your_api_key_here

    Note: Environment variables prefixed with NEXT_PUBLIC_, VITE_, PUBLIC_, or REACT_APP_ are exposed to the client-side code. This is intentional and safe for BlogNow public API keys.

    Best Practices for API Key Management

    Use Different API Keys for Different Environments

    Create separate API keys for development, staging, and production to maintain security and control

    Why Use Separate Keys?

    • Isolate environments: Development and testing won't affect production
    • Easy revocation: Disable dev/staging keys without impacting production
    • Better tracking: Monitor usage per environment
    • Security hygiene: Reduce risk if a development key is accidentally exposed

    Recommended Key Setup:

    PROD

    Production API Key

    For your live website (https://yourblog.com)

    STAGE

    Staging API Key

    For your staging environment (https://staging.yourblog.com)

    DEV

    Development API Key

    For local development (http://localhost:3000)

    Disable or Revoke Non-Production Keys

    Clean up unused API keys to maintain security

    Important: After completing development and testing, disable or revoke API keys that are no longer needed.

    • •Disable temporary keys created for testing
    • •Revoke keys if you suspect they've been compromised
    • •Remove keys for deprecated environments

    How to Disable/Revoke Keys:

    1. Go to Settings → API Keys in your dashboard
    2. Find the key you want to disable
    3. Click Disable (temporary) or Revoke (permanent)
    4. Confirm your action
    Tip: Disabled keys can be re-enabled later. Revoked keys are permanently deleted and cannot be recovered.

    Common CORS Configurations

    Development Environment

    For local development, add your localhost domain:

    http://localhost:3000

    Don't forget to include the port number if you're using a custom port.

    Staging & Production

    Add both staging and production domains:

    https://staging.yourblog.com
    https://yourblog.com

    Use separate API keys for each environment.

    Multiple Subdomains

    Add each subdomain separately:

    https://blog.yourdomain.com
    https://news.yourdomain.com
    https://www.yourdomain.com

    Wildcard subdomains are not supported for security reasons.

    Preview Deployments

    For platforms like Vercel with preview URLs:

    https://your-app.vercel.app
    https://your-app-*.vercel.app

    Create a separate API key for preview environments.

    Troubleshooting CORS Errors

    Common CORS Error Messages:

    Access to fetch at 'https://api.blognow.tech/...' from origin 'https://yourdomain.com' has been blocked by CORS policy

    This error means your domain is not in the allowed domains list, or you haven't configured any allowed domains yet.

    Remember: All domains are blocked by default. You must add your domain to the allowed list before your API key will work.

    Solutions:

    • Add your domain to the allowed domains list in the API key settings
    • Verify the domain in the error message matches exactly what's in your allowed domains list
    • Check that you included the protocol (http:// or https://)
    • Ensure there are no trailing slashes in your domain configuration
    • Clear your browser cache and try again after adding the domain

    Next Steps

    Get Your API Key

    Log in to your dashboard to view and configure your API key

    Go to Dashboard

    SDK Documentation

    Learn how to use the BlogNow SDK in your application

    SDK Docs

    Need Help?

    Having trouble with authentication or CORS configuration? We're here to help!

    Contact SupportCommunity Discussions