Extract SignInButton

Author: ulrikandersen

src/app/auth/signin/SignInButton.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import { signIn } from "next-auth/react"
+import { Button, Stack, Typography } from "@mui/material"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faGithub, faMicrosoft } from "@fortawesome/free-brands-svg-icons"
+
+interface SignInButtonProps {
+  providerId: string
+}
+
+export default function SignInButton({ providerId }: SignInButtonProps) {
+  const providerIcon = providerId === "microsoft-entra-id" ? faMicrosoft : faGithub
+  const providerName = providerId === "microsoft-entra-id" ? "Microsoft" : "GitHub"
+
+  return (
+    <Button
+      variant="outlined"
+      onClick={() => signIn(providerId, { callbackUrl: "/" })}
+    >
+      <Stack direction="row" alignItems="center" spacing={1} padding={1}>
+        <FontAwesomeIcon icon={providerIcon} size="2xl" />
+        <Typography variant="h6" sx={{ display: "flex" }}>
+          Sign in with {providerName}
+        </Typography>
+      </Stack>
+    </Button>
+  )
+}

src/app/auth/signin/page.tsx

@@ -1,24 +1,27 @@
 import Image from "next/image"
-import { Box, Button, Stack, Typography } from "@mui/material"
-import { signIn } from "@/composition"
+import { Box, Stack, Typography } from "@mui/material"
 import { env } from "@/common"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faGithub, faMicrosoft } from "@fortawesome/free-brands-svg-icons"
 import SignInTexts from "@/features/auth/view/SignInTexts"
 import MessageLinkFooter from "@/common/ui/MessageLinkFooter"
+import SignInButton from "./SignInButton"
 
 const SITE_NAME = env.getOrThrow("FRAMNA_DOCS_TITLE")
 const HELP_URL = env.get("FRAMNA_DOCS_HELP_URL")
 const PROJECT_SOURCE_PROVIDER = env.get("PROJECT_SOURCE_PROVIDER") || "github"
 
 // Force page to be rendered dynamically to ensure we read the correct values for the environment variables.
 export const dynamic = "force-dynamic"
- 
+
 export default async function Page() {
+  const isAzureDevOps = PROJECT_SOURCE_PROVIDER === "azure-devops"
+  const providerId = isAzureDevOps ? "microsoft-entra-id" : "github"
+
   return (
     <Box display="flex" height="100vh">
-      <InfoColumn/>
-      <SignInColumn/>
+      <InfoColumn />
+      <SignInColumn
+        providerId={providerId}
+      />
     </Box>
   )
 }
@@ -37,7 +40,11 @@ const InfoColumn = () => {
   )
 }
 
-const SignInColumn = () => {
+interface SignInColumnProps {
+  providerId: string
+}
+
+const SignInColumn = ({ providerId }: SignInColumnProps) => {
   const title = `Get started with ${SITE_NAME}`
   return (
     <Box
@@ -75,42 +82,17 @@ const SignInColumn = () => {
           }}>
             {title}
           </Typography>
-          <SignInButton />
+          <SignInButton providerId={providerId} />
         </Stack>
       </Box>
       {HELP_URL && (
         <Box sx={{ marginBottom: 2 }}>
-          <MessageLinkFooter 
+          <MessageLinkFooter
             url={HELP_URL}
             content={`Learn more about ${SITE_NAME}`}
           />
         </Box>
-      )}  
+      )}
     </Box>
   )
 }
-
-const SignInButton = () => {
-  const isAzureDevOps = PROJECT_SOURCE_PROVIDER === "azure-devops"
-  const providerId = isAzureDevOps ? "microsoft-entra-id" : "github"
-  const providerName = isAzureDevOps ? "Microsoft" : "GitHub"
-  const providerIcon = isAzureDevOps ? faMicrosoft : faGithub
-
-  return (
-    <form
-      action={async () => {
-        "use server"
-        await signIn(providerId, { redirectTo: "/" })
-      }}
-    >
-      <Button variant="outlined" type="submit">
-        <Stack direction="row" alignItems="center" spacing={1} padding={1}>
-          <FontAwesomeIcon icon={providerIcon} size="2xl" />
-          <Typography variant="h6" sx={{ display: "flex" }}>
-            Sign in with {providerName}
-          </Typography>
-        </Stack>
-      </Button>
-    </form>
-  )
-}