206 oauthの認証ボタン作るます

frontend/Dockerfile

@@ -1,4 +1,6 @@
-FROM node
+# TODO: node２０のバグを修正したら消す
+# https://github.com/nodejs/node/issues/47822
+FROM node:19.9.0
 
 WORKDIR /workdir
 

frontend/package.json

@@ -32,6 +32,7 @@
     "eslint-config-next": "13.4.1",
     "jotai": "^2.1.0",
     "next": "13.4.1",
+    "next-auth": "^4.22.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "socket.io-client": "^4.6.1",

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

@@ -0,0 +1,49 @@
+import NextAuth from 'next-auth';
+import GoogleProvider from 'next-auth/providers/google';
+import FortyTwoProvider from 'next-auth/providers/42-school';
+import CredentialsProvider from 'next-auth/providers/credentials';
+const handler = NextAuth({
+  providers: [
+    GoogleProvider({
+      clientId: process.env.GOOGLE_CLIENT_ID || '',
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET || '',
+    }),
+    FortyTwoProvider({
+      clientId: process.env.FORTY_TWO_CLIENT_ID || '',
+      clientSecret: process.env.FORTY_TWO_CLIENT_SECRET || '',
+    }),
+    CredentialsProvider({
+      name: 'Email',
+      credentials: {
+        email: {
+          label: 'Email',
+          type: 'email',
+          placeholder: 'example@example.com',
+        },
+        password: { label: 'Password', type: 'password' },
+      },
+      async authorize(credentials, req) {
+        // backendにリクエストを送る
+        console.log(credentials);
+        console.log(req);
+        const user = { id: '1', name: 'hoge', email: 'example@example.com' };
+        if (user) {
+          return user;
+        }
+        return null;
+      },
+    }),
+  ],
+  callbacks: {
+    async signIn({ user, account, profile, email, credentials }) {
+      console.log(user);
+      console.log(account);
+      console.log(profile);
+      console.log(email);
+      console.log(credentials);
+      return true;
+    },
+  },
+});
+
+export { handler as GET, handler as POST };

frontend/src/features/user/components/User.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { useAtom } from 'jotai';
+import { signIn } from 'next-auth/react';
 
 import { Container } from '@/components/Layout/Container';
 import { userInfoAtom } from '@/App';
@@ -28,6 +29,9 @@ export const User = ({ children }: { children: ReactNode }) => {
       );
     }
   };
+  const AuthLoginButton = () => {
+    return <button onClick={() => signIn()}>authlogin</button>;
+  };
 
   return (
     <Container flexDirection="column">
@@ -39,6 +43,9 @@ export const User = ({ children }: { children: ReactNode }) => {
           <div style={{ margin: 'auto 10px auto auto' }}>
             <UserInputArea />
           </div>
+          <div>
+            <AuthLoginButton />
+          </div>
         </Container>
       </div>
       <hr />