fix(social-login): add Discord OAuth login button (#65)

is_discord_login_enabled was never wired into AuthorizerSocialLogin,
so operators with Discord enabled on the backend had no button to
trigger /oauth_login/discord. Mirrors the existing Twitch/Roblox
pattern: new icon, config flag, hasSocialLogin check, button block.

Closes #64

Author: lakhansamani

src/components/AuthorizerSocialLogin.tsx

@@ -13,6 +13,7 @@ import { Twitter } from '../icons/twitter';
 import { Microsoft } from '../icons/microsoft';
 import { Twitch } from '../icons/twitch';
 import { Roblox } from '../icons/roblox';
+import { Discord } from '../icons/discord';
 
 export const AuthorizerSocialLogin: FC<{
   urlProps?: Record<string, any>;
@@ -28,7 +29,8 @@ export const AuthorizerSocialLogin: FC<{
     config.is_twitter_login_enabled ||
     config.is_microsoft_login_enabled ||
     config.is_twitch_login_enabled ||
-    config.is_roblox_login_enabled;
+    config.is_roblox_login_enabled ||
+    config.is_discord_login_enabled;
   // AuthorizerPasskeyLogin always renders immediately after this component
   // (AuthorizerRoot, web/app's login.tsx) and owns its own "OR" separator
   // for whatever follows it - suppress this one so the two don't stack.
@@ -182,6 +184,20 @@ export const AuthorizerSocialLogin: FC<{
           <br />
         </>
       )}
+      {config.is_discord_login_enabled && (
+        <>
+          <StyledButton
+            appearance={ButtonAppearance.Default}
+            onClick={() => {
+              window.location.href = `${config.authorizerURL}/oauth_login/discord?${queryParams}`;
+            }}
+          >
+            <Discord />
+            Continue with Discord
+          </StyledButton>
+          <br />
+        </>
+      )}
       {hasSocialLogin &&
         !willShowPasskey &&
         (config.is_basic_authentication_enabled ||

src/contexts/AuthorizerContext.tsx

@@ -31,6 +31,7 @@ const AuthorizerContext = createContext<AuthorizerContextPropsType>({
     is_microsoft_login_enabled: false,
     is_twitch_login_enabled: false,
     is_roblox_login_enabled: false,
+    is_discord_login_enabled: false,
     is_email_verification_enabled: false,
     is_basic_authentication_enabled: false,
     is_magic_link_login_enabled: false,
@@ -111,6 +112,7 @@ let initialState: AuthorizerState = {
     is_microsoft_login_enabled: false,
     is_twitch_login_enabled: false,
     is_roblox_login_enabled: false,
+    is_discord_login_enabled: false,
     is_email_verification_enabled: false,
     is_basic_authentication_enabled: false,
     is_magic_link_login_enabled: false,

src/icons/discord.tsx

@@ -0,0 +1,25 @@
+
+export const Discord = () => {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: '10px',
+        top: '12px',
+        display: 'flex',
+      }}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        height="24"
+        width="24"
+        viewBox="0 0 33 32"
+      >
+        <path
+          fill="#5865F2"
+          d="M27.5928 6.20817C25.5533 5.27289 23.3662 4.58382 21.0794 4.18916C21.0378 4.18154 20.9962 4.20057 20.9747 4.23864C20.6935 4.73863 20.3819 5.3909 20.1637 5.90358C17.7042 5.53558 15.2573 5.53558 12.8481 5.90358C12.6299 5.37951 12.307 4.73863 12.0245 4.23864C12.003 4.20184 11.9614 4.18281 11.9198 4.18916C9.63431 4.58255 7.44721 5.27163 5.40641 6.20817C5.38874 6.21578 5.3736 6.22848 5.36355 6.24497C1.21508 12.439 0.078646 18.4809 0.636144 24.4478C0.638667 24.477 0.655064 24.5049 0.677768 24.5227C3.41481 26.5315 6.06609 27.7511 8.66815 28.5594C8.70979 28.5721 8.75392 28.5569 8.78042 28.5226C9.39594 27.6826 9.94461 26.7968 10.4151 25.8653C10.4428 25.8107 10.4163 25.746 10.3596 25.7244C9.48927 25.3945 8.66058 24.9922 7.86343 24.5354C7.80038 24.4986 7.79533 24.4084 7.85333 24.3653C8.02108 24.2397 8.18888 24.109 8.34906 23.977C8.37804 23.9529 8.41842 23.9478 8.45249 23.963C13.6894 26.3526 19.359 26.3526 24.5341 23.963C24.5682 23.9465 24.6086 23.9516 24.6388 23.9757C24.799 24.1077 24.9668 24.2397 25.1358 24.3653C25.1938 24.4084 25.19 24.4986 25.127 24.5354C24.3298 25.0011 23.5011 25.3945 22.6296 25.7232C22.5728 25.7447 22.5476 25.8107 22.5754 25.8653C23.0559 26.7955 23.6046 27.6812 24.2087 28.5213C24.234 28.5569 24.2794 28.5721 24.321 28.5594C26.9357 27.7511 29.5869 26.5315 32.324 24.5227C32.348 24.5049 32.3631 24.4783 32.3656 24.4491C33.0328 17.5506 31.2481 11.5584 27.6344 6.24623C27.6256 6.22848 27.6105 6.21578 27.5928 6.20817ZM11.1971 20.8146C9.62043 20.8146 8.32129 19.3679 8.32129 17.5913C8.32129 15.8146 9.59523 14.368 11.1971 14.368C12.8115 14.368 14.0981 15.8273 14.0729 17.5913C14.0729 19.3679 12.7989 20.8146 11.1971 20.8146ZM21.8299 20.8146C20.2533 20.8146 18.9541 19.3679 18.9541 17.5913C18.9541 15.8146 20.228 14.368 21.8299 14.368C23.4444 14.368 24.7309 15.8273 24.7057 17.5913C24.7057 19.3679 23.4444 20.8146 21.8299 20.8146Z"
+        />
+      </svg>
+    </div>
+  );
+};

src/types/index.ts

@@ -14,6 +14,7 @@ export type AuthorizerConfig = {
   is_microsoft_login_enabled: boolean;
   is_twitch_login_enabled: boolean;
   is_roblox_login_enabled: boolean;
+  is_discord_login_enabled: boolean;
   is_email_verification_enabled: boolean;
   is_basic_authentication_enabled: boolean;
   is_magic_link_login_enabled: boolean;
@@ -56,6 +57,7 @@ export type AuthorizerContextPropsType = {
     is_microsoft_login_enabled: boolean;
     is_twitch_login_enabled: boolean;
     is_roblox_login_enabled: boolean;
+    is_discord_login_enabled: boolean;
     is_email_verification_enabled: boolean;
     is_basic_authentication_enabled: boolean;
     is_magic_link_login_enabled: boolean;