Merge pull request #18 from vevcom/feat/auth

Feat/auth

default.env

@@ -1,4 +1,16 @@
+# API Keys
 GOOGLE_MAPS_API_KEY=HMMMMMMMMM
+
+# Database
 DB_NAME=devdb
 DB_USERNAME=user
 DB_PASSWORD=password
+
+DB_URI="postgresql://${DB_USERNAME}:${DB_PASSWORD}@db:5432/${DB_NAME}"
+
+# NextAuth
+NEXTAUTH_URL="http://localhost:3000"
+NEXTAUTH_SECRET=cake_is_love_cake_is_life
+
+# Next js
+NEXT_TELEMETRY_DISABLED=1

docker-compose.dev.yml

@@ -14,9 +14,12 @@ services:
       - ./package-lock.json:/usr/src/app/package-lock.json
       - ./src/prisma/schema.prisma:/usr/src/app/src/prisma/schema.prisma
     environment:
-      DB_URI: postgresql://${DB_USERNAME}:${DB_PASSWORD}@db:5432/${DB_NAME}
-      GOOGLE_MAPS_API_KEY: ${GOOGLE_MAPS_API_KEY}
       NODE_ENV: development
+      DB_URI: ${DB_URI}
+      GOOGLE_MAPS_API_KEY: ${GOOGLE_MAPS_API_KEY}
+      NEXTAUTH_URL: ${NEXTAUTH_URL}
+      NEXTAUTH_SECRET: ${NEXTAUTH_SECRET}
+      NEXT_TELEMETRY_DISABLED:  ${NEXT_TELEMETRY_DISABLED}
     depends_on:
       - db
       - prisma
@@ -46,7 +49,7 @@ services:
       dockerfile: ./Dockerfile
       target: dev
     environment:
-      DB_URI: postgresql://${DB_USERNAME}:${DB_PASSWORD}@db:5432/${DB_NAME}
+      DB_URI: ${DB_URI}
     volumes:
       - ./src/prisma/schema.prisma:/usr/src/app/schema.prisma
     depends_on:

docker-compose.yml

@@ -9,9 +9,12 @@ services:
     ports:
       - 3000:3000
     environment:
-      DB_URI: postgresql://${DB_USERNAME}:${DB_PASSWORD}@db:5432/${DB_NAME}
-      GOOGLE_MAPS_API_KEY: ${GOOGLE_MAPS_API_KEY}
       NODE_ENV: production
+      DB_URI: ${DB_URI}
+      GOOGLE_MAPS_API_KEY: ${GOOGLE_MAPS_API_KEY}
+      NEXTAUTH_URL: ${NEXTAUTH_URL}
+      NEXTAUTH_SECRET: ${NEXTAUTH_SECRET}
+      NEXT_TELEMETRY_DISABLED:  ${NEXT_TELEMETRY_DISABLED}
     depends_on:
       - db
       - prisma
@@ -41,7 +44,7 @@ services:
       dockerfile: ./Dockerfile
       target: prod
     environment:
-      DB_URI: postgresql://${DB_USERNAME}:${DB_PASSWORD}@db:5432/${DB_NAME}
+      DB_URI: ${DB_URI}
     depends_on:
       db:
         condition: service_healthy

package.json

@@ -21,6 +21,7 @@
     "eslint-config-next": "13.4.19",
     "google-map-react": "^2.2.1",
     "next": "^13.5.4",
+    "next-auth": "^4.23.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-fontawesome": "^1.7.1",

src/app/(auth)/CsrfToken.js

@@ -0,0 +1,18 @@
+"use client"
+
+import { getCsrfToken } from "next-auth/react"
+
+async function CsrfToken() {
+    // getCsrfToken må kjøres på klientsiden*
+    // ellers så spytter den ut tilfedlig tokens
+    //
+    // * må og må, det finnes nok en bedre
+    // løsning men dette var den enkelste
+    const csrfToken = await getCsrfToken()
+
+    return (
+        <input name="csrfToken" type="hidden" defaultValue={csrfToken} />
+    )
+}
+
+export default CsrfToken

src/app/(auth)/login/page.js

@@ -0,0 +1,25 @@
+import Input from '@/app/components/Input/Input'
+import styles from './page.module.scss'
+import magiskHatt from "@/images/magisk_hatt.png"
+import Image from 'next/image'
+import PrimaryButton from '@/app/components/PrimaryButton/PrimaryButton'
+import CsrfToken from '../CsrfToken'
+
+export default async function LogIn() {
+  return (
+    <div className={styles.wrapper}>
+        <div className={styles.card}>
+            <form className={styles.form} method="post" action="/api/auth/callback/credentials">
+                <CsrfToken />
+                <Input name="username" label="E-post"/>
+                <Input name="password" label="Passord" type="password"/>
+
+                <PrimaryButton text="Logg inn"></PrimaryButton>
+            </form>
+            <div className={styles.image}>
+                <Image width={200} src={magiskHatt} />
+            </div>
+        </div>
+    </div>
+  )
+}

src/app/(auth)/login/page.module.scss

@@ -0,0 +1,28 @@
+@use "@/styles/ohma";
+
+.wrapper {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    > .card {
+        width: 60%;
+        padding: 4*ohma.$gap; 
+        border-radius: 3em;
+
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr;
+        background-color: ohma.$slate;
+        > form {
+            grid-column: 1/2;
+            max-width: 250px;
+            margin: auto;
+        }
+        > .image {
+            display: grid;
+            place-items: center;
+            grid-column: 2/3;
+        }
+    }
+}

src/app/(auth)/logout/page.js

@@ -0,0 +1,25 @@
+import { getCsrfToken } from "next-auth/react"
+
+import styles from './page.module.scss'
+import magiskHatt from "@/images/magisk_hatt.png"
+import Image from 'next/image'
+import PrimaryButton from '@/app/components/PrimaryButton/PrimaryButton'
+import CsrfToken from '../CsrfToken'
+
+export default async function LogOut() {
+  const csrfToken = await getCsrfToken()
+
+  return (
+    <div className={styles.wrapper}>
+        <div className={styles.card}>
+            <form className={styles.form} method="post" action="/api/auth/signout">
+                <CsrfToken />
+                <PrimaryButton text="Logg ut"></PrimaryButton>
+            </form>
+            <div className={styles.image}>
+                <Image width={200} src={magiskHatt} />
+            </div>
+        </div>
+    </div>
+  )
+}