Skip to content

lanemc/easy-auth-sdk

Repository files navigation

πŸ” Easy Auth SDK

The authentication solution that just worksβ„’

npm version TypeScript License: MIT PRs Welcome

Stop building auth. Start shipping features.

Quick Start β€’ Features β€’ Demo β€’ Docs β€’ Examples


Easy Auth Demo

🌟 Why Easy Auth?

Building authentication is hard. Building it securely is even harder. We've all been there:

  • 😩 Spending days setting up auth instead of building features
  • πŸ”§ Wrestling with OAuth provider documentation
  • 🎨 Building the same login forms over and over
  • πŸ”’ Worrying about security vulnerabilities
  • πŸ“š Dealing with incomplete or confusing documentation

Easy Auth SDK solves all of this. One package, five minutes, and you're done.

// This is all you need. Seriously.
import { createAuthHandlers } from 'easy-auth-sdk/next'

export const { GET, POST } = createAuthHandlers({
  database: { url: process.env.DATABASE_URL },
  providers: { google: { enabled: true } }
})

✨ Features

🎯 Dead Simple Setup

npm install easy-auth-sdk

That's it. No complex configuration. Sensible defaults. It just works.

🎨 Beautiful UI Included

Pre-built components with Shadcn UI + Tailwind. Fully customizable or bring your own.

πŸ” Secure by Default

Rate limiting, CSRF protection, secure sessions, and password policies built-in. Sleep easy.

πŸš€ Framework Ready

First-class Next.js support. Express coming soon. Works with any Node.js app.

πŸ“¦ Batteries Included

Email/password, OAuth (Google, GitHub, etc.), password reset, and more out of the box.

πŸ’ͺ TypeScript First

Full type safety. Autocomplete everything. Catch errors before runtime.

πŸš€ Quick Start

1. Install

npm install easy-auth-sdk

# Required peer dependencies (if not already installed)
npm install react react-dom next

2. Set Environment Variables

# .env.local
DATABASE_URL="postgresql://user:pass@localhost:5432/myapp"
AUTH_SECRET="your-secret-key-min-32-chars" # Generate with: openssl rand -base64 32

3. Create Auth API Route

// app/api/auth/[...auth]/route.ts
import { createAuthHandlers } from 'easy-auth-sdk/next'

export const { GET, POST } = createAuthHandlers({
  database: { 
    type: 'postgres',
    url: process.env.DATABASE_URL! 
  },
  session: {
    secret: process.env.AUTH_SECRET!
  },
  providers: {
    emailPassword: { enabled: true },
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!
    }
  }
})

4. Add Provider to Layout

// app/layout.tsx
import { NextAuthProvider } from 'easy-auth-sdk/next/client'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <NextAuthProvider>
          {children}
        </NextAuthProvider>
      </body>
    </html>
  )
}

5. Create Login Page

// app/login/page.tsx
'use client'

import { AuthComponent } from 'easy-auth-sdk/react'
import { useNextAuth } from 'easy-auth-sdk/next/client'

export default function LoginPage() {
  const { signIn, signUp, oauthSignIn, loading, error } = useNextAuth()

  return (
    <AuthComponent
      onSignIn={signIn}
      onSignUp={signUp}
      onOAuthSignIn={oauthSignIn}
      providers={[
        { id: 'google', name: 'Google' },
        { id: 'github', name: 'GitHub' }
      ]}
      loading={loading}
      error={error}
    />
  )
}

That's it! You now have a fully functional auth system with:

  • βœ… Beautiful login/signup UI
  • βœ… Email/password authentication
  • βœ… Social logins
  • βœ… Secure sessions
  • βœ… Password reset flow
  • βœ… TypeScript support

🎨 UI Components


Login Form

Sign Up Form

Password Reset

OAuth Providers

All components are:

  • 🎨 Beautifully designed with Shadcn UI
  • πŸ“± Fully responsive out of the box
  • β™Ώ Accessible (WCAG 2.1 compliant)
  • 🎯 Customizable with Tailwind classes
  • πŸŒ™ Dark mode ready

πŸ”§ Advanced Usage

πŸ›‘οΈ Protecting Pages

Server Components

import { getServerSession } from 'easy-auth-sdk/next/server'
import { redirect } from 'next/navigation'

export default async function DashboardPage() {
  const session = await getServerSession()
  
  if (!session) {
    redirect('/login')
  }

  return <h1>Welcome, {session.user.name}!</h1>
}

Client Components

'use client'

import { withNextAuth } from 'easy-auth-sdk/next/client'

function ProtectedComponent() {
  return <div>Secret content 🀫</div>
}

export default withNextAuth(ProtectedComponent)

πŸ”Œ OAuth Providers

Setting up OAuth is as simple as adding credentials:

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!
  },
  // Add more providers...
}
πŸ“‹ Supported Providers
  • βœ… Google
  • βœ… GitHub
  • βœ… Facebook
  • βœ… Twitter/X
  • βœ… Microsoft (coming soon)
  • βœ… Apple (coming soon)
  • βœ… Discord (coming soon)
  • βœ… Custom OAuth

