Chore/update remix auth GitHub (#944)

* chore: upgrade remix-auth and remix-auth-github dependencies

Update authentication libraries to latest versions:
- remix-auth from 3.7.0 to 4.1.0
- remix-auth-github from 1.7.0 to 3.0.2

Refactor authentication implementation to match new library requirements, including:
- Removing connection session storage
- Updating GitHub strategy configuration
- Adjusting authentication callback handling

* fix profile and email fetching

* add depencies to @mjackson/headers

* remove variable

* Fix most test an linting issue

* Fix GitHub OAuth callback test response handling

---------

Co-authored-by: Kent C. Dodds <[email protected]>

Author: rperon

app/routes/_auth+/auth.$provider.callback.test.ts

@@ -1,10 +1,10 @@
 import { invariant } from '@epic-web/invariant'
 import { faker } from '@faker-js/faker'
+import { SetCookie } from '@mjackson/headers'
 import { http } from 'msw'
 import { afterEach, expect, test } from 'vitest'
 import { twoFAVerificationType } from '#app/routes/settings+/profile.two-factor.tsx'
 import { getSessionExpirationDate, sessionKey } from '#app/utils/auth.server.ts'
-import { connectionSessionStorage } from '#app/utils/connections.server.ts'
 import { GITHUB_PROVIDER_NAME } from '#app/utils/connections.tsx'
 import { prisma } from '#app/utils/db.server.ts'
 import { authSessionStorage } from '#app/utils/session.server.ts'
@@ -35,7 +35,7 @@ test('when auth fails, send the user to login with a toast', async () => {
 	consoleError.mockImplementation(() => {})
 	server.use(
 		http.post('https://github.com/login/oauth/access_token', async () => {
-			return new Response('error', { status: 400 })
+			return new Response(null, { status: 400 })
 		}),
 	)
 	const request = await setupRequest()
@@ -219,19 +219,25 @@ async function setupRequest({
 	const state = faker.string.uuid()
 	url.searchParams.set('state', state)
 	url.searchParams.set('code', code)
-	const connectionSession = await connectionSessionStorage.getSession()
-	connectionSession.set('oauth2:state', state)
 	const authSession = await authSessionStorage.getSession()
 	if (sessionId) authSession.set(sessionKey, sessionId)
 	const setSessionCookieHeader =
 		await authSessionStorage.commitSession(authSession)
-	const setConnectionSessionCookieHeader =
-		await connectionSessionStorage.commitSession(connectionSession)
+	const searchParams = new URLSearchParams({ code, state })
+	let authCookie = new SetCookie({
+		name: 'github',
+		value: searchParams.toString(),
+		path: '/',
+		sameSite: 'Lax',
+		httpOnly: true,
+		maxAge: 60 * 10,
+		secure: process.env.NODE_ENV === 'production' || undefined,
+	})
 	const request = new Request(url.toString(), {
 		method: 'GET',
 		headers: {
 			cookie: [
-				convertSetCookieToCookie(setConnectionSessionCookieHeader),
+				authCookie.toString(),
 				convertSetCookieToCookie(setSessionCookieHeader),
 			].join('; '),
 		},

app/routes/_auth+/auth.$provider.callback.ts

@@ -38,7 +38,7 @@ export async function loader({ request, params }: Route.LoaderArgs) {
 	const label = providerLabels[providerName]
 
 	const authResult = await authenticator
-		.authenticate(providerName, request, { throwOnError: true })
+		.authenticate(providerName, request)
 		.then(
 			(data) =>
 				({

app/routes/_auth+/onboarding_.$provider.tsx

@@ -23,7 +23,6 @@ import {
 	signupWithConnection,
 	requireAnonymous,
 } from '#app/utils/auth.server.ts'
-import { connectionSessionStorage } from '#app/utils/connections.server'
 import { ProviderNameSchema } from '#app/utils/connections.tsx'
 import { prisma } from '#app/utils/db.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'
@@ -78,24 +77,17 @@ async function requireData({
 
 export async function loader({ request, params }: Route.LoaderArgs) {
 	const { email } = await requireData({ request, params })
-	const connectionSession = await connectionSessionStorage.getSession(
-		request.headers.get('cookie'),
-	)
+
 	const verifySession = await verifySessionStorage.getSession(
 		request.headers.get('cookie'),
 	)
 	const prefilledProfile = verifySession.get(prefilledProfileKey)
 
-	const formError = connectionSession.get(authenticator.sessionErrorKey)
-	const hasError = typeof formError === 'string'
-
 	return {
 		email,
 		status: 'idle',
 		submission: {
-			status: hasError ? 'error' : undefined,
 			initialValue: prefilledProfile ?? {},
-			error: { '': hasError ? [formError] : [] },
 		} as SubmissionResult,
 	}
 }

app/utils/auth.server.ts

@@ -3,7 +3,7 @@ import bcrypt from 'bcryptjs'
 import { redirect } from 'react-router'
 import { Authenticator } from 'remix-auth'
 import { safeRedirect } from 'remix-utils/safe-redirect'
-import { connectionSessionStorage, providers } from './connections.server.ts'
+import { providers } from './connections.server.ts'
 import { prisma } from './db.server.ts'
 import { combineHeaders, downloadFile } from './misc.tsx'
 import { type ProviderUser } from './providers/provider.ts'
@@ -16,9 +16,7 @@ export const getSessionExpirationDate = () =>
 
 export const sessionKey = 'sessionId'
 
-export const authenticator = new Authenticator<ProviderUser>(
-	connectionSessionStorage,
-)
+export const authenticator = new Authenticator<ProviderUser>()
 
 for (const [providerName, provider] of Object.entries(providers)) {
 	authenticator.use(provider.getAuthStrategy(), providerName)

app/utils/connections.server.ts

@@ -1,21 +1,9 @@
-import { createCookieSessionStorage } from 'react-router'
+// import { createCookieSessionStorage } from 'react-router'
 import { type ProviderName } from './connections.tsx'
 import { GitHubProvider } from './providers/github.server.ts'
 import { type AuthProvider } from './providers/provider.ts'
 import { type Timings } from './timing.server.ts'
 
-export const connectionSessionStorage = createCookieSessionStorage({
-	cookie: {
-		name: 'en_connection',
-		sameSite: 'lax', // CSRF protection is advised if changing to 'none'
-		path: '/',
-		httpOnly: true,
-		maxAge: 60 * 10, // 10 minutes
-		secrets: process.env.SESSION_SECRET.split(','),
-		secure: process.env.NODE_ENV === 'production',
-	},
-})
-
 export const providers: Record<ProviderName, AuthProvider> = {
 	github: new GitHubProvider(),
 }

app/utils/providers/github.server.ts

@@ -1,9 +1,9 @@
+import { SetCookie } from '@mjackson/headers'
 import { createId as cuid } from '@paralleldrive/cuid2'
 import { redirect } from 'react-router'
 import { GitHubStrategy } from 'remix-auth-github'
 import { z } from 'zod'
 import { cache, cachified } from '../cache.server.ts'
-import { connectionSessionStorage } from '../connections.server.ts'
 import { type Timings } from '../timing.server.ts'
 import { MOCK_CODE_GITHUB_HEADER, MOCK_CODE_GITHUB } from './constants.ts'
 import { type AuthProvider } from './provider.ts'
@@ -24,27 +24,62 @@ const shouldMock =
 	process.env.GITHUB_CLIENT_ID?.startsWith('MOCK_') ||
 	process.env.NODE_ENV === 'test'
 
+type GitHubEmailsResponse = {
+	email: string
+	verified: boolean
+	primary: boolean
+	visibility: string | null
+}[]
+
+type GitHubUserResponse = {
+	login: string
+	id: string
+	name: string | undefined
+	avatar_url: string | undefined
+}
+
 export class GitHubProvider implements AuthProvider {
 	getAuthStrategy() {
 		return new GitHubStrategy(
 			{
-				clientID: process.env.GITHUB_CLIENT_ID,
+				clientId: process.env.GITHUB_CLIENT_ID,
 				clientSecret: process.env.GITHUB_CLIENT_SECRET,
-				callbackURL: '/auth/github/callback',
+				redirectURI: '/auth/github/callback',
 			},
-			async ({ profile }) => {
-				const email = profile.emails[0]?.value.trim().toLowerCase()
+			async ({ tokens }) => {
+				// we need to fetch the user and the emails separately, this is a change in remix-auth-github
+				// from the previous version that supported fetching both in one call
+				const userResponse = await fetch('https://api.github.com/user', {
+					headers: {
+						Accept: 'application/vnd.github+json',
+						Authorization: `Bearer ${tokens.accessToken()}`,
+						'X-GitHub-Api-Version': '2022-11-28',
+					},
+				})
+				const user = (await userResponse.json()) as GitHubUserResponse
+
+				const emailsResponse = await fetch(
+					'https://api.github.com/user/emails',
+					{
+						headers: {
+							Accept: 'application/vnd.github+json',
+							Authorization: `Bearer ${tokens.accessToken()}`,
+							'X-GitHub-Api-Version': '2022-11-28',
+						},
+					},
+				)
+				const emails = (await emailsResponse.json()) as GitHubEmailsResponse
+				const email = emails.find((e) => e.primary)?.email
 				if (!email) {
 					throw new Error('Email not found')
 				}
-				const username = profile.displayName
-				const imageUrl = profile.photos[0]?.value
+
 				return {
+					id: user.id,
 					email,
-					id: profile.id,
-					username,
-					name: profile.name.givenName,
-					imageUrl,
+					name: user.name,
+					username: user.login,
+					imageUrl: user.avatar_url,
 				}
 			},
 		)
@@ -85,21 +120,24 @@ export class GitHubProvider implements AuthProvider {
 	async handleMockAction(request: Request) {
 		if (!shouldMock) return
 
-		const connectionSession = await connectionSessionStorage.getSession(
-			request.headers.get('cookie'),
-		)
 		const state = cuid()
-		connectionSession.set('oauth2:state', state)
-
 		// allows us to inject a code when running e2e tests,
 		// but falls back to a pre-defined 🐨 constant
 		const code =
 			request.headers.get(MOCK_CODE_GITHUB_HEADER) || MOCK_CODE_GITHUB
 		const searchParams = new URLSearchParams({ code, state })
+		let cookie = new SetCookie({
+			name: 'github',
+			value: searchParams.toString(),
+			path: '/',
+			sameSite: 'Lax',
+			httpOnly: true,
+			maxAge: 60 * 10,
+			secure: process.env.NODE_ENV === 'production' || undefined,
+		})
 		throw redirect(`/auth/github/callback?${searchParams}`, {
 			headers: {
-				'set-cookie':
-					await connectionSessionStorage.commitSession(connectionSession),
+				'Set-Cookie': cookie.toString(),
 			},
 		})
 	}

app/utils/providers/provider.ts

@@ -1,4 +1,4 @@
-import { type Strategy } from 'remix-auth'
+import { type Strategy } from 'remix-auth/strategy'
 import { type Timings } from '../timing.server.ts'
 
 // Define a user type for cleaner typing