♻️ Upgrade to next-auth v5

apps/web/.env.test

@@ -4,6 +4,6 @@ NEXTAUTH_URL=$NEXT_PUBLIC_BASE_URL
 SECRET_PASSWORD=abcdef1234567890abcdef1234567890
 DATABASE_URL=postgres://postgres:postgres@localhost:5450/rallly
 SUPPORT_EMAIL=support@rallly.co
-SMTP_HOST=localhost
+SMTP_HOST=0.0.0.0
 SMTP_PORT=1025
 QUICK_CREATE_ENABLED=true

apps/web/declarations/next-auth.d.ts

@@ -20,6 +20,7 @@ declare module "next-auth" {
   }
 
   interface User extends DefaultUser {
+    id: string;
     locale?: string | null;
     timeZone?: string | null;
     timeFormat?: TimeFormat | null;

apps/web/i18next-scanner.config.js

@@ -1,7 +1,7 @@
 const typescriptTransform = require("i18next-scanner-typescript");
 
 module.exports = {
-  input: ["src/**/*.{ts,tsx}", "!src/auth.ts"],
+  input: ["src/**/*.{ts,tsx}", "!src/next-auth*.ts"],
   options: {
     nsSeparator: false,
     defaultNs: "app",

apps/web/package.json

@@ -18,7 +18,7 @@
     "docker:start": "./scripts/docker-start.sh"
   },
   "dependencies": {
-    "@auth/prisma-adapter": "^1.0.3",
+    "@auth/prisma-adapter": "^2.7.4",
     "@aws-sdk/client-s3": "^3.645.0",
     "@aws-sdk/s3-request-presigner": "^3.645.0",
     "@hookform/resolvers": "^3.3.1",
@@ -67,7 +67,7 @@
     "lucide-react": "^0.387.0",
     "micro": "^10.0.1",
     "nanoid": "^5.0.9",
-    "next-auth": "^4.24.5",
+    "next-auth": "^5.0.0-beta.25",
     "next-i18next": "^13.0.3",
     "php-serialize": "^4.1.1",
     "postcss": "^8.4.31",

apps/web/public/locales/en/app.json

@@ -32,7 +32,6 @@
   "emailNotAllowed": "This email is not allowed.",
   "emailPlaceholder": "jessie.smith@example.com",
   "exportToCsv": "Export to CSV",
-  "forgetMe": "Forget me",
   "guest": "Guest",
   "ifNeedBe": "If need be",
   "location": "Location",
@@ -199,9 +198,6 @@
   "pollStatusFinalized": "Finalized",
   "share": "Share",
   "noParticipants": "No participants",
-  "userId": "User ID",
-  "aboutGuest": "Guest User",
-  "aboutGuestDescription": "Profile settings are not available for guest users. <0>Sign in</0> to your existing account or <1>create a new account</1> to customize your profile.",
   "logoutDescription": "Sign out of your existing session",
   "events": "Events",
   "inviteParticipantsDescription": "Copy and share the invite link to start gathering responses from your participants.",
@@ -305,5 +301,6 @@
   "registerVerifyDescription": "Check your email for the verification code",
   "loginVerifyTitle": "Finish Logging In",
   "loginVerifyDescription": "Check your email for the verification code",
-  "createAccount": "Create Account"
+  "createAccount": "Create Account",
+  "loginMagicLinkError": "This link is invalid or expired. Please request a new link."
 }

apps/web/src/app/[locale]/(admin)/settings/profile/delete-account-dialog.tsx

@@ -38,7 +38,7 @@ export function DeleteAccountDialog({
     onSuccess() {
       posthog?.capture("delete account");
       signOut({
-        callbackUrl: "/login",
+        redirectTo: "/login",
       });
     },
   });

apps/web/src/app/[locale]/(auth)/auth/login/components/login-page.tsx

@@ -4,17 +4,22 @@ import { Button } from "@rallly/ui/button";
 import { useMutation } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
 import { useSession } from "next-auth/react";
+import React from "react";
 
 import { OptimizedAvatarImage } from "@/components/optimized-avatar-image";
 import { Skeleton } from "@/components/skeleton";
 import { Trans } from "@/components/trans";
+import { useTranslation } from "@/i18n/client";
 import { trpc } from "@/trpc/client";
 
 type PageProps = { magicLink: string; email: string };
 
 export const LoginPage = ({ magicLink, email }: PageProps) => {
   const session = useSession();
   const posthog = usePostHog();
+  const { t } = useTranslation();
+  const [error, setError] = React.useState<string | null>(null);
+
   const magicLinkFetch = useMutation({
     mutationFn: async () => {
       const res = await fetch(magicLink);
@@ -31,9 +36,15 @@ export const LoginPage = ({ magicLink, email }: PageProps) => {
             name: updatedSession.user.name,
           });
         }
+        router.push(data.url);
+      } else {
+        setError(
+          t("loginMagicLinkError", {
+            defaultValue:
+              "This link is invalid or expired. Please request a new link.",
+          }),
+        );
       }
-
-      router.push(data.url);
     },
   });
   const { data } = trpc.user.getByEmail.useQuery({ email });
