Merge pull request #27 from agentlabs-inc/feat/members-oauth

Feat/members oauth

Author: kevinpiac

.env.example

@@ -41,6 +41,10 @@ EMAIL_SENDER_NAME=
 USERS_OAUTH_GOOGLE_CLIENT_ID=
 USERS_OAUTH_GOOGLE_CLIENT_ID=
 
+# You don't want to touch that if you don't work at AgentLabs.
+MEMBERS_DEMO_OAUTH_GOOGLE_CLIENT_ID=
+MEMBERS_DEMO_OAUTH_GOOGLE_CLIENT_SECRET=
+
 # ----------------------
 # - Image configuration -
 # Unless you really know what you are doing you most likely do not want to

console/src/lib/components/common/multi-select/MultiSelect.svelte

@@ -2,13 +2,16 @@
 	import type { MultiSelectItem } from "$lib/components/common/multi-select/types";
 	import { Icon } from "svelte-hero-icons";
 	import { createEventDispatcher } from "svelte";
+	import Typography from "$lib/components/common/typography/Typography.svelte";
 
 	const dispatch = createEventDispatcher<{ change: MultiSelectItem[] }>();
 	export let items: MultiSelectItem[] = [];
 
 	let selectedItems: Record<string, MultiSelectItem> = {};
 
 	const handleSelect = (item: MultiSelectItem) => {
+		if (item.disabled) return;
+
 		if (selectedItems[item.id]) {
 			delete selectedItems[item.id];
 			selectedItems = { ...selectedItems };
@@ -26,7 +29,9 @@
 		<button
 			id={item.id}
 			on:click={() => handleSelect(item)}
-			class="antialiased border rounded-md p-3 border-stroke-base dark:border-stroke-base-dark flex items-center justify-left gap-3 text-body-base dark:text-body-base-dark hover:bg-background-accent dark:hover:bg-background-accent-dark cursor-pointer {selectedItems[
+			class="{item.disabled
+				? 'opacity-60 bg-background-accent dark:bg-background-accent-dark'
+				: ''} antialiased border rounded-md p-3 border-stroke-base dark:border-stroke-base-dark flex items-center justify-left gap-3 text-body-base dark:text-body-base-dark hover:bg-background-accent dark:hover:bg-background-accent-dark cursor-pointer {selectedItems[
 				item.id
 			]
 				? 'border border-stroke-info dark:border-stroke-info-dark'
@@ -44,6 +49,9 @@
 				</div>
 			{/if}
 			<span>{item.label}</span>
+			{#if item.disabledLabel}
+				<Typography type="label">{item.disabledLabel}</Typography>
+			{/if}
 		</button>
 	{/each}
 </div>

console/src/lib/usecases/projects/initProjectAuthMethod.ts

@@ -1,5 +1,5 @@
-import { AuthMethodsService } from "$lib/services/gen-api";
 import type { MultiSelectItem } from "$lib/components/common/multi-select/types";
+import { AuthMethodsService } from "$lib/services/gen-api";
 
 export const initProjectAuthMethods = async (
 	projectId: string,
@@ -11,7 +11,7 @@ export const initProjectAuthMethods = async (
 			projectId,
 			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 			// @ts-ignore
-			methodTypes: ["PASSWORDLESS_EMAIL"]
+			methods: methods.map((m) => m.value)
 		}
 	});
 

console/src/lib/utils/unique.ts

@@ -1,4 +1,4 @@
 export const unique = <T>(arr: T[]): T[] => {
-    const set = new Set(arr);
-    return Array.from(set);
+	const set = new Set(arr);
+	return Array.from(set);
 };

console/src/routes/onboarding/project/[projectId]/auth/+page.svelte

@@ -23,40 +23,38 @@
 		{
 			id: "passwordless-email",
 			label: "Passwordless email",
-			value: "passwordless-email",
+			value: "PASSWORDLESS_EMAIL",
 			heroIcon: Envelope
 		},
 		{
 			id: "google",
 			label: "Google / Gmail",
-			value: "google",
-			customIcon: GoogleIcon,
-			disabled: true,
-			disabledLabel: "Coming soon"
+			value: "GOOGLE",
+			customIcon: GoogleIcon
 		},
 		{
 			id: "github",
 			label: "Github",
 			value: "github",
 			customIcon: GithubIcon,
 			disabled: true,
-			disabledLabel: "Coming soon"
+			disabledLabel: "soon"
 		},
 		{
 			id: "gitlab",
 			label: "Gitlab",
 			value: "gitlab",
 			customIcon: GitlabIcon,
 			disabled: true,
-			disabledLabel: "Coming soon"
+			disabledLabel: "soon"
 		},
 		{
 			id: "microsoft",
-			label: "Microsoft / Outlook",
+			label: "Microsoft",
 			value: "microsoft",
 			customIcon: MicrosoftIcon,
 			disabled: true,
-			disabledLabel: "Coming soon"
+			disabledLabel: "soon"
 		}
 	];
 

console/src/routes/types.ts

@@ -1,4 +1,4 @@
-export const SignInMethods = ["passwordless-email", "google", "github", "gitlab"] as const;
+export const SignInMethods = ["PASSWORDLESS_EMAIL", "GOOGLE"] as const;
 export type SignInMethod = (typeof SignInMethods)[number];
 
 export type MainLayoutContext = {

docker-compose.dev.yml

@@ -50,6 +50,8 @@ services:
       - EMAIL_SENDER_NAME=${EMAIL_SENDER_NAME}
       - USERS_OAUTH_GOOGLE_CLIENT_ID=${USERS_OAUTH_GOOGLE_CLIENT_ID}
       - USERS_OAUTH_GOOGLE_CLIENT_SECRET=${USERS_OAUTH_GOOGLE_CLIENT_SECRET}
+      - MEMBERS_DEMO_OAUTH_GOOGLE_CLIENT_ID=${MEMBERS_DEMO_OAUTH_GOOGLE_CLIENT_ID}
+      - MEMBERS_DEMO_OAUTH_GOOGLE_CLIENT_SECRET=${MEMBERS_DEMO_OAUTH_GOOGLE_CLIENT_SECRET}
     ports:
       - ${DEV_SERVER_PORT}:3000
     restart: unless-stopped

frontend/package-lock.json

@@ -39,6 +39,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-storybook": "^0.6.13",
     "eslint-plugin-svelte": "^2.30.0",
+    "localstorage-slim": "^2.6.0",
     "marked": "^9.0.3",
     "postcss": "^8.4.29",
     "prettier": "^2.8.0",

frontend/package.json

@@ -1,72 +1,33 @@
 <script lang="ts">
 	import Button from "$lib/components/common/button/Button.svelte";
 	import type { AuthProvider } from "$lib/components/auth/types";
+	import { AuthProviderNameMap } from "$lib/components/auth/types";
 	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";
+	import type { PublicAuthMethodDto } from "$lib/services/gen-api";
+	import { initSignInWithRedirect } from "$lib/usecases/members/initSignInWithRedirect";
+	import { mainContextStore } from "$lib/stores/main-context";
 
 	export let provider: AuthProvider;
 
+	export let authMethod: PublicAuthMethodDto;
+
 	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: {
-					hasClientSecret: false,
-					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([])),
-		github: () => signInWithRedirect(auth, new GithubAuthProvider([]))
+		GOOGLE: GoogleIcon,
+		GITLAB: GitlabIcon,
+		GITHUB: GithubIcon
 	};
 
 	const handleLogin = () => {
-		console.log(auth.getOAuthSignInMethods().google);
-
 		providerCurrentlyLoading = provider;
 
-		providerHandlerMap[provider]();
+		initSignInWithRedirect(authMethod, $mainContextStore?.publicProjectConfig?.id);
 	};
 </script>
 
@@ -77,6 +38,6 @@
 	disabled={providerCurrentlyLoading === provider}>
 	<div class="flex items-center gap-5">
 		<svelte:component this={providerIconMap[provider]} />
-		<span>Continue with {providerNameMap[provider]}</span>
+		<span>Continue with {AuthProviderNameMap[provider]}</span>
 	</div>
 </Button>

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

@@ -1,2 +1,8 @@
-export const AuthProviders = ["google", "github", "gitlab"] as const;
+export const AuthProviders = ["GOOGLE", "GITHUB", "GITLAB"] as const;
 export type AuthProvider = (typeof AuthProviders)[number];
+
+export const AuthProviderNameMap: Record<AuthProvider, string> = {
+	GOOGLE: "Google",
+	GITHUB: "GitHub",
+	GITLAB: "GitLab"
+} as const;