React SaaS Auth Starter

A simple, ready-to-use authentication starter kit for Next.js applications with multiple auth providers.

What's Included

• 🔐 Multiple Auth Providers: Google, GitHub, Facebook, Plex, and email/password
• 🔄 Modern Stack: Next.js 15.3, React 19, Tailwind CSS 4
• 🧩 Clean UI: Built with shadcn/ui components
• 📱 Responsive Design: Works on all devices
• 🌐 Easy Integration: Simple setup with environment variables

Quick Start

1. Clone and install

   git clone https://github.com/gitlocaluser/react-saas-auth-starter.git
   cd react-saas-auth-starter
   pnpm install

2. Set up environment variables

   cp .env.example .env.local

   Edit .env.local and add your auth provider credentials.

3. Run the development server

   pnpm dev

4. Visit http://localhost:3000 to see your auth system in action!

Auth Provider Setup

Google

1. Create project at Google Cloud Console
2. Set up OAuth credentials with redirect URI: http://localhost:3000/api/auth/callback/google

GitHub

1. Register a new OAuth app at GitHub Developer Settings
2. Add callback URL: http://localhost:3000/api/auth/callback/github

Facebook

1. Create app at Facebook Developers
2. Add OAuth redirect URI: http://localhost:3000/api/auth/callback/facebook

Plex

1. Add a unique client ID to your environment variables
2. Auth is handled automatically by the built-in PIN-based flow

Project Structure

/app                # Next.js app router pages
  /api/auth         # NextAuth API routes
  /auth             # Auth success page
  /login            # Login page
/components         # React components
  /ui               # UI components from shadcn/ui
/lib                # Utilities and helpers

Learn More

• This starter uses NextAuth.js for authentication
• UI components are from shadcn/ui
• Styled with Tailwind CSS

License

MIT