feat: add microsoft login

Author: lakhansamani

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.7",
+  "version": "1.1.8-beta.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -65,6 +65,6 @@
     "typescript": "^4.9.3"
   },
   "dependencies": {
-    "@authorizerdev/authorizer-js": "^1.1.2"
+    "@authorizerdev/authorizer-js": "^1.1.4-beta.0"
   }
 }

package.json

@@ -9,6 +9,7 @@ import { createQueryParams } from '../utils/common';
 import { LinkedIn } from '../icons/linkedin';
 import { Apple } from '../icons/apple';
 import { Twitter } from '../icons/twitter';
+import { Microsoft } from '../icons/microsoft';
 
 export const AuthorizerSocialLogin: React.FC<{
   urlProps?: Record<string, any>;
@@ -20,7 +21,9 @@ export const AuthorizerSocialLogin: React.FC<{
     config.is_github_login_enabled ||
     config.is_facebook_login_enabled ||
     config.is_linkedin_login_enabled ||
-    config.is_apple_login_enabled;
+    config.is_apple_login_enabled ||
+    config.is_twitter_login_enabled ||
+    config.is_microsoft_login_enabled;
 
   const data: {
     scope?: string;
@@ -47,7 +50,7 @@ export const AuthorizerSocialLogin: React.FC<{
             }}
           >
             <Apple />
-            Sign in with Apple
+            Continue with Apple
           </StyledButton>
           <br />
         </div>
@@ -61,7 +64,7 @@ export const AuthorizerSocialLogin: React.FC<{
             }}
           >
             <Google />
-            Sign in with Google
+            Continue with Google
           </StyledButton>
           <br />
         </>
@@ -75,7 +78,7 @@ export const AuthorizerSocialLogin: React.FC<{
             }}
           >
             <Github />
-            Sign in with Github
+            Continue with Github
           </StyledButton>
           <br />
         </>
@@ -89,7 +92,7 @@ export const AuthorizerSocialLogin: React.FC<{
             }}
           >
             <Facebook />
-            Sign in with Facebook
+            Continue with Facebook
           </StyledButton>
           <br />
         </>
@@ -103,7 +106,7 @@ export const AuthorizerSocialLogin: React.FC<{
             }}
           >
             <LinkedIn />
-            Sign in with LinkedIn
+            Continue with LinkedIn
           </StyledButton>
           <br />
         </>
@@ -117,7 +120,21 @@ export const AuthorizerSocialLogin: React.FC<{
             }}
           >
             <Twitter />
-            Sign in with Twitter
+            Continue with Twitter
+          </StyledButton>
+          <br />
+        </>
+      )}
+      {config.is_microsoft_login_enabled && (
+        <>
+          <StyledButton
+            appearance={ButtonAppearance.Default}
+            onClick={() => {
+              window.location.href = `${config.authorizerURL}/oauth_login/microsoft?${queryParams}`;
+            }}
+          >
+            <Microsoft />
+            Continue with Microsoft
           </StyledButton>
           <br />
         </>

src/components/AuthorizerSocialLogin.tsx

@@ -27,6 +27,7 @@ const AuthorizerContext = createContext<AuthorizerContextPropsType>({
     is_linkedin_login_enabled: false,
     is_apple_login_enabled: false,
     is_twitter_login_enabled: false,
+    is_microsoft_login_enabled: false,
     is_email_verification_enabled: false,
     is_basic_authentication_enabled: false,
     is_magic_link_login_enabled: false,
@@ -94,6 +95,7 @@ let initialState: AuthorizerState = {
     is_linkedin_login_enabled: false,
     is_apple_login_enabled: false,
     is_twitter_login_enabled: false,
+    is_microsoft_login_enabled: false,
     is_email_verification_enabled: false,
     is_basic_authentication_enabled: false,
     is_magic_link_login_enabled: false,

src/contexts/AuthorizerContext.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+export const Microsoft = () => {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: '10px',
+        top: '12px',
+        display: 'flex',
+      }}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 48 48"
+        width="24px"
+        height="24px"
+      >
+        <path fill="#ff5722" d="M6 6H22V22H6z" transform="rotate(-180 14 14)" />
+        <path
+          fill="#4caf50"
+          d="M26 6H42V22H26z"
+          transform="rotate(-180 34 14)"
+        />
+        <path
+          fill="#ffc107"
+          d="M26 26H42V42H26z"
+          transform="rotate(-180 34 34)"
+        />
+        <path
+          fill="#03a9f4"
+          d="M6 26H22V42H6z"
+          transform="rotate(-180 14 34)"
+        />
+      </svg>
+    </div>
+  );
+};

src/icons/microsoft.tsx

@@ -15,6 +15,7 @@ export type AuthorizerState = {
     is_linkedin_login_enabled: boolean;
     is_apple_login_enabled: boolean;
     is_twitter_login_enabled: boolean;
+    is_microsoft_login_enabled: boolean;
     is_email_verification_enabled: boolean;
     is_basic_authentication_enabled: boolean;
     is_magic_link_login_enabled: boolean;
@@ -39,6 +40,7 @@ export type AuthorizerContextPropsType = {
     is_linkedin_login_enabled: boolean;
     is_apple_login_enabled: boolean;
     is_twitter_login_enabled: boolean;
+    is_microsoft_login_enabled: boolean;
     is_email_verification_enabled: boolean;
     is_basic_authentication_enabled: boolean;
     is_magic_link_login_enabled: boolean;