DEV Community: Tom Dekan

The simplest way to add Google sign-in to your Next.js app ✍

Tom Dekan — Sat, 24 May 2025 09:59:21 +0000

This guide shows how to spin up a Next.js (App Router) project that signs users in with Google. We'll use Prisma ORM and BetterAuth, though you can apply the techniques to any next.js app you're building.

(See the updated article with videos at my blog here)

The final output persists sessions in a PostgreSQL database using Prisma, protects a /dashboard route, and is ready for one-click ship to Vercel.

I used this guide when creating a recent project in Next.js. This will now serve as a starter project with Google sign-in auth for all my future projects; no need to repeat adding auth each time.

The full guide wih code is below. It's also in a Github repo that you can clone and start using:

--
When building OAuth, you have a choice of either:

managing auth yourself in your existing database, or
using an additional managed service for auth and storing your user table, like Clerk or Auth0.

I've used a mix of both in the past. I prefer keeping all my data in one database and handling authentication myself.

Some benefits are:

complete control over your data
a faster development experience because you don't need to set up a webhook or a tunnel (Ngrok or Tailscale) in order to test Sign-In locally. You would need these tools if you were using an external managed provider to call your local computer when you're developing.

This guide is for the first option.

1. Scaffold the project

npx create-next-app@latest ultra-starter-app \
  --typescript --app --eslint --tailwind --src-dir --import-alias "@/*"
cd ultra-starter-app

The flags give you TypeScript, the new app/ router, Tailwind, and clean import paths — nothing else.

2. Install runtime + tooling

You can store user sessions in your own database, or a managed user database like Clerk or Auth0.

I much prefer to store user data in my own database; it's secure, flexible, and cheaper than using a managed service.
One key advantage is that you don't need to always expose an internet endpoint from your local machine when developing for the external managed service.

So, I'll use a PostgreSQL database to store user sessions.

Install the dependencies:

pnpm add better-auth @prisma/client
pnpm add -D prisma @better-auth/cli

BetterAuth is the auth engine we'll use.
The CLI will later generate the Prisma schema for you. You can write this schema manually, but I'll use the CLI to generate it.

3. Environment variables

Create .env in the repo root (E.g., inside ./ultra-starter-app):

# BetterAuth
BETTER_AUTH_SECRET=replace-with-64-random-hex
BETTER_AUTH_URL=http://localhost:3000

# Google OAuth
GOOGLE_CLIENT_ID=xxx.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=yyy

# Database
DATABASE_URL=postgresql://<user-to-create>:<password-to-create>@localhost:5432/<database-to-create>

To set the BETTER_AUTH_SECRET, you can use openssl rand -hex 32 to generate a random secret.
Leaving any of these blank will crash the server – by design, not a placeholder.

How to set up your PostgreSQL database

Install PostgreSQL if you don't have it already (E.g., using Homebrew):

brew install postgresql

Alternatively, you can install it using Postgres.app, which offers a nice graphical interface.

Create a user with a password and database:

createuser -s ultra_starter_user
psql -c "ALTER USER ultra_starter_user WITH PASSWORD 'special-password';"
createdb ultra_starter_db

Update your .env file with the credentials:

DATABASE_URL=postgresql://ultra_starter_user:special-password@localhost:5432/ultra_starter_db

Get Google client ID and secret

These are the details that tie your app to Google. This is tricky to find, so I'll walk you through it.

As a prerequisite, you need a Google account.

Go to the Google Cloud Console.
Create a new project. (You might need to click on your existing project to see this option.)
Select the new project
Go to the OAuth consent screen and complete the form
Click to create Oauth client ID and secret.
Select web application.
Enter the following:
- Authorized JavaScript origins: http://localhost:3000
- Authorized redirect URIs: http://localhost:3000/api/auth/callback/google (Note: We'll need to add the production URL here after we deploy to Vercel.)
Click create and download the JSON credentials file.
Open the JSON file
Copy the client ID and secret and paste them into your .env file.

4. Initialize Prisma

From the root of the project, run:

npx prisma init --datasource-provider postgresql

The command creates a bare-bones prisma/schema.prisma.
As mentioned earlier, you can write this schema manually, but I'll use the CLI to generate it.

Generate your prisma client: This is the generated typescript code that prisma uses to interact with your database:
Generate your prisma client:

pnpm prisma generate

Connect BetterAuth to your database

