nodejs-quickstart-structure 2.1.2 → 2.2.1

package/templates/common/database/ts/models/User.ts.ejs

@@ -4,7 +4,13 @@ export interface User {
   name: string;
   email: string;
 <% if (auth.includes('JWT')) { -%>
-  password?: string;
+  password?: string | null;
+<% } -%>
+<% if (socialAuth && socialAuth.includes('Google')) { -%>
+  googleId?: string | null;
+<% } -%>
+<% if (socialAuth && socialAuth.includes('GitHub')) { -%>
+  githubId?: string | null;
 <% } -%>
 }
 
@@ -61,7 +67,9 @@ class User extends Model {
   public id!: number;
   public name!: string;
   public email!: string;
-  <% if (auth.includes('JWT')) { %>public password!: string;<% } %>
+  <% if (auth.includes('JWT')) { %>public password?: string | null;<% } %>
+  <% if (socialAuth && socialAuth.includes('Google')) { %>public googleId?: string | null;<% } %>
+  <% if (socialAuth && socialAuth.includes('GitHub')) { %>public githubId?: string | null;<% } %>
 }
 
 User.init(
@@ -79,13 +87,21 @@ User.init(
       type: DataTypes.STRING,
       allowNull: false,
       unique: true,
-    },
-    <% if (auth.includes('JWT')) { %>
+    },<% if (auth.includes('JWT')) { %>
     password: {
       type: DataTypes.STRING,
-      allowNull: false,
-    },
-    <% } %>
+      allowNull: true,
+    },<% } %><% if (socialAuth && socialAuth.includes('Google')) { %>
+    googleId: {
+      type: DataTypes.STRING,
+      allowNull: true,
+      unique: true,
+    },<% } %><% if (socialAuth && socialAuth.includes('GitHub')) { %>
+    githubId: {
+      type: DataTypes.STRING,
+      allowNull: true,
+      unique: true,
+    },<% } %>
     deletedAt: {
       type: DataTypes.DATE,
       allowNull: true,

package/templates/common/database/ts/models/User.ts.mongoose.ejs

@@ -3,7 +3,9 @@ import mongoose, { Schema, Document } from 'mongoose';
 export interface IUser extends Document {
     name: string;
     email: string;
-    <% if (auth.includes('JWT')) { %>password: string;<% } %>
+    <% if (auth.includes('JWT')) { %>password?: string | null;<% } %>
+    <% if (socialAuth && socialAuth.includes('Google')) { %>googleId?: string | null;<% } %>
+    <% if (socialAuth && socialAuth.includes('GitHub')) { %>githubId?: string | null;<% } %>
     createdAt: Date;
     deletedAt?: Date | null;
 }
@@ -21,7 +23,21 @@ const UserSchema: Schema = new Schema({
     <% if (auth.includes('JWT')) { %>
     password: {
         type: String,
-        required: true
+        required: false
+    },
+    <% } %>
+    <% if (socialAuth && socialAuth.includes('Google')) { %>
+    googleId: {
+        type: String,
+        unique: true,
+        sparse: true
+    },
+    <% } %>
+    <% if (socialAuth && socialAuth.includes('GitHub')) { %>
+    githubId: {
+        type: String,
+        unique: true,
+        sparse: true
     },
     <% } %>
     createdAt: {

package/templates/common/docker-compose.yml.ejs

@@ -44,6 +44,16 @@ services:
       - JWT_REFRESH_SECRET=your_jwt_refresh_secret_key_here_change_it
       - JWT_EXPIRES_IN=1d
       - JWT_REFRESH_EXPIRES_IN=7d
+<%_ if (typeof socialAuth !== 'undefined' && socialAuth && socialAuth.includes('Google')) { -%>
+      - GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID:-your_google_id}
+      - GOOGLE_CLIENT_SECRET=${GOOGLE_CLIENT_SECRET:-your_google_secret}
+      - GOOGLE_CALLBACK_URL=${GOOGLE_CALLBACK_URL:-http://localhost:3000/api/auth/google/callback}
+<%_ } -%>
+<%_ if (typeof socialAuth !== 'undefined' && socialAuth && socialAuth.includes('GitHub')) { -%>
+      - GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID:-your_github_id}
+      - GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET:-your_github_secret}
+      - GITHUB_CALLBACK_URL=${GITHUB_CALLBACK_URL:-http://localhost:3000/api/auth/github/callback}
+<%_ } -%>
 <%_ } -%>
 <%_ } else { -%>
     environment:
@@ -75,8 +85,19 @@ services:
       - JWT_REFRESH_SECRET=your_jwt_refresh_secret_key_here_change_it
       - JWT_EXPIRES_IN=1d
       - JWT_REFRESH_EXPIRES_IN=7d
+<%_ if (typeof socialAuth !== 'undefined' && socialAuth && socialAuth.includes('Google')) { -%>
+      - GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID:-your_google_id}
+      - GOOGLE_CLIENT_SECRET=${GOOGLE_CLIENT_SECRET:-your_google_secret}
+      - GOOGLE_CALLBACK_URL=${GOOGLE_CALLBACK_URL:-http://localhost:3000/api/auth/google/callback}
+<%_ } -%>
+<%_ if (typeof socialAuth !== 'undefined' && socialAuth && socialAuth.includes('GitHub')) { -%>
+      - GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID:-your_github_id}
+      - GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET:-your_github_secret}
+      - GITHUB_CALLBACK_URL=${GITHUB_CALLBACK_URL:-http://localhost:3000/api/auth/github/callback}
 <%_ } -%>
 <%_ } -%>
