diff --git a/scripts/backend-development/docker-compose.yaml b/scripts/backend-development/docker-compose.yaml index 65a65e73..0445cf34 100644 --- a/scripts/backend-development/docker-compose.yaml +++ b/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 diff --git a/scripts/frontend-development/docker-compose.yaml b/scripts/frontend-development/docker-compose.yaml index ef0f3489..e34c2d8f 100644 --- a/scripts/frontend-development/docker-compose.yaml +++ b/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 diff --git a/website/README.md b/website/README.md index 7d57ceaa..8b03043a 100644 --- a/website/README.md +++ b/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 diff --git a/website/src/components/Avatar.tsx b/website/src/components/Avatar.tsx index 26bdec0b..d5706946 100644 --- a/website/src/components/Avatar.tsx +++ b/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" > -
{email}
+{displayName}
{/* Will be changed to username once it is implemented */} diff --git a/website/src/pages/api/auth/[...nextauth].ts b/website/src/pages/api/auth/[...nextauth].ts index f823ed41..62767c98 100644 --- a/website/src/pages/api/auth/[...nextauth].ts +++ b/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), diff --git a/website/src/pages/auth/signup.tsx b/website/src/pages/auth/signup.tsx index 4afc3102..f6b58273 100644 --- a/website/src/pages/auth/signup.tsx +++ b/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 ( <> @@ -21,7 +27,18 @@ export default function Signin({ csrfToken, providers }) {