Merge pull request #68 from LAION-AI/66-create-a-set-of-fake-default-users-for-the-website

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
+
+Whenever the website runs in development mode, you can use the debug credentials provider to log in without fancy emails or OAuth.
+
+1. Development mode is automatically active when you start the website with `npm run dev`.
+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/src/components/Avatar.tsx

@@ -12,7 +12,7 @@ export function Avatar() {
     return <></>;
   }
   if (session && session.user) {
-    const email = session.user.email;
+    const displayName = session.user.name || session.user.email;
     const accountOptions = [
       {
         name: "Account Settings",
@@ -35,7 +35,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,6 +2,7 @@ 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 prisma from "src/lib/prismadb";
@@ -32,6 +33,23 @@ if (process.env.DISCORD_CLIENT_ID) {
   );
 }
 
+if (process.env.NODE_ENV === "development") {
+  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} />