+<%_ } -%>
+
 <%_ if (database !== 'None') { -%>
   db:
 <%_ if (database === 'MySQL') { -%>

package/templates/common/ecosystem.config.js.ejs

@@ -40,6 +40,16 @@ module.exports = {
       JWT_REFRESH_SECRET: "your_jwt_refresh_secret_here",
       JWT_EXPIRES_IN: "1h",
       JWT_REFRESH_EXPIRES_IN: "7d",
+<%_ if (socialAuth && socialAuth.includes('Google')) { -%>
+      GOOGLE_CLIENT_ID: "your_google_client_id",
+      GOOGLE_CLIENT_SECRET: "your_google_client_secret",
+      GOOGLE_CALLBACK_URL: "http://localhost:3000/api/auth/google/callback",
+<%_ } -%>
+<%_ if (socialAuth && socialAuth.includes('GitHub')) { -%>
+      GITHUB_CLIENT_ID: "your_github_client_id",
+      GITHUB_CLIENT_SECRET: "your_github_client_secret",
+      GITHUB_CALLBACK_URL: "http://localhost:3000/api/auth/github/callback",
+<%_ } -%>
 <%_ } -%>
     }
   }]

package/templates/common/eslint.config.mjs.ejs

@@ -73,7 +73,10 @@ export default [
     },
     rules: {
       "no-console": "warn",
-      "no-unused-vars": "warn",
+      "no-unused-vars": ["warn", { 
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }],
       "import/no-unresolved": [2, { "caseSensitive": false }]
     }
   }

package/templates/common/jest.config.js.ejs

