How I Built Google OAuth for a Real SaaS (Next.js + Auth.js) — CreatorCopilot Part 2

NOT A PREMIUM MEMBER : READ HERE

Most authentication guides online are demos.
They help you log in a user — but they don’t help you build a system.

If you’re building anything serious, auth is infrastructure. Not UI.

This is Part 2 of building CreatorCopilot, where we integrate Google OAuth properly using Auth.js.

👉 Watch Part 1 (Architecture): https://youtu.be/w0Cz941iL_4?si=YeaD4ltRarEaWiHl
👉 Watch Part 2 (Implementation): https://youtu.be/29gfFHBroVE?si=J9c_ZxPOBfWFczt2

Why this setup matters

Most people make these mistakes:

• Treat auth as frontend-only

• Store too much logic in Next.js

• Ignore token lifecycle

• Skip backend integration thinking “we’ll fix later”

That “later” becomes a rewrite.

Step 1: Install Auth.js

npm install next-auth@beta

This version aligns with the App Router and modern patterns.

Step 2: Generate a proper secret

npx auth secret

This adds:

AUTH_SECRET="your_generated_secret"

Weak secrets = weak security.

Step 3: Configure Google OAuth

In Google Cloud Console:

• Create project

• Setup OAuth consent screen

• Create credentials

Add redirect URI:

http://localhost:3000/api/auth/callback/google

Miss this → login breaks.

Step 4: Environment variables

AUTH_SECRET="your_secret"
AUTH_GOOGLE_ID="your_client_id"
AUTH_GOOGLE_SECRET="your_client_secret"

Step 5: Centralize auth logic

import NextAuth from "next-auth"
import Google from "next-auth/providers/google"
export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [Google],
})

One file controls everything.

Step 6: API route handler

import { handlers } from "@/lib/auth"
export const { GET, POST } = handlers

Step 7: Sign-in & Sign-out (Server Actions)

import { signIn } from "@/lib/auth"
export default function SignIn() {
  return (
    <form action={async () => {
      "use server"
      await signIn("google")
    }}>
      <button>Sign in with Google</button>
    </form>
  )
}

import { signOut } from "@/lib/auth"
export default function SignOut() {
  return (
    <form action={async () => {
      "use server"
      await signOut()
    }}>
      <button>Sign Out</button>
    </form>
  )
}

Step 8: Server-side session check

import { auth } from "@/lib/auth"
export default async function Page() {
  const session = await auth()
  return (
    <main>
      {session?.user ? (
        <p>Welcome {session.user.name}</p>
      ) : (
        <p>Please sign in</p>
      )}
    </main>
  )
}

What this setup gives you

• Secure session handling

• Google OAuth integration

• Server-side auth access

• Clean architecture foundation

But don’t assume you’re done.

What comes next (real system design)

Right now:

• Google verifies identity

• Next.js manages session

But:

• No backend validation

• No user persistence control

• No role-based access

The real next step

• Send Google token → FastAPI backend

• Verify token server-side

• Create/fetch user in DB

• Issue backend JWT

• Control access via backend

If you skip this, your app is just a frontend demo.

Final thought

Getting login working is easy.

Building authentication that scales and integrates with backend systems is the real challenge.

🔥 Found this blog post helpful? 🔥

If you enjoyed this article and found it valuable, please show your support by clapping 👏 and subscribing to my blog for more in-depth insights on web development and Next.js!

Subscribe here: click me

🚀 Follow me on:

• 🌐 Website: sagarsangwan.dev

• 🐦 Twitter/X: @sagar sangwan

• 🔗 LinkedIn: Sagar Sangwan

• 📸 Instagram: @codingbysagar

• ▶️YouTube: @codingbysagar

Your encouragement helps me continue creating high-quality content that can assist you on your development journey. 🚀