Customize Login Page

Create branded login experiences that match your application's look and feel while maintaining Authsec's security standards.

Overview

Authsec allows you to customize the login page appearance, including colors, logos, fonts, and custom CSS to create a seamless user experience that aligns with your brand.

Customization Options

1. Basic Branding

Configure basic branding elements in your Authsec dashboard:

{
  "tenant": {
    "friendly_name": "Your Company",
    "picture_url": "https://yourcompany.com/logo.png",
    "support_email": "support@yourcompany.com",
    "support_url": "https://yourcompany.com/support"
  }
}

2. Color Scheme

Customize the color palette:

/* Primary colors */
:root {
  --primary-color: #007bff;
  --primary-hover: #0056b3;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --error-color: #dc3545;
  --text-color: #333333;
  --background-color: #ffffff;
}

3. Custom CSS

Add custom styling:

/* Login page customizations */
.auth0-lock-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.auth0-lock-form {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.auth0-lock-submit {
  background: var(--primary-color);
  border-radius: 6px;
  font-weight: 600;
}

.auth0-lock-social-button {
  border-radius: 6px;
  margin: 8px 0;
}

4. Logo and Images

Configure custom logos:

// Configure logo in SDK
const authsec = new AuthsecClient({
  domain: 'your-domain.authsec.com',
  clientId: 'your-client-id',
  theme: {
    logo: 'https://yourcompany.com/auth-logo.png',
    primaryColor: '#007bff'
  }
});

Advanced Customization

Custom HTML Template

Create a completely custom login page:

<!DOCTYPE html>
<html>
<head>
  <title>{{application.name}} - Login</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://your-domain.com/custom-auth.css">
</head>
<body>
  <div class="custom-login-container">
    <div class="login-form">
      <img src="{{tenant.picture_url}}" alt="Logo" class="logo">
      <h1>Welcome to {{application.name}}</h1>
      
      <!-- Authsec Lock widget will be embedded here -->
      <div id="auth-container"></div>
    </div>
  </div>
  
  <script src="https://cdn.auth0.com/js/lock/11.32.1/lock.min.js"></script>
  <script>
    var lock = new Auth0Lock(
      '{{application.clientID}}',
      '{{auth0Domain}}',
      {
        container: 'auth-container',
        theme: {
          logo: '{{tenant.picture_url}}',
          primaryColor: '#007bff'
        },
        languageDictionary: {
          title: 'Sign In to {{application.name}}'
        }
      }
    );
    
    lock.show();
  </script>
</body>
</html>

Multi-language Support

Configure text and messages for different languages:

const languageDictionary = {
  title: "Sign In",
  loginLabel: "Email or Username",
  passwordLabel: "Password", 
  signUpLabel: "Sign Up",
  forgotPasswordLabel: "Forgot Password?",
  loginSubmitLabel: "Sign In",
  signUpSubmitLabel: "Create Account"
};

// Spanish translations
const spanishDictionary = {
  title: "Iniciar Sesión",
  loginLabel: "Correo o Usuario", 
  passwordLabel: "Contraseña",
  signUpLabel: "Registrarse",
  forgotPasswordLabel: "¿Olvidaste tu contraseña?",
  loginSubmitLabel: "Iniciar Sesión", 
  signUpSubmitLabel: "Crear Cuenta"
};

Implementation Examples

React Integration

import React, { useEffect } from 'react';
import { useAuth0 } from '@auth0/auth0-react';

function CustomLoginPage() {
  const { loginWithRedirect, isAuthenticated, isLoading } = useAuth0();

  const customLoginOptions = {
    screen_hint: 'login',
    ui_locales: 'en',
    login_hint: 'user@example.com'
  };

  if (isLoading) return <div>Loading...</div>;
  if (isAuthenticated) return <Redirect to="/dashboard" />;

  return (
    <div className="custom-login-page">
      <div className="login-container">
        <img src="/logo.png" alt="Company Logo" className="logo" />
        <h1>Welcome Back</h1>
        <p>Sign in to access your AI assistant</p>
        
        <button 
          onClick={() => loginWithRedirect(customLoginOptions)}
          className="primary-login-btn"
        >
          Sign In
        </button>
        
        <div className="social-logins">
          <button onClick={() => loginWithRedirect({
            ...customLoginOptions,
            connection: 'google-oauth2'
          })}>
            Continue with Google
          </button>
          
          <button onClick={() => loginWithRedirect({
            ...customLoginOptions, 
            connection: 'windowslive'
          })}>
            Continue with Microsoft
          </button>
        </div>
      </div>
    </div>
  );
}

Vue.js Integration

<template>
  <div class="custom-login">
    <div class="login-form">
      <img :src="tenantLogo" alt="Logo" class="logo">
      <h1>{{ pageTitle }}</h1>
      
      <form @submit.prevent="handleLogin" v-if="!useHostedLogin">
        <div class="form-group">
          <label for="email">Email</label>
          <input 
            id="email"
            v-model="credentials.email" 
            type="email" 
            required
          >
        </div>
        
        <div class="form-group">
          <label for="password">Password</label>
          <input 
            id="password"
            v-model="credentials.password" 
            type="password" 
            required
          >
        </div>
        
        <button type="submit" class="login-btn">Sign In</button>
      </form>
      
      <button 
        v-else
        @click="loginWithRedirect" 
        class="hosted-login-btn"
      >
        Continue to Login
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      credentials: { email: '', password: '' },
      useHostedLogin: true,
      tenantLogo: process.env.VUE_APP_LOGO_URL,
      pageTitle: 'Welcome to AI Assistant'
    };
  },
  methods: {
    async handleLogin() {
      try {
        await this.$auth.loginWithCredentials(this.credentials);
        this.$router.push('/dashboard');
      } catch (error) {
        console.error('Login failed:', error);
      }
    },
    
    loginWithRedirect() {
      this.$auth.loginWithRedirect({
        appState: { target: '/dashboard' }
      });
    }
  }
};
</script>