@@ -4,7 +4,7 @@ module.exports = {
   coverageDirectory: 'coverage',
   collectCoverageFrom: ['src/**/*.{js,ts}'],
   testMatch: ['**/*.test.ts', '**/*.test.js', '**/*.spec.ts', '**/*.spec.js'],
-  transformIgnorePatterns: ['/node_modules/(?!.*uuid)'],
+  transformIgnorePatterns: ['/node_modules/(?!axios|sequelize|@sequelize|uuid)'],
   testPathIgnorePatterns: ['/node_modules/', '/tests/e2e/'],
   <% if (language === 'TypeScript') { %>preset: 'ts-jest',<% } %>
   moduleNameMapper: {

package/templates/common/kafka/ts/services/kafkaService.ts.ejs

@@ -81,7 +81,7 @@ export class KafkaService {
         try {
             const parsed = JSON.parse(message);
             logger.info(`[Kafka] Producer: Sent ${parsed.action} event for '${parsed.payload?.email || 'unknown'}'`);
-        } catch {
+        } catch (error) {
             logger.info(`[Kafka] Producer: Sent message to ${topic}`);
         }
     }

package/templates/common/package.json.ejs

@@ -57,9 +57,12 @@
 <% } -%>
 <% if (auth.includes('JWT')) { %>    "jsonwebtoken": "^9.0.2",
     "bcryptjs": "^2.4.3",
+<% } -%>
+<% if (socialAuth && socialAuth.filter(a => a !== 'None').length > 0) { %>    "axios": "^1.6.5",
 <% } -%>
     "cors": "^2.8.5",
     "helmet": "^7.1.0",
+    "cookie-parser": "^1.4.6",
     "hpp": "^0.2.3",
     "express-rate-limit": "^7.1.5",
     "winston": "^3.11.0",
@@ -78,6 +81,7 @@
     "ts-node": "^10.9.2",
     "@types/node": "^20.10.5",
     "@types/express": "^4.17.21",
+    "@types/cookie-parser": "^1.4.6",
     "@types/cors": "^2.8.17",
     "@types/hpp": "^0.2.3",
 <% if (caching === 'Memory Cache') { %>    "@types/node-cache": "^4.2.5",

package/templates/common/src/tests/e2e/e2e.users.test.js.ejs

@@ -62,15 +62,27 @@ describe('E2E User Tests', () => {
 <%_ } -%>
 
 <%_ if (auth.includes('JWT')) { _%>
+<%_ const authPath = "/api/auth"; _%>
     it('should login and obtain a JWT token', async () => {
         const response = await request(SERVER_URL)
-            .post('/api/auth/login')
+            .post('<%= authPath %>/login')
             .send({ email: uniqueEmail, password: testPassword });
 
         expect(response.statusCode).toBe(200);
         expect(response.body.accessToken || response.body.token).toBeDefined();
         authToken = response.body.accessToken || response.body.token;
     });
+
+<% if (socialAuth && socialAuth.filter(a => a !== 'None').length > 0) { -%>
+    it('should fail social exchange with invalid code', async () => {
+        const response = await request(SERVER_URL)
+            .post('<%= authPath %>/social/exchange')
+            .send({ code: 'invalid_code', provider: 'Google' });
+
+        expect([401, 500]).toContain(response.statusCode);
+    });
+
+<% } %>
 <%_ } _%>
 
 <%_ if (communication === 'GraphQL') { -%>

package/templates/common/src/tests/e2e/e2e.users.test.ts.ejs

@@ -61,15 +61,27 @@ describe('E2E User Tests', () => {
 <%_ } -%>
 
 <%_ if (auth.includes('JWT')) { _%>
+<%_ const authPath = "/api/auth"; _%>
   it('should login and obtain a JWT token', async () => {
     const response = await request(SERVER_URL)
-      .post('/api/auth/login')
+      .post('<%= authPath %>/login')
       .send({ email: uniqueEmail, password: testPassword });
 
     expect(response.statusCode).toBe(200);
     expect(response.body.accessToken || response.body.token).toBeDefined();
     authToken = response.body.accessToken || response.body.token;
   });
+
+<% if (socialAuth && socialAuth.filter(a => a !== 'None').length > 0) { -%>
+  it('should fail social exchange with invalid code', async () => {
+    const response = await request(SERVER_URL)
+      .post('<%= authPath %>/social/exchange')
+      .send({ code: 'invalid_code', provider: 'Google' });
+
+    expect([401, 500]).toContain(response.statusCode);
+  });
+
+<% } %>
 <%_ } _%>
 
 <%_ if (communication === 'GraphQL') { -%>

package/templates/common/swagger.yml.ejs

@@ -50,7 +50,8 @@ tags:
   <%_ } -%>
 paths:
 <%_ if (auth.includes('JWT')) { -%>
-  /api/auth/login:
+<%_ const authPath = "/api/auth"; _%>
+  <%= authPath %>/login:
     post:
       summary: Login and receive a JWT token
       tags:
@@ -85,7 +86,7 @@ paths:
                     type: string
         '401':
           description: Invalid credentials
-  /api/auth/refresh:
+  <%= authPath %>/refresh:
     post:
       summary: Refresh access token using a refresh token
       tags:
@@ -115,7 +116,7 @@ paths:
                     type: string
         '401':
           description: Invalid refresh token
-  /api/auth/logout:
+  <%= authPath %>/logout:
     post:
       summary: Logout and revoke refresh token
       tags:
@@ -140,6 +141,64 @@ paths:
                 properties:
                   message:
                     type: string
+<%_ if (socialAuth && socialAuth.filter(a => a !== 'None').length > 0) { -%>
+  <%= authPath %>/social/exchange:
+    post:
+      summary: Exchange social auth code for JWT tokens
+      tags:
+        - Auth
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              required:
+                - code
+                - provider
+              properties:
+                code:
+                  type: string
+                provider:
+                  type: string
+                  enum: [Google, GitHub]
+                redirectUri:
+                  type: string
+      responses:
+        '200':
+          description: Exchange successful
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  accessToken:
+                    type: string
+                  refreshToken:
+                    type: string
+        '401':
+          description: Invalid social profile or code
+<%_ if (socialAuth.includes('Google')) { -%>
+  <%= authPath %>/google:
+    get:
+      summary: Redirect to Google OAuth
+      tags:
+        - Auth
+      responses:
+        '302':
+          description: Redirect to Google
+<%_ } -%>
+<%_ if (socialAuth.includes('GitHub')) { -%>
+  <%= authPath %>/github:
+    get:
+      summary: Redirect to GitHub OAuth
+      tags:
+        - Auth
+      responses:
+        '302':
+          description: Redirect to GitHub
+<%_ } -%>
+<%_ } -%>
 <%_ } -%>
   /api/users:
     get:

package/templates/common/views/ejs/login.ejs.ejs

@@ -209,6 +209,63 @@
                 border-radius: 20px;
             }
         }
+
+        .divider {
+            display: flex;
+            align-items: center;
+            text-align: center;
+            margin: 24px 0;
+            color: var(--text-muted);
+            font-size: 13px;
+        }
+
+        .divider::before,
+        .divider::after {
+            content: '';
+            flex: 1;
+            border-bottom: 1px solid var(--card-border);
+        }
+
+        .divider:not(:empty)::before {
+            margin-right: .5em;
+        }
+
+        .divider:not(:empty)::after {
+            margin-left: .5em;
+        }
+
+        .social-login {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 12px;
+        }
+
+        .btn-social {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid var(--card-border);
+            border-radius: 12px;
+            padding: 12px;
+            color: #fff;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-decoration: none;
+        }
+
+        .btn-social:hover {
+            background: rgba(255, 255, 255, 0.08);
+            border-color: var(--text-muted);
+            transform: translateY(-1px);
+        }
+        
+        .social-full {
+            grid-column: span 2;
+        }
     </style>
 </head>
 <body>
@@ -235,6 +292,33 @@
             <button type="submit" class="btn-primary">Sign In</button>
         </form>
 
+        <% if (socialAuth && socialAuth.filter(a => a !== 'None').length > 0) { %>
+        <div class="divider">Or continue with</div>
+        
+        <div class="social-login">
+            <% if (socialAuth.includes('Google')) { %>
+            <a href="/api/auth/google" class="btn-social <%= socialAuth.includes('GitHub') ? '' : 'social-full' %>">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
+                    <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
+                    <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
+                    <path d="M12 5.38c1.62 0 3.06.56 4.21 1.66l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
+                </svg>
+                Google
+            </a>
+            <% } %>
+
+            <% if (socialAuth.includes('GitHub')) { %>
+            <a href="/api/auth/github" class="btn-social <%= socialAuth.includes('Google') ? '' : 'social-full' %>">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                </svg>
+                GitHub
+            </a>
+            <% } %>
+        </div>
+        <% } %>
+
         <div class="footer">
             <p>Don't have an account? <a href="/signup">Create account</a></p>
             <a href="/" class="back-link">← Back to home</a>

package/templates/common/views/ejs/signup.ejs.ejs

@@ -200,6 +200,63 @@
                 padding: 35px 20px;
             }
         }
+
+        .divider {
+            display: flex;
+            align-items: center;
+            text-align: center;
+            margin: 24px 0;
+            color: var(--text-muted);
+            font-size: 13px;
+        }
+
+        .divider::before,
+        .divider::after {
+            content: '';
+            flex: 1;
+            border-bottom: 1px solid var(--card-border);
+        }
+
+        .divider:not(:empty)::before {
+            margin-right: .5em;
+        }
+
+        .divider:not(:empty)::after {
+            margin-left: .5em;
+        }
+
+        .social-login {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 12px;
+        }
+
+        .btn-social {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid var(--card-border);
+            border-radius: 12px;
+            padding: 12px;
+            color: #fff;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-decoration: none;
+        }
+
+        .btn-social:hover {
+            background: rgba(255, 255, 255, 0.08);
+            border-color: var(--text-muted);
+            transform: translateY(-1px);
+        }
+        
+        .social-full {
+            grid-column: span 2;
+        }
     </style>
 </head>
 <body>
@@ -231,6 +288,33 @@
             <button type="submit" class="btn-primary">Create Account</button>
         </form>
 
+        <% if (socialAuth && socialAuth.filter(a => a !== 'None').length > 0) { %>
+        <div class="divider">Or join with</div>
+        
+        <div class="social-login">
+            <% if (socialAuth.includes('Google')) { %>
+            <a href="/api/auth/google" class="btn-social <%= socialAuth.includes('GitHub') ? '' : 'social-full' %>">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
+                    <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
+                    <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
+                    <path d="M12 5.38c1.62 0 3.06.56 4.21 1.66l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
+                </svg>
+                Google
+            </a>
+            <% } %>
+
+            <% if (socialAuth.includes('GitHub')) { %>
+            <a href="/api/auth/github" class="btn-social <%= socialAuth.includes('Google') ? '' : 'social-full' %>">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                </svg>
+                GitHub
+            </a>
+            <% } %>
+        </div>
+        <% } %>
+
         <div class="footer">
             <p>Already have an account? <a href="/login">Sign in</a></p>
             <a href="/" class="back-home">← Back to home</a>

package/templates/common/views/pug/login.pug.ejs

@@ -174,6 +174,63 @@ html(lang="en")
                 font-size: 13px;
                 opacity: 0.6;
             }