We need to create a Better Auth instance.

Create a file named auth.ts in your project root

touch auth.ts

Import Better Auth and create your auth instance. Make sure to export the auth instance with the variable name auth or as a default export.

import { betterAuth } from "better-auth";
import { prismaAdapter } from "better-auth/adapters/prisma";
import { PrismaClient } from "./src/generated/prisma";

const prisma = new PrismaClient();

export const auth = betterAuth({
    database: prismaAdapter(prisma, {
        provider: "postgresql"
    })
})

5. Connect Prisma to BetterAuth

Generate the schema fragments BetterAuth needs:

npx @better-auth/cli@latest generate --y

The CLI merges the extra models into prisma/schema.prisma; no manual edits needed.

you can check the generated schema in the prisma/schema.prisma file. You should see User, Session, Account, and Verification tables.

Trouble shooting: If this fails with Couldn't read your auth config., follow the steps in the error message and make sure that your imported Prisma client path is pointing to the correct location of the generatd prima client.

Make sure
Run an initial migration:

npx prisma migrate dev --name auth

6. Update your auth.ts file

In ./auth.ts:

import { betterAuth } from "better-auth";
import { prismaAdapter } from "better-auth/adapters/prisma";
import { PrismaClient } from "./src/generated/prisma";
import { inferAdditionalFields } from "better-auth/client/plugins";

const prisma = new PrismaClient();


export const auth = betterAuth({
    database: prismaAdapter(prisma, {
        provider: "postgresql"
    }),
    socialProviders: {
        google: {
            clientId: process.env.GOOGLE_CLIENT_ID!,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
        },
    },
    plugins: [inferAdditionalFields()],
})

export type Session = typeof auth.$Infer.Session

7. Expose the auth handler to Next.js (App Router)

