Sigma Auth
Customization

Sigma Auth is designed to be easily customizable for your own deployment. This guide shows you how to customize the branding, styling, and content to match your organization.

Quick Customization

Environment Variables

The easiest way to customize basic branding is through environment variables:

# .env.local
NEXT_PUBLIC_BRAND_NAME="Your Auth Service"
NEXT_PUBLIC_CONTACT_EMAIL="support@yourcompany.com"
NEXT_PUBLIC_BLOG_URL="https://yourcompany.com/blog"

Supported Environment Variables

VariableDescriptionDefault
NEXT_PUBLIC_BRAND_NAMEService name displayed in UI"Sigma Auth"
NEXT_PUBLIC_CONTACT_EMAILContact email in footer"info@bopen.io"
NEXT_PUBLIC_BLOG_URLBlog URL in footer"https://bopen.io/blog"

Advanced Customization

Brand Configuration

For more advanced customization, modify the brand configuration file:

// lib/brand-config.ts
export const defaultBrandConfig: BrandConfig = {
  name: "Your Auth Service",
  logo: <YourLogoComponent size="lg" />,
  socialLinks: [
    {
      icon: <Github className="h-5 w-5" />,
      href: "https://github.com/yourorg/your-auth",
      label: "GitHub",
    },
    // Add more social links
  ],
  mainLinks: [
    { href: "/docs", label: "Documentation" },
    { href: "/api", label: "API" },
    { href: "https://yourcompany.com/blog", label: "Blog" },
    { href: "mailto:support@yourcompany.com", label: "Contact" },
  ],
  legalLinks: [
    { href: "/privacy", label: "Privacy Policy" },
    { href: "/terms", label: "Terms of Service" },
  ],
  copyright: {
    text: "© 2025 Your Company",
    license: "All rights reserved",
  },
};
  1. Create your logo component:
// components/ui/your-logo.tsx
export function YourLogo({ size = "md", className }: LogoProps) {
  return (
    <svg viewBox="0 0 100 100" className={className}>
      {/* Your logo SVG */}
    </svg>
  );
}
  1. Update the brand config:
// lib/brand-config.ts
import { YourLogo } from "@/components/ui/your-logo";

export const defaultBrandConfig: BrandConfig = {
  // ...
  logo: <YourLogo size="lg" />,
  // ...
};

Color Customization

CSS Variables

Customize colors by modifying CSS variables in your globals.css:

/* app/globals.css */
:root {
  --primary: 200 100% 50%;     /* Your primary color */
  --secondary: 220 100% 96%;   /* Your secondary color */
  --accent: 210 100% 95%;      /* Your accent color */
  --muted: 210 40% 95%;        /* Muted backgrounds */
  --destructive: 0 84% 60%;    /* Error/destructive actions */
}

.dark {
  --primary: 200 100% 50%;
  --secondary: 215 30% 18%;
  --accent: 216 34% 17%;
  --muted: 223 47% 11%;
  --destructive: 0 62% 30%;
}

Tailwind Configuration

For more advanced color customization, modify your tailwind.config.ts:

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        // Add custom color palette
        brand: {
          50: "#f0f9ff",
          100: "#e0f2fe",
          500: "#0ea5e9",
          600: "#0284c7",
          700: "#0369a1",
          900: "#0c4a6e",
        },
      },
    },
  },
};

Content Customization

Homepage Content

Modify the landing page content in components/landing/sigma-landing.tsx:

// Update the hero section
<motion.h1 className="text-5xl md:text-6xl lg:text-7xl font-extrabold">
  Your Custom Title
  <span className="block text-4xl md:text-5xl lg:text-6xl">
    Your Tagline
  </span>
</motion.h1>

<motion.p className="text-muted-foreground text-xl">
  Your custom description of the service.
</motion.p>

Update the legal pages to match your organization:

  1. Privacy Policy (app/privacy/page.tsx):

    • Update company name and contact information
    • Modify data collection practices if needed
    • Update legal jurisdiction

  2. Terms of Service (app/terms/page.tsx):

    • Update company name and contact information
    • Modify service description
    • Update governing law jurisdiction

Deployment-Specific Customization

Docker Environment Variables

If deploying with Docker, set environment variables:

# Dockerfile
ENV NEXT_PUBLIC_BRAND_NAME="Your Auth Service"
ENV NEXT_PUBLIC_CONTACT_EMAIL="support@yourcompany.com"
ENV NEXT_PUBLIC_BLOG_URL="https://yourcompany.com/blog"

Cloudflare Workers

For Cloudflare Workers deployment, set environment variables in wrangler.toml:

# wrangler.toml
[env.production.vars]
NEXT_PUBLIC_BRAND_NAME = "Your Auth Service"
NEXT_PUBLIC_CONTACT_EMAIL = "support@yourcompany.com"
NEXT_PUBLIC_BLOG_URL = "https://yourcompany.com/blog"

Railway Deployment

Set environment variables in Railway dashboard or railway.toml:

# railway.toml
[build]
  env = { NEXT_PUBLIC_BRAND_NAME = "Your Auth Service" }

Customization Checklist

Basic Customization

  • Set NEXT_PUBLIC_BRAND_NAME environment variable
  • Set NEXT_PUBLIC_CONTACT_EMAIL environment variable
  • Set NEXT_PUBLIC_BLOG_URL environment variable
  • Update favicon (app/icon.tsx)

Advanced Customization

  • Create custom logo component
  • Update brand configuration file
  • Customize color palette
  • Update homepage content
  • Modify legal pages
  • Update social media links

Pre-Deployment

  • Test all customizations locally
  • Update README with your customizations
  • Verify all links work correctly
  • Test responsive design
  • Check dark mode compatibility

Best Practices

  1. Keep B-Open Copyright: As requested, maintain the B-Open copyright in the footer while customizing your brand name.

  2. Test Thoroughly: Always test your customizations in both light and dark modes.

  3. Responsive Design: Ensure your customizations work across all device sizes.

  4. Accessibility: Maintain proper contrast ratios and accessibility standards.

  5. Version Control: Track your customizations in version control for easy updates.

Support

For help with customization:

  • Review the source code for implementation details
  • Check component props and interfaces
  • Test changes in development environment first
  • Contact us at info@bopen.io for advanced customization needs

Remember that this is open-source software, so you're free to modify it according to your needs while respecting the license terms.

OAuth Error Handling

Complete guide to handling OAuth errors, error codes, and debugging authentication issues

OAuth Providers

Integration with Google, GitHub, and other OAuth 2.0 providers