Remix seamless auth (#5111)

* don't proxy authenticate

* maybeGetUserFromSession, update tests

* authenticate enriched proxy

* redirect to projects if logged in

* fix url

* no cache

Author: ruggi

utopia-remix/app/handlers/listProjects.spec.ts

@@ -36,7 +36,7 @@ describe('handleListProjects', () => {
     const fn = async () => handleListProjects(req)
 
     await expect(fn).rejects.toThrow(ApiError)
-    await expect(fn).rejects.toThrow('session not found')
+    await expect(fn).rejects.toThrow('unauthorized')
   })
 
   describe('with an authorized user', () => {

utopia-remix/app/models/session.server.spec.ts

@@ -0,0 +1,33 @@
+import { prisma } from '../db.server'
+import { createTestSession, createTestUser, truncateTables } from '../test-util'
+import { maybeGetUserFromSession } from './session.server'
+
+describe('session', () => {
+  afterEach(async () => {
+    await truncateTables([prisma.persistentSession, prisma.userDetails])
+  })
+  describe('maybeGetUserFromSession', () => {
+    beforeEach(async () => {
+      await createTestUser(prisma, { id: 'bob' })
+      await createTestUser(prisma, { id: 'alice' })
+      await createTestSession(prisma, { userId: 'bob', key: 'bob-key' })
+    })
+    it('returns null if the session is not found', async () => {
+      const got = await maybeGetUserFromSession({ key: '' })
+      expect(got).toBe(null)
+    })
+    it('returns null if the session data is invalid', async () => {
+      const got = await maybeGetUserFromSession({ key: '{{WRONG}}' })
+      expect(got).toBe(null)
+    })
+    it('returns null if the user is not found', async () => {
+      const got = await maybeGetUserFromSession({ key: 'unknown' })
+      expect(got).toBe(null)
+    })
+    it('returns the user details if found', async () => {
+      const got = await maybeGetUserFromSession({ key: 'bob-key' })
+      expect(got).not.toBe(null)
+      expect(got?.user_id).toBe('bob')
+    })
+  })
+})

utopia-remix/app/models/session.server.ts

@@ -1,7 +1,5 @@
 import type { PersistentSession, UserDetails } from 'prisma-client'
 import { prisma } from '../db.server'
-import { ensure } from '../util/api.server'
-import { Status } from '../util/statusCodes'
 
 export async function getSession(params: { key: string }): Promise<PersistentSession | null> {
   return await prisma.persistentSession.findFirst({
@@ -17,10 +15,13 @@ function isSessionJSONData(v: unknown): v is SessionJSONData {
   return typeof v === 'object' && (v as SessionJSONData).userID != null
 }
 
-export async function getUserFromSession(params: { key: string }): Promise<UserDetails | null> {
+export async function maybeGetUserFromSession(params: {
+  key: string
+}): Promise<UserDetails | null> {
   const session = await getSession({ key: params.key })
-  ensure(session != null, 'session not found', Status.UNAUTHORIZED)
-  ensure(isSessionJSONData(session.session_json), 'invalid session', Status.UNAUTHORIZED)
+  if (session == null || !isSessionJSONData(session.session_json)) {
+    return null
+  }
 
   return prisma.userDetails.findFirst({
     where: { user_id: session.session_json.userID },

utopia-remix/app/routes-test/internal.projects.$id.access.spec.ts

@@ -111,8 +111,8 @@ describe('handleChangeAccess', () => {
     })
     const error = await getActionResult('two', AccessLevel.PRIVATE, 'no-cookie')
     expect(error).toEqual({
-      message: 'session not found',
-      status: Status.UNAUTHORIZED,
+      message: 'Project not found',
+      status: Status.NOT_FOUND,
       error: 'Error',
     })
   })

utopia-remix/app/routes-test/internal.projects.$id.delete.spec.ts

@@ -31,7 +31,7 @@ describe('handleDeleteProject', () => {
     const fn = async () =>
       handleDeleteProject(newTestRequest({ method: 'POST', authCookie: 'wrong-key' }), {})
     await expect(fn).rejects.toThrow(ApiError)
-    await expect(fn).rejects.toThrow('session not found')
+    await expect(fn).rejects.toThrow('unauthorized')
   })
   it('requires a valid id', async () => {
     const fn = async () =>

utopia-remix/app/routes-test/internal.projects.$id.destroy.spec.ts

@@ -46,7 +46,7 @@ describe('handleDestroyProject', () => {
     const fn = async () =>
       handleDestroyProject(newTestRequest({ method: 'POST', authCookie: 'wrong-key' }), {})
     await expect(fn).rejects.toThrow(ApiError)
-    await expect(fn).rejects.toThrow('session not found')
+    await expect(fn).rejects.toThrow('unauthorized')
   })
   it('requires a valid id', async () => {
     const fn = async () =>

utopia-remix/app/routes-test/internal.projects.$id.github.repository.update.spec.tsx

@@ -31,7 +31,7 @@ describe('handleUpdateGithubRepository', () => {
     const fn = async () =>
       handleUpdateGithubRepository(newTestRequest({ method: 'POST', authCookie: 'wrong-key' }), {})
     await expect(fn).rejects.toThrow(ApiError)
-    await expect(fn).rejects.toThrow('session not found')
+    await expect(fn).rejects.toThrow('unauthorized')
   })
   it('requires a valid id', async () => {
     const fn = async () =>

utopia-remix/app/routes-test/internal.projects.$id.rename.spec.ts

@@ -32,7 +32,7 @@ describe('handleRenameProject', () => {
     const fn = async () =>
       handleRenameProject(newTestRequest({ method: 'POST', authCookie: 'wrong-key' }), {})
     await expect(fn).rejects.toThrow(ApiError)
-    await expect(fn).rejects.toThrow('session not found')
+    await expect(fn).rejects.toThrow('unauthorized')
   })
   it('requires a valid id', async () => {
     const fn = async () =>

utopia-remix/app/routes-test/internal.projects.$id.restore.spec.ts

@@ -36,7 +36,7 @@ describe('handleRestoreDeletedProject', () => {
     const fn = async () =>
       handleRestoreDeletedProject(newTestRequest({ method: 'POST', authCookie: 'wrong-key' }), {})
     await expect(fn).rejects.toThrow(ApiError)
-    await expect(fn).rejects.toThrow('session not found')
+    await expect(fn).rejects.toThrow('unauthorized')
   })
   it('requires a valid id', async () => {
     const fn = async () =>

utopia-remix/app/routes-test/internal.projects.deleted.spec.ts

@@ -49,7 +49,7 @@ describe('handleDeleteProject', () => {
     const fn = async () =>
       handleListDeletedProjects(newTestRequest({ method: 'POST', authCookie: 'wrong-key' }), {})
     await expect(fn).rejects.toThrow(ApiError)
-    await expect(fn).rejects.toThrow('session not found')
+    await expect(fn).rejects.toThrow('unauthorized')
   })
   it('returns deleted projects', async () => {
     const fn = async () => {

utopia-remix/app/routes-test/internal.projects.destroy.spec.ts

@@ -37,7 +37,7 @@ describe('handleDestroyAllProjects', () => {
     const fn = async () =>
       handleDestroyAllProjects(newTestRequest({ method: 'POST', authCookie: 'wrong-key' }), {})
     await expect(fn).rejects.toThrow(ApiError)
-    await expect(fn).rejects.toThrow('session not found')
+    await expect(fn).rejects.toThrow('unauthorized')
   })
   it('hard-deletes all soft-deleted projects owned by the user', async () => {
     const fn = async () => {

utopia-remix/app/routes/_index.tsx

@@ -1,4 +1,5 @@
-import { type LinksFunction, type MetaFunction } from '@remix-run/node'
+import type { LoaderFunctionArgs } from '@remix-run/node'
+import { redirect, type LinksFunction, type MetaFunction } from '@remix-run/node'
 import {
   ContactUs,
   CookieConsentBar,
@@ -13,6 +14,7 @@ import stylesheet from '~/styles/next-tailwind.css'
 import urlJoin from 'url-join'
 import type { rootLoader } from '../root'
 import React from 'react'
+import { getUser } from '../util/api.server'
 
 export const links: LinksFunction = () => [
   // css
@@ -56,7 +58,7 @@ export const meta: MetaFunction<typeof rootLoader> = ({ data }) => {
     { name: 'msapplication-TileColor', content: '#da532c' },
     { name: 'theme-color', content: '#ffffff' },
     { property: 'og:title', content: 'Utopia: Design and Code on one platform' },
-    { property: 'og:image', content: urlJoin(data?.env.UTOPIA_CDN_URL ?? '', '/og-card.png') },
+    { property: 'og:image', content: urlJoin(data?.env?.UTOPIA_CDN_URL ?? '', '/og-card.png') },
     { property: 'og:type', content: 'website' },
     {
       property: 'og:description',
@@ -66,6 +68,14 @@ export const meta: MetaFunction<typeof rootLoader> = ({ data }) => {
   ]
 }
 
+export async function loader(args: LoaderFunctionArgs) {
+  const user = await getUser(args.request)
+  if (user != null) {
+    return redirect(`/projects`)
+  }
+  return {}
+}
+
 const IndexPage = React.memo(() => {
   return (
     <div className='bg-white'>

utopia-remix/app/routes/authenticate.tsx

@@ -0,0 +1,44 @@
+import { redirect, type LoaderFunctionArgs } from '@remix-run/node'
+import { ALLOW } from '../handlers/validators'
+import { handle } from '../util/api.server'
+import { proxy } from '../util/proxy.server'
+
+export async function loader(args: LoaderFunctionArgs) {
+  return handle(args, {
+    GET: {
+      validator: ALLOW,
+      handler: handleAuthenticate,
+    },
+  })
+}
+
+async function handleAuthenticate(req: Request) {
+  const url = new URL(req.url)
+  const autoClose = url.searchParams.get('onto') === 'auto-close'
+  const resp = await proxy(req, { rawOutput: true })
+
+  if (resp instanceof Response && resp.ok) {
+    return autoClose
+      ? // auto-close the window when logins come from the editor
+        authFromEditor(resp)
+      : // redirect to projects
+        authFromRemix(resp)
+  }
+
+  return resp
+}
+
+function authFromEditor(resp: Response) {
+  return new Response(resp.body, {
+    headers: {
+      'content-type': 'text/html',
+      'cache-control': 'no-cache',
+      'set-cookie': resp.headers.get('set-cookie') ?? '',
+    },
+    status: resp.status,
+  })
+}
+
+function authFromRemix(resp: Response) {
+  return redirect('/projects', { headers: resp.headers })
+}

utopia-remix/app/util/api.server.spec.ts

@@ -32,14 +32,14 @@ describe('requireUser', () => {
     const req = newTestRequest({ authCookie: 'wrong' })
     const fn = async () => requireUser(req)
     await expect(fn).rejects.toThrow(ApiError)
-    await expect(fn).rejects.toThrow('session not found')
+    await expect(fn).rejects.toThrow('unauthorized')
   })
 
   it('needs a user for the session cookie', async () => {
     const req = newTestRequest({ authCookie: 'invalid-key' })
     const fn = async () => requireUser(req)
     await expect(fn).rejects.toThrow(ApiError)
-    await expect(fn).rejects.toThrow('user not found')
+    await expect(fn).rejects.toThrow('unauthorized')
   })
 
   it('returns the user details', async () => {

utopia-remix/app/util/api.server.ts

@@ -6,11 +6,11 @@ import type { UserDetails } from 'prisma-client'
 import { PrismaClientKnownRequestError } from 'prisma-client/runtime/library.js'
 import invariant from 'tiny-invariant'
 import { ALLOW } from '../handlers/validators'
-import { getUserFromSession } from '../models/session.server'
 import { ApiError } from './errors'
 import type { Method } from './methods.server'
 import { Status } from './statusCodes'
 import { ServerEnvironment } from '../env.server'
+import { maybeGetUserFromSession } from '../models/session.server'
 
 interface ErrorResponse {
   error: string
@@ -192,8 +192,8 @@ export async function requireUser(
   try {
     const sessionId = getSessionId(request)
     ensure(sessionId != null, 'missing session cookie', Status.UNAUTHORIZED)
-    const user = await getUserFromSession({ key: sessionId })
-    ensure(user != null, 'user not found', Status.UNAUTHORIZED)
+    const user = await maybeGetUserFromSession({ key: sessionId })
+    ensure(user != null, 'unauthorized', Status.UNAUTHORIZED)
     return user
   } catch (error) {
     if (error instanceof ApiError && error.status === Status.UNAUTHORIZED) {
@@ -210,7 +210,7 @@ export async function getUser(request: Request): Promise<UserDetails | null> {
   if (sessionId == null) {
     return null
   }
-  return getUserFromSession({ key: sessionId })
+  return maybeGetUserFromSession({ key: sessionId })
 }
 
 export function getProjectIdFromParams(params: Params<string>, key: string): string | null {

utopia-remix/app/util/auth0.server.ts

@@ -2,7 +2,7 @@ import urlJoin from 'url-join'
 import { ServerEnvironment } from '../env.server'
 
 export function auth0LoginURL(): string {
-  const behaviour = 'auto-close'
+  const behaviour: 'auto-close' | 'authd-redirect' = 'authd-redirect'
 
   const useAuth0 =
     ServerEnvironment.AUTH0_ENDPOINT !== '' &&
@@ -12,7 +12,7 @@ export function auth0LoginURL(): string {
     console.warn(
       'Auth0 is disabled, if you need it be sure to set the AUTH0_ENDPOINT, AUTH0_CLIENT_ID, AUTH0_REDIRECT_URI environment variables',
     )
-    const url = new URL(urlJoin(ServerEnvironment.BACKEND_URL, 'authenticate'))
+    const url = new URL(urlJoin(ServerEnvironment.CORS_ORIGIN, 'authenticate'))
     url.searchParams.set('code', 'logmein')
     url.searchParams.set('onto', behaviour)
     return url.href

utopia-remix/server.js

@@ -176,7 +176,6 @@ const app = express()
 app.disable('x-powered-by')
 
 // proxy middleware hooks
-app.use('/authenticate', proxy)
 app.use('/editor', proxy)
 app.use('/hashed-assets.json', proxy)
 app.use('/logout', proxy)