feat: implement google authentication

Author: rrd108

package-lock.json

@@ -92,6 +92,7 @@
     "bcrypt": "^6.0.0",
     "citty": "^0.1.6",
     "defu": "^6.1.4",
+    "googleapis": "^162.0.0",
     "nodemailer": "^7.0.5"
   },
   "optionalDependencies": {

package.json

@@ -0,0 +1,89 @@
+import { defineCommand } from 'citty'
+import { useDb } from '../runtime/server/utils/db'
+import { loadOptions } from './utils'
+
+export default defineCommand({
+  meta: {
+    name: 'add-google-oauth-fields',
+    description: 'Add Google OAuth fields (google_id, profile_picture) to existing users table'
+  },
+  async run() {
+    console.log('[Nuxt Users] Adding Google OAuth fields to users table...')
+
+    const options = await loadOptions()
+    const connectorName = options.connector!.name
+    const db = await useDb(options)
+    const tableName = options.tables.users
+
+    console.log(`[Nuxt Users] DB:Migrate ${connectorName} Users Table Adding Google OAuth fields...`)
+
+    try {
+      if (connectorName === 'sqlite') {
+        // Check if columns already exist
+        const tableInfo = await db.sql`PRAGMA table_info(${tableName})` as { rows: Array<{ name: string }> }
+        const columnNames = tableInfo.rows.map(row => row.name)
+        
+        if (!columnNames.includes('google_id')) {
+          await db.sql`ALTER TABLE {${tableName}} ADD COLUMN google_id TEXT UNIQUE`
+          console.log('[Nuxt Users] Added google_id column to SQLite users table ✅')
+        }
+        
+        if (!columnNames.includes('profile_picture')) {
+          await db.sql`ALTER TABLE {${tableName}} ADD COLUMN profile_picture TEXT`
+          console.log('[Nuxt Users] Added profile_picture column to SQLite users table ✅')
+        }
+      }
+      
+      if (connectorName === 'mysql') {
+        // Check if columns exist
+        const checkColumns = await db.sql`
+          SELECT COLUMN_NAME 
+          FROM INFORMATION_SCHEMA.COLUMNS 
+          WHERE TABLE_SCHEMA = DATABASE() 
+          AND TABLE_NAME = ${tableName}
+          AND COLUMN_NAME IN ('google_id', 'profile_picture')
+        ` as { rows: Array<{ COLUMN_NAME: string }> }
+        
+        const existingColumns = checkColumns.rows.map(row => row.COLUMN_NAME)
+        
+        if (!existingColumns.includes('google_id')) {
+          await db.sql`ALTER TABLE {${tableName}} ADD COLUMN google_id VARCHAR(255) UNIQUE`
+          console.log('[Nuxt Users] Added google_id column to MySQL users table ✅')
+        }
+        
+        if (!existingColumns.includes('profile_picture')) {
+          await db.sql`ALTER TABLE {${tableName}} ADD COLUMN profile_picture TEXT`
+          console.log('[Nuxt Users] Added profile_picture column to MySQL users table ✅')
+        }
+      }
+      
+      if (connectorName === 'postgresql') {
+        // Check if columns exist
+        const checkColumns = await db.sql`
+          SELECT column_name 
+          FROM information_schema.columns 
+          WHERE table_name = ${tableName}
+          AND column_name IN ('google_id', 'profile_picture')
+        ` as { rows: Array<{ column_name: string }> }
+        
+        const existingColumns = checkColumns.rows.map(row => row.column_name)
+        
+        if (!existingColumns.includes('google_id')) {
+          await db.sql`ALTER TABLE {${tableName}} ADD COLUMN google_id VARCHAR(255) UNIQUE`
+          console.log('[Nuxt Users] Added google_id column to PostgreSQL users table ✅')
+        }
+        
+        if (!existingColumns.includes('profile_picture')) {
+          await db.sql`ALTER TABLE {${tableName}} ADD COLUMN profile_picture TEXT`
+          console.log('[Nuxt Users] Added profile_picture column to PostgreSQL users table ✅')
+        }
+      }
+      
+      console.log('[Nuxt Users] Google OAuth fields migration completed successfully! ✅')
+      
+    } catch (error) {
+      console.error('[Nuxt Users] DB:Migration Error:', error)
+      process.exit(1)
+    }
+  }
+})

src/cli/add-google-oauth-fields.ts

@@ -8,6 +8,7 @@ import createPersonalAccessTokensTable from './create-personal-access-tokens-tab
 import createPasswordResetTokensTable from './create-password-reset-tokens-table'
 import createMigrationsTable from './create-migrations-table'
 import addActiveToUsers from './add-active-to-users'
+import addGoogleOauthFields from './add-google-oauth-fields'
 import projectInfo from './project-info'
 
 // Dynamically load version from package.json at runtime
@@ -37,6 +38,7 @@ const main = defineCommand({
     'create-password-reset-tokens-table': createPasswordResetTokensTable,
     'create-migrations-table': createMigrationsTable,
     'add-active-to-users': addActiveToUsers,
+    'add-google-oauth-fields': addGoogleOauthFields,
     'project-info': projectInfo
   }
 })