+
+            .divider {
+                display: flex;
+                align-items: center;
+                text-align: center;
+                margin: 24px 0;
+                color: var(--text-muted);
+                font-size: 13px;
+            }
+
+            .divider::before,
+            .divider::after {
+                content: '';
+                flex: 1;
+                border-bottom: 1px solid var(--card-border);
+            }
+
+            .divider:not(:empty)::before {
+                margin-right: .5em;
+            }
+
+            .divider:not(:empty)::after {
+                margin-left: .5em;
+            }
+
+            .social-login {
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+                gap: 12px;
+            }
+
+            .btn-social {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 8px;
+                background: rgba(255, 255, 255, 0.05);
+                border: 1px solid var(--card-border);
+                border-radius: 12px;
+                padding: 12px;
+                color: #fff;
+                font-size: 14px;
+                font-weight: 500;
+                cursor: pointer;
+                transition: all 0.3s ease;
+                text-decoration: none;
+            }
+
+            .btn-social:hover {
+                background: rgba(255, 255, 255, 0.08);
+                border-color: var(--text-muted);
+                transform: translateY(-1px);
+            }
+            
+            .social-full {
+                grid-column: span 2;
+            }
     body
         div.background-blobs
             div.blob.blob-1
@@ -189,6 +246,27 @@ html(lang="en")
                     label(for="password") Password
                     input(type="password" id="password" name="password" placeholder="••••••••" required)
                 button.btn-primary(type="submit") Sign In
+            
+            <% if (socialAuth && socialAuth.filter(a => a !== 'None').length > 0) { %>
+            div.divider Or continue with
+            div.social-login
+                <% if (socialAuth.includes('Google')) { %>
+                a.btn-social(href="/api/auth/google" class="<%= socialAuth.includes('GitHub') ? '' : 'social-full' %>")
+                    svg(width="20" height="20" viewBox="0 0 24 24" fill="currentColor")
+                        path(d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4")
+                        path(d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853")
+                        path(d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05")
+                        path(d="M12 5.38c1.62 0 3.06.56 4.21 1.66l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335")
+                    | Google
+                <% } %>
+                <% if (socialAuth.includes('GitHub')) { %>
+                a.btn-social(href="/api/auth/github" class="<%= socialAuth.includes('Google') ? '' : 'social-full' %>")
+                    svg(width="20" height="20" viewBox="0 0 24 24" fill="currentColor")
+                        path(d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12")
+                    | GitHub
+                <% } %>
+            <% } %>
+
             div.footer
                 p Don't have an account? 
                     a(href="/signup") Create account