upgrade remix-auth

upgrade remix-auth-github
remove remix-auth-discord because it's outdated

app/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 			<input
 				type={type}
 				className={cn(
-					'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+					'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground read-only:cursor-not-allowed read-only:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
 					className,
 				)}
 				ref={ref}

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

@@ -1,7 +1,7 @@
 import { redirect, type LoaderFunctionArgs } from '@remix-run/node'
 import { getUserId, login } from '#app/utils/auth/auth.server.ts'
 import {
-	authenticator,
+	createAuthenticator,
 	connectionSessionStorage,
 } from '#app/utils/auth/connections.server.ts'
 import {
@@ -24,14 +24,15 @@ import {
 import { connectionTable } from '#drizzle/schema.ts'
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
+	const authenticator = createAuthenticator(request)
 	const providerName = ProviderNameSchema.parse(params.provider)
 	const label = providerConfigs[providerName].label
 
 	const timing = new ServerTiming()
 
 	timing.time('get oauth profile', 'Get OAuth Profile')
 	const authResult = await authenticator
-		.authenticate(providerName, request, { throwOnError: true })
+		.authenticate(providerName, request)
 		.then(
 			(data) => ({ success: true, data }) as const,
 			(error) => ({ success: false, error }) as const,
@@ -132,9 +133,13 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 	}
 
 	// check if any user owns this connection's email, bind to that user and login
-	const emailOwner = await db.query.userTable.findFirst({
-		where: (userTable, { eq }) => eq(userTable.email, profile.email),
-	})
+	let emailOwner
+	if (profile.email) {
+		const email = profile.email
+		emailOwner = await db.query.userTable.findFirst({
+			where: (userTable, { eq }) => eq(userTable.email, email),
+		})
+	}
 
 	if (emailOwner) {
 		timing.time('insert connection', 'Relate connection to user')
@@ -173,7 +178,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 			profile: {
 				email: profile.email,
 				imageUrl: profile.imageUrl,
-				displayName: profile.name,
+				displayName: profile.name ?? undefined,
 				username: profile.username,
 			},
 		}),

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

@@ -3,11 +3,12 @@ import {
 	GeneralErrorBoundary,
 	generalNotFoundHandler,
 } from '#app/components/error-boundary.tsx'
-import { authenticator } from '#app/utils/auth/connections.server.ts'
+import { createAuthenticator } from '#app/utils/auth/connections.server.ts'
 import { ProviderNameSchema } from '#app/utils/auth/connections.tsx'
 import { setRedirectCookie } from '#app/utils/redirect.server.ts'
 
 export const action = async ({ request, params }: ActionFunctionArgs) => {
+	const authenticator = createAuthenticator(request)
 	const providerName = ProviderNameSchema.parse(params.provider)
 
 	try {

app/routes/_auth+/onboarding.tsx

@@ -80,7 +80,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 }
 
 export const action = async ({ request }: ActionFunctionArgs) => {
-	const { providerId, providerName, profile } = await requireData(request)
+	const { providerId, providerName } = await requireData(request)
 	const formData = await request.formData()
 
 	const submission = await parseWithZod(formData, {
@@ -98,21 +98,23 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 					path: ['username'],
 				},
 			)
-			.transform(async ({ displayName, username, imageUrl, rememberMe }) => {
-				const session = await signUpWithConnection({
-					connection: {
-						provider_id: providerId,
-						provider_name: providerName,
-					},
-					user: {
-						email: profile.email,
-						username,
-						display_name: displayName,
-						imageUrl,
-					},
-				})
-				return { session, rememberMe }
-			}),
+			.transform(
+				async ({ email, displayName, username, imageUrl, rememberMe }) => {
+					const session = await signUpWithConnection({
+						connection: {
+							provider_id: providerId,
+							provider_name: providerName,
+						},
+						user: {
+							email,
+							username,
+							display_name: displayName,
+							imageUrl,
+						},
+					})
+					return { session, rememberMe }
+				},
+			),
 		async: true,
 	})
 
@@ -186,10 +188,20 @@ export default function OnBoarding() {
 								/>
 							</div>
 						) : null}
