Merge pull request #5 from cholasimmons/major-update

Major update + Dockerfile fix

.github/workflows/docker-build.yml

@@ -0,0 +1,32 @@
+name: Build and Push Elysia Auth Demo Docker Image
+
+on:
+  push:
+    branches:
+      - build
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v2
+
+    - name: Log in to Docker Hub
+      uses: docker/login-action@v2
+      with:
+        username: ${{ secrets.DOCKER_HUB_USERNAME }}
+        password: ${{ secrets.DOCKER_HUB_ACCESS_TOKEN }}
+
+    - name: Build and push Docker image
+      uses: docker/build-push-action@v4
+      with:
+        context: .
+        file: ./Dockerfile
+        push: true
+        tags: simmonsstudiozm/elysia-auth:slim
+        platforms: linux/arm64

CHANGELOG.md

@@ -1,6 +1,37 @@
 # Changelog
 
 
+## [0.4.0] - 31-07-2024
+
+### Added
+
+- OAuth2 provider `Github` and `Google` for testing purposes. endpoint `/v1/auth/login/github` and `google` respectively, (requires OAuth2 secrets in .env file)
+- Arctic and Oslo packages added to assist with OAuth login by Lucia Auth v3
+- New database table `OAuth_Account` for multiple OAuth login
+- User database object now takes `username` string input which is always the user's email (for now)
+- Registration screen for web browser (placeholder)
+- Added `prismaSearch` to the prisma config file to handle pagination on user requests
+- Added `paginationOptions` to the new `root.models.ts` file to assist with pagination and search queries
+- Added Github Actions file to automatically build and push a linux/arm64 image to docker when a `git push` is performed on build branch
+
+### Changed
+
+- mapResponse life-cycle now handles images, html, css & js files correctly
+- Changes to `schema.prisma` and `auth/login` to accomodate the OAuth2 providers
+- Welcome screen and Login screen for browsers beautified
+- testing Buffer functions over btoa() for base64 encoding/decoding
+- DTO's no longer derive from `t.Object({})` but `{}`, as we need to "spread" them with the paginationOptions
+
+### Fixed
+
+- AuthService instantiation no longer throwing errors inside of parent Controllers. (changed controller functions to arrow functions)
+
+### Updated
+
+- Elysia, 1.1.4
+
+
+
 ## [0.3.0] - 21-07-2024
 
 ### Added

Dockerfile

@@ -1,9 +1,6 @@
 # see all official Bun versions at https://hub.docker.com/r/oven/bun/tags
 FROM oven/bun:slim AS base
 
-# Create group and user
-RUN addgroup --system --gid 1001 bunjs
-RUN adduser --system --uid 1001 elysiajs
 
 # Set up application
 WORKDIR /usr/src/app
@@ -39,9 +36,6 @@ COPY src src
 # RUN bun test
 # RUN bun run build
 
-# Set ownership of the application files
-RUN chown -R elysiajs:bunjs /usr/src/app
-
 # copy production dependencies and source code into final image
 # FROM base AS release
 # COPY --from=install /temp/prod/node_modules node_modules
@@ -50,7 +44,7 @@ RUN chown -R elysiajs:bunjs /usr/src/app
 # COPY --from=prerelease /usr/src/app/package.json .
 
 # Switch to non-root user for added security
-USER elysiajs
+USER bun
 EXPOSE 3000/tcp
 
 # run the app

_env

@@ -14,7 +14,6 @@ TZ=Africa/Harare # For Lusaka too
 # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
 
 # Postgres
-
 DATABASE_USER=postgres
 DATABASE_PASSWORD=postgres
 DATABASE_PORT=5432
@@ -23,13 +22,20 @@ DATABASE_URL="postgresql://${DATABASE_USER}:${DATABASE_PASSWORD}@${HOST}:${DATAB
 
 # Resend
 # API used for sending emails, usually only for Dev mode
-
 RESEND_API_KEY=re_1234
 
-# OAuth2 API
-GOOGLE_CLIENT_ID=""
-GOOGLE_API_KEY=""
-
 # PGAdmin
 [email protected]
