Merge pull request Nutlope#27 from Nutlope/add-auth

Add auth with next-auth and neon (in-progress)

.example.env

@@ -6,3 +6,11 @@ UPSTASH_REDIS_REST_TOKEN=
 
 # Optional, if you're planning to use Upload.io (you need to if you have 100+ uploads)
 NEXT_PUBLIC_UPLOAD_API_KEY=
+
+# Optional, if you want to add auth + DB
+NEXTAUTH_SECRET=
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+DATABASE_URL=
+SHADOW_DATABASE_URL=
+NEXTAUTH_URL=

README.md

@@ -1,3 +1,8 @@
+## Todos left for auth
+
+- test it on deployment URL, make sure reset time is real
+- roll it out to prod with instant rollback
+
 # [roomGPT.io](https://roomGPT.io)
 
 This project generates new designs of your room with AI.
@@ -42,6 +47,17 @@ Then, run the application in the command line and it will be available at `http:
 npm run dev
 ```
 
+## Auth setup
+
+1. Use `openssl rand -base64 32` to generate NEXTAUTH_SECRET
+2. Add DB URL and SHADOW DB URL from Neon
+3. Create a new project in console.cloud.google.com
+4. Click configure consent screen in API credentials page and click external
+5. Add an app name, do not upload logo, add authorized domain
+6. Publish app
+7. Create credentials -> Oauth client ID
+8. Run npx prisma db push && prisma migrate dev && prisma generate
+
 ## One-Click Deploy
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=vercel-examples):

components/Header.tsx

@@ -1,7 +1,7 @@
 import Image from "next/image";
 import Link from "next/link";
 
-export default function Header() {
+export default function Header({ photo }: { photo?: string }) {
   return (
     <header className="flex flex-col xs:flex-row justify-between items-center w-full mt-3 border-b pb-7 sm:px-4 px-2 border-gray-500 gap-2">
       <Link href="/" className="flex space-x-2">
@@ -16,15 +16,25 @@ export default function Header() {
           roomGPT.io
         </h1>
       </Link>
-      <a
-        className="flex max-w-fit items-center justify-center space-x-2 rounded-full border border-blue-600 text-white px-5 py-2 text-sm shadow-md hover:bg-blue-500 bg-blue-600 font-medium transition"
-        href="https://github.com/Nutlope/roomGPT"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <Github />
-        <p>Star on GitHub</p>
-      </a>
+      {photo ? (
+        <Image
+          alt="Profile picture"
+          src={photo}
+          className="w-10 rounded-full"
+          width={32}
+          height={28}
+        />
+      ) : (
+        <a
+          className="flex max-w-fit items-center justify-center space-x-2 rounded-full border border-blue-600 text-white px-5 py-2 text-sm shadow-md hover:bg-blue-500 bg-blue-600 font-medium transition"
+          href="https://github.com/Nutlope/roomGPT"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Github />
+          <p>Star on GitHub</p>
+        </a>
+      )}
     </header>
   );
 }

lib/prismadb.ts

@@ -0,0 +1,10 @@
+import { PrismaClient } from "@prisma/client";
+
+declare global {
+  var prisma: PrismaClient | undefined;
+}
+
+const client = globalThis.prisma || new PrismaClient();
+if (process.env.NODE_ENV !== "production") globalThis.prisma = client;
+
+export default client;

next.config.js

@@ -2,7 +2,7 @@
 module.exports = {
   reactStrictMode: true,
   images: {
-    domains: ["upcdn.io", "replicate.delivery"],
+    domains: ["upcdn.io", "replicate.delivery", "lh3.googleusercontent.com"],
   },
   async redirects() {
     return [