NextAuth with google calendar API, fs module error - next.js

Question

so i have a component called cita.jsx where i use the Session Provider as so:
import { useState } from "react";
import { useForm } from "react-hook-form";
import { checkout } from "./checkout";
import { google } from "googleapis";
import { useSession } from "next-auth/react";
import { SessionProvider } from "next-auth/react";
// MUI
import TextField from "#mui/material/TextField";
import { LocalizationProvider } from "#mui/x-date-pickers/LocalizationProvider";
import { AdapterDateFns } from "#mui/x-date-pickers/AdapterDateFns";
import { DateTimePicker } from "#mui/x-date-pickers/DateTimePicker";
import LoginTest from "#/components/loginTest/LoginTest";
export default function Cita({ stripePriceID }) {
// console.log(stripePriceID);
const { register, handleSubmit } = useForm();
const { data: session } = useSession();
const createEvent = async () => {
// Load the Google Calendar API
const calendar = google.calendar({
version: "v3",
auth: session.accessToken,
});
// Create a new event
const event = {
summary: "Test Event",
location: "New York",
description: "This is a test event",
start: {
dateTime: "2023-03-01T09:00:00-07:00",
timeZone: "America/Los_Angeles",
},
end: {
dateTime: "2023-03-01T17:00:00-07:00",
timeZone: "America/Los_Angeles",
},
reminders: {
useDefault: true,
},
};
// Insert the new event
await calendar.events.insert({
calendarId: "primary",
resource: event,
});
};
const [value, setValue] = useState(new Date());
return (
<SessionProvider session={session}>
<div className="flex flex-col justify-center h-[475px] md:h-[555px]">
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DateTimePicker
renderInput={(props) => <TextField {...props} />}
label="Fecha y Hora"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
/>
</LocalizationProvider>
<div
className="overflow-y-auto h-[400px] mt-3
md:scrollbar scrollbar-track-[#d0e7d5] scrollbar-thumb-[#ef8eb2]"
>
<form
onSubmit={handleSubmit(onSubmit)}
className=" flex flex-col space-y-2"
>
<div className=" w-[300px] md:w-[375px] flex flex-col">
<input
{...register("nombre")}
placeholder="Nombre"
className="contactInput"
type="text"
/>
<input
{...register("email")}
placeholder="Email"
className="contactInput"
type="email"
/>
<input
{...register("número")}
placeholder="Número telefónico"
className="contactInput"
type="text"
/>
<input
{...register("medicamentos")}
placeholder="¿Que medicamentos o suplementos consumes?"
className="contactInput"
type="text"
/>
<input
{...register("objectivo")}
placeholder="Objetivo principal"
className="contactInput"
type="text"
/>
<input
{...register("peso")}
placeholder="Peso aproximado"
className="contactInput"
type="text"
/>
<input
{...register("edad")}
placeholder="Edad"
className="contactInput"
type="text"
/>
<input
{...register("estatura")}
placeholder="Estatura promedio"
className="contactInput"
type="text"
/>
<input
{...register("bajar")}
placeholder="¿Por qué quieres bajar de peso?"
className="contactInput"
type="text"
/>
</div>
<LoginTest />
<button
// onClick={() =>
// checkout({
// lineItems: [
// {
// price: `${stripePriceID}`,
// quantity: 1,
// },
// ],
// })
// }
// type="submit"
// role="link"
// className="py-5 px-10 rounded-full text-white bg-[#f28482] font-bold"
>
Pagar Ahora
</button>
</form>
</div>
</div>
</SessionProvider>
);
}
and my logintest: "use client";
import { useSession, signIn, signOut } from "next-auth/react";
export default function LoginTest() {
const { data: session } = useSession();
if (session) {
console.log(session);
return (
<>
Signed in as {session.user.email} <br />
<button onClick={() => signOut()}>Sign out</button>
</>
);
}
return (
<>
Not signed in <br />
<button onClick={() => signIn()}>Sign in</button>
</>
);
}
and then inside my pages/api/auth/[...nextauth].js import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
export default NextAuth({
providers: [
// OAuth authentication providers...
GoogleProvider({
clientId: process.env.GOOGLE_ID,
clientSecret: process.env.GOOGLE_SECRET,
}),
],
});
for the life of me, ive been trying to get the calendar api to work with nextjs 13 and i keep getting errors:
i cant seem to figure out how to get this to work. I simply want users, once they authenticate through nextauth, to be able to book an event into my calendar. Please guide me!
./node_modules/gcp-metadata/build/src/gcp-residency.js:19:0
Module not found: Can't resolve 'fs'
Import trace for requested module:
./node_modules/gcp-metadata/build/src/index.js
./node_modules/google-auth-library/build/src/auth/googleauth.js
./node_modules/google-auth-library/build/src/index.js
./node_modules/googleapis/build/src/index.js