goobs-auth

The NPM repo is available here - https://www.npmjs.com/package/goobs-auth

goobs-auth is a comprehensive authentication solution for Next.js applications. It provides a flexible and customizable authentication flow that can be easily integrated into your projects.

Table of Contents

• Installation
• Features
• Usage
• Configuration
• API Reference
• Components
• Server Actions
• Middleware
• Customization
• Examples
• Troubleshooting
• Contributing
• License
• Contact

Installation

To install goobs-auth in your Next.js project, run one of the following commands:

1npm install goobs-auth
2# or
3yarn add goobs-auth

Features

• Flexible authentication flow with customizable steps
• Support for email/password, email verification, and SMS verification
• Integration with Twilio for SMS services
• SMTP configuration for email services
• Custom middleware for protecting routes
• Server-side utilities for token management and verification
• React components for different authentication steps

Usage

1. Update your next.config.js:

1/** @type {import('next').NextConfig} */
2const nextConfig = {
3  reactStrictMode: true,
4  swcMinify: true,
5  transpilePackages: ['goobs-frontend', 'goobs-cache', 'goobs-auth', 'goobs-encryption'],
6};
7
8export default nextConfig;

2. Create an authentication configuration file (e.g., .auth.json) in your project root:

1{
2  "userModel": {
3    "getUser": {
4      "path": "./path/to/getUserFunction",
5      "exportName": "getUser"
6    },
7    "setUser": {
8      "path": "./path/to/setUserFunction",
9      "exportName": "setUser"
10    },
11    "deleteUser": {
12      "path": "./path/to/deleteUserFunction",
13      "exportName": "deleteUser"
14    }
15  },
16  "database": {
17    "connectScript": "// Your database connection script"
18  },
19  "authentication": {
20    "login": [
21      { "step": 1, "type": "enterEmail" },
22      { "step": 2, "type": "emailAndPasswordVerification" }
23    ],
24    "registration": [
25      { "step": 1, "type": "enterEmail" },
26      { "step": 2, "type": "emailAndPasswordAndVerifyPasswordVerification" },
27      { "step": 3, "type": "emailVerification" },
28      { "step": 4, "type": "textMessageVerification" },
29      { "step": 5, "type": "accountInfo" }
30    ],
31    "forgotPassword": [
32      { "step": 1, "type": "enterEmail" },
33      { "step": 2, "type": "emailVerification" }
34    ]
35  },
36  "twilio": {
37    "accountSid": "your_twilio_account_sid",
38    "authToken": "your_twilio_auth_token",
39    "phoneNumber": "your_twilio_phone_number"
40  },
41  "smtp": {
42    "host": "your_smtp_host",
43    "port": 587,
44    "secure": false,
45    "auth": {
46      "user": "your_smtp_username",
47      "pass": "your_smtp_password"
48    },
49    "from": "noreply@yourdomain.com"
50  }
51}

3. Implement the authentication page in your Next.js app:

1// pages/auth.tsx
2'use client';
3
4import React from 'react';
5import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
6import { AuthPageContent } from 'goobs-auth';
7
8export default function AuthPage() {
9  return (
10    <AppRouterCacheProvider>
11      <AuthPageContent />
12    </AppRouterCacheProvider>
13  );
14}

4. Protect your routes using the authMiddleware:

1// middleware.ts
2import { authMiddleware } from 'goobs-auth';
3
4export default authMiddleware;

Configuration

The .auth.json file allows you to customize various aspects of the authentication flow:

• userModel: Define functions for user management (get, set, delete)
• database: Specify the database connection script
• authentication: Configure the steps for login, registration, and password recovery
• twilio: Set up Twilio credentials for SMS services
• smtp: Configure SMTP settings for email services

API Reference

loadAuthConfig(configPath?: string): Promise<AuthConfig>

Loads the authentication configuration from the specified path or the default locations.

authUtility(options: AuthUtilityOptions): Promise<ValidateResult | LoginResult | LogoutResult>

A comprehensive authentication utility for server components and server actions.

authSpoof(options?: AuthSpoofOptions): Promise<{ isValid: boolean, validTokens: ValidTokens }>

Generates mock authentication data for testing purposes.

Components

goobs-auth provides several React components for building the authentication UI:

• AuthPageContent: The main authentication page component
• EnterEmailStep: Component for entering email
• EmailPasswordVerificationStep: Component for email and password verification
• EmailVerificationStep: Component for email verification
• TextMessageVerificationStep: Component for SMS verification
• AccountInfoStep: Component for collecting additional account information

Server Actions

goobs-auth includes several server-side actions for handling authentication:

• verifyEmail: Verifies an email address
• sendEmail: Sends an email (e.g., for verification)
• sendSMS: Sends an SMS message
• verifyUser: Verifies a user's phone number

Middleware

The authMiddleware function can be used to protect routes and validate authentication tokens.

License

This project is licensed under the MIT License.

Contact

For questions, feature requests, or support, please contact:

• Matthew Goluba
  • Email: mkgoluba@technologiesunlimited.net
  • LinkedIn: https://www.linkedin.com/in/matthew-goluba/

For the quickest response, please use email. Our website is currently under development and will be shared here soon.