-PGADMIN_DEFAULT_PASSWORD="root"
+PGADMIN_DEFAULT_PASSWORD="root"
+
+
+# OAuth 2.0 API
+
+# Google
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+GOOGLE_API_KEY=
+
+# Github
+GH_BASIC_CLIENT_ID=
+GH_BASIC_SECRET_ID=

docker-compose.yml

@@ -28,7 +28,7 @@ services:
     #command: "/bin/sh -c 'sleep 10 && bun prisma:seed'"
     #command: "/bin/sh -c 'bunx prisma migrate deploy'"
     volumes:
-      - api_migrations:/usr/src/app/prisma/migrations/0_init
+      - api_migration_two:/usr/src/app/prisma/migrations/0_init
     networks:
       default:
         aliases:
@@ -57,7 +57,7 @@ services:
           - db
     volumes:
       - pgdata:/var/lib/postgresql/data
-      - api_migrations:/docker-entrypoint-initdb.d:ro  # Mount SQL migrations directory as Read-only
+      - api_migration_two:/docker-entrypoint-initdb.d:ro  # Mount SQL migrations directory as Read-only
 
   pgadmin:
     image: dpage/pgadmin4:8.8
@@ -85,6 +85,6 @@ services:
 #         - subnet: 172.10.0.0/16
 
 volumes:
-  api_migrations:
+  api_migration_two:
   pgdata:
   pgadmin_data:

package.json

@@ -5,7 +5,7 @@
     "email": "[email protected]",
     "github": "https://github.com/cholasimmons"
   },
