Building Google Auth Apps

JavaScript
// Install dependencies
npm install next-auth @next-auth/prisma-adapter prisma @prisma/client

// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    })
  ],
  callbacks: {
    async session({ session, token }) {
      session.user.id = token.sub
      return session
    }
  }
})

Progress:

• Set up Google OAuth credentials in Google Cloud Console
• Configure environment variables
• Set up database schema for users
• Implement authentication provider
• Create protected routes
• Add user session management
• Test authentication flow

Step 1: Google Cloud Setup

1. Go to Google Cloud Console
2. Create new project or select existing
3. Enable Google+ API
4. Create OAuth 2.0 credentials
5. Add authorized redirect URIs: http://localhost:3000/api/auth/callback/google

Step 2: Environment Configuration

ENV
GOOGLE_CLIENT_ID=your_client_id
GOOGLE_CLIENT_SECRET=your_client_secret
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_random_secret

Step 3: Database Schema

PRISMA
// schema.prisma
model User {
  id            String    @id @default(cuid())
  email         String    @unique
  name          String?
  image         String?
  createdAt     DateTime  @default(now())
  accounts      Account[]
  sessions      Session[]
}

model Account {
  // NextAuth required fields
  id                String  @id @default(cuid())
  userId            String
  type              String
  provider          String
  providerAccountId String
  user              User    @relation(fields: [userId], references: [id], onDelete: Cascade)
  
  @@unique([provider, providerAccountId])
}

Step 4: Protected Component

JavaScript
// components/LoginButton.jsx
import { useSession, signIn, signOut } from 'next-auth/react'

export default function LoginButton() {
  const { data: session } = useSession()

  if (session) {
    return (
      <div>
        <p>Welcome {session.user.name}!</p>
        <button onClick={() => signOut()}>Sign out</button>
      </div>
    )
  }
  return <button onClick={() => signIn('google')}>Sign in with Google</button>
}

Example 1: Basic App Structure

my-app/
├── pages/
│   ├── api/auth/[...nextauth].js
│   ├── dashboard.js (protected)
│   └── _app.js
├── components/
│   └── LoginButton.jsx
├── prisma/
│   └── schema.prisma
└── .env.local

Example 2: Protected Page

JavaScript
// pages/dashboard.js
import { useSession, getSession } from 'next-auth/react'
import { useRouter } from 'next/router'

export default function Dashboard() {
  const { data: session, status } = useSession()
  const router = useRouter()

  if (status === 'loading') return <p>Loading...</p>
  if (!session) {
    router.push('/')
    return null
  }

  return (
    <div>
      <h1>Dashboard</h1>
      <p>Welcome, {session.user.name}!</p>
    </div>
  )
}

• Always use HTTPS in production
• Store secrets in environment variables, never in code
• Implement proper session expiry (default 30 days)
• Use database adapter for production (not JWT only)
• Add CSRF protection (NextAuth includes this)
• Validate user data from Google before storing
• Implement proper error handling for auth failures

• Forgetting to add redirect URI in Google Console
• Not setting NEXTAUTH_SECRET in production
• Missing SessionProvider wrapper in _app.js
• Not handling loading states in components
• Exposing client secrets in frontend code
• Not implementing proper logout cleanup
• Forgetting to run database migrations after schema changes