Merge branch 'main' of github.com:authorizerdev/authorizer-react

Author: lakhansamani

src/components/AuthorizerSocialLogin.tsx

@@ -10,6 +10,7 @@ import { LinkedIn } from '../icons/linkedin';
 import { Apple } from '../icons/apple';
 import { Twitter } from '../icons/twitter';
 import { Microsoft } from '../icons/microsoft';
+import { Twitch } from '../icons/twitch';
 
 export const AuthorizerSocialLogin: React.FC<{
   urlProps?: Record<string, any>;
@@ -23,7 +24,8 @@ export const AuthorizerSocialLogin: React.FC<{
     config.is_linkedin_login_enabled ||
     config.is_apple_login_enabled ||
     config.is_twitter_login_enabled ||
-    config.is_microsoft_login_enabled;
+    config.is_microsoft_login_enabled ||
+    config.is_twitch_login_enabled;
 
   const data: {
     scope?: string;
@@ -139,6 +141,20 @@ export const AuthorizerSocialLogin: React.FC<{
           <br />
         </>
       )}
+      {config.is_twitch_login_enabled && (
+        <>
+          <StyledButton
+            appearance={ButtonAppearance.Default}
+            onClick={() => {
+              window.location.href = `${config.authorizerURL}/oauth_login/twitch?${queryParams}`;
+            }}
+          >
+            <Twitch />
+            Continue with Twitch
+          </StyledButton>
+          <br />
+        </>
+      )}
       {hasSocialLogin &&
         (config.is_basic_authentication_enabled ||
           config.is_magic_link_login_enabled) && (

src/contexts/AuthorizerContext.tsx

@@ -28,6 +28,7 @@ const AuthorizerContext = createContext<AuthorizerContextPropsType>({
     is_apple_login_enabled: false,
     is_twitter_login_enabled: false,
     is_microsoft_login_enabled: false,
+    is_twitch_login_enabled: false,
     is_email_verification_enabled: false,
     is_basic_authentication_enabled: false,
     is_magic_link_login_enabled: false,
@@ -96,6 +97,7 @@ let initialState: AuthorizerState = {
     is_apple_login_enabled: false,
     is_twitter_login_enabled: false,
     is_microsoft_login_enabled: false,
+    is_twitch_login_enabled: false,
     is_email_verification_enabled: false,
     is_basic_authentication_enabled: false,
     is_magic_link_login_enabled: false,

src/icons/twitch.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export const Twitch = () => {
+  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 512 512"
+      >
+        <path d="M391.2 103.5H352.5v109.7h38.6zM285 103H246.4V212.8H285zM120.8 0 24.3 91.4V420.6H140.1V512l96.5-91.4h77.3L487.7 256V0zM449.1 237.8l-77.2 73.1H294.6l-67.6 64v-64H140.1V36.6H449.1z" />
+      </svg>
+    </div>
+  );
+};

src/types/index.ts

@@ -16,6 +16,7 @@ export type AuthorizerState = {
     is_apple_login_enabled: boolean;
     is_twitter_login_enabled: boolean;
     is_microsoft_login_enabled: boolean;
+    is_twitch_login_enabled: boolean;
     is_email_verification_enabled: boolean;
     is_basic_authentication_enabled: boolean;
     is_magic_link_login_enabled: boolean;
@@ -41,6 +42,7 @@ export type AuthorizerContextPropsType = {
     is_apple_login_enabled: boolean;
     is_twitter_login_enabled: boolean;
     is_microsoft_login_enabled: boolean;
+    is_twitch_login_enabled: boolean;
     is_email_verification_enabled: boolean;
     is_basic_authentication_enabled: boolean;
     is_magic_link_login_enabled: boolean;