Google Sign-In

​

Prerequisites

1. Create a project in the Google Cloud Console
2. Configure the OAuth consent screen
3. Create OAuth 2.0 credentials (Client ID and Client Secret)
4. Configure authorized redirect URIs

​

Google Cloud Console Setup

1. Create a Project
   • Go to Google Cloud Console
   • Click “Select a project” → “New Project”
   • Name your project and click “Create”
2. Configure OAuth Consent Screen
   • Go to “APIs & Services” → “OAuth consent screen”
   • Choose user type (External for most applications)
   • Fill in the required fields:
     • App name
     • User support email
     • Developer contact information
   • Click “Save and Continue”
   • Add scopes if needed (profile and email are included by default)
   • Click “Save and Continue”
3. Create OAuth Credentials
   • Go to “APIs & Services” → “Credentials”
   • Click “Create Credentials” → “OAuth client ID”
   • Select “Web application” as the application type
   • Add a name for your OAuth client
4. Configure Redirect URIs
   • Under “Authorized JavaScript origins”, add:
     • http://localhost:3000 (for local development)
     • https://yourdomain.com (for production)
   • Under “Authorized redirect URIs”, add:
     • http://localhost:3000/api/_internal/auth/google/callback (for local development)
     • https://yourdomain.com/api/_internal/auth/google/callback (for production)
   • Click “Create”
5. Save Credentials
   • Copy your Client ID and Client Secret
   • Store them securely (use environment variables or Modelence Cloud config)

​

Server-Side Configuration

​

Option 1: Modelence Cloud (Recommended)

1. Go to https://cloud.modelence.com/
2. Navigate to your project
3. Go to Authentication → Providers → Google
4. Enable Google authentication
5. Enter your Client ID and Client Secret from Google Cloud Console
6. Save the configuration

​

Option 2: Environment Variables

MODELENCE_AUTH_GOOGLE_ENABLED=true
MODELENCE_AUTH_GOOGLE_CLIENT_ID=your-client-id.apps.googleusercontent.com
MODELENCE_AUTH_GOOGLE_CLIENT_SECRET=your-client-secret

​

Client-Side Implementation

function handleGoogleSignIn() {
  // Redirect to Google OAuth flow
  window.location.href = '/api/_internal/auth/google';
}

​

UI Integration

function LoginForm() {
  return (
    <div>
      <h2>Sign In</h2>
      <button onClick={() => window.location.href = '/api/_internal/auth/google'}>
        Sign in with Google
      </button>
    </div>
  );
}

​

How Google Sign-In Works

1. Initiation - User clicks “Sign in with Google” button
2. Redirect - User is redirected to Google’s OAuth consent screen
3. Authorization - User grants permission to your app
4. Callback - Google redirects back to your app with an authorization code
5. Token Exchange - Your server exchanges the code for user information
6. User Creation/Login - If user doesn’t exist, a new account is created; otherwise, user is logged in
7. Session Creation - A session is established and the user is authenticated

​

User Data Handling

• Creates a user account if one doesn’t exist
• Links the Google account to the user profile
• Retrieves profile information (name, email, profile picture)
• Marks the email as verified (since Google has verified it)

{
  email: string;           // Google account email
  handle: string;          // Generated from email or name
  emailVerified: true;     // Always true for Google sign-in
  googleId: string;        // Google user ID
  name?: string;           // Full name from Google
  picture?: string;        // Profile picture URL
}

​

Combining with Email/Password Authentication

import { loginWithPassword, logout } from 'modelence/client';
import { useState } from 'react';

function LoginOptions() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <div>
      <h2>Sign In</h2>

      {/* Google Sign-In */}
      <button onClick={() => window.location.href = '/api/_internal/auth/google'}>
        Sign in with Google
      </button>

      <div>or</div>

      {/* Email/Password Sign-In */}
      <form onSubmit={async (e) => {
        e.preventDefault();
        await loginWithPassword({ email, password });
      }}>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="Email"
        />
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="Password"
        />
        <button type="submit">Sign In</button>
      </form>
    </div>
  );
}

​

Troubleshooting

• Ensure the redirect URI in Google Cloud Console exactly matches your application URL
• Check for trailing slashes and http vs https
• Common format: https://yourdomain.com/api/_internal/auth/google/callback

• Verify your Client ID and Client Secret are correct
• Check that environment variables are properly loaded
• Ensure credentials are from the correct Google Cloud project

• Make sure Google+ API is enabled in your project
• Verify your OAuth consent screen is configured
• Check that your domain is authorized