feat: store user info

.gitignore

@@ -25,3 +25,6 @@ yarn-error.log*
 
 # local env files
 .env*
+
+# Local Netlify folder
+.netlify

CONTRIBUTING.md

@@ -14,7 +14,7 @@ Then this is the perfect place for you!
 ```properties
 # .env.local
 NEXTAUTH_SECRET="local-secret"
-NEXTAUTH_URL="http://localhost:3000"
+NEXTAUTH_URL="http://localhost:8000"
 DISCORD_CLIENT_ID="<discord-client-id>"
 DISCORD_CLIENT_SECRET="<discord-client-secret>"
 ```
@@ -27,7 +27,7 @@ $ npm ci
 
 ## Start the Server~
 
-The app should startup at http://localhost:3000!
+The app should startup at http://localhost:8000!
 
 ```sh
 $ npm start

package.json

@@ -6,6 +6,7 @@
   "author": "Ceci <admin@cecilias.me>",
   "license": "GPL-3.0",
   "scripts": {
+    "serve": "BROWSER=none netlify dev -p 8000",
     "start": "next dev",
     "start:prod": "next start",
     "build": "next build",
@@ -15,8 +16,9 @@
   },
   "dependencies": {
     "@emotion/react": "^11.10.5",
-    "@reduxjs/toolkit": "^1.9.0",
+    "@next-auth/prisma-adapter": "^1.0.5",
     "@prisma/client": "^4.4.0",
+    "@reduxjs/toolkit": "^1.9.0",
     "classnames": "^2.3.2",
     "mobile-detect": "^1.4.5",
     "next": "^13.0.3",

prisma/migrations/20221113173211_initial/migration.sql

@@ -0,0 +1,66 @@
+-- CreateTable
+CREATE TABLE "Account" (
+    "id" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "type" TEXT NOT NULL,
+    "provider" TEXT NOT NULL,
+    "providerAccountId" TEXT NOT NULL,
+    "refresh_token" TEXT,
+    "access_token" TEXT,
+    "expires_at" INTEGER,
+    "token_type" TEXT,
+    "scope" TEXT,
+    "id_token" TEXT,
+    "session_state" TEXT,
+
+    CONSTRAINT "Account_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Session" (
+    "id" TEXT NOT NULL,
+    "sessionToken" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "expires" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Session_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL,
+    "name" TEXT,
+    "email" TEXT,
+    "emailVerified" TIMESTAMP(3),
+    "image" TEXT,
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "VerificationToken" (
+    "identifier" TEXT NOT NULL,
+    "token" TEXT NOT NULL,
+    "expires" TIMESTAMP(3) NOT NULL
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Account_provider_providerAccountId_key" ON "Account"("provider", "providerAccountId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Session_sessionToken_key" ON "Session"("sessionToken");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "VerificationToken_token_key" ON "VerificationToken"("token");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "VerificationToken_identifier_token_key" ON "VerificationToken"("identifier", "token");
+
+-- AddForeignKey
+ALTER TABLE "Account" ADD CONSTRAINT "Account_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Session" ADD CONSTRAINT "Session_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;

prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"

prisma/schema.prisma

@@ -8,4 +8,49 @@ datasource db {
 
 generator client {
   provider = "prisma-client-js"
-}
+}
+
+model Account {
+  id                 String  @id @default(cuid())
+  userId             String
+  type               String
+  provider           String
+  providerAccountId  String
+  refresh_token      String?  @db.Text
+  access_token       String?  @db.Text
+  expires_at         Int?
+  token_type         String?
+  scope              String?
+  id_token           String?  @db.Text
+  session_state      String?
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@unique([provider, providerAccountId])
+}
+
+model Session {
+  id           String   @id @default(cuid())
+  sessionToken String   @unique
+  userId       String
+  expires      DateTime
+  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+}
+
+model User {
+  id            String    @id @default(cuid())
+  name          String?
+  email         String?   @unique
+  emailVerified DateTime?
+  image         String?
+  accounts      Account[]
+  sessions      Session[]
+}
+
+model VerificationToken {
+  identifier String
+  token      String   @unique
+  expires    DateTime
+
+  @@unique([identifier, token])
+}

src/components/common/Content.module.scss

@@ -7,8 +7,8 @@
         max-width: 1480px;
         height: 100%;
         width: 100%;
-        background-color: rgba(0, 0, 0, 0.25);
-        border: 1px solid rgba(0, 0, 0, 0.25);
+        background-color: rgba(0, 0, 0, 0.20);
+        border: 1px solid rgba(0, 0, 0, 0.20);
         border-top: none;
         border-bottom: none;
     }

src/components/universal/Footer.module.scss

@@ -12,4 +12,8 @@
         display: flex;
         justify-content: flex-end;
     }
+
+    .poweredBy {
+        white-space: nowrap;
+    }
 }

src/components/universal/Footer.tsx

@@ -12,6 +12,7 @@ export function Footer() {
             <div/>
             <Button
                 as='a'
+                className={styles.poweredBy}
                 href="https://www.netlify.com"
                 target="_blank"
                 rel="noopener noreferrer"

src/components/universal/Header.tsx

@@ -1,18 +1,12 @@
 
-import { BsPatchPlus, BsPatchPlusFill, BsPeopleFill, BsBookFill } from 'react-icons/bs';
 import styles from './Header.module.scss';
 import { Button } from '../common/Button/Button';
 import { Direction, Sizes } from '../../constants/components';
 import { Content } from '../common/Content';
 import Link from 'next/link';
-import Login from './Login';
-import { IconButton } from '../common/Button/IconButton';
-import { Popover, PopoverItem } from '../common/Popover';
-import { useSession } from 'next-auth/react';
+import Login from './Login/Login';
 
 export function Header() {
-    const { data: session } = useSession();
-
     return (
         <div className={styles.header}>
             <Content className={styles.content} direction={Direction.HORIZONTAL} main>
@@ -27,21 +21,6 @@ export function Header() {
                 <div style={{
                     flex: 1
                 }}></div>
-                {session && (
-                    <Popover
-                        toggle={<IconButton
-                            icon={BsPatchPlus}
-                            hoverIcon={BsPatchPlusFill}
-                        />}
-                    >
-                        <PopoverItem icon={BsBookFill}>
-                            Create a Strat
-                        </PopoverItem>
-                        <PopoverItem icon={BsPeopleFill}>
-                            Create a Team
-                        </PopoverItem>
-                    </Popover>
-                )}
                 <Login />
             </Content>
         </div>

src/components/universal/Layout.module.scss

@@ -1,6 +1,6 @@
 .layout {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-rows: max-content 1fr max-content;
     min-height: 100vh;
 }
 

src/components/universal/Login/CreatePopover.tsx

@@ -0,0 +1,22 @@
+
+import { BsPatchPlus, BsPatchPlusFill, BsPeopleFill, BsBookFill } from 'react-icons/bs';
+import { IconButton } from '../../common/Button/IconButton';
+import { Popover, PopoverItem } from '../../common/Popover';
+
+export function CreatePopover() {
+    return (
+        <Popover
+            toggle={<IconButton
+                icon={BsPatchPlus}
+                hoverIcon={BsPatchPlusFill}
+            />}
+        >
+            <PopoverItem icon={BsBookFill}>
+                Create a Strat
+            </PopoverItem>
+            <PopoverItem icon={BsPeopleFill}>
+                Create a Team
+            </PopoverItem>
+        </Popover>
+    );
+}

src/components/universal/Login.tsx → src/components/universal/Login/Login.tsx

@@ -1,18 +1,20 @@
 import { useSession, signIn, signOut } from 'next-auth/react';
 import {IoMdLogOut, IoMdLogIn} from 'react-icons/io';
 import styles from './Login.module.scss';
-import { Alignment, Animations, Sizes } from '../../constants/components';
-import { Button } from '../common/Button/Button';
-import { Avatar } from '../common/Avatar';
-import { Popover, PopoverItem } from '../common/Popover';
-import { IconButton } from '../common/Button/IconButton';
+import { Alignment, Animations, Sizes } from '../../../constants/components';
+import { Button } from '../../common/Button/Button';
+import { Avatar } from '../../common/Avatar';
+import { Popover, PopoverItem } from '../../common/Popover';
+import { IconButton } from '../../common/Button/IconButton';
+import { CreatePopover } from './CreatePopover';
 
 export default function Login() {
     const { data: session } = useSession();
 
     if (session) {
         return (
             <>
+                <CreatePopover/>
                 <Popover
                     alignment={Alignment.RIGHT}
                     toggle={<Button

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

@@ -1,8 +1,11 @@
 import NextAuth from 'next-auth';
 import type {NextAuthOptions} from 'next-auth/core/types';
 import DiscordProvider from 'next-auth/providers/discord';
+import { PrismaAdapter } from '@next-auth/prisma-adapter';
+import { prisma } from '../../../utils/prisma';
 
 export const authOptions: NextAuthOptions = {
+    adapter: PrismaAdapter(prisma),
     providers: [
         // TODO: Add support for an email provider
         // https://next-auth.js.org/v3/configuration/providers#email-provider
@@ -13,7 +16,8 @@ export const authOptions: NextAuthOptions = {
         // }),
         DiscordProvider({
             clientId: process.env.DISCORD_CLIENT_ID,
-            clientSecret: process.env.DISCORD_CLIENT_SECRET
+            clientSecret: process.env.DISCORD_CLIENT_SECRET,
+            checks: ['state']
         })
     ]
 }

src/pages/api/user.ts

@@ -0,0 +1,18 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import { unstable_getServerSession } from 'next-auth';
+import { authOptions } from './auth/[...nextauth]';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+    const {method} = req;
+    const session = await unstable_getServerSession(req, res, authOptions);
+
+    switch (method) {
+    case 'GET':
+        res.end(`Name: ${session.user.name}`);
+        break;
+    default: {
+        res.setHeader('Allow', ['GET', 'PUT'])
+        res.status(405).end(`Method ${method} Not Allowed`)
+    }
+    }
+}