@insforge/nextjs 0.7.5 → 0.7.8

package/README.md

@@ -1,39 +1,30 @@
 # @insforge/nextjs
 
-**Zero-configuration authentication for Next.js** using Insforge backend. Authentication pages are hosted on your backend by default—no UI code needed.
+**Zero-configuration authentication for Next.js** using Insforge backend. Get production-ready auth in 5 minutes.
 
-## Why Built-in Auth?
-
-✅ **Zero UI Code** - No SignIn/SignUp pages to create  
-✅ **5-Minute Setup** - Provider + API route + callback page = done  
-✅ **Production Ready** - Battle-tested auth UI maintained by Insforge  
-✅ **Auto OAuth** - 11 providers configured automatically from backend  
-✅ **AI-Friendly** - Minimal code generation = fewer tokens  
-
-**Use custom components only if you need highly customized branding or custom fields.**
+## Why @insforge/nextjs?
 
-## Features
+✅ **Built-in Auth Pages** - Backend-hosted UI, no React code needed  
+✅ **5-Minute Setup** - Provider + API route + callback + middleware = done  
+✅ **Full SSR Support** - Works with Next.js App Router and Server Components  
+✅ **Auto OAuth** - 11 providers configured from backend automatically  
+✅ **TypeScript First** - Complete type safety out of the box
 
-- **Built-in Authentication**: Backend-hosted sign-in/sign-up pages (default)
-- **OAuth Support**: Google, GitHub, Discord, Facebook, LinkedIn, Microsoft, Apple, X, Instagram, TikTok, Spotify
-- **React Hooks**: `useAuth()`, `useUser()`, `useSession()`
-- **Control Components**: `<SignedIn>`, `<SignedOut>`, `<Protect>`
-- **Next.js Middleware**: Server-side route protection
-- **TypeScript**: Full type safety
+**Need custom UI?** Scroll to [Advanced Usage](#advanced-usage) for custom components and styling.
 
 ## Installation
 
 ```bash
-npm install @insforge/nextjs @insforge/sdk
+npm install @insforge/nextjs
 ```
 
-<Note>
-**SDK Integration**: `@insforge/nextjs` works seamlessly with `@insforge/sdk`. The SDK handles API calls, token management, and OAuth callback detection automatically. Always use SDK methods instead of raw `fetch` calls.
-</Note>
+---
 
 ## Quick Start
 
-### 1. Add InsforgeProvider
+### 1. Setup Provider
+
+Wrap your app with `InsforgeProvider` in the root layout:
 
 ```tsx
 // app/layout.tsx
@@ -52,9 +43,15 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 }
 ```
 
-> **✨ Auto-styled**: Component styles are automatically loaded when you add `InsforgeProvider`. No CSS imports needed!
+**Props:**
+- `baseUrl` (required): Your Insforge backend URL
+- `onAuthChange` (optional): Callback when auth state changes
+
+> **Auto-styled**: Component styles are automatically injected. No CSS imports needed!
 
-### 2. Create API route (enables SSR)
+### 2. Create API Route
+
+Create an API route to sync tokens to HTTP-only cookies (enables SSR):
 
 ```tsx
 // app/api/auth/route.ts
@@ -70,98 +67,67 @@ export const GET = handlers.GET;
 export const DELETE = handlers.DELETE;
 ```
 
-> **Why?** Syncs auth tokens to HTTP-only cookies for server-side middleware.
+**What it does:**
+- `POST /api/auth` - Syncs localStorage token to HTTP-only cookie
+- `GET /api/auth` - Retrieves user data server-side
+- `DELETE /api/auth` - Clears auth cookie on sign out
+
+### 3. Create Callback Page
 
-### 3. Create callback page
+Create a callback page to complete the authentication flow. Use the `<InsforgeCallback>` component that handles everything automatically:
 
-<Note>
-**SDK Integration**: This callback page uses `@insforge/sdk` to automatically detect and handle URL parameters. The SDK handles token storage automatically, making the callback page simpler and more reliable.
-</Note>
+- Detects authentication errors from backend
+- Validates authentication tokens
+- Syncs tokens to HTTP-only cookies for SSR
+- Redirects to the destination page
 
 ```tsx
 // app/auth/callback/page.tsx
 'use client';
 
-import { useEffect, useRef, Suspense } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { createClient } from '@insforge/sdk';
-
-function CallbackContent() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const isProcessingRef = useRef(false);
-
-  useEffect(() => {
-    const processCallback = async () => {
-      if (isProcessingRef.current) return;
-      isProcessingRef.current = true;
-
-      const error = searchParams.get('error');
-      if (error) {
-        router.push('/?error=' + encodeURIComponent(error));
-        return;
-      }
-
-      // Create SDK client - it automatically detects and stores URL parameters
-      // SDK's detectOAuthCallback() handles: access_token, user_id, email, name
-      // This automatically stores token in 'insforge-auth-token' and basic user info
-      const insforge = createClient({
-        baseUrl: process.env.NEXT_PUBLIC_INSFORGE_BASE_URL!,
-      });
-
-      // Fetch complete user data (including profile) using SDK method
-      const { data: userData, error: userError } = await insforge.auth.getCurrentUser();
-
-      if (userError || !userData) {
-        router.push('/?error=authentication_failed');
-        return;
-      }
-
-      // Store complete user profile for InsforgeProvider (enables instant UI updates)
-      localStorage.setItem('insforge-user-profile', JSON.stringify(userData));
-
-      // Sync token to HTTP-only cookie (for server-side middleware)
-      const token = localStorage.getItem('insforge-auth-token');
-      if (token) {
-        await fetch('/api/auth', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ action: 'sync-token', token }),
-        });
-      }
+import { InsforgeCallback } from '@insforge/nextjs';
 
-      // Clean up URL and redirect
-      window.history.replaceState({}, '', '/auth/callback');
-      const destination = sessionStorage.getItem('auth_destination') || '/';
-      sessionStorage.removeItem('auth_destination');
-      setTimeout(() => router.push(destination), 100);
-    };
+export default function CallbackPage() {
+  return <InsforgeCallback />;
+}
+```
 
-    processCallback();
-  }, [searchParams, router]);
+**Optional: Custom loading UI**
 
