Adding keycloak sso button.

package.json

@@ -21,6 +21,7 @@
     "axios": "^1.7.2",
     "axios-mock-adapter": "^1.22.0",
     "next": "latest",
+    "next-auth": "^4.24.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.52.1",

src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,16 @@
+import NextAuth from "next-auth";
+import KeycloakProvider from "next-auth/providers/keycloak";
+
+const authOptions = {
+  providers: [
+    KeycloakProvider({
+      clientId: process.env.KEYCLOAK_CLIENT_ID ?? "",
+      clientSecret: process.env.KEYCLOAK_CLIENT_SECRET ?? "",
+      issuer: process.env.KEYCLOAK_ISSUER ?? "",
+    }),
+  ],
+};
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };

src/app/details/[id]/page.tsx

@@ -10,7 +10,7 @@ import useAuth from "../../../hooks/use-auth";
 import axios from "@utils/axios";
 
 const Details = (): React.ReactElement => {
-  const { id } = useParams();
+  const { id } = useParams() as Record<string, string>;
   const { isSignedIn } = useAuth();
   const { isLoading, error, data } = useQuery<Spacecraft, { message: string }>({
     queryKey: ["details", id],

src/app/signin/page.tsx

@@ -16,6 +16,8 @@ import {
   TextInput,
 } from "@components/comet";
 
+import { signIn as nextAuthSignIn } from 'next-auth/react'
+
 export default function SignIn() {
   const router = useRouter();
   const { signIn, error } = useAuth();
@@ -99,6 +101,13 @@ export default function SignIn() {
               >
                 Cancel
               </Button>
+              <Button 
+              id = "keycloak"
+              type="button"
+              variant="default"
+              onClick={() => nextAuthSignIn('keycloak')}>
+                SSO Keycloak
+                </Button>
               {/* {hasSsoConfig() && (
                 <Button
                   id="sign-in-sso"