Cut over: the CMS is the identity provider; Auth0 is gone

The atomic step. The frontend authenticates against the CMS (/api/token/,
NextAuth credentials with silent refresh) instead of Auth0, the backend's
AUTH_* env now points at the CMS's JWKS, and every Auth0 identifier and
secret leaves infra. Splitting these apart would open a window where
nobody can log in, so they land together — one 'pulumi up' on the single
stack flips both sides.

Also removes what the CMS replaced: the legacy backend cms module (its
tags/places content endpoints and models), keeping only the
under-construction site_settings pair the frontend proxy still reads, and
the last legacy-model references in alembic's env.py.

ROLLBACK: revert jwtAudience/cmsDomain to their Auth0 values and pin the
previous frontend image with the frontendImageTag config override, then
'pulumi up'.

BEFORE MERGING — none of this is covered by CI, which runs no frontend
tests at all: log in and out, cross the access-token expiry to prove
silent refresh, race two tabs, confirm a cross-site GET to /auth/logout
does not sign you out, and confirm ?returnTo=//evil.com falls back to /.
Provision users in the CMS first ('manage.py provision_users'), and run
migrate_tiptap with its --owners mapping before or during this deploy.

Author: nofurtherinformation

.github/workflows/deploy-app.yml

@@ -42,10 +42,12 @@ jobs:
           if [ "${{ github.ref_name }}" = "dev" ]; then
             echo "stack=dev" >> "$GITHUB_OUTPUT"
             echo "api_url=${{ vars.API_URL_DEV }}" >> "$GITHUB_OUTPUT"
+            echo "cms_url=${{ vars.CMS_URL_DEV }}" >> "$GITHUB_OUTPUT"
             echo "environment=development" >> "$GITHUB_OUTPUT"
           else
             echo "stack=prod" >> "$GITHUB_OUTPUT"
             echo "api_url=${{ vars.API_URL_PROD }}" >> "$GITHUB_OUTPUT"
+            echo "cms_url=${{ vars.CMS_URL_PROD }}" >> "$GITHUB_OUTPUT"
             echo "environment=production" >> "$GITHUB_OUTPUT"
           fi
       # NEXT_PUBLIC_* values are baked into the bundle at build time; this
@@ -63,6 +65,7 @@ jobs:
           NEXT_PUBLIC_S3_BUCKET_URL_MIRROR1=https://tilesets2.cdn.districtr.org
           NEXT_PUBLIC_S3_BUCKET_URL_MIRROR2=https://tilesets3.cdn.districtr.org
           NEXT_PUBLIC_API_URL=${{ steps.cfg.outputs.api_url }}
+          NEXT_PUBLIC_CMS_URL=${{ steps.cfg.outputs.cms_url }}
           NEXT_PUBLIC_ENVIRONMENT=${{ steps.cfg.outputs.environment }}
           NEXT_PUBLIC_BUILD_TAG=${{ github.sha }}
           EOF

.github/workflows/preview.yml

@@ -47,6 +47,9 @@ env:
   AWS_REGION: ${{ vars.AWS_REGION || 'us-east-2' }}
   CLUSTER: districtr-dev
   DEV_API_URL: https://api.dev.districtr.org
+  # Previews share the dev CMS (a preview does not get its own CMS service),
+  # so editor login and content fetches resolve there.
+  DEV_CMS_URL: https://cms.dev.districtr.org
 
 jobs:
   preview:
@@ -341,6 +344,7 @@ jobs:
           FE_HOST: ${{ steps.setup.outputs.fe_host }}
           FE_URL: ${{ steps.setup.outputs.fe_url }}
           API_URL: ${{ steps.setup.outputs.api_url }}
+          CMS_URL: ${{ env.DEV_CMS_URL }}
           FE_TG: ${{ steps.setup.outputs.fe_tg }}
           FE_SERVICE: ${{ steps.setup.outputs.fe_service }}
           FE_PRIORITY: ${{ steps.setup.outputs.fe_priority }}
@@ -370,6 +374,7 @@ jobs:
           NEXT_PUBLIC_S3_BUCKET_URL_MIRROR1=https://tilesets2.cdn.districtr.org
           NEXT_PUBLIC_S3_BUCKET_URL_MIRROR2=https://tilesets3.cdn.districtr.org
           NEXT_PUBLIC_API_URL=${API_URL}