In ./app/api/auth/[...all]/route.ts (Create this file if it doesn't exist):

import { auth } from '../../../../auth'
import { toNextJsHandler } from 'better-auth/next-js'

export const { GET, POST } = toNextJsHandler(auth.handler)

8. Create a thin client wrapper

In ./src/lib/auth-client.ts (Create this file if it doesn't exist)b:

import { inferAdditionalFields } from 'better-auth/client/plugins'
import { createAuthClient } from 'better-auth/react'
import type { auth } from '../../auth'

export const authClient = createAuthClient({
  plugins: [inferAdditionalFields<typeof auth>()]
})

export type Session = typeof authClient.$Infer.Session

9. Create a public sign-in page

In ./app/(auth)/sign-in/page.tsx (Create this file if it doesn't exist):

'use client'

import { authClient } from '@/lib/auth-client'

export default function SignIn() {
  const handleLogin = async () =>
    authClient.signIn.social({ provider: 'google', callbackURL: '/dashboard' })

  return (
    <main className="flex min-h-screen items-center justify-center">
      <button
        onClick={handleLogin}
        className="rounded-lg bg-black px-6 py-3 text-white hover:opacity-80"
      >
        Sign in with Google
      </button>
    </main>
  )
}

10. Create an auth client

This is the code you'll use to interact with the auth service.

Create ./src/lib/auth-client.ts and add the following code:

import { inferAdditionalFields } from 'better-auth/client/plugins'
import { createAuthClient } from 'better-auth/react'
import type { auth } from '../../auth'

export const authClient = createAuthClient({
  plugins: [inferAdditionalFields<typeof auth>()]
})

export type Session = typeof authClient.$Infer.Session

10. Create a sign out button

Create a sign out button component in ./components/SignOutButton.tsx (Create this file if it doesn't exist):

'use client'

import { authClient } from '@/lib/auth-client'
import { useRouter } from 'next/navigation'

export const SignOutButton = () => {
  const router = useRouter()

  const handleSignOut = async () => {
    await authClient.signOut()
    router.refresh()
  }

  return (
    <button
      onClick={handleSignOut}
      className="text-xs text-red-300 hover:text-red-200 transition"
    >
      Sign Out
    </button>
  )
}

11. Create a protected dashboard page

This is the page that the user won't be able to access without being signed in.

In ./app/dashboard/page.tsx (Create this file):

import { redirect } from 'next/navigation'
import { SignOutButton } from '../../components/SignOutButton'
import { authClient } from '@/lib/auth-client'

export default async function Dashboard() {
  const sessionResponse = await authClient.getSession()
  const session = sessionResponse.data


  if (!session) {
    redirect('/sign-in')
  }

  return (
    <section className="p-10">
      <h1 className="text-2xl font-bold">Welcome, {session.user.name}!</h1>
      <p className="mt-2">You made it to the protected area. 🎉</p>
      <SignOutButton />
    </section>
  )
}

11. Lock it down globally with middleware

In ./middleware.ts (Create this file if it doesn't exist):

This is the middleware that will check if the user is signed in. If they are not, it will redirect them to the sign-in page.

import { NextRequest, NextResponse } from 'next/server'
import { getSessionCookie } from 'better-auth/cookies'

export function middleware(req: NextRequest) {
  const cookie = getSessionCookie(req) // cheap — cookie-only check that doesn't call the database on each request.
  if (!cookie) {
    return NextResponse.redirect(new URL('/sign-in', req.url))
  }
  return NextResponse.next()
}

export const config = { matcher: ['/dashboard'] }

13. Bonus: Let's update the sign-in page to look polished

Replace the ./app/(auth)/sign-in/page.tsx file with the following:

This includes smooth animations and satisfying hover effects, courtesy of Framer Motion and Gemini 2.5 Pro:

'use client'

import { authClient } from '@/lib/auth-client'
import { motion } from 'framer-motion'
import { useState } from 'react'

const SignIn = () => {
  const [isHovering, setIsHovering] = useState(false)

  const handleLogin = async () =>
    authClient.signIn.social({ provider: 'google', callbackURL: '/dashboard' })

  return (
    <main className="flex min-h-screen items-center justify-center bg-gradient-to-br from-gray-900 to-black overflow-hidden">
      <div className="relative">
        {/* Animated background elements */}
        {[...Array(6)].map((_, i) => (
          <motion.div
            key={i}
            className="absolute rounded-full bg-blue-500/10"
            initial={{ 
              width: `${50 + i * 20}px`, 
              height: `${50 + i * 20}px`,
              x: -25 - i * 10, 
              y: -25 - i * 10,
              opacity: 0.2,
            }}
            animate={{ 
              scale: [1, 1.1, 1],
              opacity: [0.2, 0.3, 0.2],
            }}
            transition={{ 
              duration: 4 + i,
              repeat: Infinity,
              ease: "easeInOut",
              delay: i * 0.5
            }}
          />
        ))}

        <motion.div
          className="relative z-10 flex flex-col items-center justify-center rounded-xl bg-white/5 backdrop-blur-lg p-10 border border-white/10"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, ease: "easeOut" }}
        >
          <motion.h1 
            className="mb-6 text-3xl font-bold text-white"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.2, duration: 0.8 }}
          >
            Welcome Back
          </motion.h1>

          <motion.div
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.98 }}
            onHoverStart={() => setIsHovering(true)}
            onHoverEnd={() => setIsHovering(false)}
          >
            <button
              onClick={handleLogin}
              className="group relative flex items-center gap-2 rounded-lg bg-white px-8 py-3 text-lg font-medium text-gray-900 shadow-lg transition-all overflow-hidden"
            >
              <motion.div 
                className="absolute inset-0 bg-gradient-to-r from-blue-500 to-indigo-600"
                initial={{ x: '-100%' }}
                animate={{ x: isHovering ? '0%' : '-100%' }}
                transition={{ duration: 0.3 }}
              />

              <motion.span 
                className="relative z-10 text-gray-900 group-hover:text-white transition-colors duration-300"
              >
                Sign in with Google
              </motion.span>

              <motion.svg 
                xmlns="http://www.w3.org/2000/svg" 
                className="relative z-10 h-5 w-5 text-gray-900 group-hover:text-white transition-colors duration-300" 
                viewBox="0 0 24 24"
                initial={{ rotate: 0 }}
                animate={{ rotate: isHovering ? 360 : 0 }}
                transition={{ duration: 0.5 }}
              >
                <path 
                  fill="currentColor" 
                  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="currentColor" 
                  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="currentColor" 
                  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.93l3.66-2.84z" 
                />
                <path 
                  fill="currentColor" 
                  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" 
                />
              </motion.svg>
            </button>
          </motion.div>

          <motion.div
            className="mt-8 text-sm text-gray-400"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.4, duration: 0.8 }}
          >
            Tom's auth demo with Better Auth
          </motion.div>
        </motion.div>
      </div>
    </main>
  )
}

