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>
);

33
lib/auth/authOptions.ts Normal file
View File

@@ -0,0 +1,33 @@
import { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import { PrismaAdapter } from "@auth/prisma-adapter";
import { PrismaClient } from "@prisma/client";
const prisma = new PrismaClient();
export const authOptions: NextAuthOptions = {
adapter: PrismaAdapter(prisma),
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID || "",
clientSecret: process.env.GOOGLE_CLIENT_SECRET || "",
}),
],
pages: {
signIn: "/auth",
error: "/auth",
},
callbacks: {
async session({ session, user }) {
if (session.user) {
session.user.id = user.id;
}
return session;
},
},
session: {
strategy: "database",
maxAge: 30 * 24 * 60 * 60, // 30 days
},
secret: process.env.NEXTAUTH_SECRET,
};

55
lib/supertokens/backendConfig.ts
View File

@@ -1,55 +0,0 @@
import ThirdPartyNode from "supertokens-node/recipe/thirdparty";
import EmailPasswordNode from "supertokens-node/recipe/emailpassword";
import SessionNode from "supertokens-node/recipe/session";
import { TypeInput } from "supertokens-node/types";
import { AppInfoUserInput } from "supertokens-node/types";
export const backendConfig = (): TypeInput => {
const appUrl = process.env.NEXT_PUBLIC_APP_URL || "https://vibnai.com";
const appInfo: AppInfoUserInput = {
appName: "Vib'n",
apiDomain: appUrl,
websiteDomain: appUrl,
apiBasePath: "/api/auth",
websiteBasePath: "/auth",
};
return {
framework: "custom",
supertokens: {
connectionURI: process.env.SUPERTOKENS_CONNECTION_URI || "http://j04ckwg0k040o08gc04gs80o:3567",
apiKey: process.env.SUPERTOKENS_API_KEY || "",
},
appInfo,
recipeList: [
ThirdPartyNode.init({
signInAndUpFeature: {
providers: [
{
config: {
thirdPartyId: "google",
clients: [{
clientId: process.env.GOOGLE_CLIENT_ID || "",
clientSecret: process.env.GOOGLE_CLIENT_SECRET || "",
}],
},
},
{
config: {
thirdPartyId: "github",
clients: [{
clientId: process.env.GITHUB_CLIENT_ID || "",
clientSecret: process.env.GITHUB_CLIENT_SECRET || "",
}],
},
},
],
},
}),
EmailPasswordNode.init(),
SessionNode.init(),
],
isInServerlessEnv: true,
};
};

29
lib/supertokens/frontendConfig.ts
View File

@@ -1,29 +0,0 @@
import ThirdParty, { Google, Github } from "supertokens-auth-react/recipe/thirdparty";
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
import Session from "supertokens-auth-react/recipe/session";
export const frontendConfig = () => {
const appUrl = process.env.NEXT_PUBLIC_APP_URL || "https://app.vibnai.com";
return {
appInfo: {
appName: "Vib'n",
apiDomain: appUrl,
websiteDomain: appUrl,
apiBasePath: "/api/auth",
websiteBasePath: "/auth",
},
recipeList: [
ThirdParty.init({
signInAndUpFeature: {
providers: [
Google.init(),
Github.init(),
],
},
}),
EmailPassword.init(),
Session.init(),
],
};
};

824
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

11
package.json
View File

@@ -4,9 +4,10 @@
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"build": "prisma generate && prisma db push --accept-data-loss && next build",
"start": "next start",
"lint": "eslint",
"postinstall": "prisma generate",
"test:db": "tsx scripts/test-alloydb.ts",
"migrate:postgres": "tsx scripts/migrate-from-postgres.ts",
"migrate:reassign": "tsx scripts/reassign-migrated-data.ts",
@@ -18,6 +19,8 @@
"mcp:server": "node mcp-server.js"
},
"dependencies": {
"@auth/core": "^0.34.3",
"@auth/prisma-adapter": "^2.11.1",
"@google-cloud/vertexai": "^1.10.0",
"@google/genai": "^1.30.0",
"@google/generative-ai": "^0.24.1",
@@ -41,14 +44,12 @@
"google-auth-library": "^10.5.0",
"lucide-react": "^0.553.0",
"next": "16.0.1",
"next-auth": "^4.24.13",
"next-themes": "^0.4.6",
"pg": "^8.16.3",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"sonner": "^2.0.7",
"supertokens-auth-react": "^0.51.2",
"supertokens-node": "^24.0.1",
"supertokens-web-js": "^0.16.0",
"tailwind-merge": "^3.4.0",
"tsx": "^4.20.6",
"uuid": "^13.0.0",
@@ -56,6 +57,7 @@
"zod": "^3.23.8"
},
"devDependencies": {
"@prisma/client": "^5.22.0",
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19",
@@ -64,6 +66,7 @@
"eslint-config-next": "16.0.1",
"firebase-admin": "^13.6.0",
"firebase-functions": "^7.0.0",
"prisma": "^5.22.0",
"tailwindcss": "^4",
"tw-animate-css": "^1.4.0",
"typescript": "^5"

62
prisma/schema.prisma Normal file
View File

@@ -0,0 +1,62 @@
// Prisma schema for NextAuth.js
// This defines the database tables for authentication
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model Account {
id String @id @default(cuid())
userId String @map("user_id")
type String
provider String
providerAccountId String @map("provider_account_id")
refresh_token String? @db.Text
access_token String? @db.Text
expires_at Int?
token_type String?
scope String?
id_token String? @db.Text
session_state String?
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
@@unique([provider, providerAccountId])
@@map("accounts")
}
model Session {
id String @id @default(cuid())
sessionToken String @unique @map("session_token")
userId String @map("user_id")
expires DateTime
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
@@map("sessions")
}
model User {
id String @id @default(cuid())
name String?
email String? @unique
emailVerified DateTime? @map("email_verified")
image String?
accounts Account[]
sessions Session[]
@@map("users")
}
model VerificationToken {
identifier String
token String @unique
expires DateTime
@@unique([identifier, token])
@@map("verification_tokens")
}