src/cli/main.ts

@@ -199,6 +199,19 @@ export default defineNuxtModule<RuntimeModuleOptions>({
       handler: resolver.resolve('./runtime/server/api/nuxt-users/confirm-email.get')
     })
 
+    // Google OAuth
+    addServerHandler({
+      route: `${base}/auth/google/redirect`,
+      method: 'get',
+      handler: resolver.resolve('./runtime/server/api/nuxt-users/auth/google/redirect.get')
+    })
+
+    addServerHandler({
+      route: `${base}/auth/google/callback`,
+      method: 'get',
+      handler: resolver.resolve('./runtime/server/api/nuxt-users/auth/google/callback.get')
+    })
+
     // User management
     addServerHandler({
       route: `${base}`,

src/module.ts

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { ModuleOptions } from 'nuxt-users/utils'
+import { useRuntimeConfig } from '#imports'
+
+interface Props {
+  /**
+   * Custom redirect endpoint for Google OAuth
+   * @default '/api/nuxt-users/auth/google/redirect'
+   */
+  redirectEndpoint?: string
+  /**
+   * Button text
+   * @default 'Continue with Google'
+   */
+  buttonText?: string
+  /**
+   * Show Google logo in button
+   * @default true
+   */
+  showLogo?: boolean
+  /**
+   * Custom CSS class for button
+   */
+  class?: string
+}
+
+interface Emits {
+  (e: 'click'): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  buttonText: 'Continue with Google',
+  showLogo: true
+})
+
+const emit = defineEmits<Emits>()
+
+const { public: { nuxtUsers } } = useRuntimeConfig()
+const { apiBasePath } = nuxtUsers as ModuleOptions
+
+const isLoading = ref(false)
+
+// Compute redirect URL
+const redirectEndpoint = computed(() => 
+  props.redirectEndpoint || `${apiBasePath}/auth/google/redirect`
+)
+
+const handleGoogleLogin = async () => {
+  isLoading.value = true
+  emit('click')
+  
+  try {
+    // Navigate to Google OAuth redirect endpoint
+    await navigateTo(redirectEndpoint.value, { external: true })
+  } catch (error) {
+    console.error('[Nuxt Users] Google OAuth redirect failed:', error)
+  } finally {
+    isLoading.value = false
+  }
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    class="n-users-google-btn"
+    :class="[{ 'loading': isLoading }, props.class]"
+    :disabled="isLoading"
+    @click="handleGoogleLogin"
+  >
+    <!-- Loading spinner -->
+    <span
+      v-if="isLoading"
+      class="n-users-loading-spinner"
+    />
+    
+    <!-- Google logo SVG -->
+    <svg
+      v-if="showLogo && !isLoading"
+      class="n-users-google-logo"
+      viewBox="0 0 24 24"
+      width="18"
+      height="18"
+    >
+      <path
+        fill="#4285F4"
+        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"
+      />
+      <path
+        fill="#34A853"
+        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"
+      />
+      <path
+        fill="#FBBC05"
+        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"
+      />
+      <path
+        fill="#EA4335"
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.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"
+      />
+    </svg>
+
+    <!-- Button text -->
+    <span class="n-users-google-text">
+      {{ isLoading ? 'Redirecting...' : buttonText }}
+    </span>
+  </button>
+</template>
+
+<!-- CSS removed - now consolidated in nuxt-users.css -->

src/runtime/components/NUsersGoogleLoginButton.vue

@@ -0,0 +1,99 @@
+import { defineEventHandler, sendRedirect, createError, getQuery, setCookie } from 'h3'
+import type { ModuleOptions } from 'nuxt-users/utils'
+import { useRuntimeConfig } from '#imports'
+import { 
+  createGoogleOAuth2Client, 
+  getGoogleUserFromCode, 
+  findOrCreateGoogleUser,
+  createAuthTokenForUser 
+} from '../../../utils/google-oauth'
+
+export default defineEventHandler(async (event) => {
+  const { nuxtUsers } = useRuntimeConfig()
+  const options = nuxtUsers as ModuleOptions
+  const query = getQuery(event)
+
+  // Check if Google OAuth is configured
+  if (!options.auth.google) {
+    return sendRedirect(event, options.auth.google?.errorRedirect || '/login?error=oauth_not_configured')
+  }
+
+  // Handle OAuth errors
+  if (query.error) {
+    console.error('[Nuxt Users] Google OAuth error:', query.error)
+    const errorRedirect = options.auth.google.errorRedirect || '/login?error=oauth_failed'
+    return sendRedirect(event, errorRedirect)
+  }
+
+  // Check for authorization code
+  if (!query.code || typeof query.code !== 'string') {
+    console.error('[Nuxt Users] Missing authorization code in OAuth callback')
+    const errorRedirect = options.auth.google.errorRedirect || '/login?error=oauth_failed'
+    return sendRedirect(event, errorRedirect)
+  }
+
+  try {
+    // Construct the callback URL
+    const baseUrl = getRequestURL(event).origin
+    const callbackPath = options.auth.google.callbackUrl || `${options.apiBasePath}/auth/google/callback`
+    const callbackUrl = `${baseUrl}${callbackPath}`
+
+    // Create OAuth2 client
+    const oauth2Client = createGoogleOAuth2Client(options.auth.google, callbackUrl)
+
+    // Exchange code for user info
+    const googleUser = await getGoogleUserFromCode(oauth2Client, query.code)
+
+    // Find or create user in database
+    const user = await findOrCreateGoogleUser(googleUser, options)
+
+    // Check if user account is active
+    if (!user.active) {
+      console.warn(`[Nuxt Users] Inactive user attempted Google OAuth login: ${user.email}`)
+      const errorRedirect = options.auth.google.errorRedirect || '/login?error=account_inactive'
+      return sendRedirect(event, errorRedirect)
+    }
+
+    // Create authentication token - default to remember me for OAuth users
+    const token = await createAuthTokenForUser(user, options, true)
+
+    // Set authentication cookie
+    const cookieOptions = {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'lax' as const,
+      path: '/',
+      maxAge: 60 * 60 * 24 * (options.auth.rememberMeExpiration || 30) // 30 days default
+    }
+
+    setCookie(event, 'auth_token', token, cookieOptions)
+
+    // Update last login time
+    const { useDb } = await import('../../../utils/db')
+    const db = await useDb(options)
+    await db.sql`
+      UPDATE {${options.tables.users}} 
+      SET last_login_at = CURRENT_TIMESTAMP 
+      WHERE id = ${user.id}
+    `
+
+    console.log(`[Nuxt Users] Google OAuth login successful for user: ${user.email}`)
+
+    // Redirect to success page
+    const successRedirect = options.auth.google.successRedirect || '/'
+    return sendRedirect(event, successRedirect)
+
+  } catch (error) {
+    console.error('[Nuxt Users] Google OAuth callback error:', error)
+    const errorRedirect = options.auth.google?.errorRedirect || '/login?error=oauth_failed'
+    return sendRedirect(event, errorRedirect)
+  }
+})
+
+// Helper function to get request URL
+function getRequestURL(event: any) {
+  const headers = event.node.req.headers
+  const host = headers.host || headers[':authority']
+  const protocol = headers['x-forwarded-proto'] || (event.node.req.socket?.encrypted ? 'https' : 'http')
+  return new URL(`${protocol}://${host}`)
+}