-						<div className="text-sm">
-							<p className="font-medium leading-none">Email</p>
-							<p className="overflow-x-auto font-light">{data.email}</p>
-						</div>
+						<Field
+							labelProps={{ children: 'Email' }}
+							inputProps={{
+								...getInputProps(fields.email, { type: 'email' }),
+								readOnly: !!data.prefillResult.initialValue.email,
+								autoComplete: 'name',
+							}}
+							errors={fields.email.errors}
+							help={
+								data.prefillResult.initialValue.email
+									? undefined
+									: "We didn't find any email linked, please input one."
+							}
+						/>
 						<Field
 							labelProps={{ children: 'How should we call you?' }}
 							inputProps={{

app/utils/auth/connections.server.ts

@@ -3,7 +3,6 @@ import { Authenticator } from 'remix-auth'
 import { env } from '#app/utils/env.server.ts'
 import { type ServerTiming } from '../timings.server.ts'
 import { type ProviderName } from './connections.tsx'
-import { DiscordProvider } from './providers/discord.server.ts'
 import { GitHubProvider } from './providers/github.server.ts'
 import { type AuthProvider, type ProviderUser } from './providers/model.ts'
 
@@ -20,15 +19,16 @@ export const connectionSessionStorage = createCookieSessionStorage({
 
 export const providers: Record<ProviderName, AuthProvider> = {
 	github: new GitHubProvider(),
-	discord: new DiscordProvider(),
 }
 
-export const authenticator = new Authenticator<ProviderUser>(
-	connectionSessionStorage,
-)
+export const createAuthenticator = (request: Request) => {
+	const authenticator = new Authenticator<ProviderUser>()
 
-for (const [providerName, provider] of Object.entries(providers)) {
-	authenticator.use(provider.getAuthStrategy(), providerName)
+	for (const [providerName, provider] of Object.entries(providers)) {
+		authenticator.use(provider.getAuthStrategy(request), providerName)
+	}
+
+	return authenticator
 }
 
 export function resolveConnectionInfo({

app/utils/auth/connections.tsx

@@ -5,12 +5,8 @@ import { Icon } from '#app/components/ui/icon.tsx'
 import { useIsPending } from '../ui.ts'
 
 export const GITHUB_PROVIDER_NAME = 'github'
-export const DISCORD_PROVIDER_NAME = 'discord'
 
-export const providerNames = [
-	GITHUB_PROVIDER_NAME,
-	DISCORD_PROVIDER_NAME,
-] as const
+export const providerNames = [GITHUB_PROVIDER_NAME] as const
 export const ProviderNameSchema = z.enum(providerNames)
 export type ProviderName = z.infer<typeof ProviderNameSchema>
 
@@ -23,10 +19,6 @@ export const providerConfigs: Record<ProviderName, ProviderConfig> = {
 		label: 'Github',
 		icon: <Icon name="github-logo" className="inline-block" />,
 	},
-	[DISCORD_PROVIDER_NAME]: {
-		label: 'Discord',
-		icon: <Icon name="discord-logo" className="inline-block" />,
-	},
 }
 
 export const ProviderConnectionForm = ({

app/utils/auth/onboarding.server.ts

@@ -19,7 +19,7 @@ export const onboardingCookie = createTypedCookie({
 			providerId: z.string(),
 			providerName: z.string(),
 			profile: z
-				.object({ email: z.string().email() })
+				.object({ email: z.string().email().optional() })
 				.merge(onboardingFormSchema.omit({ rememberMe: true }).partial()),
 		})
 		.nullable(),

app/utils/auth/onboarding.ts

@@ -1,6 +1,7 @@
 import { z } from 'zod'
 
 export const onboardingFormSchema = z.object({
+	email: z.string().email(),
 	username: z.string(),
 	displayName: z.string(),
 	imageUrl: z.string().url().optional(),