@@ -72,6 +83,7 @@ export const LoginPage = ({ magicLink, email }: PageProps) => {
             <Trans i18nKey="login" defaults="Login" />
           </Button>
         </div>
+        {error && <p className="text-destructive text-sm">{error}</p>}
       </div>
     </div>
   );

apps/web/src/app/[locale]/(auth)/login/actions.ts

@@ -4,18 +4,24 @@ import { prisma } from "@rallly/database";
 import { cookies } from "next/headers";
 
 export async function setVerificationEmail(email: string) {
-  const count = await prisma.user.count({
+  const user = await prisma.user.findUnique({
     where: {
       email,
     },
+    select: {
+      email: true,
+    },
   });
 
-  cookies().set("verification-email", email, {
-    httpOnly: true,
-    secure: process.env.NODE_ENV === "production",
-    sameSite: "lax",
-    maxAge: 15 * 60,
-  });
+  if (user) {
+    cookies().set("verification-email", user.email, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === "production",
+      sameSite: "lax",
+      maxAge: 15 * 60,
+    });
+    return true;
+  }
 
-  return count > 0;
+  return false;
 }

apps/web/src/app/[locale]/(auth)/login/components/login-email-form.tsx

@@ -53,13 +53,13 @@ export function LoginWithEmailForm() {
           if (doesExist) {
             await signIn("email", {
               email: identifier,
-              callbackUrl: searchParams?.get("callbackUrl") ?? undefined,
+              redirectTo: searchParams?.get("redirectTo") ?? undefined,
               redirect: false,
             });
-            // redirect to verify page with callbackUrl
+            // redirect to verify page with redirectTo
             router.push(
-              `/login/verify?callbackUrl=${encodeURIComponent(
-                searchParams?.get("callbackUrl") ?? "",
+              `/login/verify?redirectTo=${encodeURIComponent(
+                searchParams?.get("redirectTo") ?? "",
               )}`,
             );
           } else {

apps/web/src/app/[locale]/(auth)/login/components/login-with-oidc.tsx

@@ -6,16 +6,16 @@ import { Trans } from "@/components/trans";
 
 export async function LoginWithOIDC({
   name,
-  callbackUrl,
+  redirectTo,
 }: {
   name: string;
-  callbackUrl?: string;
+  redirectTo?: string;
 }) {
   return (
     <Button
       onClick={() => {
         signIn("oidc", {
-          callbackUrl,
+          redirectTo: redirectTo,
         });
       }}
       variant="link"

apps/web/src/app/[locale]/(auth)/login/components/sso-provider.tsx

@@ -15,7 +15,7 @@ function SSOImage({ provider }: { provider: string }) {
     );
   }
 
-  if (provider === "azure-ad") {
+  if (provider === "microsoft-entra-id") {
     return (
       <Image
         src="/static/microsoft.svg"
@@ -40,11 +40,11 @@ function SSOImage({ provider }: { provider: string }) {
 export function SSOProvider({
   providerId,
   name,
-  callbackUrl,
+  redirectTo,
 }: {
   providerId: string;
   name: string;
-  callbackUrl?: string;
+  redirectTo?: string;
 }) {
   const { t } = useTranslation();
   return (
@@ -58,7 +58,7 @@ export function SSOProvider({
       key={providerId}
       onClick={() => {
         signIn(providerId, {
-          callbackUrl,
+          redirectTo: redirectTo,
         });
       }}
     >

apps/web/src/app/[locale]/(auth)/login/page.tsx

@@ -1,7 +1,9 @@
 import Link from "next/link";
 import { Trans } from "react-i18next/TransWithoutContext";
 
-import { getOAuthProviders } from "@/auth";
+import { GoogleProvider } from "@/auth/providers/google";
+import { MicrosoftProvider } from "@/auth/providers/microsoft";
+import { OIDCProvider } from "@/auth/providers/oidc";
 import { getTranslation } from "@/i18n/server";
 
 import {
@@ -22,20 +24,14 @@ export default async function LoginPage({
   searchParams,
 }: {
   searchParams?: {
-    callbackUrl?: string;
+    redirectTo?: string;
   };
 }) {
   const { t } = await getTranslation();
-  const oAuthProviders = getOAuthProviders();
 
-  const hasAlternateLoginMethods = oAuthProviders.length > 0;
-
-  const oidcProvider = oAuthProviders.find(
-    (provider) => provider.id === "oidc",
-  );
-  const socialProviders = oAuthProviders.filter(
-    (provider) => provider.id !== "oidc",
-  );
+  const oidcProvider = OIDCProvider();
+  const socialProviders = [GoogleProvider(), MicrosoftProvider()];
+  const hasAlternateLoginMethods = socialProviders.length > 0 || !!oidcProvider;
 
   return (
     <AuthPageContainer>
@@ -58,19 +54,21 @@ export default async function LoginPage({
         {oidcProvider ? (
           <LoginWithOIDC
             name={oidcProvider.name}
-            callbackUrl={searchParams?.callbackUrl}
+            redirectTo={searchParams?.redirectTo}
           />
         ) : null}
         {socialProviders ? (
           <div className="grid gap-4">
-            {socialProviders.map((provider) => (
-              <SSOProvider
-                key={provider.id}
-                providerId={provider.id}
-                name={provider.name}
-                callbackUrl={searchParams?.callbackUrl}
-              />
-            ))}
+            {socialProviders.map((provider) =>
+              provider ? (
+                <SSOProvider
+                  key={provider.id}
+                  providerId={provider.id}
+                  name={provider.options?.name || provider.name}
+                  redirectTo={searchParams?.redirectTo}
+                />
+              ) : null,
+            )}
           </div>
         ) : null}
       </AuthPageContent>

apps/web/src/app/[locale]/(auth)/login/verify/components/otp-form.tsx

@@ -50,7 +50,7 @@ export function OTPForm({ email }: { email: string }) {
         message: t("wrongVerificationCode"),
       });
     } else {
-      window.location.href = searchParams?.get("callbackUrl") ?? "/";
+      window.location.href = searchParams?.get("redirectTo") ?? "/";
     }
   });
 

apps/web/src/app/[locale]/(auth)/register/verify/components/otp-form.tsx

@@ -68,7 +68,7 @@ export function OTPForm({ token }: { token: string }) {
 
     signIn("registration-token", {
       token,
-      callbackUrl: searchParams?.get("callbackUrl") ?? "/",
+      redirectTo: searchParams?.get("redirectTo") ?? "/",
     });
   });
 

apps/web/src/app/[locale]/layout.tsx

@@ -8,8 +8,8 @@ import React from "react";
 
 import { TimeZoneChangeDetector } from "@/app/[locale]/timezone-change-detector";
 import { Providers } from "@/app/providers";
-import { getServerSession } from "@/auth";
 import { SessionProvider } from "@/auth/session-provider";
+import { auth } from "@/next-auth";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -30,7 +30,7 @@ export default async function Root({
   children: React.ReactNode;
   params: { locale: string };
 }) {
-  const session = await getServerSession();
+  const session = await auth();
 
   return (
     <html lang={locale} className={inter.className}>

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

@@ -0,0 +1,6 @@
+import { withPosthog } from "@rallly/posthog/server";
+
+import { handlers } from "@/next-auth";
+
+export const GET = withPosthog(handlers.GET);
+export const POST = withPosthog(handlers.POST);

apps/web/src/app/api/notifications/unsubscribe/route.ts

@@ -3,7 +3,7 @@ import { cookies } from "next/headers";
 import type { NextRequest } from "next/server";
 import { NextResponse } from "next/server";
 
-import { getServerSession } from "@/auth";
+import { auth } from "@/next-auth";
 import type { DisableNotificationsPayload } from "@/trpc/types";
 import { decryptToken } from "@/utils/session";
 
@@ -14,7 +14,7 @@ export const GET = async (req: NextRequest) => {
     return NextResponse.redirect(new URL("/login", req.url));
   }
 
-  const session = await getServerSession();
+  const session = await auth();
 
   if (!session || !session.user?.email) {
     return NextResponse.redirect(new URL("/login", req.url));

apps/web/src/app/api/stripe/checkout/route.ts

@@ -5,7 +5,7 @@ import type { NextRequest } from "next/server";
 import { NextResponse } from "next/server";
 import { z } from "zod";
 
-import { getServerSession } from "@/auth";
+import { auth } from "@/next-auth";
 
 const inputSchema = z.object({
   period: z.enum(["monthly", "yearly"]).optional(),
@@ -14,7 +14,7 @@ const inputSchema = z.object({
 });
 
 export async function POST(request: NextRequest) {
-  const userSession = await getServerSession();
+  const userSession = await auth();
   const formData = await request.formData();
   const { period = "monthly", return_path } = inputSchema.parse(
     Object.fromEntries(formData.entries()),

apps/web/src/app/api/stripe/portal/route.ts

@@ -5,7 +5,7 @@ import * as Sentry from "@sentry/nextjs";
 import type { NextRequest } from "next/server";
 import { NextResponse } from "next/server";
 
-import { getServerSession } from "@/auth";
+import { auth } from "@/next-auth";
 
 export async function GET(request: NextRequest) {
   const sessionId = request.nextUrl.searchParams.get("session_id");
@@ -32,7 +32,7 @@ export async function GET(request: NextRequest) {
       );
     }
   } else {
-    const userSession = await getServerSession();
+    const userSession = await auth();
     if (!userSession?.user || userSession.user.email === null) {
       Sentry.captureException(new Error("User not logged in"));
       return NextResponse.json(