BrandingApi retrieves customized branding configuration from the AuthSafe server, including logos, colors, and theme settings.
import { HttpService, BrandingApi } from 'authsafe-ts';
// No authentication required
const httpService = new HttpService();
const brandingApi = new BrandingApi(httpService);await brandingApi.getBranding(clientId: string): Promise<BrandingConfig>interface BrandingConfig {
logo: string; // Logo URL
favicon: string; // Favicon URL
primary_color: string; // Primary brand color (hex)
secondary_color: string; // Secondary color (hex)
background_color: string; // Background color (hex)
text_color: string; // Text color (hex)
company_name: string; // Company name
support_email?: string; // Support email
privacy_url?: string; // Privacy policy URL
terms_url?: string; // Terms of service URL
}const branding = await brandingApi.getBranding('your-client-id');
console.log('Logo:', branding.logo);
console.log('Primary color:', branding.primary_color);import { HttpService, BrandingApi } from 'authsafe-ts';
async function applyBranding() {
const httpService = new HttpService();
const brandingApi = new BrandingApi(httpService);
const clientId = 'your-client-id';
const branding = await brandingApi.getBranding(clientId);
// Apply logo
document.getElementById('app-logo').src = branding.logo;
// Apply colors
document.documentElement.style.setProperty(
'--primary-color',
branding.primary_color,
);
document.documentElement.style.setProperty(
'--secondary-color',
branding.secondary_color,
);
document.documentElement.style.setProperty(
'--bg-color',
branding.background_color,
);
// Apply company name
document.getElementById('company-name').textContent = branding.company_name;
// Update favicon
const favicon = document.querySelector('link[rel="icon"]');
favicon.href = branding.favicon;
}
// Apply on page load
applyBranding();import { HttpService, BrandingApi } from 'authsafe-ts';
async function generateTheme(clientId: string) {
const httpService = new HttpService();
const brandingApi = new BrandingApi(httpService);
const branding = await brandingApi.getBranding(clientId);
return {
palette: {
primary: {
main: branding.primary_color,
},
secondary: {
main: branding.secondary_color,
},
background: {
default: branding.background_color,
},
text: {
primary: branding.text_color,
},
},
typography: {
fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
},
components: {
MuiButton: {
styleOverrides: {
root: {
textTransform: 'none',
},
},
},
},
};
}
// Use with Material-UI
const theme = createTheme(await generateTheme('your-client-id'));<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My App</title>
<link rel="icon" type="image/png" id="favicon" href="/favicon.png" />
<style>
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--bg-color: #ffffff;
--text-color: #212529;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: Arial, sans-serif;
}
.btn-primary {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
}
#app-logo {
max-width: 200px;
height: auto;
}
</style>
</head>
<body>
<img id="app-logo" src="/default-logo.png" alt="App Logo" />
<h1 id="company-name">My App</h1>
<button class="btn-primary">Sign In</button>
<script type="module">
import { HttpService, BrandingApi } from 'authsafe-ts';
async function init() {
const httpService = new HttpService();
const brandingApi = new BrandingApi(httpService);
const branding = await brandingApi.getBranding('your-client-id');
// Apply branding
document.getElementById('app-logo').src = branding.logo;
document.getElementById('company-name').textContent =
branding.company_name;
document.getElementById('favicon').href = branding.favicon;
document.documentElement.style.setProperty(
'--primary-color',
branding.primary_color,
);
document.documentElement.style.setProperty(
'--secondary-color',
branding.secondary_color,
);
document.documentElement.style.setProperty(
'--bg-color',
branding.background_color,
);
document.documentElement.style.setProperty(
'--text-color',
branding.text_color,
);
}
init();
</script>
</body>
</html>