@mobtechi/auth

Industrial-grade Identity SDK for the MobTechi ecosystem. Pluggable authentication components for React and React Native.

🚀 Features

• Plug & Play: Standalone MobTechiAuth component for instant login/signup logic.
• Multi-Platform: Abstracted storage engine supports Web (localStorage) and React Native.
• Global Session Revocation: Built-in support for signing out of other devices.
• Branded Design: High-performance, highly-stylized UI tailored for modern apps.
• Hybrid Auth: Native support for OTP-based and Password-based flows.

📦 Installation

This package is hosted on the MobTechi Private Registry. Ensure you have configured your .npmrc before installing.

1. Configure Registry

Add the following to your ~/.npmrc or project-root .npmrc:

@mobtechi:registry=https://npm.mobtechi.com/
//npm.mobtechi.com/:_authToken=${MOBTECHI_NPM_TOKEN}

2. Install Package

npm install @mobtechi/auth

🛠️ Quick Start

1. Wrap your application

Wrap your root component with the AuthProvider. Ensure you provide your hardened app_id and api_url.

import { AuthProvider } from '@mobtechi/auth';

export default function Root() {
  return (
    <AuthProvider 
      app_id="your-app-id" 
      org_id="your-org-id"
      api_url="https://prod.mobtechi.com/api"
      on_navigate={(path) => router.push(path)}
    >
      <App />
    </AuthProvider>
  );
}

2. Add the Auth Widget

Use the MobTechiAuth component in your sign-in page. The component strictly adheres to the MobTechi Design System.

import { MobTechiAuth } from '@mobtechi/auth';

export default function SignInPage() {
  return (
    <MobTechiAuth 
      branding={{
        app_name: 'My App',
        primary_color: '#6366f1',
        secondary_color: '#4f46e5',
        logo: '/logo.png',
        privacy_url: '/privacy',
        terms_url: '/terms'
      }}
      on_success={() => router.push('/dashboard')}
    />
  );
}

3. Use Auth Hooks

Access session state anywhere in your app using useAuth() or useUser(). Note that all user properties are now strictly snake_case.

import { useAuth, useUser } from '@mobtechi/auth';

function Profile() {
  const { signOut } = useAuth();
  const { user, is_signed_in } = useUser();

  if (!is_signed_in) return null;

  return (
    <div>
      <img src={user.image} />
      <p>Hello, {user.full_name}</p>
      <p>Organization: {user.org_id}</p>
      <button onClick={signOut}>Logout</button>
    </div>
  );
}

📱 Native Authentication

For React Native / Expo applications, use the MobTechiAuthNative component. It features a high-fidelity, theme-aware engine with glassmorphism support.

import { MobTechiAuthNative } from '@mobtechi/auth';

export default function LoginPage() {
  return (
    <MobTechiAuthNative 
      theme="glass" // 'dark' | 'light' | 'glass' | 'midnight' | 'aurora'
      branding={{
        app_name: 'CODETUTO',
        primary_color: '#2de2c0',
        secondary_color: '#0e9f87',
        tagline: 'MASTER THE FUTURE OF CODE',
        logo: 'https://example.com/logo.png',
        // Optional Visibility Controls
        hide_logo: false,      // Set to true to hide the branding logo
        hide_app_name: false,  // Set to true to hide the app name text
        hide_tagline: false,   // Set to true to hide the tagline subtitle
        hide_powered_by: false // Set to true to hide the footer badge
      }}
      on_success={(data) => {
        console.log('User signed in:', data.user);
      }}
    />
  );
}

🎨 Theme Options

The MobTechiAuthNative component supports several high-performance themes:

• dark: Classic MobTechi dark mode with subtle glows.
• light: Minimalist, high-contrast light mode.
• glass: Premium glassmorphism effect using expo-blur and technical grid overlays.
• midnight: Deep blue palette with soft violet accents.
• aurora: Tech-focused teal and dark slate aesthetic.

🌐 Global Country Picker

The native component includes a professional, searchable country code selector that automatically adapts to the chosen theme. It supports over 40+ regions with instant filtering by country name or dialing code.

🛡️ Security

This SDK implements industrial-grade JWT session management. It supports secure HTTP-only cookie validation and falls back to secure Bearer token headers for cross-platform support. Session revocation is handled natively by the Identity Engine.

📄 License

MIT © MobTechi