add GitHub oAuth2 login

.env.example

@@ -2,6 +2,8 @@ AUTH_SECRET=generate-long-random-string-for-this
 YOUTUBE_API_KEY=insert-your-api-key-here
 GOOGLE_CLIENT_ID=insert-your-client-id-here
 GOOGLE_CLIENT_SECRET=insert-your-client-secret-here
+GITHUB_CLIENT_ID=insert-your-client-id-here
+GITHUB_CLIENT_SECRET=insert-your-client-secret-here
 REDIS_PORT=6379
 REDIS_URL=redis://localhost:${REDIS_PORT}
 DB_HOST=localhost

src/hooks.server.ts

@@ -4,6 +4,7 @@ import { initAcceptLanguageHeaderDetector } from 'typesafe-i18n/detectors';
 import { detectLocale } from '$lib/i18n/i18n-util.js';
 import { SvelteKitAuth } from '@auth/sveltekit';
 import Google from '@auth/core/providers/google';
+import GitHub from '@auth/core/providers/github';
 import PrismaAdapter from '$lib/prisma/client';
 import { config } from '$/lib/config.server';
 import prismaClient from '$/lib/db.server';
@@ -29,6 +30,12 @@ const handleAuth = (async (...args) => {
 				clientId: config.GOOGLE_CLIENT_ID,
 				clientSecret: config.GOOGLE_CLIENT_SECRET,
 			}),
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			// @ts-ignore
+			GitHub({
+				clientId: config.GITHUB_CLIENT_ID,
+				clientSecret: config.GITHUB_CLIENT_SECRET,
+			}),
 		],
 		callbacks: {
 			async session({ session, user }) {

src/lib/config.server.ts

@@ -7,6 +7,8 @@ export const ServerConfigSchema = z.object({
 	AUTH_SECRET: z.string().trim().min(32),
 	GOOGLE_CLIENT_ID: z.string().trim().min(1),
 	GOOGLE_CLIENT_SECRET: z.string().trim().min(1),
+	GITHUB_CLIENT_ID: z.string().trim().min(1),
+	GITHUB_CLIENT_SECRET: z.string().trim().min(1),
 	DB_HOST: z.string().trim().min(1),
 	DB_USER: z.string().trim().min(1),
 	DB_PASSWORD: z.string().trim().min(1),

src/lib/i18n/en/index.ts

@@ -12,6 +12,7 @@ const en: BaseTranslation = {
 		update: 'Update',
 		logOut: 'Logout',
 		loginYouTube: 'Login with YouTube',
+		loginGitHub: 'Login with GitHub',
 	},
 	labels: {
 		title: 'Title',

src/lib/i18n/i18n-types.ts

@@ -40,6 +40,10 @@ type RootTranslation = {
 		 * L​o​g​i​n​ ​w​i​t​h​ ​Y​o​u​T​u​b​e
 		 */
 		loginYouTube: string
+		/**
+		 * L​o​g​i​n​ ​w​i​t​h​ ​G​i​t​H​u​b
+		 */
+		loginGitHub: string
 	}
 	labels: {
 		/**
@@ -178,6 +182,10 @@ export type TranslationFunctions = {
 		 * Login with YouTube
 		 */
 		loginYouTube: () => LocalizedString
+		/**
+		 * Login with GitHub
+		 */
+		loginGitHub: () => LocalizedString
 	}
 	labels: {
 		/**

src/routes/+page.svelte

@@ -44,12 +44,27 @@
 				signIn('google');
 			}}
 			disabled={loading}
+			data-testid="google-btn"
 			class="btn variant-filled-primary cursor-pointer">
 			{#if loading}
 				{$LL.messages.pleaseWait()} <ProgressRadial class="ml-2 h-6 w-6" stroke={100} />
 			{:else}
 				{$LL.buttons.loginYouTube()}
 			{/if}
 		</button>
+		<button
+			on:click|once={function loginClick() {
+				loading = true;
+				signIn('github');
+			}}
+			disabled={loading}
+			data-testid="github-btn"
+			class="btn variant-filled-primary cursor-pointer">
+			{#if loading}
+				{$LL.messages.pleaseWait()} <ProgressRadial class="ml-2 h-6 w-6" stroke={100} />
+			{:else}
+				{$LL.buttons.loginGitHub()}
+			{/if}
+		</button>
 	{/if}
 </div>

tests/oauth.test.ts

@@ -2,7 +2,13 @@ import { expect, test } from '@playwright/test';
 
 test('login button redirects to google', async ({ page }) => {
 	await page.goto('/');
-	await page.getByRole('button').click();
+	await page.getByTestId('google-btn').click();
 	await page.waitForURL('**/accounts.google.com/**');
 	expect(page.url()).toContain('https://accounts.google.com/');
 });
+test('login button redirects to github', async ({ page }) => {
+	await page.goto('/');
+	await page.getByTestId('github-btn').click();
+	await page.waitForURL('**/github.com/**');
+	expect(page.url()).toContain('https://github.com/login');
+});