export default SignIn

Bonus: Update the home page to look better

Replace the ./app/page.tsx file with the following:

import Link from "next/link";
import { SignOutButton } from "../components/SignOutButton";
import { authClient } from "@/lib/auth-client";

export default async function Home() {
  const { data: session, error } = await authClient.getSession()

  if (error) {
    console.error('Error fetching session:', error)
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 to-indigo-950 text-white">
      <div className="max-w-5xl mx-auto px-4 py-16">
        {/* Header with user info */}
        <header className="flex justify-between items-center mb-16">
          <div className="flex items-center space-x-2">
            <div className="w-8 h-8 bg-blue-500 rounded-full animate-pulse"></div>
            <h1 className="text-2xl font-bold">Auth Demo</h1>
          </div>

          {session ? (
            <div className="flex items-center gap-3 bg-white/10 backdrop-blur-sm rounded-full pl-3 pr-5 py-2 hover:bg-white/15 transition">
              {session.user.image ? (
                <img
                  src={session.user.image}
                  alt={`${session.user.name}'s profile`}
                  width={32}
                  height={32}
                  className="rounded-full ring-2 ring-blue-400"
                />
              ) : (
                <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
                  <span>{session.user.name?.[0]}</span>
                </div>
              )}
              <div>
                <p className="text-sm font-medium">{session.user.name}</p>
                <div className="flex items-center justify-between">
                  <Link href="/dashboard" className="text-xs text-blue-300 hover:underline">
                    Dashboard →
                  </Link>
                  <span className="px-2">•</span>
                  <SignOutButton />
                </div>
              </div>
            </div>
          ) : (
            <Link
              href="/sign-in"
              className="inline-flex items-center gap-2 bg-white/10 hover:bg-white/15 backdrop-blur-sm px-5 py-2 rounded-full transition-all"
            >
              <span>Sign In</span>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14 5L21 12M21 12L14 19M21 12H3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </Link>
          )}
        </header>

        {/* Main content */}
        <main className="flex flex-col items-center">
          <div className="relative group mb-16">
            <div className="absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg blur opacity-30 group-hover:opacity-80 transition duration-1000"></div>
            <div className="relative bg-black/50 backdrop-blur-md p-8 rounded-lg border border-white/10">
              <h2 className="text-3xl md:text-4xl font-bold mb-4 text-center bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-indigo-400">
                Next.js Google Authentication
              </h2>
              <p className="text-lg text-gray-300 text-center">
                {session 
                  ? `You're signed in as ${session.user.name}. Explore the dashboard to see more.` 
                  : "Experience seamless authentication with Google. Sign in to get started."}
              </p>

              <div className="mt-8 flex justify-center">
                {session ? (
                  <Link 
                    href="/dashboard" 
                    className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 rounded-lg px-6 py-3 text-white font-medium transition transform hover:scale-105"
                  >
                    View Dashboard
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </Link>
                ) : (
                  <Link 
                    href="/sign-in" 
                    className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 rounded-lg px-6 py-3 text-white font-medium transition transform hover:scale-105"
                  >
                    Sign in with Google
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <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" />
                      <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" />
                      <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.93l3.66-2.84z" />
                    </svg>
                  </Link>
                )}
              </div>
            </div>
          </div>

          {/* Features */}
          <div className="w-full grid grid-cols-1 md:grid-cols-3 gap-6">
            {[
              {
                title: "Secure Auth",
                description: "OAuth 2.0 powered authentication with Google",
                icon: (
                  <svg className="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                  </svg>
                )
              },
              {
                title: "App Router",
                description: "Built with Next.js App Router for modern routing",
                icon: (
                  <svg className="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
                  </svg>
                )
              },
              {
                title: "User Profiles",
                description: "Access user data including profile images",
                icon: (
                  <svg className="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                  </svg>
                )
              }
            ].map((feature, index) => (
              <div key={index} className="bg-white/5 backdrop-blur-sm p-6 rounded-lg border border-white/10 hover:bg-white/10 transition">
                <div className="flex items-center gap-3 mb-3">
                  {feature.icon}
                  <h3 className="font-semibold text-lg">{feature.title}</h3>
                </div>
                <p className="text-gray-300">{feature.description}</p>
              </div>
            ))}
          </div>
        </main>
      </div>
    </div>
  );
}

12. Test it locally

pnpm dev

