🚀 Next.js Redis Session Store Example

This Next.js project demonstrates how to use Redis as a session store for authentication. The application supports multiple authentication providers, offering a scalable and performant solution for your web applications.

📋 Table of Contents

• 🚀 Deploy with Redis Cloud on Vercel
• ✨ Features
• 🌱 Getting Started
• 🛠️ Configuration
• 💾 Session Management with Redis
• 🗂️ Project Structure
• 📜 Available Scripts
• 📚 Learn More
• 🤝 Contributing
• 📄 License

🚀 Deploy with Redis Cloud on Vercel

Follow these steps to deploy your application with Redis Cloud on Vercel:

1. Click the "Deploy" button below to start the deployment process:

1. In the Vercel UI, create a new repository for your project.

1. Add Redis as a store in the Vercel UI. This will automatically set your REDIS_URL environment variable.

1. Wait for the deployment to complete.

1. Once deployed, use the URL of your deployed app to set up the authentication providers. See the Configuration section below for detailed instructions for setting these up. By default, the template is configured to use GitHub and Discord. Only one provider is required.

✨ Features

• 🗄️ Redis Session Store: Utilizes Redis for storing session data
• 🔐 NextAuth.js Integration: Implements authentication using NextAuth.js with a custom Redis adapter
• 🌐 Multiple Authentication Providers: Supports GitHub and Discord authentication
• ⚙️ Dynamic Configuration: Easily enable or disable authentication providers via environment variables

🌱 Getting Started

1. Install dependencies:

   1
   npm install
   2
   # or
   3
   yarn install
   4
   # or
   5
   pnpm install

2. Run the development server:

   1
   npm run dev
   2
   # or
   3
   yarn dev
   4
   # or
   5
   pnpm dev

3. Open http://localhost:3000 in your browser to see the application.

🛠️ Configuration

Setting Up Redis

Ensure you have a Redis server running and configure the connection in your .env file:

1
REDIS_URL=redis://localhost:6379

Note: If you deployed using Vercel with Redis Cloud, this will be automatically set for you.

Enabling/Disabling Authentication Providers

Configure authentication providers by setting or omitting their respective environment variables in your .env file:

1
NEXTAUTH_SECRET=your_nextauth_secret
2

3
# GitHub Authentication
4
GITHUB_CLIENT_ID=your_github_client_id
5
GITHUB_CLIENT_SECRET=your_github_client_secret
6

7
# Discord Authentication
8
DISCORD_CLIENT_ID=your_discord_client_id
9
DISCORD_CLIENT_SECRET=your_discord_client_secret

• To enable a provider: Set both the CLIENT_ID and CLIENT_SECRET
• To disable a provider: Remove or comment out the CLIENT_ID and CLIENT_SECRET

Provider-Specific Configuration

1. Go to GitHub Developer Settings
2. Click on "New OAuth App"
3. Fill in the application details:
   • Application name: Your app name
   • Homepage URL: https://your-vercel-app-url.vercel.app
   • Authorization callback URL: https://your-vercel-app-url.vercel.app/api/auth/callback/github (or your local URL if you're running it locally)
4. Click "Register application"
5. Copy the Client ID and generate a new Client Secret
6. Add these to your Vercel project's environment variables as GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET

Example:

1
GITHUB_CLIENT_ID=1234567890abcdef1234
2
GITHUB_CLIENT_SECRET=1234567890abcdef1234567890abcdef12345678

1. Go to the Discord Developer Portal
2. Click on "New Application"
3. Give your application a name and create it
4. Go to the "OAuth2" tab in the left sidebar
5. Add a redirect URL: https://your-vercel-app-url.vercel.app/api/auth/callback/discord (or your local URL if you're running it locally)
6. Copy the Client ID and Client Secret
7. Add these to your Vercel project's environment variables as DISCORD_CLIENT_ID and DISCORD_CLIENT_SECRET

Example:

1
DISCORD_CLIENT_ID=123456789012345678
2
DISCORD_CLIENT_SECRET=abcdefghijklmnopqrstuvwxyz123456

Adding Additional Providers

To add more authentication providers:

1. Install the provider package (if required)
2. Update the NextAuth configuration in app/api/auth/[...nextauth]/route.js
3. Add the necessary environment variables

Example for adding Google provider:

1
import GoogleProvider from "next-auth/providers/google";
2

3
// In the providers array:
4
GoogleProvider({
5
  clientId: process.env.GOOGLE_CLIENT_ID,
6
  clientSecret: process.env.GOOGLE_CLIENT_SECRET,
7
}),

For more information on adding and configuring providers, refer to the NextAuth.js documentation on providers.

NextAuth.js Secret

Generate a secure NEXTAUTH_SECRET:

1
openssl rand -base64 32

Add this to your Vercel project's environment variables as NEXTAUTH_SECRET.

💾 Session Management with Redis

This application leverages Redis for efficient session data storage, offering:

• ⚡ High Performance: Fast read/write operations with in-memory data store
• 📈 Scalability: Share session data across multiple application instances
• 💽 Optional Persistence: Configure Redis to persist data to disk for recovery

🗂️ Project Structure

1
/
2
├── app/            # Next.js pages and API routes
3
├── components/     # Reusable React components
4
├── lib/            # Utility functions and custom adapters
5
├── hooks/          # Custom React hooks
6
└── styles/         # Global and brand-specific styles

📜 Available Scripts

• npm run dev: Run the app in development mode
• npm run build: Build the app for production
• npm run start: Start the production build
• npm run lint: Run linting on the codebase

📚 Learn More

Explore these resources to deepen your understanding:

• Next.js Documentation
• NextAuth.js Documentation
• Redis Documentation
• Redis Clients for Node.js
• Environment Variables in Next.js

🤝 Contributing

We welcome contributions! If you have ideas, suggestions, or encounter issues, please open an issue or submit a pull request.

📄 License

This project is open source and available under the MIT License.