Branding Customization

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

Variable	Description	Default
`NEXT_PUBLIC_BRAND_NAME`	Service name displayed in UI	"Sigma Auth"
`NEXT_PUBLIC_CONTACT_EMAIL`	Contact email in footer	"info@bopen.io"
`NEXT_PUBLIC_BLOG_URL`	Blog 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",
  },
};

Custom Logo

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>
  );
}

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>

Legal Pages

Update the legal pages to match your organization:

Privacy Policy (app/privacy/page.tsx):
- Update company name and contact information
- Modify data collection practices if needed
- Update legal jurisdiction
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"

Vercel Deployment

For Vercel deployment, set environment variables using the Vercel CLI:

# Set environment variables for production
vercel env add NEXT_PUBLIC_BRAND_NAME production
vercel env add NEXT_PUBLIC_CONTACT_EMAIL production
vercel env add NEXT_PUBLIC_BLOG_URL production

# Or set in Vercel dashboard under Project Settings → Environment Variables

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

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

Keep B-Open Copyright: As requested, maintain the B-Open copyright in the footer while customizing your brand name.
Test Thoroughly: Always test your customizations in both light and dark modes.
Responsive Design: Ensure your customizations work across all device sizes.
Accessibility: Maintain proper contrast ratios and accessibility standards.
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.

Examples

Real-world integration examples for Access Control

OAuth Providers

Integration with Google, GitHub, and other OAuth 2.0 providers

On this page