And visit http://localhost:3000/sign-in, press the Google button, and you should land on /dashboard with your name pulled from the Google profile.

13. Deploy

The next step is to deploy! I generally use Vercel, but you can use any other platform.
Let me know if you want me to cover this.

The key points (if you're using Vercel) would be:

Run vercel deploy to link and deploy your app to Vercel
Add the same env vars from step 3 to your Vercel project, adding a new auth secret for production.
Update your Google OAuth authorization callback URL at the Google Cloud Console to your Vercel production URL (e.g. https://<your-vercel-app-name>.vercel.app/api/auth/callback/google).

Congrats

Congrats on adding Google sign-in to your Next.js app! I'd always be interested in seeing what you've built.

As mentioned, the full guide with code is below. It's also in a Github repo that you can clone and start using: https://github.com/tomdekan/tom-auth-starter"

**
(See the updated article with videos at my blog here)**

Automate git commit messages with a simple bash script and openrouter

Tom Dekan — Tue, 13 May 2025 21:59:41 +0000

I like to automate as much work as possible. Here's a simple shell / bash script I'm using to save time by automatically creating git commit messages.

3 steps to get this to work:

Sign up for Openrouter (A unified API for LLM models)
Add your OPENROUTER_API_KEY to your environment variables (or paste it directly into the script below, replacing $OPENROUTER_API_KEY)
Add the below script to your ~/.bash_aliases or ~/.bashrc or equivalent

Refresh your terminal and you're good to go.
You can now generate AI commit messages automatically by typing gca into your terminal.

function gca() {
    local commit_message="$1"
    local push_remote="$2"

    # Check if Git is installed
    if ! command -v git &> /dev/null; then
        echo "Git is not installed. Please install Git and try again."
        return 1
    fi

    # Check if jq is installed
    if ! command -v jq &> /dev/null; then
        echo "jq is not installed. Please install jq and try again."
        return 1
    fi

    # Get the current Git repository
    local repo=$(git rev-parse --show-toplevel 2> /dev/null)
    if [ -z "$repo" ]; then
        echo "Not a Git repository. Please navigate to a Git repository and try again."
        return 1
    fi

    # Check for manual commit message. If provided, use it and exit.
    if [ -n "$commit_message" ]; then
        echo "Using manual commit message: $commit_message"
        git add --all
        git commit -am "$commit_message"
        [ -n "$push_remote" ] && git push origin HEAD
        return 0
    fi

    # Get the diff of the modified files (staged and unstaged)
    local diff=$(git diff HEAD)
    if [ -z "$diff" ]; then
        echo "No changes to commit."
        return 0
    fi

    # Escape the diff for JSON
    local escaped_diff=$(echo "$diff" | jq -Rs .)
    if [ $? -ne 0 ]; then
        echo "Failed to escape diff content"
        return 1
    fi

    local system_message="You are a master programmer who generates concise and informative Git commit messages. Explain why we have made the changes. If I remove a TODO, mention if the commit completed the task. Write a "

    local user_message=$(printf "Write a concise Git commit message for the following changes: Diff: %s. Only output the commit message, no other text. Use plain language to explain why the changes were made. You must exclude any formatting characters such as \`\`\` from your output. The first character of your output must be a capital letter. Write in highly succinct sentences. Never use the word 'Refactor'." "$escaped_diff")

    # Construct the JSON payload using jq
    local json_data=$(jq -n \
      --arg sm "$system_message" \
      --arg um "$user_message" \
      '{
        "model": "google/gemini-2.0-flash-lite-001",
        "messages": [
          {"role": "system", "content": $sm},
          {"role": "user", "content": $um}
        ]
      }')

    if [ $? -ne 0 ]; then
        echo "Failed to construct JSON payload"
        return 1
    fi

    # Make the API call
    local api_response=$(curl --silent --show-error "https://openrouter.ai/api/v1/chat/completions" \
      -X POST \
      -H "Content-Type: application/json" \
      -H "Authorization: Bearer $OPENROUTER_API_KEY" \
      -d "$json_data")

    # Check if the API call was successful
    if [ $? -ne 0 ]; then
        echo "Error calling the API. Please check your internet connection and try again."
        return 1
    fi

    echo "API Response: $api_response"
    echo "\n\n"


    # Extract the commit message using jq
    local commit_message=$(jq -r ".choices[0].message.content" <<< "$api_response")

    # Check if the commit message is empty or null
    if [ -z "$commit_message" ]; then
        echo "Failed to generate a commit message."
        echo "API response: $api_response"
        return 1
    fi

    # Stage and commit all files (staged and unstaged)
    echo "Message: $commit_message"
    git add --all
    git commit -am "$commit_message"

    # Push to remote if specified
    [ -n "$push_remote" ] && git push origin HEAD

    return 0
}

alias gca=gca

The model is set to Gemini 2 Flash Lite. This is a model that's smart enough for creating commit messages, and which is cheap and fast enough not to interrupt your git flow.

Combatting perfectionism after selling my business

Tom Dekan — Sat, 22 Oct 2022 11:14:02 +0000

Background

Over the past 2 months, I've experienced two of my startups ending - one in euthanasia and one in sale.

During my startup that we ended, I kept my perfectionism under control by the time pressure of building for our customers. I would ask customers what they wanted; consider what they actually wanted; and then build it quickly.

This customer demand meant that I rejected unnecessary suggestions and controlled perfectionism. I focused on building what I believed the customers needed within the time constraints. Household cats would have congratulated us on our level of agile working.

The problem

Shortly afterwards, I sold my other software business (Redstone HR) to a UK company. Since then, I've been building software to accelerate the future businesses that I build.

Perfectionism has been rampant.¹

My perfectionism has felt like a colony of rabbits alone in a lush woodland. The rabbits spend their days happily increasing in number, without the constraints of hungry predators.

Similarly, the lack of time or financial pressure has allowed my perfectionism to expand. In this early stage of a new business, there are no constraints - such as customer demands - to restrain perfectionism.

As a side note, I think that the word 'perfectionism' is inaccurately self-complimentary.

Perfectionism sounds impressive: a person is so conscientious that they want every aspect of their work to be as good as possible.

Yet, in practice, perfectionism means that you are fixating on insignificant details and failing to do the most important things. Being a perfectionist is bad thing for achieving your goals. As Voltaire said, and as my friend Matty repeats as if a sacred mantra: "Perfect is the enemy of good."

A trial solution (Adding a fox among the rabbits)

-> Add time constraints with real financial consequences.

Set a deadline with specific targets
Send money to a friend immediately
Tell the friend to dispose of the money if you don't meet the deadline²

The rationale is that a real financial penalty forces you to focus on the most important things. If you do focus on intricate and trifling details, you increase your chance of real financial loss. So you'll avoid doing so, and instead focus on the actions that maximise achieving your targets. This counters perfectionism. By incentivising yourself to prioritise the most important, you will make greater progress.

On point 2, it is important to send the money before beginning. This is because the constraints become real once you send the money from your bank account. You have literally suffered financial loss. If you don't meet the deadline, you will not recover the money.

My initial results were strongly positive. Throughout the day, I prioritised more significant tasks and avoided disappearing into a recursive spiral of beautiful tiny details.³

I recommend the method. Send your money away for the day.

To give one example of perfectionism with picking technologies, I started by working with Supabase. I like the idea of doing as little plumbing work as possible when creating a new software product. This particularly applies to commodity tasks like user authentication, server infrastructure, transaction email, CI, CD etc. So Supabase seemed great. However, a week later, after connecting Django to Supabase with a non-tracking model to manage the backend complexity and allow for backend unit tests, the desire for a perfectly neat approach using Supabase had devolved into high complexity. I moved onto using Nuxt 3. I really like Nuxt 2 and have contributed to the project in the past. However, Nuxt 3 (RC) is not ready for my use at the time of production. There were problems with composables; Pinia failed to run with my version; and other cloying bugs slowed progress. I moved on.I decided to use Nextjs (a React framework) for my frontend. Vercel are a great company and Nextjs is their product. This would be a good choice because Nextjs is highly supported, contains many of the attractive features of Nuxt3 (such as a fast hot-reloader and file-based server middleware), and also contains its own auth, Next Auth, which I could just plugin. After a week of working with Next, I realised that I much prefer the Nuxt syntax. I returned to Nuxt 2. ↩
I recommend that you don't ask the friend to donate the money to charity. You don't want to gain any alturistic feeling by failing to hit your target. ↩
Several examples of insignificant side-tasks: Refactoring good code to excellent code; reorganising the codebase to make it neater; general tidying; adding optional configuration for code linters. ↩