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

Author: rperon

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/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'
@@ -15,9 +15,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/providers/github.server.ts

@@ -1,3 +1,4 @@
+import { SetCookie } from '@mjackson/headers'
 import { createId as cuid } from '@paralleldrive/cuid2'
 import { redirect } from 'react-router'
 import { GitHubStrategy } from 'remix-auth-github'
@@ -28,24 +29,33 @@ 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 }) => {
+				const response = 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 profile = (await response.json()) as any
+				const email = profile.emails[0]?.trim().toLowerCase()
 				if (!email) {
 					throw new Error('Email not found')
 				}
-				const username = profile.displayName
-				const imageUrl = profile.photos[0]?.value
-				return {
-					email,
+				// const username = profile.displayName
+				// const imageUrl = profile.photos[0]?.value
+				const returnValue = {
 					id: profile.id,
-					username,
-					name: profile.name.givenName,
-					imageUrl,
+					email,
+					// username,
+					// name: profile.name,
+					// imageUrl,
 				}
+				return returnValue
 			},
 		)
 	}
@@ -85,21 +95,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

package-lock.json

@@ -99,8 +99,8 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.2.0",
-    "remix-auth": "^3.7.0",
-    "remix-auth-github": "^1.7.0",
+    "remix-auth": "^4.1.0",
+    "remix-auth-github": "^3.0.2",
     "remix-utils": "^8.1.0",
     "set-cookie-parser": "^2.7.1",
     "sonner": "^1.7.4",

package.json

@@ -112,7 +112,7 @@ export async function insertGitHubUser(code?: string | null) {
 async function getUser(request: Request) {
 	const accessToken = request.headers
 		.get('authorization')
-		?.slice('token '.length)
+		?.slice('Bearer '.length)
 
 	if (!accessToken) {
 		return new Response('Unauthorized', { status: 401 })
@@ -145,11 +145,11 @@ export const handlers: Array<HttpHandler> = [
 				user = await insertGitHubUser(code)
 			}
 
-			return new Response(
-				new URLSearchParams({
+			return json(
+				{
 					access_token: user.accessToken,
 					token_type: '__MOCK_TOKEN_TYPE__',
-				}).toString(),
+				},
 				{ headers: { 'content-type': 'application/x-www-form-urlencoded' } },
 			)
 		},