@auth31-mobile/auth-service

A comprehensive and reusable authentication SDK for React Native applications, featuring Login, Signup, OTP Verification, Forgot Password, and Reset Password flows with dynamic branding and theme support.

🚀 Features

• Complete Auth Screens & Cards: Pre-built Login, Signup, Verify OTP, Forgot Password, Reset Password, and Set Password screens and embedded card components.
• Dynamic Remote Branding: Fetch and apply live app logos, colors, background images/gradients via BrandingProvider.
• Persistent Token Management: Automatic token and refresh token storage and retrieval via @react-native-async-storage/async-storage.
• Axios HTTP Client Interceptors: Preconfigured API client with automatic token attachment and error normalization.
• Toast Notifications: Built-in notification system (notify.success, notify.error, etc.) with NotistackProvider.
• TypeScript First: 100% TypeScript with full type definitions (.d.ts) included out of the box.

📦 Installation

1. Install the SDK

npm install @auth31-mobile/auth-service

2. Install Peer Dependencies

Ensure your React Native project has the required peer dependencies installed:

npm install @react-native-async-storage/async-storage axios react-native-safe-area-context react-native-svg

[!NOTE] If using React Native CLI with iOS, run npx pod-install or cd ios && pod install after installing native dependencies.

🛠️ Quick Start

Wrap your application root with AuthConfigProvider and BrandingProvider:

import React from "react";
import {
  AuthConfigProvider,
  BrandingProvider,
  NotistackProvider,
  LoginScreen,
  SignupScreen,
  VerifyOTPScreen,
  ForgotPasswordScreen,
  ResetPasswordScreen,
} from "@auth31-mobile/auth-service";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

const Stack = createNativeStackNavigator();

const authConfig = {
  appId: "your-app-id",
  apiBaseUrl: "https://auth31-backend.31g.co.uk/api/v2",
  callbacks: {
    onLoginSuccess: (data) => console.log("Login success:", data),
    onLoginError: (error) => console.error("Login error:", error),
  },
};

export default function App() {
  return (
    <AuthConfigProvider config={authConfig}>
      <BrandingProvider>
        <NotistackProvider>
          <NavigationContainer>
            <Stack.Navigator screenOptions={{ headerShown: false }}>
              <Stack.Screen name="Login" component={LoginScreen} />
              <Stack.Screen name="Signup" component={SignupScreen} />
              <Stack.Screen name="VerifyOTP" component={VerifyOTPScreen} />
              <Stack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
              <Stack.Screen name="ResetPassword" component={ResetPasswordScreen} />
            </Stack.Navigator>
          </NavigationContainer>
        </NotistackProvider>
      </BrandingProvider>
    </AuthConfigProvider>
  );
}

⚙️ Configuration Reference

AuthConfig

| Property | Type | Requirement | Description | | :--- | :--- | :--- | :--- | | appId | string | Required | Application identifier used for API requests and remote branding. | | apiBaseUrl | string | Required | The base URL for your authentication backend API. | | publicKey | string | Optional | Public key sent via headers with API requests. | | authBaseUrl | string | Optional | Alternative base URL for auth endpoints if different from API base URL. | | endpoints | object | Optional | Custom endpoints to override defaults (login, signup, verifyOtp, etc.). | | callbacks | object | Optional | Event callbacks (onLoginSuccess, onLoginError, onVerifyOtpSuccess, etc.). | | navigation | object | Optional | Navigation hooks to wire screens with your navigation stack. |

📦 Exported Components & Services

Screens & UI Components

• Screens: LoginScreen, SignupScreen, VerifyOTPScreen, ForgotPasswordScreen, ResetPasswordScreen.
• Card Components: LoginCard, SignupCard, VerifyOTPCard, ForgotPasswordCard, ResetPasswordCard, SetPasswordCard.
• UI & Layout: AuthLayout, AuthButton, AuthInput, Logo.

Providers & Hooks

• Providers: AuthConfigProvider, BrandingProvider, NotistackProvider, ThemeProvider.
• Hooks: useAuthConfig, useBranding.

Auth & Storage Services

• Auth Functions: login, signup, verifyOtp, requestOtp, forgotPassword, resetPassword, logout, getCurrentUser, isAuthenticated.
• Token Storage: getToken, setToken, removeToken, getRefreshToken, setRefreshToken, removeRefreshToken.
• Utilities: notify, Colors, scale, verticalScale, moderateScale.

📄 License

MIT © 31green