tweaks

.gitignore

@@ -137,3 +137,6 @@ out
 
 # Local Netlify folder
 .netlify
+
+
+local.config.json

backend/netlify/functions/github-auth.mts

@@ -1,15 +1,31 @@
 import type { Context } from "@netlify/functions";
+import { existsSync, readFileSync } from "fs";
+import { resolve } from 'path';
 
-const client_id = Netlify.env.get('GITHUB_CLIENT_ID');
-const client_secret = Netlify.env.get('GITHUB_CLIENT_SECRET');
-const redirectUrl = Netlify.env.get('GITHUB_REDIRECT_URL');
+const readLocalConfig = (path: string) => {
+	console.log(path);
+	return existsSync(path) ? JSON.parse(readFileSync(path)) : undefined;
+}
 
 export default async (req: Request, _context: Context) => {
 	const code = new URL(req.url).searchParams.get('code');
-
-	if (!code) {
-		return new Response("Missing authorization code", { status: 400 });
+	const config = Netlify.env.has('GITHUB_CLIENT_ID') ? {
+		client_id: Netlify.env.get('GITHUB_CLIENT_ID'),
+		client_secret: Netlify.env.get('GITHUB_CLIENT_SECRET'),
+		redirectUrl: Netlify.env.get('GITHUB_REDIRECT_URL')
+	} : readLocalConfig(resolve('local.config.json'));
+	if (!config) {
+		return new Response(JSON.stringify({
+			error: 'Invalid config'
+		}), {
+			status: 400,
+			headers: { 'Content-Type': 'application/json' }
+		});
 	}
+	const { client_id, client_secret, redirectUrl } = config;
+	console.log(client_id, client_secret, code);
+
+	if (!code) return new Response("Missing authorization code", { status: 400 });
 
 	const response = await fetch('https://github.com/login/oauth/access_token', {
 		method: 'POST',
@@ -31,7 +47,6 @@ export default async (req: Request, _context: Context) => {
 	const access_token = data.access_token;
 
 	if (access_token) {
-		// Redirect to the frontend with the token as a URL parameter, or handle it as preferred
 		const redirectWithToken = `${redirectUrl}?access_token=${access_token}`;
 		return new Response(null, {
 			status: 302,
@@ -40,4 +55,5 @@ export default async (req: Request, _context: Context) => {
 	} else {
 		return new Response("Failed to retrieve access token", { status: 500 });
 	}
-};
+};
+

backend/package.json

@@ -1 +1 @@
-{ "dependencies": { "@netlify/functions": "^2.8.2" } }
+{ "dependencies": { "@netlify/functions": "^2.8.2", "fs": "^0.0.1-security", "path": "^0.12.7" } }

backend/tsconfig.json

@@ -0,0 +1,27 @@
+{
+	"compilerOptions": {
+		"target": "ESNext",
+		"module": "ESNext",
+		"moduleResolution": "node",
+		"noEmitOnError": true,
+		"lib": [ "es2021", "dom", "DOM.Iterable" ],
+		"strict": true,
+		"esModuleInterop": false,
+		"allowSyntheticDefaultImports": true,
+		"experimentalDecorators": true,
+		"importHelpers": true,
+		"outDir": "./dist",
+		"sourceMap": true,
+		"inlineSources": true,
+		"rootDir": "./netlify/functions",
+		"declaration": true,
+		"incremental": true,
+		"skipLibCheck": true,
+		"useDefineForClassFields": false,
+		"resolveJsonModule": true,
+		"paths": {
+			"*": [ "./node_modules/*" ]
+		}
+	},
+	"include": [ "./netlify/functions/**/*.ts" ]
+}

playground/src/components/Sidebar.ts

@@ -6,6 +6,9 @@ import { Playground } from "./Playground";
 import { COMMON_STYLES } from './common-styles';
 
 @customElement('cmaj-sidebar') export class Sidebar extends LitElement {
+	githubAuth(e: any) {
+		window.open('https://github.com/login/oauth/authorize?client_id=Ov23li52ClmsCJFfVhqc', '_blank');
+	}
 	@property({ type: Boolean }) hideProjectPanel = false;
 	@property({ type: Object }) playground!: Playground;
 	static styles = css`
@@ -73,6 +76,10 @@ import { COMMON_STYLES } from './common-styles';
 			: html`<div class="logo"><img src="${new URL(logo, import.meta.url)}"><span>BETA</span></div>`}
 			<slot name="close"></slot>
 		</div>
+		<button @click=${e => this.githubAuth(e)}>
+			<ui-icon currentColors icon="github"></ui-icon>
+			Connect
+		</button>
 		${this.hideProjectPanel
 			? html`${this.playground.project?.modified ? html`<button @click=${() => this.playground.resetProject()}>Reset</button>` : ''}`
 			: html`<cmaj-projects .playground=${this.playground}></cmaj-projects>`}