+          NEXT_PUBLIC_CMS_URL=${CMS_URL}
           NEXT_PUBLIC_BUILD_TAG=${GITHUB_SHA}
           EOF
             docker build --secret id=SENTRY_AUTH_TOKEN,env=SENTRY_AUTH_TOKEN -t "$IMAGE" app

app/.env.docker.example

@@ -5,15 +5,10 @@ NEXT_PUBLIC_S3_BUCKET_URL_MIRROR1=https://fill-me.s3.amazonaws.com
 NEXT_PUBLIC_S3_BUCKET_URL_MIRROR2=https://fill-me.s3.amazonaws.com
 NEXT_SERVER_API_URL=http://backend:8000
 
-#Auth0
-AUTH0_CLIENT_ID='fill-me'
-AUTH0_CLIENT_SECRET='fill-me'
-AUTH0_DOMAIN=fill-me.us.auth0.com # just the domain, without https://
-AUTH0_ISSUER=https://fill-me.us.auth0.com/ # full url with https://
-AUTH0_AUDIENCE=http://localhost:8000/
-APP_BASE_URL=http://localhost:3000
-AUTH0_ALGORITHMS=RS256
-AUTH0_SECRET="fill-me" # Added by `npx auth`. Read more: https://cli.authjs.dev
+# Auth (Auth.js credentials flow against the Django CMS)
+CMS_URL=http://cms:8000 # server-side CMS token endpoint URL (from the frontend container)
+NEXT_PUBLIC_CMS_URL=http://localhost:8001 # browser-facing CMS URL
+AUTH_SECRET="fill-me" # Generate with: openssl rand -base64 32
 
 # Feedback form
 NEXT_PUBLIC_FEEDBACK_FORM="fill-me-optionally"

app/.env.production

@@ -2,10 +2,7 @@ NEXT_PUBLIC_API_URL=https://districtr-v2-api.fly.dev
 NEXT_PUBLIC_ENVIRONMENT=production
 NEXT_PUBLIC_S3_BUCKET_URL=https://tilesets1.cdn.districtr.org
 
-AUTH0_CLIENT_ID=foo
-AUTH0_CLIENT_SECRET=bar
-AUTH0_DOMAIN=https://dev-1234567.us.auth0.com/
-AUTH0_ORGANIZATION=org_123456
-AUTH0_AUDIENCE=server-url
-AUTH0_SECRET=wwwwwwww
-APP_BASE_URL=http://localhost:3000
+# Auth (CMS issuer) — real values come from Fly secrets at runtime
+CMS_URL=https://districtr-v2-cms.fly.dev
+NEXT_PUBLIC_CMS_URL=https://districtr-v2-cms.fly.dev
+AUTH_SECRET=fill-me

app/src/app/auth/[...nextauth]/route.ts

@@ -0,0 +1,3 @@
+import {handlers} from '@/auth';
+
+export const {GET, POST} = handlers;

app/src/app/auth/login/actions.ts

@@ -0,0 +1,24 @@
+'use server';
+
+import {AuthError} from 'next-auth';
+import {redirect} from 'next/navigation';
+import {signIn} from '@/auth';
+import {sanitizeReturnTo} from '@/app/utils/sanitizeReturnTo';
+
+export async function loginAction(formData: FormData): Promise<void> {
+  const returnTo = sanitizeReturnTo(formData.get('returnTo'));
+  try {
+    await signIn('credentials', {
+      email: formData.get('email'),
+      password: formData.get('password'),
+      redirectTo: returnTo,
+    });
+  } catch (error) {
+    if (error instanceof AuthError) {
+      // Bad credentials — bounce back to the login page with an error flag
+      redirect(`/auth/login?error=CredentialsSignin&returnTo=${encodeURIComponent(returnTo)}`);
+    }
+    // Success: signIn throws a NEXT_REDIRECT to returnTo — let it propagate
+    throw error;
+  }
+}

app/src/app/auth/login/page.tsx