Mobile Customization

Responsive Design

/* Mobile-first responsive design */
.custom-login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

@media (max-width: 480px) {
  .custom-login-container {
    padding: 10px;
    margin: 10px;
  }
  
  .logo {
    max-width: 150px;
    height: auto;
  }
  
  .login-form {
    padding: 20px;
  }
  
  .social-login-button {
    width: 100%;
    margin: 8px 0;
    padding: 12px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

Native Mobile Apps

// React Native example
import { useAuth0 } from 'react-native-auth0';

function LoginScreen() {
  const { authorize, clearSession, user, error, isLoading } = useAuth0();

  const customScheme = {
    customScheme: 'com.yourapp.auth',
    additionalParameters: {
      prompt: 'login',
      ui_locales: 'en',
      screen_hint: 'login'
    }
  };

  return (
    <View style={styles.container}>
      <Image source={{ uri: 'https://yourapp.com/logo.png' }} style={styles.logo} />
      <Text style={styles.title}>AI Assistant</Text>
      <Text style={styles.subtitle}>Sign in to continue</Text>
      
      <TouchableOpacity 
        style={styles.loginButton}
        onPress={() => authorize(customScheme)}
      >
        <Text style={styles.buttonText}>Sign In</Text>
      </TouchableOpacity>
    </View>
  );
}

Testing Customizations

Visual Regression Testing

// Test custom login page appearance
describe('Custom Login Page', () => {
  test('displays correct branding', async () => {
    await page.goto('https://your-domain.authsec.com/login');
    
    // Check logo is displayed
    const logo = await page.$('.logo');
    expect(logo).toBeTruthy();
    
    // Check custom colors are applied
    const primaryButton = await page.$('.login-btn');
    const buttonColor = await primaryButton.evaluate(
      el => getComputedStyle(el).backgroundColor
    );
    expect(buttonColor).toBe('rgb(0, 123, 255)'); // #007bff
    
    // Take screenshot for visual comparison
    await page.screenshot({ path: 'login-page.png' });
  });
});

Best Practices

Design Guidelines

Maintain consistent branding across all touchpoints
Ensure accessibility compliance (WCAG 2.1)
Optimize for mobile devices and various screen sizes
Use clear, readable fonts and appropriate contrast ratios

Performance Optimization

Optimize images and logos for web delivery
Minimize custom CSS file sizes
Use CDN for static assets
Implement proper caching headers

Security Considerations

Validate all custom code for security vulnerabilities
Keep custom dependencies up to date
Use HTTPS for all custom assets
Implement Content Security Policy (CSP) headers

Overview​

Customization Options​

1. Basic Branding​

2. Color Scheme​

3. Custom CSS​

4. Logo and Images​

Advanced Customization​

Custom HTML Template​

Multi-language Support​

Implementation Examples​

React Integration​

Vue.js Integration​

Mobile Customization​

Responsive Design​

Native Mobile Apps​

Testing Customizations​

Visual Regression Testing​

Best Practices​

Design Guidelines​

Performance Optimization​

Security Considerations​