From 5125e840554aba3fcea70b9b9f724dc8489fd484 Mon Sep 17 00:00:00 2001 From: Yannic Kilcher Date: Mon, 26 Dec 2022 16:13:43 +0100 Subject: [PATCH 1/5] created debug credentials provider --- .../backend-development/docker-compose.yaml | 1 + .../frontend-development/docker-compose.yaml | 1 + website/README.md | 8 +++++++ website/package-lock.json | 11 +++++++++ website/package.json | 1 + website/src/components/Avatar.tsx | 5 ++-- website/src/pages/api/auth/[...nextauth].ts | 19 +++++++++++++++ website/src/pages/auth/signup.tsx | 23 ++++++++++++++++--- 8 files changed, 64 insertions(+), 5 deletions(-) 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..2b84679c 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 + +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 diff --git a/website/package-lock.json b/website/package-lock.json index 45063104..7ad30068 100644 --- a/website/package-lock.json +++ b/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", diff --git a/website/package.json b/website/package.json index bfec87c7..2c2e6d29 100644 --- a/website/package.json +++ b/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", diff --git a/website/src/components/Avatar.tsx b/website/src/components/Avatar.tsx index 26bdec0b..ca3b307b 100644 --- a/website/src/components/Avatar.tsx +++ b/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" > -

{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..0ed0f1a1 100644 --- a/website/src/pages/api/auth/[...nextauth].ts +++ b/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), 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 }) { - + + {credentials && ( +
+ For Debugging Only + + + + +
+ )} {email && ( From 78ab698ca99dc453eb81c39dcf17c3a96b0430a4 Mon Sep 17 00:00:00 2001 From: Yannic Kilcher Date: Mon, 26 Dec 2022 17:49:21 +0100 Subject: [PATCH 2/5] Update website/src/components/Avatar.tsx Co-authored-by: Ville Lahdenvuo --- website/src/components/Avatar.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/website/src/components/Avatar.tsx b/website/src/components/Avatar.tsx index ca3b307b..d5706946 100644 --- a/website/src/components/Avatar.tsx +++ b/website/src/components/Avatar.tsx @@ -12,7 +12,6 @@ export function Avatar() { return <>; } if (session && session.user) { - console.log(session.user); const displayName = session.user.name || session.user.email; const accountOptions = [ { From d9dec84818555ad001ac84122ec6955331e0855b Mon Sep 17 00:00:00 2001 From: Yannic Kilcher Date: Tue, 27 Dec 2022 00:14:50 +0100 Subject: [PATCH 3/5] using debug credentials provider whenever development mode is active --- website/README.md | 4 ++-- website/src/pages/api/auth/[...nextauth].ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/website/README.md b/website/README.md index 2b84679c..8b03043a 100644 --- a/website/README.md +++ b/website/README.md @@ -65,9 +65,9 @@ If you're doing active development we suggest the following workflow: ### Using debug user credentials -If you want to quickly test the website, you can use the debug user credentials workflow: +Whenever the website runs in development mode, you can use the debug credentials provider to log in without fancy emails or OAuth. -1. Run `DEBUG_FAKE_USERS=true npm run dev` to start the website. +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. diff --git a/website/src/pages/api/auth/[...nextauth].ts b/website/src/pages/api/auth/[...nextauth].ts index 0ed0f1a1..fbd0b3d9 100644 --- a/website/src/pages/api/auth/[...nextauth].ts +++ b/website/src/pages/api/auth/[...nextauth].ts @@ -34,7 +34,7 @@ if (process.env.DISCORD_CLIENT_ID) { ); } -if (boolean(process.env.DEBUG_FAKE_USERS)) { +if (boolean(process.env.NODE_ENV === "development")) { providers.push( CredentialsProvider({ name: "Debug Credentials", From 2a814b5b0b766b17ad7f8309625a90d006a00d82 Mon Sep 17 00:00:00 2001 From: Yannic Kilcher Date: Tue, 27 Dec 2022 13:57:55 +0100 Subject: [PATCH 4/5] Update website/src/pages/api/auth/[...nextauth].ts Co-authored-by: Ville Lahdenvuo --- website/src/pages/api/auth/[...nextauth].ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/src/pages/api/auth/[...nextauth].ts b/website/src/pages/api/auth/[...nextauth].ts index fbd0b3d9..2cfe08df 100644 --- a/website/src/pages/api/auth/[...nextauth].ts +++ b/website/src/pages/api/auth/[...nextauth].ts @@ -34,7 +34,7 @@ if (process.env.DISCORD_CLIENT_ID) { ); } -if (boolean(process.env.NODE_ENV === "development")) { +if (process.env.NODE_ENV === "development") { providers.push( CredentialsProvider({ name: "Debug Credentials", From d8a5937b9ac823449851aac295164b7eb5dd777d Mon Sep 17 00:00:00 2001 From: Yannic Kilcher Date: Tue, 27 Dec 2022 13:59:00 +0100 Subject: [PATCH 5/5] removed boolean dependency --- website/package-lock.json | 11 ----------- website/package.json | 1 - website/src/pages/api/auth/[...nextauth].ts | 1 - 3 files changed, 13 deletions(-) diff --git a/website/package-lock.json b/website/package-lock.json index 7ad30068..45063104 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -19,7 +19,6 @@ "@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", @@ -2748,11 +2747,6 @@ "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", @@ -8267,11 +8261,6 @@ "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", diff --git a/website/package.json b/website/package.json index 2c2e6d29..bfec87c7 100644 --- a/website/package.json +++ b/website/package.json @@ -21,7 +21,6 @@ "@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", diff --git a/website/src/pages/api/auth/[...nextauth].ts b/website/src/pages/api/auth/[...nextauth].ts index 2cfe08df..62767c98 100644 --- a/website/src/pages/api/auth/[...nextauth].ts +++ b/website/src/pages/api/auth/[...nextauth].ts @@ -5,7 +5,6 @@ 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 = [];