-  "version": "0.2.0",
+  "version": "0.3.0",
   "trustedDependencies": [
     "@prisma/client",
     "@prisma/engines",
@@ -18,30 +18,30 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "bun build --compile --minify --sourcemap --target=bun-linux-x64 src/index.ts --outfile app",
+    "compile": "NODE_ENV=production bun build src/index.ts --compile --minify --outfile ./build/bundle",
     "dev": "bun run --watch src/index.ts",
     "prisma:generate": "bunx prisma generate",
     "prisma:seed": "bunx prisma db seed",
     "prisma:deploy": "bunx prisma migrate deploy",
     "start": "NODE_ENV=production bun run src/index.ts"
   },
   "dependencies": {
-    "@bogeychan/elysia-logger": "^0.0.21",
-    "@elysiajs/cookie": "^0.7.0",
+    "@bogeychan/elysia-logger": "^0.1.1",
+    "@elysiajs/cookie": "^0.8.0",
     "@elysiajs/cors": "^1.1.0",
     "@elysiajs/cron": "^1.1.0",
-    "@elysiajs/html": "^0.7.3",
+    "@elysiajs/html": "^1.1.0",
     "@elysiajs/jwt": "^1.1.0",
-    "@elysiajs/lucia-auth": "^0.0.0-exp-20230623.312",
+    "@elysiajs/lucia-auth": "^1.1.0-exp.1",
     "@elysiajs/static": "^1.1.0",
     "@elysiajs/swagger": "1.0.5",
     "@lucia-auth/adapter-prisma": "^4.0.1",
     "@prisma/client": "5.15.1",
     "arctic": "^1.9.2",
     "chalk": "^5.3.0",
-    "elysia": "1.1.2",
+    "elysia": "^1.1.4",
     "elysia-helmet": "^2.0.0",
-    "elysia-htmx": "1.0.9",
-    "elysia-http-error": "^1.3.0",
+    "elysia-htmx": "^1.0.9",
     "elysia-http-status-code": "^1.0.9",
     "elysia-ip": "^1.0.7",
     "elysia-oauth2": "^1.3.0",

prisma/schema/schema.prisma

@@ -10,24 +10,34 @@ datasource db {
   schemas  = ["logs", "users"]
 }
 
+model OAuth_Account {
+  providerId      String    @id @unique @map("provider_id")
+  providerUserId  String       @unique @map("provider_user_id")
+  userId          String    @unique @map("user_id")
+  user            User      @relation(fields: [userId], references: [id])
+
+  @@index([providerId, providerUserId])
+  @@map("oauth")
+  @@schema("users")
+}
+
 model User {
   id             String    @id @unique
   firstname      String
   lastname       String
-  google_id      String?   @unique
-  apple_id       String?   @unique
-  microsoft_id   String?   @unique
-  facebook_id    String?   @unique
+  username       String    @unique
   email          String    @unique
   emailVerified  Boolean   @default(false) @map("email_verified")
   phone          String?   @unique
   roles          Role[]    @default([GUEST])
-  profileId      String?   @unique
   hashedPassword String    @map("hashed_password")
   isActive       Boolean   @default(true) @map("is_active")
   isComment      String?   @map("comment")
   createdAt      DateTime  @default(now()) @map("created_at")
+  updatedAt      DateTime  @updatedAt() @map("updated_at")
   profile        Profile?  @relation("user_profile")
+  profileId      String?   @unique
+  oauth          OAuth_Account?
   authSession    Session[]
 
   @@index([id, email, createdAt(sort: Desc)])

public/css/style.css

@@ -0,0 +1,52 @@
+body {
+    margin: 0;
+    padding: 2rem 0 0 0;
+    font-family: 'Montserrat', Helvetica, sans-serif;
+    text-align: center;
+    height: 100%;
+    border-top: 4px orange solid;
+    cursor: default;
+}
+span {
+    position: absolute;
+    bottom: 0;
+    left: 0; right: 0;
+    color: darkgray;
+    padding: 1rem;
+    margin: 0 auto;
+    text-align: center;
+}
+h2 {
+    color: purple
+}
+button[type='submit']{
+    background-color: purple;
+    border: none;
+    transition-duration: 300ms;
+    transition-property: all;
+    font-weight: 700;
+}
+.link {
+    background-color: purple;
+    color: white;
+    padding: 1rem 2rem;
+    border-radius: 12px;
+    transition-duration: 500ms;
+    transition-property: all;
+    font-weight: bold;
+}
+.link:hover {
+    background-color: lightgray;
+    color: purple;
+}
+a {
+    color: darkgray;
+    text-decoration: none;
+    font-weight: 600;
+}
+a:hover {
+    color: purple;
+}
+img {
+    user-drag: none;
+}

public/login.html

@@ -3,23 +3,42 @@
     <head>
         <meta charset="UTF-8" />
         <title>Login Form</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap" rel="stylesheet">
         <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+        <!-- Link to the favicon -->
+        <link rel="icon" href="/v1/public/icons/favicon.ico" type="image/x-icon">
+        <link rel="stylesheet" type="text/css" href="/v1/public/css/style.css">
     </head>
 
     <body>
         <div class="container mt-5">
             <div class="row justify-content-center">
-                <h3 class="text-center">Login</h3>
-                    <div class="col-md-6">
+                <h3 class="text-center">Welcome Back</h3>
+                    <div class="col-md-8">
                         <form hx-post="/v1/auth/login" hx-target="#login-response" hx-swap="outerHTML" class="card p-4">
                         <div class="mb-3">
-                            <label for="username" class="form-label">Username:</label>
-                            <input type="text" id="username" name="username" required class="form-control">
+                            <input type="text" id="email" name="email" required autocomplete="email" class="form-control" placeholder="Email Address">
                         </div>
 
                         <div class="mb-3">
-                            <label for="password" class="form-label">Password:</label>
-                            <input type="password" id="password" name="password" required class="form-control">
+                            <input type="password" id="password" name="password" required autocomplete="current-password" class="form-control" placeholder="Password">
+                        </div>
+
+                        <hr>
+
+                        <div class="d-flex justify-content-center mb-3">
+                            <div class="d-flex justify-content-center col-md-6 text-center gap-4">
+                                <a href="/v1/auth/login/github"><img src="/v1/public/icons/github.webp" target="github" alt="Sign in with GitHub" width="48" title="Login with Github"></a>
+                                <a href="/v1/auth/login/google" aria-disabled="true" disabled><img src="/v1/public/icons/google.webp" target="google" alt="Sign in with Google" width="48" title="Login with Google"></a>
+                            </div>
+                        </div>
+
+                        <hr>
+
+                        <div class="d-flex justify-content-center mb-3 text-center">
+                            <a href="/v1/auth/register" class="text-decoration-none font-weight-bold">Create a New Account</a>
                         </div>
 
                         <button type="submit" class="btn btn-dark">Log In</button>