OAuthButtons

Domain

Social sign-in buttons for Google, GitHub, Discord, and Microsoft. Accepts a providers prop to show only a subset.

Preview

Code

<%- include('modules/domain/common/auth/OAuthButtons', {
  action: '/auth/oauth',
  providers: ['google', 'github', 'discord', 'microsoft']
}) %>

Preview

Code

<%- include('modules/domain/common/auth/OAuthButtons', {
  action: '/auth/oauth',
  providers: ['google', 'github']
}) %>

<%
  var _allowed   = { GOOGLE: 1, GITHUB: 1, DISCORD: 1, MICROSOFT: 1 };
  var _providers = (locals.providers || ['GOOGLE', 'GITHUB', 'DISCORD', 'MICROSOFT']).filter(function (p) {
    return !!_allowed[String(p).toUpperCase()];
  }).map(function (p) { return String(p).toUpperCase(); });
  var _action    = locals.action    || '#';
  var _method    = locals.method    || 'post';

  var providerMeta = {
    GOOGLE:    { label: 'Continue with Google',    icon: 'fa-brands fa-google',    iconClass: 'text-[#EA4335]' },
    GITHUB:    { label: 'Continue with GitHub',    icon: 'fa-brands fa-github',    iconClass: 'text-text-primary' },
    DISCORD:   { label: 'Continue with Discord',   icon: 'fa-brands fa-discord',   iconClass: 'text-[#5865F2]' },
    MICROSOFT: { label: 'Continue with Microsoft', icon: 'fa-brands fa-microsoft', iconClass: 'text-[#00A4EF]' }
  };
%>

  <% _providers.forEach(function (provider) { %>
  <% var meta = providerMeta[provider]; %>
  
    
    <%- include('../../../ui/Button', {
      type: 'submit',
      variant: 'outline',
      fullWidth: true,
      ariaLabel: meta.label,
      iconLeft: '',
      children: meta.label
    }) %>
  
  <% }); %>

OAuthButtons

All providers

Google + GitHub only