# Social Login Provider Patterns Patterns for rendering social login buttons in ACUL screens. Social connections come from `alternateConnections` on the transaction object — never hardcode connection names. --- ## Data Shape ```typescript // From useTransaction() (React) or manager.transaction (JS) alternateConnections: Array<{ name: string // e.g., "google-oauth2", "github", "apple" displayName: string // e.g., "Google", "GitHub", "Apple" iconUrl?: string // provider icon URL if available strategy: string // e.g., "google-oauth2", "github", "apple" }> ``` --- ## React Pattern ```tsx import { useTransaction, federatedLogin } from '@auth0/auth0-acul-react/login-id' const { alternateConnections } = useTransaction() // In JSX {alternateConnections?.length > 0 && (
Or continue with
{alternateConnections.map(conn => ( ))}
)} ``` ```tsx const SocialButton: React.FC<{ connection: AlternateConnection }> = ({ connection }) => { const [loading, setLoading] = useState(false) const handleClick = async () => { setLoading(true) await federatedLogin({ connection: connection.name }) setLoading(false) } return ( ) } ``` --- ## JS Pattern ```javascript import LoginId from '@auth0/auth0-acul-js/login-id' const manager = new LoginId() function renderSocialButtons() { const connections = manager.transaction.alternateConnections ?? [] if (!connections.length) return '' return `
Or continue with
${connections.map(conn => ` `).join('')}
` } // Attach handlers after render document.querySelectorAll('.social-btn').forEach(btn => { btn.addEventListener('click', async () => { await manager.federatedLogin({ connection: btn.dataset.connection }) }) }) ``` --- ## Provider-Specific Icon SVGs Use these inline SVGs when `iconUrl` is unavailable or for consistent brand rendering. ### Google ```html ``` ### GitHub ```html ``` ### Apple ```html ``` ### Microsoft ```html ``` --- ## Styling the Divider ```css .divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); } .divider span { color: var(--color-text-secondary); font-size: 0.875rem; white-space: nowrap; } ```