🎨 Customizing UI

Using Theme Variables

:root {
  --primary: 220 90% 56%;           /* Your brand color */
  --primary-foreground: 0 0% 100%;  /* Text on primary */
  /* ... more variables */
}

Custom Styling

<AuthComponent
  className="custom-auth-wrapper"
  texts={{
    signIn: {
      title: "Welcome Back! πŸ‘‹",
      description: "Sign in to continue your journey"
    }
  }}
/>

Headless Mode

import { useNextAuth } from 'easy-auth-sdk/next/client'

function CustomLoginForm() {
  const { signIn, loading, error } = useNextAuth()
  
  // Build your own UI
  return (
    <form onSubmit={(e) => {
      e.preventDefault()
      signIn(email, password)
    }}>
      {/* Your custom form */}
    </form>
  )
}

πŸ” Security Configuration

const config = {
  security: {
    rateLimit: {
      maxAttempts: 5,
      windowMs: 15 * 60 * 1000 // 15 minutes
    },
    passwordPolicy: {
      minLength: 8,
      requireUppercase: true,
      requireNumbers: true,
      requireSpecialChars: true
    },
    csrf: {
      enabled: true
    }
  }
}

πŸͺ Event Hooks

const config = {
  callbacks: {
    onSignUp: async ({ user }) => {
      // Send welcome email
      await sendWelcomeEmail(user.email)
      
      // Track analytics
      analytics.track('user_signup', { userId: user.id })
    },
    
    onSignIn: async ({ user, account }) => {
      // Update last login
      await updateLastLogin(user.id)
    },
    
    onSignOut: async ({ user }) => {
      // Cleanup tasks
      await clearUserCache(user.id)
    }
  }
}

πŸ“Š Database

Schema Overview

Easy Auth automatically creates and manages these tables:

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”     β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”     β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚   users     β”‚     β”‚   accounts   β”‚     β”‚   sessions   β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€     β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€     β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
β”‚ id          │◄───── userId       │◄───── userId       β”‚
β”‚ email       β”‚     β”‚ provider     β”‚     β”‚ sessionToken β”‚
β”‚ name        β”‚     β”‚ providerId   β”‚     β”‚ expiresAt    β”‚
β”‚ password    β”‚     β”‚ accessToken  β”‚     β”‚ createdAt    β”‚
β”‚ verified    β”‚     β”‚ refreshToken β”‚     β”‚ updatedAt    β”‚
β”‚ createdAt   β”‚     β”‚ createdAt    β”‚     β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
β”‚ updatedAt   β”‚     β”‚ updatedAt    β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜     β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

Migrations

# Generate migration files
npx drizzle-kit generate:pg

# Apply migrations
npx drizzle-kit push:pg

# View database studio
npx drizzle-kit studio

πŸ”„ Migration from NextAuth

Moving from NextAuth? It's seamless:

- import NextAuth from 'next-auth'
- import GoogleProvider from 'next-auth/providers/google'
+ import { createAuthHandlers } from 'easy-auth-sdk/next'

- export default NextAuth({
-   providers: [
-     GoogleProvider({
-       clientId: process.env.GOOGLE_CLIENT_ID,
-       clientSecret: process.env.GOOGLE_CLIENT_SECRET,
-     })
-   ]
- })

+ export const { GET, POST } = createAuthHandlers({
+   providers: {
+     google: {
+       clientId: process.env.GOOGLE_CLIENT_ID!,
+       clientSecret: process.env.GOOGLE_CLIENT_SECRET!
+     }
+   }
+ })
Full Migration Guide β†’
  1. Database Compatible: Our schema is NextAuth-compatible
  2. Similar API: Most functions have direct equivalents
  3. Better DX: Less configuration, more features
  4. Migration Script: Coming soon!

πŸ“š Examples

Next.js App Router

cd examples/next-app
npm install
npm run dev

Express.js (Coming Soon)

cd examples/express-app
npm install
npm run dev

πŸ›£οΈ Roadmap

  • Email/Password authentication
  • OAuth providers (Google, GitHub, etc.)
  • Next.js integration
  • Beautiful UI components
  • TypeScript support
  • Rate limiting & security
  • Two-factor authentication (2FA)
  • Magic link authentication
  • Express.js adapter
  • Remix adapter
  • Email service integrations
  • Admin dashboard
  • Multi-tenant support

🀝 Contributing

We love contributions! Please see our Contributing Guide for details.

# Clone the repo
git clone https://github.com/your-org/easy-auth-sdk

# Install dependencies
npm install

# Run tests
npm test

# Build
npm run build

πŸ“„ License

MIT Β© Your Company


Built with ❀️ by developers, for developers

Twitter β€’ Discord β€’ GitHub

If Easy Auth helped you ship faster, consider sponsoring the project!

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Packages

 
 
 

Contributors