+```tsx
+export default function CallbackPage() {
   return (
-    <div className="flex items-center justify-center min-h-screen">
-      <div className="text-center">
-        <h2 className="text-2xl font-semibold mb-4">Completing authentication...</h2>
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
-      </div>
-    </div>
+    <InsforgeCallback
+      loadingComponent={
+        <div className="flex items-center justify-center min-h-screen">
+          <div className="text-center">
+            <h2 className="text-2xl font-semibold mb-4">Signing you in...</h2>
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
+          </div>
+        </div>
+      }
+    />
   );
 }
+```
+
+**Optional: Custom redirect and callbacks**
 
+```tsx
 export default function CallbackPage() {
   return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <CallbackContent />
-    </Suspense>
+    <InsforgeCallback
+      redirectTo="/dashboard"
+      onSuccess={() => console.log('Authentication successful!')}
+      onError={(error) => console.error('Authentication failed:', error)}
+    />
   );
 }
 ```
 
-> **Why SDK?** The SDK automatically detects URL parameters (`access_token`, `user_id`, `email`, `name`) and stores them. Using SDK methods ensures consistency and reduces errors.
+### 4. Setup Middleware
 
-### 4. Add middleware (protects routes)
+Protect routes with middleware:
 
 ```ts
 // middleware.ts
@@ -178,7 +144,12 @@ export const config = {
 };
 ```
 
-### 5. Use in components
+**What it does:**
+- Redirects unauthenticated users to backend auth pages
+- Verifies tokens server-side
+- Allows public routes without auth
+
+### 5. Use Hooks & Components
 
 ```tsx
 // app/page.tsx
@@ -188,6 +159,7 @@ export default function Home() {
   return (
     <div>
       <SignedOut>
+        {/* Clicking will redirect to backend auth page */}
         <a href="/sign-in">Sign In</a>
       </SignedOut>
 
@@ -200,152 +172,256 @@ export default function Home() {
 }
 ```
 
