Skip to content

Auth0 Universal Login Branding Quick Reference

Logo & Branding Settings

Configure these in Auth0 Dashboard → Branding → Universal Login

Logo Configuration

Logo URL (Production): 

https://health.jmdaling.co.za/images/logo.png

Logo URL (Local Testing): 

http://localhost:8002/images/logo.png

Logo Specifications: - Format: PNG (with transparent background recommended) - Current size: Check docs/images/logo.png - Recommended: 150x150px to 400x400px - Must be publicly accessible - HTTPS required for production

Color Scheme

Primary Color: 

#009688 (Teal)

Accent Color: 

#4CAF50 (Green)

Background Color (Light Mode): 

#FFFFFF (White)

Background Color (Dark Mode): 

#121212 (Dark Grey)

Company Branding

Company Name: 

My Health Portal

Custom Domain: 

auth.jmdaling.co.za

Complete Universal Login Configuration

Settings Tab

  1. Logo
  2. URL: https://health.jmdaling.co.za/images/logo.png

  3. Alt text: "My Health Portal"

  4. Colors

  5. Primary color: #009688

  6. Page background color: #FFFFFF

  7. Favicon (optional)

  8. URL: https://health.jmdaling.co.za/images/favicon.png

  9. Font URL (optional, leave default)

  10. Default: System fonts work well

Advanced Options (Optional)

Custom Text: - Sign Up Header: "Join My Health Portal" - Login Header: "Welcome Back" - Password Reset: "Reset Your Password"

Footer Links: - Terms of Service: https://health.jmdaling.co.za/terms - Privacy Policy: https://health.jmdaling.co.za/privacy

Preview Your Login Page

  1. Go to Branding → Universal Login
  2. Click Preview button (top right)
  3. Test with different login methods:
  4. Email/Password
  5. Google Sign-In
  6. Password Reset flow

Troubleshooting Logo Issues

Logo Not Showing

Issue: Logo URL returns 404

Solutions: 1. Verify MkDocs is serving the file: curl http://localhost:8002/images/logo.png 2. Check file exists: ls -la docs/images/logo.png 3. Restart Docker: docker compose restart 4. For production, ensure HTTPS URL is accessible

Logo Too Large/Small

Issue: Logo appears distorted or wrong size

Solutions: 1. Resize logo to recommended dimensions (150x150px to 400x400px) 2. Use PNG with transparent background 3. Test different sizes in Auth0 preview

Logo Doesn't Update

Issue: Changed logo but old one still shows

Solutions: 1. Clear browser cache 2. Wait 5-10 minutes for Auth0 CDN to update 3. Use hard refresh (Ctrl+Shift+R / Cmd+Shift+R) 4. Check logo URL in Auth0 settings is correct

MkDocs Logo Configuration

Your platform uses the same logo in multiple places:

MkDocs Navigation (Top Left): 

# mkdocs.yml
theme:
  logo: images/logo.png
  favicon: images/favicon.png

Auth0 Login Page: 

https://health.jmdaling.co.za/images/logo.png

Consistent Branding: Users see the same logo throughout their experience.

Testing Checklist

  • [ ] Logo appears on Auth0 login page
  • [ ] Logo has correct dimensions (not stretched)
  • [ ] Primary color (teal) applied to buttons
  • [ ] Company name displays correctly
  • [ ] Custom domain shows in browser URL bar
  • [ ] Logo appears in both light and dark themes
  • [ ] Logo works on mobile devices
  • [ ] Favicon shows in browser tab

Quick Configuration Script

For reference, here's the exact configuration:

// Auth0 Universal Login Settings
{
  "logo_url": "https://health.jmdaling.co.za/images/logo.png",
  "primary_color": "#009688",
  "page_background": "#FFFFFF",
  "favicon_url": "https://health.jmdaling.co.za/images/favicon.png"
}

Last Updated: 2025-12-05