WIP

Author: kevinpiac

frontend/src/hooks.server.ts

@@ -0,0 +1,10 @@
+import { Handle } from "@sveltejs/kit";
+
+export const handle: Handle = async ({ event, resolve }) => {
+	if (event.url.pathname.startsWith("/__/auth/handler")) {
+		console.log("This will be used as auth handler");
+	}
+
+	const response = await resolve(event);
+	return response;
+};

frontend/src/lib/components/auth/button/AuthProviderButton.svelte

@@ -4,19 +4,86 @@
 	import GoogleIcon from "$lib/components/auth/GoogleIcon.svelte";
 	import GitlabIcon from "$lib/components/auth/GitlabIcon.svelte";
 	import GithubIcon from "$lib/components/auth/GithubIcon.svelte";
+	import { AgentLabsApp } from "$lib/externals/agentlabs-js-sdk/agentlabs";
+	import { getAuth, signInWithRedirect } from "$lib/externals/agentlabs-js-sdk/auth";
+	import GoogleAuthProvider from "$lib/externals/agentlabs-js-sdk/auth-providers/google";
+	import GitlabAuthProvider from "$lib/externals/agentlabs-js-sdk/auth-providers/gitlab";
+	import GithubAuthProvider from "$lib/externals/agentlabs-js-sdk/auth-providers/github";
 
 	export let provider: AuthProvider;
 