-**That's it!** When users click "Sign In", they'll be redirected to your backend's auth page automatically.
+**Available Components:**
+- `<SignedIn>` - Shows children only when authenticated
+- `<SignedOut>` - Shows children only when not authenticated
+- `<UserButton>` - User profile button with dropdown
+- `<Protect>` - Conditional rendering with custom logic
+
+**Available Hooks:**
+
+```tsx
+import { useAuth, useUser } from '@insforge/nextjs';
+
+function Component() {
+  const { signIn, signUp, signOut, isSignedIn, isLoaded } = useAuth();
+  const { user, updateUser } = useUser();
+
+  return <div>Email: {user?.email}</div>;
+}
+```
+
+**That's it!** 🎉 Your app now has production-ready authentication.
 
 ---
 
 ## How It Works
 
 ```
-1. User clicks "Sign In" → Middleware detects no auth
+1. User clicks "Sign In" → Middleware redirects to backend
    ↓
-2. Redirects to: https://backend.insforge.app/auth/signin?redirect=yourapp.com/auth/callback
+2. User signs in on backend-hosted page (https://backend.insforge.app/auth/signin)
    ↓
-3. User signs in on backend's hosted page
+3. Backend redirects: yourapp.com/auth/callback?access_token=xxx&user_id=xxx...
    ↓
-4. Backend redirects: yourapp.com/auth/callback?access_token=xxx
+4. <InsforgeCallback> component:
+   - SDK auto-detects and stores token
+   - Reloads auth state in provider
+   - Syncs token to HTTP-only cookie
+   - Redirects to destination
    ↓
-5. Callback stores token (localStorage + cookie) → User sees /dashboard
+5. User sees dashboard with authenticated state
 ```
 
-**Why API route + callback?**
-- **API route**: Syncs tokens to HTTP-only cookies (enables server-side middleware)
-- **Callback page**: Receives tokens from backend auth pages (OAuth + email/password) and uses SDK to handle them automatically
+**Two-Storage Architecture:**
+- **localStorage**: Client-side token access (hooks, components, SDK)
+- **HTTP-only cookie**: Server-side token access (middleware, SSR)
 
 ---
 
 ## Local Development
 
-Backend typically runs on different port during local dev:
+During local development, backend typically runs on a different port:
 
 ```bash
 # .env.local
-NEXT_PUBLIC_INSFORGE_BASE_URL=http://localhost:7130       # Backend API
-NEXT_PUBLIC_INSFORGE_FRONTEND_URL=http://localhost:7131   # Backend Frontend (auth pages)
-INSFORGE_BASE_URL=http://localhost:7130                   # For middleware
+NEXT_PUBLIC_INSFORGE_BASE_URL=http://localhost:7130  # Backend API URL
+INSFORGE_BASE_URL=http://localhost:7130              # Backend API URL (for server-side)
 ```
 
-Provider automatically uses `NEXT_PUBLIC_INSFORGE_FRONTEND_URL` for auth redirects if set.
+Both variables should point to your Insforge backend URL.
 
 ---
 
----
+## Advanced Usage
 
-## API Reference
+### Custom Auth Components
 
-### Hooks
+Want custom branding or additional fields? Create custom auth pages:
 
