add azure-ad login option

apps/builder/assets/logos/AzureAdLogo.tsx

@@ -0,0 +1,32 @@
+import { Icon, IconProps } from '@chakra-ui/react'
+
+export const AzureAdLogo = (props: IconProps) => {
+  return (
+    <Icon
+      id="svg1035"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 374.5 377.3"
+      {...props}
+    >
+      {/* <style>.st0{fill:#}.st1{}</style> */}
+      <g id="layer1" transform="translate(-39.022 -78.115)">
+        <g id="g1016" transform="translate(-63.947 -88.179)">
+          <path
+            id="path1008"
+            fill='#00bef2'
+            d="M290 166.3c.4 0 .8.5 1.4 1.4.5.8 42.6 51.3 93.6 112.2 51 60.9 92.6 111 92.4 111.3-.1.3-40.7 33.6-90.2 73.9s-91.6 74.6-93.5 76.2c-3.3 2.7-3.5 2.8-4.7 1.6-.7-.7-42.9-35.2-93.8-76.7S102.8 390.5 103 390c.2-.5 42-50.4 93.1-111s92.9-110.7 93.1-111.5c.2-.8.5-1.2.8-1.2z"
+          />
+          <path
+            id="path923"
+            fill="#fff"
+            stroke="#fff"
+            strokeWidth="1.2357"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M283.1 483.6c-5.8-2.1-12.8-8.1-15.7-13.7-3.6-6.9-3.3-17.7.7-26.3 3.1-6.4 3.1-6.6 1.1-8.1-1.1-.8-14.4-8.2-29.4-16.3-15-8.1-28.1-15.2-29-15.7-1.2-.7-3.2 0-6.8 2.3-11.7 7.4-23.9 6.6-33.5-2.3-6.9-6.4-8.9-10.9-8.9-20.1 0-8.9 1.8-13.5 7.5-19.2 7.7-7.7 18-10.3 27.9-7 5.4 1.8 5.5 1.8 8.9-.8 4-3 36.1-32.3 51.6-47l10.7-10.2-3.2-6.7c-6.5-13.5-3.2-28.5 8.2-37.5 6.2-4.9 10.8-6.4 19.7-6.4 20.8 0 35.3 21.8 27.5 41.3-2.1 5.4-2.1 5.5-.1 8.8 1.7 2.9 30.6 37.8 45.9 55.6 2.7 3.1 5.7 5.6 6.7 5.6s4.4-1 7.6-2.2c14.9-5.9 30.6.7 36.8 15.5 4 9.5.5 22.3-8 30-6 5.4-10.4 7.1-18.4 7.1-5.6 0-7.7-.6-13.6-3.8-4.4-2.4-7.8-3.6-9.2-3.2-2.4.6-39.3 25.9-47.5 32.5-5 4.1-5.4 5.6-2.8 11.7 2.5 6 2.2 15.4-.6 21.3-3.1 6.5-10.8 13-17.5 15-6.8 1.9-10.9 1.9-16.6-.2zm1.7-110.2v-57l-3.2-4.4c-1.8-2.4-3.5-4.4-3.8-4.4-1.3 0-65.9 58.7-65.9 59.9 0 .3 1 3.3 2.2 6.5 1.2 3.3 2.1 8 2 10.7-.1 2.7-.1 5.7-.1 6.7.1 2.3 21.7 16.1 54.1 34.8 8.9 5.2 12 6.5 13.1 5.6 1.3-1.1 1.6-12.2 1.6-58.4zm27.4 50.4c42.8-26.9 50.8-32.3 51.3-34.3.3-1.2.7-5.9.8-10.6l.3-8.4-21.8-25.9c-23.4-27.7-32-37.1-34-37.1-.7 0-4.2 2-7.8 4.4l-6.6 4.4.3 56.9c.3 51 .7 59.6 2.6 59.6.2.1 7-4 14.9-9z"
+          />
+        </g>
+      </g>
+    </Icon>
+  )
+}

apps/builder/assets/logos/index.tsx

@@ -18,3 +18,4 @@ export * from './FacebookLogo'
 export * from './ZapierLogo'
 export * from './MakeComLogo'
 export * from './PabblyConnectLogo'
+export * from './AzureAdLogo'

apps/builder/components/auth/SocialLoginButtons.tsx

@@ -9,7 +9,7 @@ import {
 import { useRouter } from 'next/router'
 import React from 'react'
 import { stringify } from 'qs'
-import { FacebookLogo, GoogleLogo, GitlabLogo } from 'assets/logos'
+import { FacebookLogo, GoogleLogo, GitlabLogo, AzureAdLogo } from 'assets/logos'
 import { BuiltInProviderType } from 'next-auth/providers'
 
 type Props = {
@@ -42,6 +42,11 @@ export const SocialLoginButtons = ({ providers }: Props) => {
       callbackUrl: `/typebots?${stringify(query)}`,
     })
 
+  const handleAzureAdClick = async () =>
+    signIn('azure-ad', {
+      callbackUrl: `/typebots?${stringify(query)}`,
+    })
+
   return (
     <Stack>
       {providers?.github && (
@@ -88,6 +93,17 @@ export const SocialLoginButtons = ({ providers }: Props) => {
           Continue with {providers.gitlab.name}
         </Button>
       )}
+      {providers?.['azure-ad'] && (
+        <Button
+          leftIcon={<AzureAdLogo />}
+          onClick={handleAzureAdClick}
+          data-testid='azure-ad'
+          isLoading={['loading', 'authenticated'].includes(status)}
+          variant="outline"
+        >
+          Continue with {providers['azure-ad'].name}
+        </Button>
+      )}
     </Stack>
   )
 }

apps/builder/pages/api/auth/[...nextauth].ts

@@ -4,6 +4,7 @@ import GitHubProvider from 'next-auth/providers/github'
 import GitlabProvider from 'next-auth/providers/gitlab'
 import GoogleProvider from 'next-auth/providers/google'
 import FacebookProvider from 'next-auth/providers/facebook'
+import AzureADProvider from "next-auth/providers/azure-ad";
 import prisma from 'libs/prisma'
 import { Provider } from 'next-auth/providers'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -79,6 +80,20 @@ if (
   )
 }
 
+if (
+  isNotEmpty(process.env.AZURE_AD_CLIENT_ID) &&
+  isNotEmpty(process.env.AZURE_AD_CLIENT_SECRET) &&
+  isNotEmpty(process.env.AZURE_AD_TENANT_ID)
+) {
+  providers.push(
+    AzureADProvider({
+      clientId: process.env.AZURE_AD_CLIENT_ID,
+      clientSecret: process.env.AZURE_AD_CLIENT_SECRET,
+      tenantId: process.env.AZURE_AD_TENANT_ID,
+    }),
+  )
+}
+
 const handler = (req: NextApiRequest, res: NextApiResponse) => {
   if (req.method === 'HEAD') {
     res.status(200)