feat: migrate from Clerk to Auth0 authentication by saddlepaddle · Pull Request #355 · superset-sh/superset

saddlepaddle · 2025-12-13T03:56:47Z

Summary

Migrates entire codebase from Clerk to Auth0 for authentication
Creates new @superset/auth0 shared package with server/client exports
Updates all four apps (web, api, admin, marketing) to use Auth0
Removes all Clerk dependencies and references

Changes

New package: packages/auth0/ - Auth0 client wrapper with typed session helpers
Database schema: Renamed clerkId → auth0Id (migration needed)
All apps: Replaced ClerkProvider with Auth0Provider, updated middleware
GitHub workflows: Updated secrets from Clerk to Auth0
Deleted: Clerk webhook handler, SSO callback pages

Test plan

Set up Auth0 tenant with Google social connection
Configure callback URLs: http://localhost:3000/api/auth/callback
Add Auth0 env vars to .env
Run database migration: bun drizzle-kit generate --name="rename_clerk_to_auth0"
Test Google OAuth login flow
Verify session persists across refreshes
Test sign out functionality
Verify admin app restricts to company email domain

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

New Features
- Migrated authentication system to Auth0, providing improved identity and access management capabilities.
Chores
- Updated environment configuration for Auth0 setup; removed Clerk-related variables.
- Refreshed login and sign-up flows to utilize Auth0's OAuth integration.
- Updated user database schema to support Auth0 user identification.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

- Create @superset/auth0 package with server/client exports - Update all apps (web, api, admin, marketing) to use Auth0 - Replace ClerkProvider with Auth0Provider in layouts - Update middleware to use auth0.middleware() - Replace Clerk env vars with Auth0 env vars in turbo.jsonc - Update GitHub workflows with Auth0 secrets - Rename users.clerkId to users.auth0Id in schema - Remove Clerk webhook handler - Remove sso-callback pages (Auth0 handles callbacks internally) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

coderabbitai · 2025-12-13T03:56:57Z

Walkthrough

This pull request performs a comprehensive migration of the codebase's authentication system from Clerk to Auth0. The changes span all applications (admin, api, marketing, web), introduce a new @superset/auth0 workspace package, update middleware implementations, modify package dependencies, replace environment variables, update the database schema to use auth0Id instead of clerkId, and adjust TRPC routers to work with Auth0 session data.

Changes