@@ -0,0 +1,75 @@
+import type {Metadata} from 'next';
+import {redirect} from 'next/navigation';
+import {Box, Button, Card, Flex, Heading, Text, TextField} from '@radix-ui/themes';
+import {getServerSession} from '@/app/lib/auth';
+import {sanitizeReturnTo} from '@/app/utils/sanitizeReturnTo';
+import {loginAction} from './actions';
+
+export const metadata: Metadata = {
+  title: 'Sign in - Districtr',
+  description: 'Sign in to Districtr',
+};
+
+export default async function LoginPage({
+  searchParams,
+}: {
+  searchParams: Promise<{returnTo?: string; error?: string}>;
+}) {
+  const params = await searchParams;
+  const returnTo = sanitizeReturnTo(params.returnTo);
+
+  // Already signed in — go straight to the destination
+  const session = await getServerSession();
+  if (session?.user) {
+    redirect(returnTo);
+  }
+
+  return (
+    <Flex align="center" justify="center" className="min-h-screen bg-gray-100">
+      <Card size="3" className="w-full max-w-md">
+        <Flex direction="column" gap="4" p="4">
+          <Heading size="5">Sign in to Districtr</Heading>
+          {params.error && (
+            <Text size="2" color="red">
+              Invalid email or password. Please try again.
+            </Text>
+          )}
+          <form action={loginAction}>
+            <Flex direction="column" gap="3">
+              <input type="hidden" name="returnTo" value={returnTo} />
+              <Box>
+                <Text as="label" size="2" weight="medium" htmlFor="email">
+                  Email
+                </Text>
+                <TextField.Root
+                  id="email"
+                  name="email"
+                  type="email"
+                  placeholder="you@example.com"
+                  autoComplete="username"
+                  required
+                />
+              </Box>
+              <Box>
+                <Text as="label" size="2" weight="medium" htmlFor="password">
+                  Password
+                </Text>
+                <TextField.Root
+                  id="password"
+                  name="password"
+                  type="password"
+                  placeholder="Password"
+                  autoComplete="current-password"
+                  required
+                />
+              </Box>
+              <Button type="submit" size="3">
+                Sign in
+              </Button>
+            </Flex>
+          </form>
+        </Flex>
+      </Card>
+    </Flex>
+  );
+}

app/src/app/auth/logout/route.ts

@@ -0,0 +1,22 @@
+import {signOut} from '@/auth';
+import {NextResponse} from 'next/server';
+
+/**
+ * Preserves the pre-Auth.js URL contract: the app signs users out by
+ * navigating to GET /auth/logout.
+ *
+ * CSRF guard: a GET logout can be triggered cross-site — a top-level <a> click
+ * or scripted redirect on a malicious page would log the user out against their
+ * will. SameSite=Lax already blocks subresource drive-bys (e.g. <img>), but NOT
+ * a cross-site top-level navigation. We use the Fetch Metadata `Sec-Fetch-Site`
+ * request header to allow only first-party requests (same-origin / same-site)
+ * and direct user navigation (typed URL or bookmark report "none"); an explicit
+ * "cross-site" request bounces home WITHOUT signing out. Browsers too old to
+ * send the header fall through to the prior behavior.
+ */
+export async function GET(request: Request) {
+  if (request.headers.get('sec-fetch-site') === 'cross-site') {
+    return NextResponse.redirect(new URL('/', request.url));
+  }
+  await signOut({redirectTo: '/'});
+}

app/src/app/auth/token/route.ts

@@ -0,0 +1,17 @@
+import {getServerSession} from '@/app/lib/auth';
+
+/**
+ * Returns the current client session (fresh access token included) for client
+ * polling. getServerSession -> auth() runs the NextAuth jwt callback, which
+ * silently refreshes an expiring access token — and unlike server components,
+ * route handlers CAN write cookies, so the rotated refresh token is persisted
+ * back to the session cookie here.
+ *
+ * Responds with JSON `null` when unauthenticated or the refresh failed.
+ */
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  const session = await getServerSession();
+  return Response.json(session, {headers: {'Cache-Control': 'no-store'}});
+}

app/src/app/lib/auth.ts

@@ -0,0 +1,37 @@
+import {auth} from '@/auth';
+
+export type SessionUser = {
+  email?: string | null;
+  name?: string | null;
+  roles?: string[];
+};
+
+/**
+ * Serializable session shape passed from server components to the client.
+ * Mirrors the shape previously provided by @auth0/nextjs-auth0.
+ */
+export type ClientSession = {
+  user?: SessionUser;
+  tokenSet?: {
+    accessToken: string;
+  };
+};
+
+/**
+ * Server-side session helper. Returns null when unauthenticated or when the
+ * silent token refresh has failed (forcing a re-login).
+ */
+export const getServerSession = async (): Promise<ClientSession | null> => {
+  const session = await auth();
+  if (!session?.user || session.error === 'RefreshTokenError') {
+    return null;
+  }
+  return {
+    user: {
+      email: session.user.email,
+      name: session.user.name,
+      roles: session.user.roles ?? [],
+    },
+    tokenSet: session.accessToken ? {accessToken: session.accessToken} : undefined,
+  };
+};