-#### `useAuth()`
+```tsx
+// app/sign-in/page.tsx
+'use client';
 
-Access authentication methods (uses SDK internally):
+import { SignIn } from '@insforge/nextjs';
+import { useRouter } from 'next/navigation';
 
-```tsx
-import { useAuth } from '@insforge/nextjs';
+export default function SignInPage() {
+  const router = useRouter();
 
-function Component() {
-  const { signIn, signUp, signOut, isSignedIn, isLoaded } = useAuth();
-  
-  async function handleSignIn(email: string, password: string) {
-    try {
-      await signIn(email, password); // Uses SDK internally
-    } catch (error) {
-      console.error('Sign in failed:', error);
-    }
-  }
-  
   return (
-    <div>
-      {isSignedIn && <button onClick={() => signOut()}>Sign Out</button>}
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <SignIn
+        afterSignInUrl="/dashboard"
+        onSuccess={(user) => {
+          console.log('Signed in:', user);
+          router.push('/dashboard');
+        }}
+        onError={(error) => {
+          console.error('Sign in error:', error);
+        }}
+      />
     </div>
   );
 }
 ```
 
-**Returns**: `signIn()`, `signUp()`, `signOut()`, `isLoaded`, `isSignedIn`
-
-#### `useUser()`
+```tsx
+// app/sign-up/page.tsx
+'use client';
 
-Access current user data (from SDK-managed storage):
+import { SignUp } from '@insforge/nextjs';
 
-```tsx
-import { useUser } from '@insforge/nextjs';
-
-function UserProfile() {
-  const { user, isLoaded, updateUser } = useUser();
-  
-  if (!isLoaded) return <div>Loading...</div>;
-  if (!user) return <div>Not signed in</div>;
-  
+export default function SignUpPage() {
   return (
-    <div>
-      <p>Email: {user.email}</p>
-      {user.nickname && <p>Nickname: {user.nickname}</p>}
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <SignUp afterSignUpUrl="/onboarding" />
     </div>
   );
 }
 ```
 
-**Returns**: `user`, `isLoaded`, `updateUser()`
-
-#### `useSession()`
-
-Access session data (from SDK-managed storage):
-
-```tsx
-import { useSession } from '@insforge/nextjs';
-
-function SessionInfo() {
-  const { session, isLoaded } = useSession();
-  
-  if (!isLoaded) return <div>Loading...</div>;
-  if (!session) return <div>No active session</div>;
-  
-  return <div>User ID: {session.userId}</div>;
-}
-```
-
-**Returns**: `session`, `isLoaded`
+**SignIn Props:**
+- `afterSignInUrl` - Redirect URL after successful sign in
+- `title` / `subtitle` - Custom heading text
+- `emailLabel` / `passwordLabel` - Custom field labels
+- `submitButtonText` / `loadingButtonText` - Custom button text
+- `appearance` - Tailwind CSS classes for styling
+- `onSuccess` / `onError` - Callback functions
 
-### Components
+**SignUp Props:** Same as SignIn, plus:
+- `afterSignUpUrl` - Redirect URL after successful sign up
+- Additional text customization options
 
-#### `<SignIn>` / `<SignUp>`
+### Styling Components
 
-Pre-built auth forms (only with `useBuiltInAuth={false}`):
+All components support an `appearance` prop for Tailwind CSS customization:
 
 ```tsx
-<SignIn afterSignInUrl="/dashboard" />
-<SignUp afterSignUpUrl="/onboarding" />
+<SignIn
+  appearance={{
+    containerClassName: "shadow-2xl",
+    buttonClassName: "bg-blue-600 hover:bg-blue-700"
+  }}
+/>
+
+<UserButton
+  mode="detailed"
+  appearance={{
+    containerClassName: "ml-auto",
+    buttonClassName: "hover:bg-gray-100",
+    nameClassName: "text-white",
+    emailClassName: "text-gray-300"
+  }}
+/>
 ```
 
-**Props**: `afterSignInUrl`/`afterSignUpUrl`, `appearance`, `onSuccess`, `onError`
+**UserButton Modes:**
+- `detailed` (default): Shows avatar + name + email
+- `simple`: Shows avatar only
+
+### Building Custom Auth Forms
 
-#### `<UserButton>`
+Use primitive components for complete customization:
 
 ```tsx
-<UserButton afterSignOutUrl="/" mode="detailed" />
+import {
+  AuthContainer,
+  AuthHeader,
+  AuthFormField,
+  AuthPasswordField,
+  AuthSubmitButton,
+  AuthDivider,
+  AuthOAuthProviders,
+  AuthLink,
+  cn,
+} from '@insforge/nextjs';
+
+function CustomSignIn() {
+  return (
+    <AuthContainer
+      appearance={{
+        containerClassName: "max-w-md",
+        cardClassName: "bg-white"
+      }}
+    >
+      <AuthHeader
+        title="Welcome Back"
+        subtitle="Sign in to continue"
+        appearance={{
+          titleClassName: "text-3xl text-blue-900"
+        }}
+      />
+
+      <form onSubmit={handleSubmit}>
+        <AuthFormField
+          id="email"
+          type="email"
+          label="Email Address"
+          placeholder="you@example.com"
+          appearance={{
+            inputClassName: "border-blue-500 focus:ring-blue-500"
+          }}
+        />
+
+        <AuthPasswordField
+          id="password"
+          label="Password"
+          emailAuthConfig={config}
+          appearance={{
+            inputClassName: "border-blue-500"
+          }}
+        />
+
+        <AuthSubmitButton
+          isLoading={loading}
+          className="bg-blue-600 hover:bg-blue-700"
+        >
+          Sign In
+        </AuthSubmitButton>
+      </form>
+
+      <AuthDivider text="or" />
+
+      <AuthOAuthProviders
+        providers={['google', 'github']}
+        onClick={handleOAuth}
+        loading={oauthLoading}
+        appearance={{
+          buttonClassName: "hover:bg-gray-50"
+        }}
+      />
+
+      <AuthLink
+        text="Don't have an account?"
+        linkText="Sign up"
+        href="/sign-up"
+      />
+    </AuthContainer>
+  );
+}
 ```
 
-**Props**: `afterSignOutUrl`, `mode` ('detailed' | 'simple'), `appearance`
+**Available Primitive Components:**
+- `AuthContainer` - Main form container
+- `AuthHeader` - Title and subtitle
+- `AuthFormField` - Standard input field
+- `AuthPasswordField` - Password field with visibility toggle
+- `AuthPasswordStrengthIndicator` - Password requirement checklist
+- `AuthSubmitButton` - Submit button with loading states
+- `AuthErrorBanner` - Error message display
+- `AuthDivider` - Visual separator
+- `AuthOAuthProviders` - OAuth provider buttons grid
+- `AuthOAuthButton` - Individual OAuth button
+- `AuthVerificationCodeInput` - OTP/2FA code input
+- `AuthLink` - Navigation link
+- `AuthBranding` - Insforge branding footer
 
-#### `<SignedIn>` / `<SignedOut>` / `<Protect>`
+All components support `appearance` prop with specific `className` options for each element.
 
-```tsx
-<SignedIn><Dashboard /></SignedIn>
-<SignedOut><LandingPage /></SignedOut>
-<Protect condition={(user) => user.role === 'admin'}><AdminPanel /></Protect>
-```
+### Server-Side Usage
 
-### Server-Side Helpers
+Access auth data in Server Components:
 
 ```tsx
 // app/dashboard/page.tsx (Server Component)
@@ -356,66 +432,180 @@ import { createClient } from '@insforge/sdk';
 export default async function Dashboard() {
   const userId = getAuthUserId(headers());
   const token = getAuthToken(headers());
-  
+
   if (!userId) {
     return <div>Not authenticated</div>;
   }
-  
-  // Use SDK to fetch user data server-side
+
+  // Use SDK for server-side data fetching
   const insforge = createClient({
     baseUrl: process.env.INSFORGE_BASE_URL!,
     edgeFunctionToken: token || undefined,
   });
-  
+
   const { data: userData } = await insforge.auth.getCurrentUser();
-  
+
   return <div>Welcome, {userData?.user.email}</div>;
 }
 ```
 
----
+### Conditional Rendering
+
+```tsx
+import { Protect } from '@insforge/nextjs';
+
+// Role-based access
+<Protect condition={(user) => user.role === 'admin'}>
+  <AdminPanel />
+</Protect>
 
-### Auth Callbacks
+// Custom logic
+<Protect condition={(user) => user.emailVerified}>
+  <VerifiedUserFeature />
+</Protect>
+```
+
+### Auth Change Callback
+
+Track authentication events:
 
 ```tsx
-<InsforgeProvider 
+<InsforgeProvider
   baseUrl={baseUrl}
-  onAuthChange={(user) => user && analytics.identify(user.id)}
+  onAuthChange={(user) => {
+    if (user) {
+      // User signed in
+      analytics.identify(user.id);
+    } else {
+      // User signed out
+      analytics.reset();
+    }
+  }}
 />
 ```
 
 ---
 
-## SDK + Next.js Package = Complete Solution
+## API Reference
 
-The `@insforge/nextjs` package works seamlessly with `@insforge/sdk`:
+### InsforgeProvider Props
 
-- **SDK handles**: API calls, token management, OAuth callback detection, user data fetching
-- **Next.js package handles**: React components, hooks, middleware, SSR support
+```tsx
+interface InsforgeProviderProps {
+  baseUrl: string;                                    // Insforge backend URL
+  onAuthChange?: (user: InsforgeUser | null) => void; // Auth state change callback
+}
+```
 
-Always use SDK methods (`insforge.auth.getCurrentUser()`, `insforge.auth.signIn()`, etc.) instead of raw `fetch` calls. This ensures consistency, type safety, and automatic error handling.
+### InsforgeCallback Props
 
-## Why @insforge/nextjs?
+```tsx
+interface InsforgeCallbackProps {
+  redirectTo?: string;              // Custom redirect destination after auth
+  onSuccess?: () => void;           // Callback fired on successful authentication
+  onError?: (error: string) => void; // Callback fired on authentication error
+  loadingComponent?: ReactNode;     // Custom loading UI during authentication
+}
+```
+
+**Default behavior:**
+- Redirects to `sessionStorage['auth_destination']` or `sessionStorage['oauth_final_destination']` or `'/'`
+- Displays a built-in loading spinner during authentication
+- Handles errors by redirecting to `/?error=<error_message>`
+
+### useAuth()
+
+```tsx
+const {
+  signIn,      // (email: string, password: string) => Promise<void>
+  signUp,      // (email: string, password: string) => Promise<void>
+  signOut,     // () => Promise<void>
+  isSignedIn,  // boolean
+  isLoaded,    // boolean
+} = useAuth();
+```
+
+### useUser()
+
+```tsx
+const {
+  user,        // InsforgeUser | null
+  isLoaded,    // boolean
+  updateUser,  // (data: Partial<InsforgeUser>) => Promise<void>
+} = useUser();
+```
+
+**InsforgeUser Type:**
+```tsx
+interface InsforgeUser {
+  id: string;
+  email: string;
+  nickname?: string;
+  avatarUrl?: string;
+  role?: string;
+  emailVerified?: boolean;
+}
+```
+
+### Middleware Helpers
 
-**For Developers**: 5-minute auth setup instead of hours. Production-ready security and session management included. SDK integration means less code to write and maintain.
+```tsx
+import { getAuthUserId, getAuthToken } from '@insforge/nextjs/middleware';
+
+const userId = getAuthUserId(headers());  // string | null
+const token = getAuthToken(headers());    // string | null
+```
 
-**For AI Agents**: Minimal code generation (5 files vs 20+ for custom auth). SDK-first approach reduces errors. Consistent patterns across projects.
+### Utility Function
+
+```tsx
+import { cn } from '@insforge/nextjs';
+
+// Merge Tailwind classes (uses clsx + tailwind-merge)
+const className = cn("px-4 py-2", "bg-blue-500", conditionalClass);
+```
 
 ---
 
 ## TypeScript
 
+Full TypeScript support with exported types:
+
 ```tsx
-import type { InsforgeUser, InsforgeSession, AuthContextValue } from '@insforge/nextjs';
+import type {
+  InsforgeUser,
+  InsforgeCallbackProps,
+  SignInProps,
+  SignUpProps,
+  UserButtonProps,
+  ProtectProps,
+  OAuthProviderConfig,
+} from '@insforge/nextjs';
 ```
 
 ---
 
+## Why @insforge/nextjs?
+
+**For Developers:**
+- ⚡️ 5-minute setup vs hours of custom auth code
+- 🔒 Production-ready security and session management
+- 🎨 Customizable components when needed
+- 🚀 Built-in SSR support for Next.js App Router
+
+**For AI Agents:**
+- 📝 Minimal code generation (5 files vs 20+ for custom auth)
+- 🎯 Consistent patterns across projects
+- 🤖 SDK-first approach reduces errors
+- 💰 Less tokens used per setup
+
+---
+
 ## Support
 
-- **Docs**: https://docs.insforge.dev/introduction
-- **Issues**: https://github.com/InsForge/InsForge/issues  
-- **Discord**: https://discord.com/invite/DvBtaEc9Jz
+- **Documentation**: https://docs.insforge.dev
+- **GitHub Issues**: https://github.com/InsForge/InsForge/issues
+- **Discord Community**: https://discord.com/invite/DvBtaEc9Jz
 
 ## License