Google認証とカレンダー連携

.env.local.sample

@@ -6,6 +6,9 @@ AUTH_DISCORD_SECRET=
 AUTH_GITHUB_ID=
 AUTH_GITHUB_SECRET=
 
+AUTH_GOOGLE_ID=
+AUTH_GOOGLE_SECRET=
+
 POSTGRES_URL=
 
 AUDIT_LOG_WEBHOOK=

package.json

@@ -13,7 +13,10 @@
   "dependencies": {
     "@auth/core": "^0.34.2",
     "@auth/pg-adapter": "^1.4.2",
+    "@discordjs/rest": "^2.3.0",
     "@neondatabase/serverless": "^0.9.4",
+    "@vercel/postgres": "^0.9.0",
+    "discord-api-types": "^0.37.93",
     "next": "14.2.5",
     "next-auth": "5.0.0-beta.20",
     "react": "^18",

src/app/page.tsx

@@ -1,28 +1,13 @@
 import { auth, signIn, signOut } from '@/auth';
+import ButtonInForm from '@/components/ButtonInForm';
+import LinkCalendarButton from '@/components/LinkCalendarButton';
 import { createOrganizationInvitation } from '@/utils/github';
 
-const ButtonInForm = ({
-  action,
-  text,
-}: {
-  action: () => void;
-  text: string;
-}) => (
-  <form action={action}>
-    <button
-      type='submit'
-      className='px-8 py-4 mt-8 text-lg font-semibold border border-gray-300 rounded-lg transition-colors hover:border-gray-400'
-    >
-      {text}
-    </button>
-  </form>
-);
-
 const SignInButton = ({
   service,
   text,
 }: {
-  service: 'discord' | 'github';
+  service: 'discord' | 'github' | 'google';
   text: string;
 }) => (
   <ButtonInForm
@@ -54,12 +39,19 @@ export default async function Home() {
     );
   }
 
-  const { isJoinedGuild, githubUserID, isJoinedOrganization, name } =
-    session.user || {};
+  const {
+    isJoinedGuild,
+    githubUserID,
+    googleUserID,
+    isJoinedOrganization,
+    isLinkedToCalendar,
+    name,
+  } = session.user || {};
 
   return (
     <main className='flex min-h-screen flex-col items-center justify-center p-24'>
       <p className='text-2xl font-semibold'>Welcome {name}</p>
+
       {!isJoinedGuild ? (
         <DiscordLink />
       ) : !githubUserID ? (
@@ -75,10 +67,29 @@ export default async function Home() {
       ) : (
         <></>
       )}
+
+      {isJoinedGuild && !googleUserID && (
+        <SignInButton service='google' text='Sign in with Google' />
+      )}
+
       <SignInButton service='discord' text='Update Discord Profile' />
       {githubUserID && (
         <SignInButton service='github' text='Update GitHub Profile' />
       )}
+      {googleUserID && (
+        <>
+          <SignInButton service='google' text='Update Google Profile' />
+          {!isLinkedToCalendar ? (
+            <LinkCalendarButton action='link' text='Link to Google Calendar' />
+          ) : (
+            <LinkCalendarButton
+              action='unlink'
+              text='Unlink from Google Calendar'
+            />
+          )}
+        </>
+      )}
+
       <ButtonInForm
         action={async () => {
           'use server';