-	const providerIconMap = {
+	let providerCurrentlyLoading: AuthProvider | null = null;
+
+	const providerIconMap: Record<
+		AuthProvider,
+		typeof GoogleIcon | typeof GitlabIcon | typeof GithubIcon
+	> = {
 		google: GoogleIcon,
 		gitlab: GitlabIcon,
 		github: GithubIcon
 	};
+
+	const providerNameMap: Record<AuthProvider, string> = {
+		google: "Google",
+		gitlab: "Gitlab",
+		github: "Github"
+	};
+
+	// This will be instantiated in the main layout after fetching project config
+	const app = new AgentLabsApp({
+		project: {
+			id: "",
+			slug: "something",
+			name: "something"
+		},
+		signInMethods: {
+			google: {
+				id: "google",
+				isEnabled: true,
+				oauthSettings: {
+					clientId:
+						"1046622402922-2q425h1v1dmacgg2p4g0bj89f8un67q3.apps.googleusercontent.com"
+				}
+			}
+		}
+	});
+
+	const auth = getAuth(app);
+
+	const providerHandlerMap: Record<AuthProvider, () => void> = {
+		google: () =>
+			signInWithRedirect(
+				auth,
+				new GoogleAuthProvider([], auth.getOAuthSignInMethods().google)
+			),
+		gitlab: () =>
+			signInWithRedirect(
+				auth,
+				new GitlabAuthProvider([], auth.getOAuthSignInMethods().gitlab)
+			),
+		github: () =>
+			signInWithRedirect(
+				auth,
+				new GithubAuthProvider([], auth.getOAuthSignInMethods().github)
+			)
+	};
+
+	const handleLogin = () => {
+		console.log(auth.getOAuthSignInMethods().google);
+
+		providerCurrentlyLoading = provider;
+
+		providerHandlerMap[provider]();
+	};
 </script>
 
-<Button type="secondary" center={false}>
+<Button
+	type="secondary"
+	center={false}
+	on:click={handleLogin}
+	disabled={providerCurrentlyLoading === provider}>
 	<div class="flex items-center gap-5">
 		<svelte:component this={providerIconMap[provider]} />
-		<span>Continue with Google</span>
+		<span>Continue with {providerNameMap[provider]}</span>
 	</div>
 </Button>

frontend/src/lib/externals/agentlabs-js-sdk/agentlabs.ts

@@ -0,0 +1,54 @@
+export type InitConfig = {
+	project: ProjectConfig;
+	signInMethods: SignInMethods;
+};
+
+export const SignInMethodIds = [
+	"email-and-password",
+	"magic-email-code",
+	"google",
+	"github",
+	"gitlab",
+	"microsoft",
+	"twitter"
+] as const;
+
+export type SignInMethodId = (typeof SignInMethodIds)[number];
+
+export interface SignInMethodOAuthSettings {
+	clientId: string;
+	scopes?: string[];
+	hasClientSecret: boolean;
+	isDevMode?: boolean;
+}
+
+export interface SignInMethod {
+	id: SignInMethodId;
+	isEnabled: boolean;
+	settings?: Record<string, any>;
+	oauthSettings?: SignInMethodOAuthSettings;
+}
+
+export type SignInMethods = Partial<Record<SignInMethodId, SignInMethod>>;
+
+export type PublicOAuthConfig = {
+	signInMethods: SignInMethods;
+};
+
+export type ProjectConfig = {
+	id: string;
+	slug: string;
+	name: string;
+};
+
+export class AgentLabsApp {
+	constructor(protected config: InitConfig) {}
+
+	getProject(): ProjectConfig {
+		return this.config.project;
+	}
+
+	getOAuthConfig(): PublicOAuthConfig {
+		return { signInMethods: this.config.signInMethods };
+	}
+}

frontend/src/lib/externals/agentlabs-js-sdk/auth-providers/auth-providers.types.ts

@@ -0,0 +1,28 @@
+export const OAuthProviderIds = ['google', 'microsoft', 'github', 'gitlab', 'twitter'] as const;
+export type OAuthProviderId = (typeof OAuthProviderIds)[number];
+
+export type AuthorizationParams = {
+    client_id: string;
+    redirect_uri: string;
+    response_type: 'token' | 'code';
+    scope: string;
+    include_granted_scopes: string;
+    access_type?: string;
+    state: string;
+    code_challenge?: string;
+    code_challenge_method?: 'plain' | 'S256';
+};
+
+export interface OAuthProvider {
+    id: OAuthProviderId;
+    addScope: (scope: string) => void;
+    getScopes: () => string[];
+    getAuthUrl: () => string;
+    getResponseType: () => 'token' | 'code';
+    getState: () => string;
+    getCodeChallenge?: () => Promise<{
+        codeChallenge: string;
+        codeVerifier: string;
+        codeChallengeMethod?: 'plain' | 'S256';
+    }>;
+}

frontend/src/lib/externals/agentlabs-js-sdk/auth-providers/github.ts

@@ -0,0 +1,78 @@
+import { unique } from "../utils/unique";
+import { randomState } from "../utils/randomState";
+import type { OAuthProvider, OAuthProviderId } from "./auth-providers.types";
+
+export const GithubMinimumScopes = ["read:user", "user:email"] as const;
+
+export const GithubPossibleScopes = [
+	"repo",
+	"repo_deployment",
+	"repo:status",
+	"public_repo",
+	"repo:invite",
+	"security_events",
+	"admin:repo_hook",
+	"write:repo_hook",
+	"read:repo_hook",
+	"admin:org",
+	"write:org",
+	"read:org",
+	"admin:public_key",
+	"write:public_key",
+	"read:public_key",
+	"admin:org_hook",
+	"gist",
+	"notifications",
+	"user",
+	"read:user",
+	"user:email",
+	"user:follow",
+	"project",
+	"read:project",
+	"delete_repo",
+	"write:packages",
+	"read:packages",
+	"delete:packages",
+	"admin:gpg_key",
+	"write:gpg_key",
+	"read:gpg_key",
+	"codespace",
+	"workflow"
+] as const;
+
+export type GithubScope = (typeof GithubPossibleScopes)[number];
+
+export class GithubAuthProvider implements OAuthProvider {
+	private scopes: string[] = [];
+
+	constructor(scopes: GithubScope[]) {
+		const allScopes = [...scopes, ...GithubMinimumScopes];
+		allScopes.forEach((scope) => this.addScope(scope));
+	}
+
+	get id(): OAuthProviderId {
+		return "github";
+	}
+
+	addScope(scope: string): void {
+		this.scopes.push(scope);
+	}
+
+	getScopes(): string[] {
+		return unique(this.scopes);
+	}
+
+	getAuthUrl(): string {
+		return "https://github.com/login/oauth/authorize";
+	}
+
+	getResponseType(): "code" {
+		return "code";
+	}
+
+	getState(): string {
+		return randomState();
+	}
+}
+
+export default GithubAuthProvider;

frontend/src/lib/externals/agentlabs-js-sdk/auth-providers/gitlab.ts

@@ -0,0 +1,56 @@
+import { unique } from "../utils/unique";
+import { randomState } from "../utils/randomState";
+import type { OAuthProvider, OAuthProviderId } from "./auth-providers.types";
+
+export const GitlabMinimumScopes = ["openid", "profile", "email", "read_user"] as const;
+
+export const GitlabPossibleScopes = [
+	"api",
+	"read_user",
+	"read_api",
+	"read_repository",
+	"write_repository",
+	"read_registry",
+	"write_registry",
+	"sudo",
+	"openid",
+	"profile",
+	"email",
+	"create_runner"
+];
+export type GitlabScope = (typeof GitlabPossibleScopes)[number];
+
+export class GitlabAuthProvider implements OAuthProvider {
+	private scopes: string[] = [];
+
+	constructor(scopes: GitlabScope[]) {
+		const allScopes = [...scopes, ...GitlabMinimumScopes];
+		allScopes.forEach((scope) => this.addScope(scope));
+	}
+
+	get id(): OAuthProviderId {
+		return "gitlab";
+	}
+
+	addScope(scope: string): void {
+		this.scopes.push(scope);
+	}
+
+	getScopes(): string[] {
+		return unique(this.scopes);
+	}
+
+	getAuthUrl(): string {
+		return "https://gitlab.com/oauth/authorize";
+	}
+
+	getResponseType(): "code" {
+		return "code";
+	}
+
+	getState(): string {
+		return randomState();
+	}
+}
+
+export default GitlabAuthProvider;

frontend/src/lib/externals/agentlabs-js-sdk/auth-providers/google.ts

@@ -0,0 +1,74 @@
+import { unique } from "../utils/unique";
+import type { OAuthProvider, OAuthProviderId } from "./auth-providers.types";
+import type { AuthProviderSettings } from "../common.types";
+
+const GoogleMinimumScopes = [
+	"https://www.googleapis.com/auth/userinfo.email",
+	"https://www.googleapis.com/auth/userinfo.profile"
+] as const;
+
+// Full scopes list: https://developers.google.com/identity/protocols/oauth2/scopes
+// We don't add all scopes because some of them are too sensitive and we don't need them.
+const GooglePossibleScopes = [
+	"https://www.googleapis.com/auth/userinfo.email",
+	"https://www.googleapis.com/auth/userinfo.profile",
+	"https://www.googleapis.com/auth/calendar",
+	"https://www.googleapis.com/auth/youtube",
+	"https://www.googleapis.com/auth/photoslibrary",
+	"https://www.googleapis.com/auth/contacts",
+	"https://www.googleapis.com/auth/drive.file",
+	"https://www.googleapis.com/auth/spreadsheets",
+	"https://www.googleapis.com/auth/presentations",
+	"https://www.googleapis.com/auth/webmasters",
+	"https://www.googleapis.com/auth/documents",
+	"https://www.googleapis.com/auth/analytics.readonly",
+	"https://www.googleapis.com/auth/gmail.modify",
+	"https://www.googleapis.com/auth/calendar.events"
+] as const;
+
+export type GoogleScope = (typeof GooglePossibleScopes)[number];
+
+export class GoogleAuthProvider implements OAuthProvider {
+	private scopes: string[] = [];
+	private settings: AuthProviderSettings;
+
+	constructor(scopes: GoogleScope[], settings?: AuthProviderSettings) {
+		if (!settings) {
+			throw new Error("GoogleAuthProvider: settings is required");
+		}
+
+		this.settings = settings;
+
+		const allScopes = [...scopes, ...GoogleMinimumScopes];
+		allScopes.forEach((scope) => this.addScope(scope));
+	}
+
+	get id(): OAuthProviderId {
+		return "google";
+	}
+
+	addScope(scope: string): void {
+		this.scopes.push(scope);
+	}
+
+	getScopes(): string[] {
+		return unique(this.scopes);
+	}
+
+	getAuthUrl(): string {
+		return "https://accounts.google.com/o/oauth2/v2/auth";
+	}
+
+	getResponseType(): "token" | "code" {
+		if (this.settings.oauthSettings?.hasClientSecret) {
+			return "code";
+		}
+		return "token";
+	}
+
+	getState(): string {
+		return "pass-through value";
+	}
+}
+
+export default GoogleAuthProvider;