Only allow single NextAuth provider, Login middleware updates

apps/bridge-frontend/next.config.js

@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   transpilePackages: ["@link-stack/ui", "@link-stack/bridge-common", "@link-stack/bridge-ui"],
+  poweredByHeader: false,
 };
 
 export default nextConfig;

apps/leafcutter/next.config.js

@@ -1,16 +1,9 @@
-const ContentSecurityPolicy = `
-  default-src 'self';
-  script-src 'self';
-  child-src example.com;
-  style-src 'self' example.com;
-  font-src 'self';
-`;
-
 module.exports = {
   transpilePackages: ["@link-stack/leafcutter-ui", "@link-stack/opensearch-common"],
   experimental: {
     missingSuspenseWithCSRBailout: false,
   },
+  poweredByHeader: false,
   rewrites: async () => ({
     fallback: [
       {

apps/link/app/(login)/login/_components/Login.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FC, useState } from "react";
+import { FC, useState, useEffect } from "react";
 import {
   Box,
   Grid,
@@ -14,7 +14,7 @@ import {
   Google as GoogleIcon,
   Key as KeyIcon,
 } from "@mui/icons-material";
-import { signIn } from "next-auth/react";
+import { signIn, getProviders } from "next-auth/react";
 import Image from "next/image";
 import LinkLogo from "public/link-logo-small.png";
 import { colors, fonts } from "@link-stack/ui";
@@ -29,6 +29,7 @@ export const Login: FC<LoginProps> = ({ session }) => {
     typeof window !== "undefined" && window.location.origin
       ? window.location.origin
       : "";
+  const [provider, setProvider] = useState(undefined);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const params = useSearchParams();
@@ -63,6 +64,14 @@ export const Login: FC<LoginProps> = ({ session }) => {
     },
   };
 
+  useEffect(() => {
+    const fetchProviders = async () => {
+      const providers = await getProviders();
+      setProvider(Object.keys(providers)?.pop());
+    };
+    fetchProviders();
+  }, []);
+
   return (
     <Box sx={{ backgroundColor: darkGray, height: "100vh" }}>
       <Container maxWidth="md" sx={{ p: 10 }}>
@@ -142,84 +151,79 @@ export const Login: FC<LoginProps> = ({ session }) => {
                       </Box>
                     </Grid>
                   ) : null}
-                  <Grid item sx={{ width: "100%" }}>
+                  {provider === "google" && (
-                    <IconButton
+                    <Grid item sx={{ width: "100%" }}>
-                      sx={buttonStyles}
+                      <IconButton
-                      onClick={() =>
+                        sx={buttonStyles}
-                        signIn("google", {
+                        onClick={() =>
-                          callbackUrl: `${origin}`,
+                          signIn("google", {
-                        })
+                            callbackUrl: `${origin}`,
-                      }
+                          })
-                    >
+                        }
-                      <GoogleIcon sx={{ mr: 1 }} />
+                      >
-                      Sign in with Google
+                        <GoogleIcon sx={{ mr: 1 }} />
-                    </IconButton>
+                        Sign in with Google
-                  </Grid>
+                      </IconButton>
-                  <Grid item sx={{ width: "100%" }}>
+                    </Grid>
-                    <IconButton
+                  )}
-                      aria-label="Sign in with Apple"
+                  {provider === "apple" && (
-                      sx={buttonStyles}
+                    <Grid item sx={{ width: "100%" }}>
-                      onClick={() =>
+                      <IconButton
-                        signIn("apple", {
+                        aria-label="Sign in with Apple"
-                          callbackUrl: `${window.location.origin}`,
+                        sx={buttonStyles}
-                        })
+                        onClick={() =>
-                      }
+                          signIn("apple", {
-                    >
+                            callbackUrl: `${window.location.origin}`,
-                      <AppleIcon sx={{ mr: 1 }} />
+                          })
-                      Sign in with Apple
+                        }
-                    </IconButton>
+                      >
-                  </Grid>
+                        <AppleIcon sx={{ mr: 1 }} />
-                  <Grid>
+                        Sign in with Apple
-                    <Typography
+                      </IconButton>
-                      variant="body1"
+                    </Grid>
-                      sx={{
+                  )}
-                        fontSize: 18,
+                  {provider === "credentials" && (
-                        color: white,
+                    <Grid item container spacing={3}>
-                        textAlign: "center",
+                      <Grid item sx={{ width: "100%" }}>
-                        mt: 3,
+                        <TextField
-                      }}
+                          value={email}
-                    >
+                          onChange={(e) => setEmail(e.target.value)}
-                      ⸺ or ⸺
+                          label="Email"
-                    </Typography>
+                          variant="filled"
-                  </Grid>
+                          size="small"
-                  <Grid item sx={{ width: "100%" }}>
+                          fullWidth
-                    <TextField
+                          sx={{ ...fieldStyles, backgroundColor: white }}
-                      value={email}
+                        />
-                      onChange={(e) => setEmail(e.target.value)}
+                      </Grid>
-                      label="Email"
+                      <Grid item sx={{ ...fieldStyles, width: "100%" }}>
-                      variant="filled"
+                        <TextField
-                      size="small"
+                          value={password}
-                      fullWidth
+                          onChange={(e) => setPassword(e.target.value)}
-                      sx={{ ...fieldStyles, backgroundColor: white }}
+                          label="Password"
-                    />
+                          variant="filled"
-                  </Grid>
+                          size="small"
-                  <Grid item sx={{ ...fieldStyles, width: "100%" }}>
+                          fullWidth
-                    <TextField
+                          sx={{ backgroundColor: white }}
-                      value={password}
+                          type="password"
-                      onChange={(e) => setPassword(e.target.value)}
+                        />
-                      label="Password"
+                      </Grid>
-                      variant="filled"
+                      <Grid item sx={{ width: "100%" }}>
-                      size="small"
+                        <IconButton
-                      fullWidth
+                          sx={buttonStyles}
-                      sx={{ backgroundColor: white }}
+                          onClick={() =>
-                      type="password"
+                            signIn("credentials", {
-                    />
+                              email,
-                  </Grid>
+                              password,
-                  <Grid item sx={{ width: "100%" }}>
+                              callbackUrl: `${origin}/setup`,
-                    <IconButton
+                            })
-                      sx={buttonStyles}
+                          }
-                      onClick={() =>
+                        >
-                        signIn("credentials", {
+                          <KeyIcon sx={{ mr: 1 }} />
-                          email,
+                          Sign in with Zammad credentials
-                          password,
+                        </IconButton>
-                          callbackUrl: `${origin}/setup`,
+                      </Grid>
-                        })
+                    </Grid>
-                      }
+                  )}
-                    >
-                      <KeyIcon sx={{ mr: 1 }} />
-                      Sign in with Zammad credentials
-                    </IconButton>
-                  </Grid>
                 </Grid>
               </Container>
             ) : null}

apps/link/app/_lib/authentication.ts

@@ -66,21 +66,24 @@ const login = async (email: string, password: string) => {
   }
 };
 
-export const authOptions: NextAuthOptions = {
+const providers = [];
-  pages: {
+
-    signIn: "/login",
+if (process.env.GOOGLE_CLIENT_ID && process.env.GOOGLE_CLIENT_SECRET) {
-    error: "/login",
+  providers.push(
-    signOut: "/logout",
-  },
-  providers: [
     Google({
       clientId: process.env.GOOGLE_CLIENT_ID,
       clientSecret: process.env.GOOGLE_CLIENT_SECRET,
     }),
+  );
+} else if (process.env.APPLE_CLIENT_ID && process.env.APPLE_CLIENT_SECRET) {
+  providers.push(
     Apple({
       clientId: process.env.APPLE_CLIENT_ID,
       clientSecret: process.env.APPLE_CLIENT_SECRET,
     }),
+  );
+} else {
+  providers.push(
     Credentials({
       name: "Zammad",
       credentials: {
@@ -96,7 +99,16 @@ export const authOptions: NextAuthOptions = {
         }
       },
     }),
-  ],
+  );
+}
+
+export const authOptions: NextAuthOptions = {
+  pages: {
+    signIn: "/login",
+    error: "/login",
+    signOut: "/logout",
+  },
+  providers,
   secret: process.env.NEXTAUTH_SECRET,
   callbacks: {
     signIn: async ({ user }) => {

apps/link/middleware.ts

@@ -85,9 +85,6 @@ const checkRewrites = async (request: NextRequestWithAuth) => {
 };
 
 export default withAuth(checkRewrites, {
-  pages: {
-    signIn: `/login`,
-  },
   callbacks: {
     authorized: ({ token, req }) => {
       if (process.env.SETUP_MODE === "true") {
@@ -97,6 +94,10 @@ export default withAuth(checkRewrites, {
       const path = req.nextUrl.pathname;
       const roles: any = token?.roles ?? [];
 
+      if (path.startsWith("/login")) {
+        return true;
+      }
+
       if (path.startsWith("/admin") && !roles.includes("admin")) {
         return false;
       }

apps/link/next.config.js

@@ -1,5 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  poweredByHeader: false,
   transpilePackages: [
     "@link-stack/leafcutter-ui",
     "@link-stack/opensearch-common",