feat: add google auth to the playground

Author: rrd108

playground/.env.example

@@ -0,0 +1,13 @@
+# Google OAuth Configuration
+# Get these from https://console.cloud.google.com/
+# 1. Create a new project or select existing
+# 2. Enable Google+ API or People API
+# 3. Go to Credentials > Create Credentials > OAuth 2.0 Client ID
+# 4. Set callback URL to: http://localhost:3000/api/nuxt-users/auth/google/callback
+
+GOOGLE_CLIENT_ID=your_google_client_id_here
+GOOGLE_CLIENT_SECRET=your_google_client_secret_here
+
+# Example values for development:
+# GOOGLE_CLIENT_ID=123456789-abcdefghijklmnopqrstuvwxyz.apps.googleusercontent.com
+# GOOGLE_CLIENT_SECRET=GOCSPX-abcdefghijklmnopqrstuvwxyz

playground/nuxt.config.ts

@@ -15,6 +15,12 @@ export default defineNuxtConfig({
       /* permissions: {
         admin: ['*'],
       }, */
+      google: {
+        clientId: process.env.GOOGLE_CLIENT_ID || 'demo-client-id',
+        clientSecret: process.env.GOOGLE_CLIENT_SECRET || 'demo-client-secret',
+        successRedirect: '/',
+        errorRedirect: '/login?error=oauth_failed'
+      }
     },
     passwordValidation: {
       minLength: 3,

playground/pages/login.vue

@@ -19,6 +19,10 @@ const handleSubmit = (data) => {
   // The login composable will now handle the rememberMe flag automatically
   // when the server responds with user data after successful authentication
 }
+
+const handleGoogleLogin = () => {
+  console.log('[Nuxt Users] Starting Google OAuth flow')
+}
 </script>
 
 <template>
@@ -40,6 +44,20 @@ const handleSubmit = (data) => {
       @error="handleError"
       @submit="handleSubmit"
     />
+    
+    <div class="oauth-divider">
+      <span>or</span>
+    </div>
+    
+    <div class="oauth-section">
+      <h3>OAuth Login</h3>
+      <p>Click below to test Google OAuth (requires valid credentials in .env)</p>
+      <NUsersGoogleLoginButton 
+        @click="handleGoogleLogin"
+        button-text="Continue with Google"
+        class="google-btn"
+      />
+    </div>
   </div>
 </template>
 
@@ -90,6 +108,50 @@ nav a {
   text-align: center;
 }
 
+.oauth-divider {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  margin: 2rem 0;
+}
+
+.oauth-divider::before,
+.oauth-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--nu-color-border);
+}
+
+.oauth-divider span {
+  padding: 0 1rem;
+  color: var(--nu-color-gray-500);
+  font-size: 0.875rem;
+  background: var(--nu-color-bg);
+}
+
+.oauth-section {
+  text-align: center;
+  margin-top: 2rem;
+}
+
+.oauth-section h3 {
+  color: var(--nu-color-gray-700);
+  margin-bottom: 0.5rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.oauth-section p {
+  color: var(--nu-color-gray-500);
+  margin-bottom: 1rem;
+  font-size: 0.875rem;
+}
+
+.google-btn {
+  margin: 0 auto;
+}
+
 /* Responsive design */
 @media (max-width: 48rem) {
   .demo-container {