make third party auth generic

Author: kentcdodds

.env.example

@@ -11,3 +11,4 @@ SENTRY_DSN="your-dsn"
 # if they aren't then the real github api will be attempted
 GITHUB_CLIENT_ID="MOCK_GITHUB_CLIENT_ID"
 GITHUB_CLIENT_SECRET="MOCK_GITHUB_CLIENT_SECRET"
+GITHUB_TOKEN="MOCK_GITHUB_TOKEN"

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

@@ -19,11 +19,14 @@ import { GITHUB_PROVIDER_NAME } from '../../utils/github-auth.server.ts'
 import { invariant } from '../../utils/misc.tsx'
 import { sessionStorage } from '../../utils/session.server.ts'
 import { twoFAVerificationType } from '../settings+/profile.two-factor.tsx'
-import { ROUTE_PATH, loader } from './auth.github.callback.ts'
+import { loader } from './auth.$provider.callback.ts'
+
+const ROUTE_PATH = '/auth/github/callback'
+const PARAMS = { provider: 'github' }
 
 test('a new user goes to onboarding', async () => {
 	const request = await setupRequest()
-	const response = await loader({ request, params: {}, context: {} }).catch(
+	const response = await loader({ request, params: PARAMS, context: {} }).catch(
 		e => e,
 	)
 	expect(response).toHaveRedirect('/onboarding/github')
@@ -36,7 +39,7 @@ test('when auth fails, send the user to login with a toast', async () => {
 		}),
 	)
 	const request = await setupRequest()
-	const response = await loader({ request, params: {}, context: {} }).catch(
+	const response = await loader({ request, params: PARAMS, context: {} }).catch(
 		e => e,
 	)
 	invariant(response instanceof Response, 'response should be a Response')
@@ -54,7 +57,7 @@ test('when auth fails, send the user to login with a toast', async () => {
 test('when a user is logged in, it creates the connection', async () => {
 	const session = await setupUser()
 	const request = await setupRequest(session.id)
-	const response = await loader({ request, params: {}, context: {} })
+	const response = await loader({ request, params: PARAMS, context: {} })
 	expect(response).toHaveRedirect('/settings/profile/connections')
 	await expect(response).toSendToast(
 		expect.objectContaining({
@@ -86,7 +89,7 @@ test(`when a user is logged in and has already connected, it doesn't do anything
 		},
 	})
 	const request = await setupRequest(session.id)
-	const response = await loader({ request, params: {}, context: {} })
+	const response = await loader({ request, params: PARAMS, context: {} })
 	expect(response).toHaveRedirect('/settings/profile/connections')
 	expect(response).toSendToast(
 		expect.objectContaining({
@@ -100,7 +103,7 @@ test('when a user exists with the same email, create connection and make session
 	const email = primaryGitHubEmail.email.toLowerCase()
 	const { userId } = await setupUser({ ...createUser(), email })
 	const request = await setupRequest()
-	const response = await loader({ request, params: {}, context: {} })
+	const response = await loader({ request, params: PARAMS, context: {} })
 
 	expect(response).toHaveRedirect('/')
 
@@ -140,7 +143,7 @@ test('gives an error if the account is already connected to another user', async
 	})
 	const session = await setupUser()
 	const request = await setupRequest(session.id)
-	const response = await loader({ request, params: {}, context: {} })
+	const response = await loader({ request, params: PARAMS, context: {} })
 	expect(response).toHaveRedirect('/settings/profile/connections')
 	await expect(response).toSendToast(
 		expect.objectContaining({
@@ -162,7 +165,7 @@ test('if a user is not logged in, but the connection exists, make a session', as
 		},
 	})
 	const request = await setupRequest()
-	const response = await loader({ request, params: {}, context: {} })
+	const response = await loader({ request, params: PARAMS, context: {} })
 	expect(response).toHaveRedirect('/')
 	await expect(response).toHaveSessionForUser(userId)
 })
@@ -185,7 +188,7 @@ test('if a user is not logged in, but the connection exists and they have enable
 		},
 	})
 	const request = await setupRequest()
-	const response = await loader({ request, params: {}, context: {} })
+	const response = await loader({ request, params: PARAMS, context: {} })
 	const searchParams = new URLSearchParams({
 		type: twoFAVerificationType,
 		target: userId,

app/routes/_auth+/auth.github.callback.ts renamed to app/routes/_auth+/auth.$provider.callback.ts

@@ -4,55 +4,36 @@ import {
 	getSessionExpirationDate,
 	getUserId,
 } from '../../utils/auth.server.ts'
+import { handleMockCallback } from '../../utils/connections.server.ts'
+import { ProviderNameSchema, providerLabels } from '../../utils/connections.tsx'
 import { prisma } from '../../utils/db.server.ts'
-import { GITHUB_PROVIDER_NAME } from '../../utils/github-auth.server.ts'
 import { combineHeaders } from '../../utils/misc.tsx'
 import {
 	destroyRedirectToHeader,
 	getRedirectCookieValue,
 } from '../../utils/redirect-cookie.server.ts'
-import { sessionStorage } from '../../utils/session.server.ts'
 import {
 	createToastHeaders,
 	redirectWithToast,
 } from '../../utils/toast.server.ts'
 import { verifySessionStorage } from '../../utils/verification.server.ts'
 import { handleNewSession } from './login.tsx'
 import {
-	githubIdKey,
 	onboardingEmailSessionKey,
 	prefilledProfileKey,
-} from './onboarding_.github.tsx'
-
-export const ROUTE_PATH = '/auth/github/callback'
+	providerIdKey,
+} from './onboarding_.$provider.tsx'
 
 const destroyRedirectTo = { 'set-cookie': destroyRedirectToHeader }
 
-export async function loader({ request }: DataFunctionArgs) {
-	const reqUrl = new URL(request.url)
+export async function loader({ request, params }: DataFunctionArgs) {
+	const providerName = ProviderNameSchema.parse(params.provider)
+	request = await handleMockCallback(providerName, request)
 	const redirectTo = getRedirectCookieValue(request)
-	debugger
-
-	// normally you *really* want to avoid including test/dev code in your source
-	// but this is one of those cases where it's worth it to make the dev
-	// experience better. The fact is it's basically impossible to test these
-	// kinds of integrations.
-	if (process.env.GITHUB_CLIENT_ID?.startsWith('MOCK_')) {
-		const cookieSession = await sessionStorage.getSession(
-			request.headers.get('cookie'),
-		)
-		const state = cookieSession.get('oauth2:state') ?? 'MOCK_STATE'
-		cookieSession.set('oauth2:state', state)
-		reqUrl.searchParams.set('state', state)
-		request.headers.set(
-			'cookie',
-			await sessionStorage.commitSession(cookieSession),
-		)
-		request = new Request(reqUrl.toString(), request)
-	}
+	const label = providerLabels[providerName]
 
 	const authResult = await authenticator
-		.authenticate(GITHUB_PROVIDER_NAME, request, { throwOnError: true })
+		.authenticate(providerName, request, { throwOnError: true })
 		.then(
 			data => ({ success: true, data }) as const,
 			error => ({ success: false, error }) as const,
@@ -64,7 +45,7 @@ export async function loader({ request }: DataFunctionArgs) {
 			'/login',
 			{
 				title: 'Auth Failed',
-				description: 'There was an error authenticating with GitHub.',
+				description: `There was an error authenticating with ${label}.`,
 				type: 'error',
 			},
 			{ headers: destroyRedirectTo },
@@ -87,7 +68,7 @@ export async function loader({ request }: DataFunctionArgs) {
 				'/settings/profile/connections',
 				{
 					title: 'Already Connected',
-					description: `Your "${profile.username}" GitHub account is already connected.`,
+					description: `Your "${profile.username}" ${label} account is already connected.`,
 				},
 				{ headers: destroyRedirectTo },
 			)
@@ -96,18 +77,18 @@ export async function loader({ request }: DataFunctionArgs) {
 				'/settings/profile/connections',
 				{
 					title: 'Already Connected',
-					description: `The "${profile.username}" GitHub account is already connected to another account.`,
+					description: `The "${profile.username}" ${label} account is already connected to another account.`,
 				},
 				{ headers: destroyRedirectTo },
 			)
 		}
 	}
 
-	// If we're already logged in, then link the GitHub account
+	// If we're already logged in, then link the account
 	if (userId) {
 		await prisma.connection.create({
 			data: {
-				providerName: GITHUB_PROVIDER_NAME,
+				providerName,
 				providerId: profile.id,
 				userId,
 			},
@@ -117,7 +98,7 @@ export async function loader({ request }: DataFunctionArgs) {
 			{
 				title: 'Connected',
 				type: 'success',
-				description: `Your "${profile.username}" GitHub account has been connected.`,
+				description: `Your "${profile.username}" ${label} account has been connected.`,
 			},
 			{ headers: destroyRedirectTo },
 		)
@@ -128,7 +109,7 @@ export async function loader({ request }: DataFunctionArgs) {
 		return makeSession({ request, userId: existingConnection.userId })
 	}
 
-	// if the github email matches a user in the db, then link the account and
+	// if the email matches a user in the db, then link the account and
 	// make a new session
 	const user = await prisma.user.findUnique({
 		select: { id: true },
@@ -137,7 +118,7 @@ export async function loader({ request }: DataFunctionArgs) {
 	if (user) {
 		await prisma.connection.create({
 			data: {
-				providerName: GITHUB_PROVIDER_NAME,
+				providerName,
 				providerId: profile.id,
 				userId: user.id,
 			},
@@ -147,7 +128,7 @@ export async function loader({ request }: DataFunctionArgs) {
 			{
 				headers: await createToastHeaders({
 					title: 'Connected',
-					description: `Your "${profile.username}" GitHub account has been connected.`,
+					description: `Your "${profile.username}" ${label} account has been connected.`,
 				}),
 			},
 		)
@@ -163,9 +144,9 @@ export async function loader({ request }: DataFunctionArgs) {
 		email: profile.email.toLowerCase(),
 		username: profile.username?.replace(/[^a-zA-Z0-9_]/g, '_').toLowerCase(),
 	})
-	verifySession.set(githubIdKey, profile.id)
+	verifySession.set(providerIdKey, profile.id)
 	const onboardingRedirect = [
-		'/onboarding/github',
+		`/onboarding/${providerName}`,
 		redirectTo ? new URLSearchParams({ redirectTo }) : null,
 	]
 		.filter(Boolean)

app/routes/_auth+/auth.github.ts renamed to app/routes/_auth+/auth.$provider.ts

@@ -1,14 +1,16 @@
 import { redirect, type DataFunctionArgs } from '@remix-run/node'
 import { authenticator } from '../../utils/auth.server.ts'
-import { GITHUB_PROVIDER_NAME } from '../../utils/github-auth.server.ts'
+import { handleMockAction } from '../../utils/connections.server.ts'
+import { ProviderNameSchema } from '../../utils/connections.tsx'
 import { getReferrerRoute } from '../../utils/misc.tsx'
 import { getRedirectCookieHeader } from '../../utils/redirect-cookie.server.ts'
 
 export async function loader() {
 	return redirect('/login')
 }
 
-export async function action({ request }: DataFunctionArgs) {
+export async function action({ request, params }: DataFunctionArgs) {
+	const providerName = ProviderNameSchema.parse(params.provider)
 	const formData = await request.formData()
 	const rawRedirectTo = formData.get('redirectTo')
 	const redirectTo =
@@ -18,13 +20,9 @@ export async function action({ request }: DataFunctionArgs) {
 
 	const redirectToCookie = getRedirectCookieHeader(redirectTo)
 
-	if (process.env.GITHUB_CLIENT_ID?.startsWith('MOCK_')) {
-		return redirect(`/auth/github/callback?code=MOCK_CODE&state=MOCK_STATE`, {
-			headers: redirectToCookie ? { 'set-cookie': redirectToCookie } : {},
-		})
-	}
+	await handleMockAction(providerName, redirectToCookie)
 	try {
-		return await authenticator.authenticate(GITHUB_PROVIDER_NAME, request)
+		return await authenticator.authenticate(providerName, request)
 	} catch (error: unknown) {
 		if (error instanceof Response && redirectToCookie) {
 			error.headers.append('set-cookie', redirectToCookie)

app/routes/_auth+/login.tsx

@@ -19,6 +19,10 @@ import {
 	requireAnonymous,
 	sessionKey,
 } from '../../utils/auth.server.ts'
+import {
+	ProviderConnectionForm,
+	providerNames,
+} from '../../utils/connections.tsx'
 import { prisma } from '../../utils/db.server.ts'
 import {
 	combineResponseInits,
@@ -229,7 +233,6 @@ export async function action({ request }: DataFunctionArgs) {
 export default function LoginPage() {
 	const actionData = useActionData<typeof action>()
 	const isPending = useIsPending()
-	const isGitHubSubmitting = useIsPending({ formAction: '/auth/github' })
 	const [searchParams] = useSearchParams()
 	const redirectTo = searchParams.get('redirectTo')
 
@@ -314,24 +317,16 @@ export default function LoginPage() {
 								</StatusButton>
 							</div>
 						</Form>
-						<Form
-							className="mt-5 flex items-center justify-center gap-2 border-t-2 border-border pt-3"
-							action="/auth/github"
-							method="POST"
-						>
-							<input
-								type="hidden"
-								name="redirectTo"
-								value={redirectTo ?? '/'}
-							/>
-							<StatusButton
-								type="submit"
-								className="w-full"
-								status={isGitHubSubmitting ? 'pending' : 'idle'}
-							>
-								Login with GitHub
-							</StatusButton>
-						</Form>
+						<div className="mt-5 flex flex-col gap-5 border-b-2 border-t-2 border-border py-3">
+							{providerNames.map(providerName => (
+								<ProviderConnectionForm
+									key={providerName}
+									type="Login"
+									providerName={providerName}
+									redirectTo={redirectTo}
+								/>
+							))}
+						</div>
 						<div className="flex items-center justify-center gap-2 pt-6">
 							<span className="text-muted-foreground">New here?</span>
 							<Link