mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch from SuperTokens to NextAuth.js

Browse Source 
BREAKING CHANGE: Replace SuperTokens with NextAuth.js

Why:
- SuperTokens had persistent Traefik routing issues
- SSL certificate not issuing correctly
- Complex infrastructure (separate container)
- NextAuth runs in Next.js app (simpler, no separate service)

Changes:
- Install next-auth, @auth/prisma-adapter, prisma
- Create NextAuth API route: app/api/auth/[...nextauth]/route.ts
- Add Prisma schema for NextAuth tables (users, sessions, accounts)
- Update auth page to use NextAuth signIn()
- Remove all SuperTokens code and dependencies
- Keep same Google OAuth (just simpler integration)

Benefits:
- No separate auth service needed
- No Traefik routing issues
- Sessions stored in Montreal PostgreSQL
- Simpler configuration
- Battle-tested, widely used

All authentication data stays in Montreal!

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Mark Henderson
2026-02-17 15:12:21 -08:00
parent 8cd95607a4
commit bbb22f1c37
12 changed files with 534 additions and 632 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/api/auth/[...nextauth]/route.ts Normal file
View File

@@ -0,0 +1,6 @@
import NextAuth from "next-auth";
import { authOptions } from "@/lib/auth/authOptions";
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

60
app/api/auth/[[...path]]/route.ts
View File

@@ -1,60 +0,0 @@
import { NextRequest, NextResponse } from "next/server";
import SuperTokens from "supertokens-node";
import { backendConfig } from "@/lib/supertokens/backendConfig";
import { getAppDirRequestHandler } from "supertokens-node/nextjs";
// Tell Next.js this is a dynamic route (don't evaluate at build time)
export const dynamic = 'force-dynamic';
export const runtime = 'nodejs';
// Initialize SuperTokens lazily (only when first request comes in)
let initialized = false;
function ensureInitialized() {
if (!initialized && typeof window === 'undefined') {
SuperTokens.init(backendConfig());
initialized = true;
}
}
export async function GET(request: NextRequest) {
ensureInitialized();
const handleRequest = getAppDirRequestHandler(NextResponse);
const response = await handleRequest(request);
return response;
}
export async function POST(request: NextRequest) {
ensureInitialized();
const handleRequest = getAppDirRequestHandler(NextResponse);
const response = await handleRequest(request);
return response;
}
export async function DELETE(request: NextRequest) {
ensureInitialized();
const handleRequest = getAppDirRequestHandler(NextResponse);
const response = await handleRequest(request);
return response;
}
export async function PUT(request: NextRequest) {
ensureInitialized();
const handleRequest = getAppDirRequestHandler(NextResponse);
const response = await handleRequest(request);
return response;
}
export async function PATCH(request: NextRequest) {
ensureInitialized();
const handleRequest = getAppDirRequestHandler(NextResponse);
const response = await handleRequest(request);
return response;
}
export async function HEAD(request: NextRequest) {
ensureInitialized();
const handleRequest = getAppDirRequestHandler(NextResponse);
const response = await handleRequest(request);
return response;
}

38
app/auth/page.tsx
View File

@@ -1,38 +1,22 @@
"use client";
import dynamic from "next/dynamic";
import { useEffect, useState } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
// Dynamically import SuperTokens component (client-side only)
const SuperTokensAuthComponent = dynamic(
() => import("@/app/components/SuperTokensAuthComponent"),
{ ssr: false }
);
import { useEffect } from "react";
import NextAuthComponent from "@/app/components/NextAuthComponent";
export default function AuthPage() {
const { data: session, status } = useSession();
const router = useRouter();
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
// Check if already logged in after a short delay
setTimeout(async () => {
try {
const { doesSessionExist } = await import("supertokens-web-js/recipe/session");
const exists = await doesSessionExist();
if (exists) {
router.push("/marks-account/projects");
}
} catch (error) {
// SuperTokens not initialized yet, continue to show auth page
console.log("Session check skipped");
}
}, 500);
}, [router]);
// Redirect if already authenticated
if (status === "authenticated") {
router.push("/marks-account/projects");
}
}, [status, router]);
if (!mounted) {
if (status === "loading") {
return (
<div className="flex min-h-screen items-center justify-center bg-background">
<div className="text-center">
@@ -43,6 +27,6 @@ export default function AuthPage() {
);
}
return <SuperTokensAuthComponent />;
return <NextAuthComponent />;
}

24
app/components/SuperTokensAuthComponent.tsx → app/components/NextAuthComponent.tsx
View File

@@ -1,32 +1,20 @@
"use client";
import { signIn } from "next-auth/react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
export default function SuperTokensAuthComponent() {
export default function NextAuthComponent() {
const [isLoading, setIsLoading] = useState(false);
const handleGoogleSignIn = async () => {
setIsLoading(true);
try {
// Get the base URL from environment or current window
const baseUrl = process.env.NEXT_PUBLIC_APP_URL || window.location.origin;
const redirectUri = `${baseUrl}/api/auth/callback/google`;
// Get Google OAuth URL from SuperTokens
const response = await fetch(
`/api/auth/authorisationurl?thirdPartyId=google&redirectURIOnProviderDashboard=${encodeURIComponent(redirectUri)}`
);
const data = await response.json();
if (data.status === "OK") {
// Redirect to Google OAuth
window.location.href = data.urlWithQueryParams;
} else {
console.error("Failed to get auth URL:", data);
setIsLoading(false);
}
// Sign in with Google using NextAuth
await signIn("google", {
callbackUrl: "/marks-account/projects",
});
} catch (error) {
console.error("Google sign-in error:", error);
setIsLoading(false);

18
app/components/SuperTokensProvider.tsx
View File

@@ -1,18 +0,0 @@
"use client";
import React from "react";
import { useEffect } from "react";
import SuperTokensReact from "supertokens-auth-react";
import { frontendConfig } from "@/lib/supertokens/frontendConfig";
export const SuperTokensProvider: React.FC<React.PropsWithChildren<{}>> = ({
children,
}) => {
useEffect(() => {
if (typeof window !== "undefined") {
SuperTokensReact.init(frontendConfig());
}
}, []);
return <>{children}</>;
};

6
app/layout.tsx
View File

@@ -2,7 +2,7 @@ import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { Toaster } from "@/components/ui/sonner";
import { SuperTokensProvider } from "./components/SuperTokensProvider";
import { SessionProvider } from "next-auth/react";
const geistSans = Geist({
variable: "--font-geist-sans",
@@ -29,10 +29,10 @@ export default function RootLayout({
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<SuperTokensProvider>
<SessionProvider>
{children}
<Toaster />
</SuperTokensProvider>
</SessionProvider>
</body>
</html>
);