Cohort / File(s)	Change Summary
Environment & Configuration `.env.example`, `turbo.jsonc`	Replaced Clerk environment variables (CLERK_SECRET_KEY, CLERK_WEBHOOK_SECRET, NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY, etc.) with Auth0 equivalents (AUTH0_SECRET, AUTH0_BASE_URL, AUTH0_ISSUER_BASE_URL, AUTH0_CLIENT_ID, AUTH0_CLIENT_SECRET). Removed NEXT_PUBLIC_COOKIE_DOMAIN.
CI/CD Workflows `.github/workflows/deploy-preview.yml`, `.github/workflows/deploy-production.yml`	Updated environment variables passed to deployment steps across all app contexts (API, Web, Marketing, Admin, Docs), replacing Clerk secrets with Auth0 credentials.
Admin App Package `apps/admin/package.json`	Replaced `@clerk/nextjs` with `@superset/auth0` (workspace:*).
Admin App Auth Configuration `apps/admin/src/env.ts`, `apps/admin/src/app/layout.tsx`, `apps/admin/src/proxy.ts`	Updated environment schema to use Auth0 variables. Replaced ClerkProvider with Auth0Provider. Migrated middleware from Clerk to Auth0-based authentication with session handling.
Admin App UI Components `apps/admin/src/app/(dashboard)/components/AppSidebar/components/NavUser/NavUser.tsx`, `apps/admin/src/app/(dashboard)/users/deleted/components/DeletedUsersTable/DeletedUsersTable.tsx`	Removed Clerk sign-out integration; replaced with link to `/api/auth/logout`. Updated text references from "Clerk account" to "Auth0 account".
API App Package `apps/api/package.json`	Removed `@clerk/backend` and `@clerk/nextjs`; added `@superset/auth0` (workspace:*).
API App Auth Configuration `apps/api/src/env.ts`, `apps/api/src/proxy.ts`, `apps/api/src/trpc/context.ts`	Removed Clerk environment variables. Migrated middleware to Auth0. Updated TRPC context to use `getSession()` from Auth0 instead of Clerk.
API Webhooks `apps/api/src/app/api/webhooks/clerk/route.ts`	Removed entire Clerk webhook handler including user creation, update, and deletion logic, and avatar upload functionality.
Marketing App Package `apps/marketing/package.json`	Replaced `@clerk/nextjs` with `@superset/auth0` (workspace:*).
Marketing App Auth Configuration `apps/marketing/src/env.ts`, `apps/marketing/src/app/layout.tsx`, `apps/marketing/src/app/components/CTAButtons/CTAButtons.tsx`, `apps/marketing/src/proxy.ts`	Updated environment schema, replaced ClerkProvider with Auth0Provider, migrated middleware, and updated session checks in CTAButtons component.
Web App Package `apps/web/package.json`	Replaced `@clerk/nextjs` (^6.36.2) with `@superset/auth0` (workspace:*).
Web App Auth Configuration `apps/web/src/env.ts`, `apps/web/src/app/layout.tsx`, `apps/web/src/proxy.ts`	Updated environment schema, replaced ClerkProvider with Auth0Provider. Migrated middleware with new public path logic and Auth0 session validation.
Web App Auth Pages `apps/web/src/app/(auth)/sign-in/[[...sign-in]]/page.tsx`, `apps/web/src/app/(auth)/sign-up/[[...sign-up]]/page.tsx`	Removed Clerk-based client-side authentication flows; replaced with direct OAuth links to `/api/auth/login` with appropriate connection and screen_hint parameters.
Web App SSO Callback `apps/web/src/app/(auth)/sso-callback/layout.tsx`, `apps/web/src/app/(auth)/sso-callback/page.tsx`	Removed SSO callback layout and page components (no longer needed with Auth0).
Web App UI Components `apps/web/src/app/page.tsx`, `apps/web/src/app/download/page.tsx`	Updated user data access to use Auth0 session properties (user.name, user.email, user.picture instead of Clerk equivalents). Replaced SignOutButton with logout links to `/api/auth/logout`.
New Auth0 Package `packages/auth0/package.json`, `packages/auth0/src/client.ts`, `packages/auth0/src/server.ts`, `packages/auth0/src/types.ts`, `packages/auth0/tsconfig.json`	Introduced new `@superset/auth0` workspace package with server-side session handling, client-side provider exports, and type definitions for Auth0 integration. Provides `auth0` client instance, `getSession()` function, and session type guards.
Database Schema `packages/db/src/schema/schema.ts`	Renamed `clerkId` column to `auth0Id` and updated corresponding index from `users_clerk_id_idx` to `users_auth0_id_idx`.
TRPC Package `packages/trpc/package.json`	Replaced `@clerk/backend` with `@superset/auth0` (workspace:*).
TRPC Core & Routers `packages/trpc/src/trpc.ts`, `packages/trpc/src/router/admin.ts`, `packages/trpc/src/router/organization.ts`, `packages/trpc/src/router/task.ts`, `packages/trpc/src/router/user.ts`	Updated context type from `SessionAuthObject` to `AppSession`. Replaced Clerk session/userId checks with Auth0-based `isSignedIn()` and `session.user.sub`. Updated database queries to match on `auth0Id` instead of `clerkId`. Updated admin flow to extract `auth0Id` from session. Updated TODO/error messages.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Areas requiring extra attention during review:

Middleware implementations (apps/admin/src/proxy.ts, apps/api/src/proxy.ts, apps/web/src/proxy.ts): Verify Auth0 session retrieval, public path handling, and redirect logic are correct.
TRPC type changes and session narrowing (packages/trpc/src/trpc.ts): Ensure type guards and casts properly narrow AppSession to SignedInSession and that database queries consistently use the new auth0Id field.
New Auth0 package exports (packages/auth0/src/*): Verify that server, client, and type exports are properly structured and align with usage across applications.
Database field migration (packages/db/src/schema/schema.ts): Confirm that all TRPC routers and queries reference the renamed auth0Id field correctly.
Sign-in/sign-up OAuth redirects (apps/web/src/app/(auth)/sign-{in,up}/): Verify OAuth connection strings and screen_hint parameters are correct for Auth0.

Possibly related PRs

fix: pass runtime env vars to Vercel deploy #350 — Modifies .github/workflows/deploy-preview.yml to update runtime environment variables in deployment steps; this PR replaces those Clerk variables with Auth0 equivalents in the same files.
feat(admin): add admin dashboard with auth spoofed #335 — Modifies apps/admin/src/proxy.ts and related admin authentication stack; this PR refactors the same middleware to use Auth0 instead of Clerk.
ci: add CI/CD workflows and environment setup #330 — Updates CI/CD workflows and environment variable usages that are superseded by this PR's Auth0 migration across the same configuration files.

Poem

🐰 Hop, hop! Clerk's now gone,
Auth0 takes the crown at dawn,
Middleware flows through session's art,
Sub and secrets, fresh new start!
No more webhook whispers soft—
Just clean Auth0, shiny aloft! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 15.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.
Description check	❓ Inconclusive	The PR description includes a summary, detailed changes, and a test plan checklist. However, it doesn't follow the provided template structure with explicit sections like 'Description', 'Related Issues', 'Type of Change', 'Testing', etc.	Consider restructuring the description to follow the repository template more closely, with explicit sections for Related Issues and Type of Change (appears to be a Refactor and New feature).

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: migrating from Clerk to Auth0 authentication, which is the primary objective of this extensive changeset across multiple files and packages.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch ruling-turtle-84ebc8

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 7

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/trpc/src/router/organization.ts (1)
60-77: Add error handling for missing user lookup.

The type safety concern is resolved—ctx.session.user.sub is properly typed as a non-nullable string because protectedProcedure guarantees a SignedInSession context.

However, the silent failure issue is valid. Other procedures in the codebase (e.g., taskRouter.create, adminProcedure) explicitly throw an error when the user lookup fails. Currently, the organization creation proceeds without a corresponding member relationship if the user is not found, leaving an orphaned organization.

Add the missing error check to align with existing patterns:
 const user = await db.query.users.findFirst({
 	where: eq(users.auth0Id, ctx.session.user.sub),
 });
+if (!user) {
+	throw new TRPCError({
+		code: "INTERNAL_SERVER_ERROR",
+		message: "User not found in database.",
+	});
+}

🧹 Nitpick comments (8)

apps/api/src/env.ts (1)

8-9: Consider adding runtime validation for Auth0 environment variables.

While the @auth0/nextjs-auth0 SDK reads these variables directly, unvalidated env vars mean misconfigurations won't be caught at startup. The SDK will fail at runtime when authentication is first attempted.

The current approach is acceptable since Auth0 provides its own error messaging, but for consistency with other validated variables (like DATABASE_URL), you could optionally add these as validated server keys with a comment noting they're also read by the SDK.
apps/web/src/app/(auth)/sign-up/[[...sign-up]]/page.tsx (1)
21-32: Consider using Next.js Link for internal navigation.

The /api/auth/login route is an internal API route. While the <a> tag works, using Next.js Link would be more idiomatic and provide prefetching benefits where applicable.

Additionally, nesting a <Button> inside an <a> can cause accessibility concerns with nested interactive elements. Consider using asChild pattern if the Button component supports it, or apply button styling directly to the Link.
-			<a href="/api/auth/login?connection=google-oauth2&screen_hint=signup">
-				<Button variant="outline" className="w-full">
+			<Link href="/api/auth/login?connection=google-oauth2&screen_hint=signup">
+				<Button variant="outline" className="w-full" asChild>
					<Image
						src="/assets/social/google.svg"
						alt="Google"
						width={16}
						height={16}
						className="mr-2"
					/>
					Sign up with Google
				</Button>
-			</a>
+			</Link>
Note: If the Button doesn't support asChild, verify the Link behavior is correct for this Auth0 route, as API routes may require a full page navigation rather than client-side routing.
apps/web/src/app/(auth)/sign-in/[[...sign-in]]/page.tsx (1)
19-30: Consider using asChild prop for cleaner markup.

The Button component likely supports the asChild prop (used elsewhere in this codebase). This would produce cleaner HTML without nested interactive elements.
-			<a href="/api/auth/login?connection=google-oauth2">
-				<Button variant="outline" className="w-full">
-					<Image
-						src="/assets/social/google.svg"
-						alt="Google"
-						width={16}
-						height={16}
-						className="mr-2"
-					/>
-					Sign in with Google
-				</Button>
-			</a>
+			<Button variant="outline" className="w-full" asChild>
+				<a href="/api/auth/login?connection=google-oauth2">
+					<Image
+						src="/assets/social/google.svg"
+						alt="Google"
+						width={16}
+						height={16}
+						className="mr-2"
+					/>
+					Sign in with Google
+				</a>
+			</Button>
apps/web/src/app/page.tsx (1)
67-72: Consider using asChild for the logout link.

Similar to the sign-in page, wrapping DropdownMenuItem around an anchor creates nested interactive elements. Using asChild would be cleaner.
-			<a href="/api/auth/logout">
-				<DropdownMenuItem className="cursor-pointer">
-					<LogOut className="mr-2 size-4" />
-					Sign out
-				</DropdownMenuItem>
-			</a>
+			<DropdownMenuItem className="cursor-pointer" asChild>
+				<a href="/api/auth/logout">
+					<LogOut className="mr-2 size-4" />
+					Sign out
+				</a>
+			</DropdownMenuItem>
apps/web/src/env.ts (1)
16-17: Consider validating Auth0 environment variables for consistency.

While @auth0/nextjs-auth0 reads these variables directly, other apps in this PR (admin, marketing) explicitly validate Auth0 variables in their env schemas. Skipping validation here means missing/malformed Auth0 vars will only fail at runtime rather than at startup.

For consistency and earlier error detection, consider adding the Auth0 vars to the server schema:
 server: {
   DATABASE_URL: z.string().url(),
   DATABASE_URL_UNPOOLED: z.string().url(),
-  // Auth0 env vars are read directly by @auth0/nextjs-auth0:
-  // AUTH0_SECRET, AUTH0_BASE_URL, AUTH0_ISSUER_BASE_URL, AUTH0_CLIENT_ID, AUTH0_CLIENT_SECRET
+  AUTH0_SECRET: z.string().min(1),
+  AUTH0_BASE_URL: z.string().url(),
+  AUTH0_ISSUER_BASE_URL: z.string().url(),
+  AUTH0_CLIENT_ID: z.string().min(1),
+  AUTH0_CLIENT_SECRET: z.string().min(1),
 },
packages/trpc/src/router/admin.ts (1)

43-52: LGTM!

The TODO and error message correctly reflect the Auth0 migration. The NOT_IMPLEMENTED placeholder is appropriate for now—full implementation will require integrating with the Auth0 Management API to delete users from Auth0's identity store.

Would you like me to help draft the Auth0 user deletion implementation using the Management API, or open an issue to track this work?
apps/admin/src/env.ts (1)
16-19: Auth0 environment configuration looks correct.

The required Auth0 environment variables are properly defined. Consider adding a minimum length constraint for AUTH0_SECRET (Auth0 recommends at least 32 characters for session encryption security):
-		AUTH0_SECRET: z.string(),
+		AUTH0_SECRET: z.string().min(32),
apps/admin/src/proxy.ts (1)
33-47: Verify redirect responses preserve Auth0 cookies.

The authorization logic is correct. However, when redirecting unauthenticated/unauthorized users, any cookies set by auth0.middleware() (e.g., session refresh) may be lost. Consider preserving cookies from authResponse:
 	if (!session?.user) {
-		return NextResponse.redirect(new URL(env.NEXT_PUBLIC_WEB_URL));
+		const redirect = NextResponse.redirect(new URL(env.NEXT_PUBLIC_WEB_URL));
+		// Preserve any cookies set by Auth0 middleware
+		authResponse.cookies.getAll().forEach((cookie) => {
+			redirect.cookies.set(cookie.name, cookie.value);
+		});
+		return redirect;
 	}
The same pattern would apply to the domain check redirect on line 46.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 546d0ed and df8df7f.

⛔ Files ignored due to path filters (1)

bun.lock is excluded by !**/*.lock

📒 Files selected for processing (42)

.env.example (1 hunks)
.github/workflows/deploy-preview.yml (4 hunks)
.github/workflows/deploy-production.yml (4 hunks)
apps/admin/package.json (1 hunks)
apps/admin/src/app/(dashboard)/components/AppSidebar/components/NavUser/NavUser.tsx (1 hunks)
apps/admin/src/app/(dashboard)/users/deleted/components/DeletedUsersTable/DeletedUsersTable.tsx (1 hunks)
apps/admin/src/app/layout.tsx (3 hunks)
apps/admin/src/env.ts (1 hunks)
apps/admin/src/proxy.ts (1 hunks)
apps/api/package.json (1 hunks)
apps/api/src/app/api/webhooks/clerk/route.ts (0 hunks)
apps/api/src/env.ts (1 hunks)
apps/api/src/proxy.ts (3 hunks)
apps/api/src/trpc/context.ts (1 hunks)
apps/marketing/package.json (1 hunks)
apps/marketing/src/app/components/CTAButtons/CTAButtons.tsx (1 hunks)
apps/marketing/src/app/layout.tsx (3 hunks)
apps/marketing/src/env.ts (1 hunks)
apps/marketing/src/proxy.ts (1 hunks)
apps/web/package.json (1 hunks)
apps/web/src/app/(auth)/sign-in/[[...sign-in]]/page.tsx (1 hunks)
apps/web/src/app/(auth)/sign-up/[[...sign-up]]/page.tsx (1 hunks)
apps/web/src/app/(auth)/sso-callback/layout.tsx (0 hunks)
apps/web/src/app/(auth)/sso-callback/page.tsx (0 hunks)
apps/web/src/app/download/page.tsx (1 hunks)
apps/web/src/app/layout.tsx (2 hunks)
apps/web/src/app/page.tsx (3 hunks)
apps/web/src/env.ts (1 hunks)
apps/web/src/proxy.ts (1 hunks)
packages/auth0/package.json (1 hunks)
packages/auth0/src/client.ts (1 hunks)
packages/auth0/src/server.ts (1 hunks)
packages/auth0/src/types.ts (1 hunks)
packages/auth0/tsconfig.json (1 hunks)
packages/db/src/schema/schema.ts (2 hunks)
packages/trpc/package.json (1 hunks)
packages/trpc/src/router/admin.ts (1 hunks)
packages/trpc/src/router/organization.ts (1 hunks)
packages/trpc/src/router/task.ts (1 hunks)
packages/trpc/src/router/user.ts (1 hunks)
packages/trpc/src/trpc.ts (4 hunks)
turbo.jsonc (1 hunks)

💤 Files with no reviewable changes (3)

apps/web/src/app/(auth)/sso-callback/layout.tsx
apps/api/src/app/api/webhooks/clerk/route.ts
apps/web/src/app/(auth)/sso-callback/page.tsx

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{ts,tsx,js,jsx,json}