created debug credentials provider

scripts/backend-development/docker-compose.yaml

@@ -9,6 +9,7 @@ services:
     environment:
       POSTGRES_USER: postgres
       POSTGRES_PASSWORD: postgres
+      POSTGRES_DB: postgres
     healthcheck:
       test: ["CMD", "pg_isready", "-U", "postgres"]
       interval: 2s

scripts/frontend-development/docker-compose.yaml

@@ -16,6 +16,7 @@ services:
     environment:
       POSTGRES_USER: postgres
       POSTGRES_PASSWORD: postgres
+      POSTGRES_DB: ocgpt_website
     healthcheck:
       test: ["CMD", "pg_isready", "-U", "postgres"]
       interval: 2s

website/README.md

@@ -63,6 +63,14 @@ If you're doing active development we suggest the following workflow:
     navigate to `http://localhost:1080`. Check the email listed and click the
     log in link. You're now logged in and authenticated.
 
+### Using debug user credentials
+
+If you want to quickly test the website, you can use the debug user credentials workflow:
+
+1. Run `DEBUG_FAKE_USERS=true npm run dev` to start the website.
+1. Use the `Login` button in the top right to go to the login page.
+1. You should see a section for debug credentials. Enter any username you wish, you will be logged in as that user.
+
 ## Code Layout
 
 ### React Code

website/package-lock.json

@@ -19,6 +19,7 @@
         "@tailwindcss/forms": "^0.5.3",
         "autoprefixer": "^10.4.13",
         "axios": "^1.2.1",
+        "boolean": "^3.2.0",
         "clsx": "^1.2.1",
         "eslint": "8.29.0",
         "eslint-config-next": "13.0.6",
@@ -2747,6 +2748,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/boolean": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.2.0.tgz",
+      "integrity": "sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw=="
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -8261,6 +8267,11 @@
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
     },
+    "boolean": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.2.0.tgz",
+      "integrity": "sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

website/package.json

@@ -21,6 +21,7 @@
     "@tailwindcss/forms": "^0.5.3",
     "autoprefixer": "^10.4.13",
     "axios": "^1.2.1",
+    "boolean": "^3.2.0",
     "clsx": "^1.2.1",
     "eslint": "8.29.0",
     "eslint-config-next": "13.0.6",

website/src/components/Avatar.tsx

@@ -12,7 +12,8 @@ export function Avatar() {
     return <></>;
   }
   if (session && session.user) {
-    const email = session.user.email;
+    console.log(session.user);
+    const displayName = session.user.name || session.user.email;
     const accountOptions = [
       {
         name: "Account Settings",
@@ -35,7 +36,7 @@ export function Avatar() {
                   height="40"
                   className="rounded-full"
                 ></Image>
-                <p className="hidden lg:flex">{email}</p>
+                <p className="hidden lg:flex">{displayName}</p>
                 {/* Will be changed to username once it is implemented */}
               </div>
             </Popover.Button>

website/src/pages/api/auth/[...nextauth].ts

@@ -2,8 +2,10 @@ import type { AuthOptions } from "next-auth";
 import NextAuth from "next-auth";
 import DiscordProvider from "next-auth/providers/discord";
 import EmailProvider from "next-auth/providers/email";
+import CredentialsProvider from "next-auth/providers/credentials";
 import { PrismaAdapter } from "@next-auth/prisma-adapter";
 
+import { boolean } from "boolean";
 import prisma from "src/lib/prismadb";
 
 const providers = [];
@@ -32,6 +34,23 @@ if (process.env.DISCORD_CLIENT_ID) {
   );
 }
 
+if (boolean(process.env.DEBUG_FAKE_USERS)) {
+  providers.push(
+    CredentialsProvider({
+      name: "Debug Credentials",
+      credentials: {
+        username: { label: "Username", type: "text" },
+      },
+      async authorize(credentials) {
+        return {
+          id: credentials.username,
+          name: credentials.username,
+        };
+      },
+    })
+  );
+}
+
 export const authOptions: AuthOptions = {
   // Ensure we can store user data in a database.
   adapter: PrismaAdapter(prisma),

website/src/pages/auth/signup.tsx

@@ -1,6 +1,6 @@
 import { Button, Input, Stack } from "@chakra-ui/react";
 import Head from "next/head";
-import { FaDiscord, FaEnvelope, FaGithub } from "react-icons/fa";
+import { FaDiscord, FaEnvelope, FaBug, FaGithub } from "react-icons/fa";
 import { getCsrfToken, getProviders, signIn } from "next-auth/react";
 import { useRef } from "react";
 import Link from "next/link";
@@ -8,12 +8,18 @@ import Link from "next/link";
 import { AuthLayout } from "src/components/AuthLayout";
 
 export default function Signin({ csrfToken, providers }) {
-  const { discord, email, github } = providers;
+  const { discord, email, github, credentials } = providers;
   const emailEl = useRef(null);
   const signinWithEmail = () => {
     signIn(email.id, { callbackUrl: "/", email: emailEl.current.value });
   };
 
+  const debugUsernameEl = useRef(null);
+  function signinWithDebugCredentials(ev: React.FormEvent) {
+    ev.preventDefault();
+    signIn(credentials.id, { callbackUrl: "/", username: debugUsernameEl.current.value });
+  }
+
   return (
     <>
       <Head>
@@ -21,7 +27,18 @@ export default function Signin({ csrfToken, providers }) {
         <meta name="Sign Up" content="Sign up to access Open Assistant" />
       </Head>
       <AuthLayout>
-        <Stack spacing="2">
+        <Stack spacing="6">
+          {credentials && (
+            <form onSubmit={signinWithDebugCredentials} className="border-2 border-orange-200 rounded-md p-4 relative">
+              <span className="text-orange-600 absolute -top-3 left-5 bg-white px-1">For Debugging Only</span>
+              <Stack>
+                <Input variant="outline" size="lg" placeholder="Username" ref={debugUsernameEl} />
+                <Button size={"lg"} leftIcon={<FaBug />} colorScheme="gray" type="submit">
+                  Continue with Debug User
+                </Button>
+              </Stack>
+            </form>
+          )}
           {email && (
             <Stack>
               <Input variant="outline" size="lg" placeholder="Email Address" ref={emailEl} />