Skip to main content

Next.js + Auth (TS)

Welcome to the Next.js + Auth starter for Robo.js! 🚀

This template combines the power of Next.js (App Router), Prisma, and @robojs/auth to give you a full-stack web application with authentication, database, and server-side logic ready to go.

It comes pre-configured with:

  • 🔐 Authentication: Discord OAuth and Email/Password login via @robojs/auth.
  • 🗄️ Database: SQLite database with Prisma ORM.
  • ⚛️ Frontend: Next.js 15+ (App Router) with React Server Components.
  • 🛠️ Backend: Robo.js server for API routes and plugin management.

Ready to build something amazing?

Getting Started​

Create a new project with this template:

Terminal
npx create-robo --template web-apps/next-auth-ts --name my-awesome-app

Navigate to your project:

Terminal
cd my-awesome-app

Install dependencies:

Terminal
npm install

1. Environment Setup​

Fill in your secrets in .env:

  • AUTH_SECRET: A long random string for session security.
  • DISCORD_CLIENT_ID & DISCORD_CLIENT_SECRET: From your Discord Developer Portal.
  • RESEND_API_KEY: (Optional) For sending emails via Resend.

2. Database Setup​

Initialize your SQLite database:

Terminal
npx prisma migrate dev --name init

3. Run It!​

Start the development server:

Terminal
npm run dev

Visit http://localhost:3000 to see your app in action!

Authentication​

This template uses @robojs/auth to handle user authentication. It's fully integrated with the Next.js frontend and the Prisma database.

Features​

  • Sign In/Up: Pre-built pages at /login and /signup.
  • Providers: Discord (OAuth) and Email/Password configured by default.
  • Session Management: useSession hook for client components and getServerSession for server components.
  • Protected Routes: Example dashboard at /dashboard.

Configuration​

Auth configuration lives in config/plugins/robojs/auth.ts. You can add more providers (Google, GitHub, etc.) or customize pages here.

// config/plugins/robojs/auth.ts
import Discord from '@robojs/auth/providers/discord'
// ...

const config: AuthPluginOptions = {
  // ...
  providers: [
    Discord({ clientId: process.env.DISCORD_CLIENT_ID, clientSecret: process.env.DISCORD_CLIENT_SECRET }),
    // Add more providers here!
  ],
}

️ Database (Prisma)​

We use Prisma as the ORM to interact with the SQLite database.

  • Schema: Defined in prisma/schema.prisma.
  • Client: Access the database via the global prisma instance (exported in config/plugins/robojs/auth.ts or similar).

Modifying the Schema​

  1. Edit prisma/schema.prisma.
  2. Run npx prisma migrate dev --name <migration-name> to apply changes and generate the client.

The default schema includes models for User, Account, Session, and Password to support the auth system.

Alternative: Flashcore​

Don't need a full SQL database? You can use Flashcore, the built-in key-value store powered by Robo.js. It's zero-config and perfect for simple apps or prototyping.

To switch to Flashcore, update config/plugins/robojs/auth.ts:

import { createFlashcoreAdapter } from '@robojs/auth'

// ...

// Replace the Prisma adapter with Flashcore
const adapter = createFlashcoreAdapter()

const config: AuthPluginOptions = {
  adapter,
  // ...
}

️ App Development​

Frontend (/app)​

The app directory contains your Next.js App Router code.

  • page.tsx: The landing page.
  • layout.tsx: Root layout with SessionProvider.
  • dashboard/: Protected route example.
  • api/: Next.js API routes (if needed).

Backend (/src/api)​

Robo.js powers the backend server. You can create API routes in src/api that run alongside Next.js.

  • File-based routing: src/api/health.ts -> /api/health.
  • Robo Plugins: Easily add features like AI, Sync, or Triggers.

️ Configuration​

Environment Variables​

VariableDescription
DATABASE_URLConnection string for Prisma (default: file:./dev.db)
AUTH_SECRETSecret used to sign session tokens
DISCORD_CLIENT_IDDiscord App Client ID
DISCORD_CLIENT_SECRETDiscord App Client Secret
RESEND_API_KEYAPI Key for Resend (email provider)

Robo Config​

  • config/robo.ts: Main Robo.js configuration.
  • config/plugins/: Plugin-specific configurations.

Folder Structure​

.
├── app/                  # Next.js App Router (Frontend)
│   ├── api/              # Next.js API routes
│   ├── dashboard/        # Protected dashboard page
│   ├── login/            # Login page
│   ├── signup/           # Signup page
│   └── ...
├── config/               # Configuration files
│   ├── plugins/          # Plugin configs (@robojs/auth, etc.)
│   └── robo.ts           # Main Robo config
├── prisma/               # Prisma schema and migrations
├── public/               # Static assets
├── src/                  # Robo.js Backend Source
│   ├── api/              # Robo.js API routes
│   └── ...
├── .env                  # Environment variables
└── package.json

Deployment​

  1. Build the project:

    Terminal
    npm run build

    This builds both the Next.js app and the Robo.js server.

  2. Start the server:

    Terminal
    npm start

You can deploy this to any host that supports Node.js (VPS, Railway, Render, etc.) or use RoboPlay for an optimized experience.

Learn More​