@codaijs/keel 0.2.3 → 0.2.4

package/sails/google-oauth/README.md

@@ -1,121 +1,121 @@
-# Google OAuth Sail
-
-Adds Google sign-in to your keel application using BetterAuth's social provider system.
-
-## Prerequisites
-
-- A Google Cloud project
-- OAuth 2.0 credentials (Client ID and Client Secret)
-
-## Installation
-
-```bash
-npx tsx sails/google-oauth/install.ts
-```
-
-The installer will prompt for your Google OAuth credentials and configure everything automatically.
-
-## Manual Setup: Google Cloud Console
-
-### 1. Create or Select a Project
-
-1. Go to [Google Cloud Console](https://console.cloud.google.com/)
-2. Click the project dropdown in the top bar
-3. Click **New Project** or select an existing one
-
-### 2. Enable the Google+ API (if not enabled)
-
-1. Go to **APIs & Services** > **Library**
-2. Search for "Google+ API" or "Google Identity"
-3. Click **Enable**
-
-### 3. Configure the OAuth Consent Screen
-
-1. Go to **APIs & Services** > **OAuth consent screen**
-2. Select **External** (or **Internal** for Google Workspace orgs)
-3. Fill in the required fields:
-   - **App name**: Your application name
-   - **User support email**: Your email
-   - **Developer contact information**: Your email
-4. Add scopes: `email`, `profile`, `openid`
-5. Add test users if in "Testing" mode
-
-### 4. Create OAuth 2.0 Credentials
-
-1. Go to **APIs & Services** > **Credentials**
-2. Click **Create Credentials** > **OAuth client ID**
-3. Select **Web application**
-4. Set the name (e.g., "My App - Web")
-5. Add **Authorized JavaScript origins**:
-   - `http://localhost:5173` (Vite dev server)
-   - `https://yourdomain.com` (production)
-6. Add **Authorized redirect URIs**:
-   - `http://localhost:3000/api/auth/callback/google` (development)
-   - `https://yourdomain.com/api/auth/callback/google` (production)
-7. Click **Create**
-8. Copy the **Client ID** and **Client Secret**
-
-### 5. Configure Environment Variables
-
-Add to your `.env` file:
-
-```env
-GOOGLE_CLIENT_ID=your-client-id.apps.googleusercontent.com
-GOOGLE_CLIENT_SECRET=your-client-secret
-```
-
-## How It Works
-
-### Authentication Flow
-
-1. User clicks "Continue with Google" button
-2. BetterAuth redirects to Google's OAuth consent screen
-3. User authorizes the application
-4. Google redirects back to `/api/auth/callback/google`
-5. BetterAuth creates or links the user account
-6. User is redirected to the dashboard
-
-### Files Modified
-
-**Backend:**
-- `src/auth/index.ts` -- Google added as a social provider in BetterAuth config
-- `src/env.ts` -- Environment variable validation for Google credentials
-
-**Frontend:**
-- `src/components/auth/LoginForm.tsx` -- Google sign-in button added
-- `src/components/auth/SignupForm.tsx` -- Google sign-in button added
-
-### Files Added
-
-**Frontend:**
-- `src/components/auth/GoogleButton.tsx` -- Styled Google sign-in button component
-
-## Capacitor / Native Apps
-
-For native mobile apps using Capacitor, Google OAuth works through the system browser (in-app browser tab). The redirect URI remains the same since the native app loads the web app in a WebView.
-
-If you need native Google Sign-In (using the Google SDK directly), you will need to:
-
-1. Create separate OAuth credentials for iOS and Android
-2. Use `@capacitor/google-auth` plugin
-3. Pass the token to BetterAuth for session creation
-
-## Troubleshooting
-
-### "redirect_uri_mismatch" Error
-
-Make sure your redirect URI in Google Cloud Console exactly matches:
-- Development: `http://localhost:3000/api/auth/callback/google`
-- Production: `https://yourdomain.com/api/auth/callback/google`
-
-The port must match your backend server port, and the path is determined by BetterAuth.
-
-### "Access blocked: app has not completed verification"
-
-Your OAuth consent screen is in "Testing" mode. Either:
-- Add test users in the consent screen settings, or
-- Submit your app for verification (required for production)
-
-### Users Not Being Linked
-
-If a user signs up with email/password and later tries Google OAuth with the same email, BetterAuth will attempt to link the accounts. Make sure `account linking` is enabled in your BetterAuth configuration.
+# Google OAuth Sail
+
+Adds Google sign-in to your keel application using BetterAuth's social provider system.
+
+## Prerequisites
+
+- A Google Cloud project
+- OAuth 2.0 credentials (Client ID and Client Secret)
+
+## Installation
+
+```bash
+npx tsx sails/google-oauth/install.ts
+```
+
+The installer will prompt for your Google OAuth credentials and configure everything automatically.
+
+## Manual Setup: Google Cloud Console
+
+### 1. Create or Select a Project
+
+1. Go to [Google Cloud Console](https://console.cloud.google.com/)
+2. Click the project dropdown in the top bar
+3. Click **New Project** or select an existing one
+
+### 2. Enable the Google+ API (if not enabled)
+
+1. Go to **APIs & Services** > **Library**
+2. Search for "Google+ API" or "Google Identity"
+3. Click **Enable**
+
+### 3. Configure the OAuth Consent Screen
+
+1. Go to **APIs & Services** > **OAuth consent screen**
+2. Select **External** (or **Internal** for Google Workspace orgs)
+3. Fill in the required fields:
+   - **App name**: Your application name
+   - **User support email**: Your email
+   - **Developer contact information**: Your email
+4. Add scopes: `email`, `profile`, `openid`
+5. Add test users if in "Testing" mode
+
+### 4. Create OAuth 2.0 Credentials
+
+1. Go to **APIs & Services** > **Credentials**
+2. Click **Create Credentials** > **OAuth client ID**
+3. Select **Web application**
+4. Set the name (e.g., "My App - Web")
+5. Add **Authorized JavaScript origins**:
+   - `http://localhost:5173` (Vite dev server)
+   - `https://yourdomain.com` (production)
+6. Add **Authorized redirect URIs**:
+   - `http://localhost:3000/api/auth/callback/google` (development)
+   - `https://yourdomain.com/api/auth/callback/google` (production)
+7. Click **Create**
+8. Copy the **Client ID** and **Client Secret**
+
+### 5. Configure Environment Variables
+
+Add to your `.env` file:
+
+```env
+GOOGLE_CLIENT_ID=your-client-id.apps.googleusercontent.com
+GOOGLE_CLIENT_SECRET=your-client-secret
+```
+
+## How It Works
+
+### Authentication Flow
+
+1. User clicks "Continue with Google" button
+2. BetterAuth redirects to Google's OAuth consent screen
+3. User authorizes the application
+4. Google redirects back to `/api/auth/callback/google`
+5. BetterAuth creates or links the user account
+6. User is redirected to the dashboard
+
+### Files Modified
+
+**Backend:**
+- `src/auth/index.ts` -- Google added as a social provider in BetterAuth config
+- `src/env.ts` -- Environment variable validation for Google credentials
+
+**Frontend:**
+- `src/components/auth/LoginForm.tsx` -- Google sign-in button added
+- `src/components/auth/SignupForm.tsx` -- Google sign-in button added
+
+### Files Added
+
+**Frontend:**
+- `src/components/auth/GoogleButton.tsx` -- Styled Google sign-in button component
+
+## Capacitor / Native Apps
+
+For native mobile apps using Capacitor, Google OAuth works through the system browser (in-app browser tab). The redirect URI remains the same since the native app loads the web app in a WebView.
+
+If you need native Google Sign-In (using the Google SDK directly), you will need to:
+
+1. Create separate OAuth credentials for iOS and Android
+2. Use `@capacitor/google-auth` plugin
+3. Pass the token to BetterAuth for session creation
+
+## Troubleshooting
+
+### "redirect_uri_mismatch" Error
+
+Make sure your redirect URI in Google Cloud Console exactly matches:
+- Development: `http://localhost:3000/api/auth/callback/google`
+- Production: `https://yourdomain.com/api/auth/callback/google`
+
+The port must match your backend server port, and the path is determined by BetterAuth.
+
+### "Access blocked: app has not completed verification"
+
+Your OAuth consent screen is in "Testing" mode. Either:
+- Add test users in the consent screen settings, or
+- Submit your app for verification (required for production)
+
+### Users Not Being Linked
+
+If a user signs up with email/password and later tries Google OAuth with the same email, BetterAuth will attempt to link the accounts. Make sure `account linking` is enabled in your BetterAuth configuration.

package/sails/google-oauth/addon.json

@@ -1,22 +1,22 @@
-{
-  "name": "google-oauth",
-  "displayName": "Google OAuth",
-  "description": "Adds Google OAuth sign-in via BetterAuth social provider",
-  "version": "1.0.0",
-  "compatibility": ">=1.0.0",
-  "requiredEnvVars": [
-    { "key": "GOOGLE_CLIENT_ID", "description": "Google OAuth Client ID from Google Cloud Console" },
-    { "key": "GOOGLE_CLIENT_SECRET", "description": "Google OAuth Client Secret" }
-  ],
-  "dependencies": {
-    "backend": {},
-    "frontend": {}
-  },
-  "modifies": {
-    "backend": ["src/auth/index.ts", "src/env.ts"],
-    "frontend": ["src/components/auth/LoginForm.tsx", "src/components/auth/SignupForm.tsx"]
-  },
-  "adds": {
-    "frontend": ["src/components/auth/GoogleButton.tsx"]
-  }
-}
+{
+  "name": "google-oauth",
+  "displayName": "Google OAuth",
+  "description": "Adds Google OAuth sign-in via BetterAuth social provider",
+  "version": "1.0.0",
+  "compatibility": ">=1.0.0",
+  "requiredEnvVars": [
+    { "key": "GOOGLE_CLIENT_ID", "description": "Google OAuth Client ID from Google Cloud Console" },
+    { "key": "GOOGLE_CLIENT_SECRET", "description": "Google OAuth Client Secret" }
+  ],
+  "dependencies": {
+    "backend": {},
+    "frontend": {}
+  },
+  "modifies": {
+    "backend": ["src/auth/index.ts", "src/env.ts"],
+    "frontend": ["src/components/auth/LoginForm.tsx", "src/components/auth/SignupForm.tsx"]
+  },
+  "adds": {
+    "frontend": ["src/components/auth/GoogleButton.tsx"]
+  }
+}

package/sails/google-oauth/files/GoogleButton.tsx

@@ -1,50 +1,50 @@
-import { authClient } from "@/lib/auth-client";
-
-/**
- * Google sign-in button component.
- *
- * Uses BetterAuth's social sign-in to redirect the user to Google's OAuth
- * consent screen. After authorization, Google redirects back to the app and
- * BetterAuth completes the session creation automatically.
- */
-export function GoogleButton() {
-  const handleGoogleSignIn = async () => {
-    await authClient.signIn.social({
-      provider: "google",
-      callbackURL: "/dashboard",
-    });
-  };
-
-  return (
-    <button
-      type="button"
-      onClick={handleGoogleSignIn}
-      className="flex w-full items-center justify-center gap-3 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
-    >
-      {/* Google "G" logo */}
-      <svg
-        className="h-5 w-5"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
-          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.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"
-          fill="#EA4335"
-        />
-      </svg>
-      Continue with Google
-    </button>
-  );
-}
+import { authClient } from "@/lib/auth-client";
+
+/**
+ * Google sign-in button component.
+ *
+ * Uses BetterAuth's social sign-in to redirect the user to Google's OAuth
+ * consent screen. After authorization, Google redirects back to the app and
+ * BetterAuth completes the session creation automatically.
+ */
+export function GoogleButton() {
+  const handleGoogleSignIn = async () => {
+    await authClient.signIn.social({
+      provider: "google",
+      callbackURL: "/dashboard",
+    });
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleGoogleSignIn}
+      className="flex w-full items-center justify-center gap-3 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
+    >
+      {/* Google "G" logo */}
+      <svg
+        className="h-5 w-5"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
+          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.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"
+          fill="#EA4335"
+        />
+      </svg>
+      Continue with Google
+    </button>
+  );
+}