feat: auth

backend/docker-compose.yml

@@ -0,0 +1,21 @@
+version: "3.8"
+services:
+  querymaker-server-db:
+    container_name: querymaker-local-db
+    networks:
+      - querymaker-server
+    image: postgres:14.1-alpine
+    restart: always
+    environment:
+      - POSTGRES_DB=querymaker_local
+      - POSTGRES_USER=postgres
+      - POSTGRES_PASSWORD=postgres
+    ports:
+      - "5435:5432"
+    volumes:
+      - querymaker-server-db:/var/lib/postgresql/querymaker-server-db/data
+volumes:
+  querymaker-server-db:
+    driver: local
+networks:
+  querymaker-server: # spins up querymaker-server which local server can connect to

frontend/.env.example

@@ -1 +1,4 @@
-OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+NEXTAUTH_SECRET=

frontend/package.json

@@ -6,7 +6,14 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "migrate:dev": "npx dotenv -e .env.local -- prisma migrate dev",
+    "db:push": "npx dotenv -e .env.local -- prisma db push",
+    "migrate:reset": "npx dotenv -e .env.local -- prisma migrate reset",
+    "db:seed": "npx dotenv -e .env.local -- prisma db seed",
+    "prisma:generate": "npx dotenv -e .env.local -- prisma generate",
+    "prisma:studio": "npx dotenv -e .env.local -- prisma studio",
+    "production:build": "npx prisma generate && npx prisma migrate deploy && next build"
   },
   "dependencies": {
     "@chakra-ui/icons": "^2.0.18",
@@ -17,6 +24,9 @@
     "@headlessui/react": "^1.7.14",
     "@heroicons/react": "^2.0.17",
     "@monaco-editor/react": "^4.5.0",
+    "@next-auth/prisma-adapter": "^1.0.6",
+    "@next/font": "^13.4.1",
+    "@prisma/client": "^4.14.0",
     "@reduxjs/toolkit": "^1.9.5",
     "@tanstack/react-query": "^4.29.3",
     "@types/uuid": "^9.0.1",
@@ -26,6 +36,7 @@
     "localforage": "^1.10.0",
     "monaco-editor": "^0.37.1",
     "next": "13.3.0",
+    "next-auth": "^4.22.1",
     "openai": "^3.2.1",
     "pg": "^8.10.0",
     "react": "18.2.0",
@@ -48,13 +59,18 @@
     "@types/uuid": "^9.0.1",
     "@typescript-eslint/eslint-plugin": "^5.53.0",
     "@typescript-eslint/parser": "^5.53.0",
+    "dotenv-cli": "^7.2.1",
     "eslint": "8.34.0",
     "eslint-config-next": "13.1.6",
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-typescript": "^3.5.3",
     "eslint-plugin-import": "^2.27.5",
     "lint-staged": "^13.1.2",
-    "prettier": "^2.8.7"
+    "prettier": "^2.8.7",
+    "prisma": "^4.14.0"
+  },
+  "prisma": {
+    "schema": "src/lib/prisma/schema.prisma"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [

frontend/src/components/common/APIKeyInput.tsx

@@ -1,6 +1,8 @@
 import { useAppDispatch, useAppSelector } from "@/hooks/reduxHooks";
 import { updateConfig } from "@/redux/slices/config/configSlice";
 import { selectOpenAIKey } from "@/redux/slices/config/configSliceSelector";
+import { SHOW_OPEN_AI_KEY_MODAL } from "@/storage/keys";
+import { localForageStore } from "@/storage/storage-provider";
 import {
   Button,
   HStack,
@@ -12,8 +14,6 @@ import {
 import { FC, useEffect, useState } from "react";
 import { IoIosEye, IoIosEyeOff } from "react-icons/io";
 import { TimeoutText } from "../common/TimeoutText";
-import { localForageStore } from "@/storage/storage-provider";
-import { SHOW_OPEN_AI_KEY_MODAL } from "@/storage/keys";
 import { BasicButton } from "./BasicButton";
 
 type APIKeyInputProps = {
@@ -81,19 +81,19 @@ export const APIKeyInput: FC<APIKeyInputProps> = ({ onSave }) => {
         bg={"purple.500"}
         color={"white"}
         _hover={{
-          bg: "purple.100",
+          bg: "purple.300",
           cursor: "pointer",
         }}
         _active={{
-          bg: "purple.100",
+          bg: "purple.300",
           cursor: "pointer",
         }}
         _focus={{
-          bg: "purple.100",
+          bg: "purple.300",
           cursor: "pointer",
         }}
         _disabled={{
-          bg: "purple.100",
+          bg: "purple.300",
         }}
         onClick={handleSave}
       >

frontend/src/components/common/QueryPanel.tsx

@@ -520,19 +520,19 @@ export const QueryPanel: FC<QueryPanelProps> = ({ id }) => {
                   display="flex"
                   w={32}
                   _hover={{
-                    bg: "purple.100",
+                    bg: "purple.300",
                     cursor: "pointer",
                   }}
                   _active={{
-                    bg: "purple.100",
+                    bg: "purple.300",
                     cursor: "pointer",
                   }}
                   _focus={{
-                    bg: "purple.100",
+                    bg: "purple.300",
                     cursor: "pointer",
                   }}
                   _disabled={{
-                    bg: "purple.100",
+                    bg: "purple.300",
                   }}
                   isLoading={isLoadingGenerateCommand}
                   isDisabled={generateCommandIsDisabled}
@@ -578,19 +578,19 @@ export const QueryPanel: FC<QueryPanelProps> = ({ id }) => {
                 display="flex"
                 w={32}
                 _hover={{
-                  bg: "purple.100",
+                  bg: "purple.300",
                   cursor: "pointer",
                 }}
                 _active={{
-                  bg: "purple.100",
+                  bg: "purple.300",
                   cursor: "pointer",
                 }}
                 _focus={{
-                  bg: "purple.100",
+                  bg: "purple.300",
                   cursor: "pointer",
                 }}
                 _disabled={{
-                  bg: "purple.100",
+                  bg: "purple.300",
                 }}
                 isDisabled={executeCommandIsDisabled}
                 spinner={<Spinner size="sm" />}
@@ -763,19 +763,19 @@ export const QueryPanel: FC<QueryPanelProps> = ({ id }) => {
                     display="flex"
                     w={32}
                     _hover={{
-                      bg: "purple.100",
+                      bg: "purple.300",
                       cursor: "pointer",
                     }}
                     _active={{
-                      bg: "purple.100",
+                      bg: "purple.300",
                       cursor: "pointer",
                     }}
                     _focus={{
-                      bg: "purple.100",
+                      bg: "purple.300",
                       cursor: "pointer",
                     }}
                     _disabled={{
-                      bg: "purple.100",
+                      bg: "purple.300",
                     }}
                     isLoading={isLoadingGenerateChart}
                     isDisabled={runChartGenerateIsDisabled}

frontend/src/components/common/SettingsModal.tsx

@@ -0,0 +1,78 @@
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import { signOut } from "next-auth/react";
+import { FC } from "react";
+import { APIKeyInput } from "./APIKeyInput";
+
+type SettingModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const SettingsModal: FC<SettingModalProps> = ({ isOpen, onClose }) => {
+  const handleSave = () => {
+    onClose();
+  };
+  const handleSignOut = async () => {
+    await signOut({
+      callbackUrl: "/",
+    });
+  };
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} isCentered size="2xl">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Input your OpenAI Key</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <VStack spacing={8}>
+            <VStack
+              w="100%"
+              minH="48"
+              h="100%"
+              justifyContent={"center"}
+              display="flex"
+              spacing={4}
+            >
+              <APIKeyInput onSave={handleSave} />
+              <Text textAlign="center">
+                We do not upload, log, or store your API key outside of your
+                browser storage.{" "}
+              </Text>
+            </VStack>
+            <Button
+              aria-label="Edit datasource"
+              variant="unstyled"
+              color={"red.500"}
+              fontSize={"xs"}
+              border={"1px solid"}
+              borderColor={"red.500"}
+              _hover={{
+                bg: "red.50",
+              }}
+              display="flex"
+              px={2}
+              py={0}
+              borderRadius={1}
+              onClick={handleSignOut}
+              w={60}
+            >
+              Sign out
+            </Button>
+          </VStack>
+        </ModalBody>
+        <ModalFooter></ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/components/datasource/DatasourceInputModal.tsx

@@ -1,6 +1,10 @@
 import { useCheckConnection } from "@/hooks/mutations/useCheckConnection";
 import { useAppDispatch } from "@/hooks/reduxHooks";
 import { upsertDatasource } from "@/redux/slices/datasource/datasourceSlice";
+import {
+  DatasourceType,
+  PGConnectionConfig,
+} from "@/types/redux/slices/datasource";
 import {
   Box,
   FormControl,
@@ -27,10 +31,6 @@ import { v4 as uuidv4 } from "uuid";
 import { BasicButton } from "../common/BasicButton";
 import { BasicLinkButton } from "../common/BasicLinkButton";
 import { BasicInput } from "../common/Input";
-import {
-  DatasourceType,
-  PGConnectionConfig,
-} from "@/types/redux/slices/datasource";
 
 type AddDatasourceModalProps = {
   isOpen: boolean;
@@ -312,15 +312,15 @@ export const DatasourceInputModal: FC<AddDatasourceModalProps> = ({
                   bg={"purple.500"}
                   color={"white"}
                   _hover={{
-                    bg: "purple.100",
+                    bg: "purple.300",
                     cursor: "pointer",
                   }}
                   _active={{
-                    bg: "purple.100",
+                    bg: "purple.300",
                     cursor: "pointer",
                   }}
                   _focus={{
-                    bg: "purple.100",
+                    bg: "purple.300",
                     cursor: "pointer",
                   }}
                   type="submit"