Authentication Basics

// Session-based: Server stores user data
const session = {
  userId: 123,
  email: 'reader@newswave.com',
  expires: new Date('2024-12-31')
}

// Token-based: Client stores signed user data  
const jwt = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...'

# Install NextAuth.js for NewsWave authentication
npm install next-auth

# Optional: Install database adapter
npm install @next-auth/prisma-adapter

// lib/auth.js - NextAuth configuration for NewsWave
import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'
import CredentialsProvider from 'next-auth/providers/credentials'

export const authOptions = {
  providers: [
    // Google OAuth for social login
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
}

# .env.local - Authentication secrets for NewsWave
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-key-here

# Google OAuth credentials
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

// app/api/auth/[...nextauth]/route.js - Authentication API routes
import NextAuth from 'next-auth'
import { authOptions } from '@/lib/auth'

// Handle all authentication requests
const handler = NextAuth(authOptions)

// Export for GET and POST requests
export { handler as GET, handler as POST }

// lib/auth.js - Session configuration for NewsWave
export const authOptions = {
  providers: [/* providers here */],
  
  // Use JWT sessions for serverless compatibility
  session: {
    strategy: 'jwt',
    maxAge: 30 * 24 * 60 * 60, // 30 days
  },
  
  // Customize JWT token content
  jwt: {
    maxAge: 30 * 24 * 60 * 60, // 30 days
  },
}

// lib/auth.js - Custom session data for NewsWave users
export const authOptions = {
  callbacks: {
    // Add custom data to JWT tokens
    async jwt({ token, user }) {
      if (user) {
        token.role = user.role || 'reader' // Default role for NewsWave users
        token.subscription = user.subscription || 'free'
      }
      return token
    },
    
    // Shape session data for client components
    async session({ session, token }) {
      session.user.role = token.role
      session.user.subscription = token.subscription
      return session
    },
  },
}

// components/UserProfile.js - Access session data in NewsWave
'use client'
import { useSession, signOut } from 'next-auth/react'

export default function UserProfile() {
  const { data: session, status } = useSession()
  
  if (status === 'loading') return <div>Loading...</div>
  if (!session) return <div>Please sign in</div>
  
  return (
    <div>
      <h3>Welcome, {session.user.name}</h3>
      <p>Role: {session.user.role}</p>
      <button onClick={() => signOut()}>Sign Out</button>
    </div>
  )
}

// lib/auth.js - Multiple OAuth providers for NewsWave
import GoogleProvider from 'next-auth/providers/google'
import GitHubProvider from 'next-auth/providers/github'
import TwitterProvider from 'next-auth/providers/twitter'

export const authOptions = {
  providers: [
    // Google OAuth - most popular social login
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    
    // GitHub OAuth - developer-friendly
    GitHubProvider({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
  ],
}

// lib/auth.js - Email/password authentication for NewsWave
import CredentialsProvider from 'next-auth/providers/credentials'

export const authOptions = {
  providers: [
    CredentialsProvider({
      name: 'Email and Password',
      credentials: {
        email: { label: 'Email', type: 'email' },
        password: { label: 'Password', type: 'password' }
      },
      
      // Verify credentials against your database
      async authorize(credentials) {
        const user = await verifyCredentials(
          credentials.email, 
          credentials.password
        )
        
        if (user) {
          return {
            id: user.id,
            name: user.name,
            email: user.email,
            role: user.role
          }
        }
        return null // Invalid credentials
      }
    }),
  ],
}

// lib/auth.js - Custom authentication flow for NewsWave
export const authOptions = {
  providers: [/* providers */],
  
  callbacks: {
    // Control who can sign in
    async signIn({ user, account, profile }) {
      // Block users without verified email
      if (account.provider === 'google' && !profile.email_verified) {
        return false
      }
      
      // Only allow specific domains for NewsWave staff
      if (user.email.endsWith('@newswave.com')) {
        user.role = 'editor'
      }
      
      return true // Allow sign in
    },
    
    // Customize redirect after authentication  
    async redirect({ url, baseUrl }) {
      // Redirect to dashboard for authenticated users
      return url.startsWith(baseUrl) ? url : `${baseUrl}/dashboard`
    }
  },
}

// components/LoginButton.js - Social login for NewsWave readers
'use client'
import { signIn, signOut, useSession } from 'next-auth/react'

export default function LoginButton() {
  const { data: session } = useSession()
  
  // Show logout if user is authenticated
  if (session) {
    return (
      <div>
        <span>Welcome, {session.user.name}!</span>
        <button onClick={() => signOut()}>
          Sign Out
        </button>
      </div>
    )
  }
  
  // Show login options for anonymous users
  return (
    <div>
      <button onClick={() => signIn('google')}>
        Sign in with Google
      </button>
      <button onClick={() => signIn('github')}>
        Sign in with GitHub  
      </button>
    </div>
  )
}

// components/CustomLoginForm.js - Custom email/password form  
'use client'
import { signIn } from 'next-auth/react'
import { useState } from 'react'

export default function CustomLoginForm() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [loading, setLoading] = useState(false)
  
  const handleSubmit = async (e) => {
    e.preventDefault()
    setLoading(true)
    
    // Submit credentials to NextAuth
    const result = await signIn('credentials', {
      email,
      password,
      redirect: false // Handle result manually
    })
    
    if (result?.error) {
      alert('Login failed: ' + result.error)
    }
    setLoading(false)
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="email"
        placeholder="Email address"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required 
      />
      <input 
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        required 
      />
      <button type="submit" disabled={loading}>
        {loading ? 'Signing in...' : 'Sign In'}
      </button>
    </form>
  )
}

// app/layout.js - Wrap NewsWave with session provider
'use client'
import { SessionProvider } from 'next-auth/react'

export default function RootLayout({ children, session }) {
  return (
    <html lang="en">
      <body>
        {/* Make session available to all components */}
        <SessionProvider session={session}>
          <header>
            <h1>NewsWave</h1>
            <LoginButton />
          </header>
          <main>{children}</main>
        </SessionProvider>
      </body>
    </html>
  )
}

// middleware.js - Protect NewsWave dashboard and admin pages
import { withAuth } from 'next-auth/middleware'

export default withAuth(
  function middleware(req) {
    // Additional logic can go here
    console.log('Protected route accessed:', req.nextUrl.pathname)
  },
  {
    callbacks: {
      // Check if user can access the page
      authorized: ({ token, req }) => {
        const { pathname } = req.nextUrl
        
        // Admin routes require admin role
        if (pathname.startsWith('/admin')) {
          return token?.role === 'admin'
        }
        
        // Dashboard requires any authenticated user
        if (pathname.startsWith('/dashboard')) {
          return !!token
        }
        
        return true // Allow public routes
      },
    },
  }
)

// Specify which routes to protect
export const config = {
  matcher: ['/dashboard/:path*', '/admin/:path*']
}

// app/dashboard/page.js - Server-side protection for NewsWave dashboard
import { getServerSession } from 'next-auth/next'
import { authOptions } from '@/lib/auth'
import { redirect } from 'next/navigation'

export default async function Dashboard() {
  // Check authentication on the server
  const session = await getServerSession(authOptions)
  
  // Redirect to login if not authenticated
  if (!session) {
    redirect('/api/auth/signin')
  }
  
  return (
    <div>
      <h1>NewsWave Dashboard</h1>
      <p>Welcome back, {session.user.name}!</p>
      {/* Dashboard content here */}
    </div>
  )
}

// components/ProtectedPage.js - Client-side route protection
'use client'
import { useSession } from 'next-auth/react'
import { useRouter } from 'next/navigation'
import { useEffect } from 'react'

export default function ProtectedPage({ children }) {
  const { data: session, status } = useSession()
  const router = useRouter()
  
  useEffect(() => {
    // Redirect unauthorized users
    if (status === 'unauthenticated') {
      router.push('/api/auth/signin')
    }
  }, [status, router])
  
  // Show loading while checking authentication
  if (status === 'loading') {
    return <div>Checking authentication...</div>
  }
  
  // Show login prompt for unauthenticated users
  if (!session) {
    return <div>Please sign in to access this page</div>
  }
  
  // Render protected content
  return children
}