Step-by-Step Guide
7 steps

How to Add Authentication to Your Windsurf App

Windsurf-generated apps often need user authentication. Rather than using AI-generated custom auth code, this guide shows you how to integrate Auth.js (NextAuth), a battle-tested authentication library that handles all the security complexity for you.

Scan Your App Now

Find security issues automatically before attackers do.

Follow These Steps

1

Install Auth.js

Add the authentication library to your project.

Code Example
npm install next-auth@beta
2

Configure Auth.js with providers

Set up authentication providers in your auth configuration.

Code Example
// auth.ts
import NextAuth from 'next-auth'
import Google from 'next-auth/providers/google'
import GitHub from 'next-auth/providers/github'
import Credentials from 'next-auth/providers/credentials'

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [
    Google({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!
    }),
    GitHub({
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!
    })
  ],
  pages: {
    signIn: '/login'
  }
})
3

Set up the API route handler

Create the route that handles auth callbacks.

Code Example
// app/api/auth/[...nextauth]/route.ts
import { handlers } from '@/auth'
export const { GET, POST } = handlers
4

Add middleware for route protection

Protect routes automatically using Next.js middleware.

Code Example
// middleware.ts
export { auth as middleware } from '@/auth'

export const config = {
  matcher: ['/dashboard/:path*', '/api/:path*', '/settings/:path*']
}
5

Set environment variables

Configure the required environment variables.

Code Example
# .env.local
AUTH_SECRET=generate-a-random-32-character-string
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
GITHUB_CLIENT_ID=your-github-client-id
GITHUB_CLIENT_SECRET=your-github-client-secret

Generate AUTH_SECRET with: npx auth secret

6

Access session in Server Components

Use the auth() function to get the current user session.

Code Example
import { auth } from '@/auth'

export default async function DashboardPage() {
  const session = await auth()
  if (!session) return <p>Not authenticated</p>
  return <p>Welcome, {session.user?.name}</p>
}
7

Test the authentication flow

Verify login, logout, and protected route redirection work correctly.

What You'll Achieve

Your Windsurf app has secure authentication with OAuth providers, middleware-based route protection, and proper session management. No custom auth code to maintain.

Common Mistakes to Avoid

Mistake

Building custom auth instead of using a library

Fix

Custom authentication has countless security pitfalls. Use Auth.js, Clerk, or Lucia instead of rolling your own.

Mistake

Not generating a proper AUTH_SECRET

Fix

Use npx auth secret to generate a cryptographically secure random string. Weak secrets compromise all sessions.

Frequently Asked Questions

Should I use Auth.js or a managed service like Clerk?

Auth.js is free and self-hosted but requires more configuration. Clerk and similar services provide a hosted solution with UI components. Choose Auth.js for full control, Clerk for convenience.

How do I add email/password auth with Auth.js?

Use the Credentials provider with proper password hashing (bcrypt). However, OAuth providers are recommended as they handle password security for you.

Related Guides

Secure Your Windsurf AppFix Windsurf API Key ExposureSecure JWT TokensSecure OAuth Implementation

Ready to Secure Your App?

VAS automatically scans your deployed app for the security issues covered in this guide. Get actionable results in minutes.

Start Security Scan