Implement OAuth

Author: adb-sh

src/components/LoginForm.tsx

@@ -1,11 +1,15 @@
-import { useNavigate, useSubmission } from "@solidjs/router";
+import {
+  redirect,
+  RouteDefinition,
+  useNavigate,
+  useSubmission,
+} from "@solidjs/router";
 import { createSignal, Show } from "solid-js";
 import { login, register } from "~/lib";
 import { ExclamationCircleIcon } from "@deploy-cat/heroicons-solid/24/solid/esm";
 import { signIn, createSession } from "@solid-mediakit/auth/client";
 
 export const LoginForm = () => {
-  const session = createSession();
   const loginStatus = useSubmission(login);
   const registerStatus = useSubmission(register);
 
@@ -177,7 +181,12 @@ export const LoginForm = () => {
       <div class="divider">OR</div>
       <button
         class="btn btn-secondary w-full"
-        onClick={() => signIn("github", { redirectTo: "/cloud" })}
+        onClick={() =>
+          signIn("github").then(() => {
+            console.log("login");
+            // throw redirect("/user");
+          })
+        }
       >
         Sign in with GitHub
       </button>

src/components/ModalWrapper.tsx

@@ -1,6 +1,6 @@
 import { createServerAction$, redirect } from "solid-start/server";
-import { k8sCustomObjects } from "~/k8s";
-import { knative } from "~/k8s";
+import { k8sCustomObjects } from "~/lib/k8s";
+import { knative } from "~/lib/k8s";
 import { JSXElement, Show } from "solid-js";
 import { createStore } from "solid-js/store";
 

src/components/Protected.tsx

@@ -2,7 +2,7 @@ import { Component, Show } from "solid-js";
 import { useSupabase } from "solid-supabase";
 import { useNavigate } from "@solidjs/router";
 import { createAsync, cache } from "@solidjs/router";
-import { k8sCore } from "~/k8s";
+import { k8sCore } from "~/lib/k8s";
 import { User } from "@supabase/supabase-js";
 
 // const Protected = (Comp: IProtectedComponent) => {

src/components/RegisterServerAction.tsx

@@ -1,6 +1,6 @@
 import { createServerAction$, redirect } from "solid-start/server";
-import { k8sCustomObjects } from "~/k8s";
-import { knative } from "~/k8s";
+import { k8sCustomObjects } from "~/lib/k8s";
+import { knative } from "~/lib/k8s";
 import { JSXElement, Show } from "solid-js";
 import { createStore } from "solid-js/store";
 

src/components/cloud/CreateServiceForm.tsx

@@ -1,12 +1,12 @@
 import { Show } from "solid-js";
 import { action, redirect, useSubmission } from "@solidjs/router";
-import { knative } from "~/k8s";
+import { knative } from "~/lib/k8s";
 import { EnvVarsInput } from "../EnvVarsInput";
 import { ScalingInput } from "../ScalingInput";
 import { ResourcesInput } from "../ResourcesInput";
-import { getUser } from "~/lib/server";
-import type { Service } from "~/knative";
-import { toNumber } from "~/knative";
+import { getUser } from "~/lib/auth";
+import type { Service } from "~/lib/knative";
+import { toNumber } from "~/lib/knative";
 
 const createServiceFromForm = async (form: FormData) => {
   "use server";
@@ -25,7 +25,7 @@ const createServiceFromForm = async (form: FormData) => {
     envVars: JSON.parse(form.get("env") as string) as { [key: string]: string },
   } as Service;
   const user = await getUser();
-  await knative.createService(service, user.username);
+  await knative.createService(service, user.name);
 };
 
 const createServiceAction = action(createServiceFromForm, "createService");

src/components/cloud/service/Service.tsx

@@ -1,18 +1,18 @@
 import { For, Show } from "solid-js";
 import { Status } from "./Status";
-import { knative } from "~/k8s";
+import { knative } from "~/lib/k8s";
 import { TrashIcon } from "@deploy-cat/heroicons-solid/24/solid/esm";
-import { getUser } from "~/lib/server";
+import { getUser } from "~/lib/auth";
 import { action, useSubmission, A } from "@solidjs/router";
-import type { Service as KnativeService } from "~/knative";
+import type { Service as KnativeService } from "~/lib/knative";
 
 const deleteServiceFromForm = async (form: FormData) => {
   "use server";
   const service = {
     name: form.get("name") as string,
   };
   const user = await getUser();
-  await knative.deleteService(service.name, user.username);
+  await knative.deleteService(service.name, user.name);
 };
 
 const deleteServiceAction = action(deleteServiceFromForm, "createService");

src/components/cloud/service/TrafficChart.tsx

@@ -1,6 +1,6 @@
 import { clientOnly } from "@solidjs/start";
-import { knative } from "~/k8s";
-import { getUser } from "~/lib/server";
+import { knative } from "~/lib/k8s";
+import { getUser } from "~/lib/auth";
 import { rangeQuery } from "~/lib/prometheus";
 import { cache, createAsync } from "@solidjs/router";
 import { graphic } from "echarts";
@@ -11,9 +11,9 @@ const getData = cache(async (app: string) => {
   "use server";
 
   const user = await getUser();
-  const service = await knative.getService(app, user.username);
+  const service = await knative.getService(app, user.name);
 
-  const namespace = user.username;
+  const namespace = user.name;
   const revision = service.raw.status.latestReadyRevisionName;
 
   const end = new Date();

src/composables/solidauth.ts

@@ -1,6 +1,6 @@
 import { getSession } from "@solid-auth/base";
 import { createServerData$ } from "solid-start/server";
-import { authOptions } from "~/server/auth";
+import { authOptions } from "~/lib/auth";
 
 export const useSession = () =>
   createServerData$(

src/lib/auth.ts

@@ -0,0 +1,58 @@
+import { auth, getSession, type SolidAuthConfig } from "@solid-mediakit/auth";
+import GitHub from "@auth/core/providers/github";
+import { config } from "~/lib/config";
+import type { Provider } from "@auth/core/providers";
+import { getWebRequest } from "vinxi/http";
+import { redirect } from "@solidjs/router";
+import { z } from "zod";
+
+declare module "@auth/core/types" {
+  export interface Session {
+    user?: DefaultSession["user"];
+  }
+}
+
+const providers = [] as Array<Provider>;
+
+if (config?.oauth.github) {
+  const github = GitHub({
+    clientId: config.oauth.github.id,
+    clientSecret: config.oauth.github.secret,
+  });
+
+  github.profile = (profile) => {
+    return {
+      id: profile.id.toString(),
+      name: profile.login,
+      // name: `gh-${profile.login}`,
+      email: profile.email,
+      image: profile.avatar_url,
+    };
+  };
+  providers.push(github);
+}
+
+export const authOptions: SolidAuthConfig = {
+  providers,
+  debug: false,
+  trustHost: true,
+  basePath: "/api/auth",
+};
+
+const schemaUser = z.object({
+  name: z.string(),
+  id: z.string().optional(),
+  email: z.string().optional(),
+  image: z.string().optional(),
+});
+
+export const getUser = async () => {
+  "use server";
+  const request = getWebRequest();
+  const session = await getSession(request, authOptions);
+  try {
+    return schemaUser.parse(session?.user);
+  } catch (e) {
+    throw redirect("/");
+  }
+};

src/lib/config.ts

@@ -2,6 +2,7 @@ import { z } from "zod";
 import fs from "fs/promises";
 import merge from "deepmerge";
 import { isServer } from "solid-js/web";
+import x from "../../dist/public/assets/user-bdc93350";
 
 const configPath = process.cwd?.() && `${process.cwd()}/config.json`;
 
@@ -19,24 +20,34 @@ const schemaConfig = z.object({
   prometheus: z.object({
     url: z.string(),
   }),
+  oauth: z.object({
+    github: z
+      .object({
+        id: z.string(),
+        secret: z.string(),
+      })
+      .optional(),
+  }),
 });
 
 const parseEnv = ({ prefix = "", envs = process.env ?? {} } = {}) => {
   const parsed = {} as any;
-  Object.entries(envs).forEach(([key, value]) => {
-    const seq = (obj: any, arr: Array<string>, v: string | undefined) => {
-      if (typeof obj === "string") return;
-      if (arr.length > 1) {
-        const [pos] = arr.splice(0, 1);
-        if (!obj[pos]) obj[pos] = {};
-        seq(obj[pos], arr, v);
-      } else {
-        obj[arr[0]] = v;
-      }
-    };
-    const keyArr = key.split("_").map((e) => e.toLocaleLowerCase());
-    seq(parsed, keyArr, value);
-  });
+  Object.entries(envs)
+    .filter(([key]) => key?.startsWith(prefix.toUpperCase()))
+    .forEach(([key, value]) => {
+      const seq = (obj: any, arr: Array<string>, v: string | undefined) => {
+        if (typeof obj === "string") return;
+        if (arr.length > 1) {
+          const [pos] = arr.splice(0, 1);
+          if (!obj[pos]) obj[pos] = {};
+          seq(obj[pos], arr, v);
+        } else {
+          obj[arr[0]] = v;
+        }
+      };
+      const keyArr = key.split("_").map((e) => e.toLocaleLowerCase());
+      seq(parsed, keyArr, value);
+    });
   return prefix !== "" ? parsed?.[prefix] ?? {} : parsed;
 };
 
@@ -56,4 +67,4 @@ const getConfig = async () => {
   return config;
 };
 
-export const config = isServer ? schemaConfig.parse(await getConfig()) : {};
+export const config = isServer ? schemaConfig.parse(await getConfig()) : null;