rn-swiftauth-sdk 1.0.0

package/README.md

@@ -0,0 +1,574 @@
+# SwiftAuth SDK
+
+A production-ready React Native authentication SDK powered by Firebase. Built with TypeScript, offering both pre-built UI components and headless hooks for complete flexibility.
+
+[![npm version](https://img.shields.io/npm/v/swiftauth-sdk.svg)](https://www.npmjs.com/package/swiftauth-sdk)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## ✨ Features
+
+- 🔐 **Email/Password Authentication** - Built-in validation and error handling
+- 🎨 **Pre-built UI Components** - Beautiful, customizable auth screens out of the box
+- 🎣 **Headless Hooks** - Full control with `useAuth()` for custom implementations
+- 🍎 **Social Login Support** - Google and Apple Sign-In (iOS only for Apple)
+- 💾 **Persistent Sessions** - Configurable session management (local/memory)
+- 🎯 **TypeScript First** - Full type safety and IntelliSense support
+- ⚡ **Zero Configuration** - Works with minimal setup
+- 📱 **Expo & Bare React Native** - Compatible with both workflows
+
+---
+
+## 📦 Installation
+
+### Prerequisites
+
+Ensure your environment meets these requirements:
+- **Node.js**: v18 or higher
+- **React Native**: v0.70+
+- **Expo**: SDK 49+ (Recommended)
+
+### Step 1: Install the SDK
+
+Since SwiftAuth SDK is currently distributed as a source package, clone and link it locally:
+
+```bash
+# Clone the repository
+git clone https://github.com/allcodez/Auth-SDK_Stage8
+
+# Navigate to SDK folder
+cd Auth-SDK_Stage8/swiftauth-sdk
+
+# Install dependencies and build
+npm install
+npm run build
+```
+
+### Step 2: Link to Your Project
+
+Navigate to your React Native/Expo project and install the SDK:
+
+```bash
+cd your-project-folder
+npm install ../path/to/Auth-SDK_Stage8/swiftauth-sdk
+```
+
+### Step 3: Install Required Dependencies
+
+SwiftAuth requires these peer dependencies:
+
+```bash
+npm install firebase @react-native-async-storage/async-storage react-native-safe-area-context
+```
+
+**For Expo projects:**
+```bash
+npx expo install firebase @react-native-async-storage/async-storage react-native-safe-area-context
+```
+
+**For Google Sign-In (Optional):**
+```bash
+npm install @react-native-google-signin/google-signin
+# or for Expo
+npx expo install @react-native-google-signin/google-signin
+```
+
+**For Apple Sign-In (Optional, iOS only):**
+```bash
+npm install @invertase/react-native-apple-authentication
+# or for Expo
+npx expo install @invertase/react-native-apple-authentication
+```
+
+### Step 4: Metro Configuration (Important)
+
+Update your `metro.config.js` to resolve the SDK properly:
+
+```javascript
+const { getDefaultConfig } = require('expo/metro-config');
+const path = require('path');
+
+const projectRoot = __dirname;
+const workspaceRoot = path.resolve(projectRoot, '../');
+
+const config = getDefaultConfig(projectRoot);
+
+config.watchFolders = [workspaceRoot];
+config.resolver.nodeModulesPaths = [
+  path.resolve(projectRoot, 'node_modules'),
+  path.resolve(workspaceRoot, 'node_modules'),
+];
+
+module.exports = config;
+```
+
+### ⚠️ Troubleshooting "Duplicate React"
+
+If you encounter an "Invalid Hook Call" error:
+
+1. Build the SDK: `npm run build`
+2. Delete SDK's `node_modules`: `rm -rf node_modules` inside `swiftauth-sdk`
+3. Clear cache and restart: `npx expo start -c`
+
+---
+
+## 🔧 Firebase Setup
+
+### 1. Create Firebase Project
+
+1. Go to [Firebase Console](https://console.firebase.google.com/)
+2. Create a new project or select existing one
+3. Register a **Web App** (click the `</>` icon)
+4. Copy the `firebaseConfig` object
+
+### 2. Enable Authentication Methods
+
+1. Go to **Authentication** > **Sign-in method**
+2. Enable **Email/Password**
+3. (Optional) Enable **Google** and/or **Apple** for social login
+
+### 3. Platform-Specific Configuration
+
+#### Android Setup
+
+1. In Firebase Console, register an **Android app**
+2. Download `google-services.json`
+3. Place it in your project: `android/app/google-services.json`
+
+**Update `android/build.gradle`:**
+```gradle
+buildscript {
+  dependencies {
+    // Add this line
+    classpath 'com.google.gms:google-services:4.3.15'
+  }
+}
+```
+
+**Update `android/app/build.gradle`:**
+```gradle
+apply plugin: 'com.android.application'
+// Add this line at the bottom
+apply plugin: 'com.google.gms.google-services'
+```
+
+**Update `app.json` for Expo:**
+```json
+{
+  "expo": {
+    "android": {
+      "googleServicesFile": "./google-services.json",
+      "package": "com.yourcompany.yourapp"
+    }
+  }
+}
+```
+
+#### iOS Setup
+
+1. In Firebase Console, register an **iOS app**
+2. Download `GoogleService-Info.plist`
+3. Place it in your project: `ios/YourAppName/GoogleService-Info.plist`
+
+**For Bare React Native:**
+- Drag `GoogleService-Info.plist` into your Xcode project
+
+**Update `app.json` for Expo:**
+```json
+{
+  "expo": {
+    "ios": {
+      "googleServicesFile": "./GoogleService-Info.plist",
+      "bundleIdentifier": "com.yourcompany.yourapp"
+    }
+  }
+}
+```
+
+**Install CocoaPods (iOS only):**
+```bash
+cd ios
+pod install
+cd ..
+```
+
+### 4. Google Sign-In Configuration (Optional)
+
+#### Get Google Client IDs
+
+1. Go to [Google Cloud Console](https://console.cloud.google.com/)
+2. Select your Firebase project
+3. Go to **APIs & Services** > **Credentials**
+4. You'll need:
+   - **Web Client ID** (for all platforms)
+   - **iOS Client ID** (optional, iOS-specific)
+
+**Update `app.json` for Google Sign-In:**
+```json
+{
+  "expo": {
+    "ios": {
+      "bundleIdentifier": "com.yourcompany.yourapp",
+      "googleServicesFile": "./GoogleService-Info.plist"
+    },
+    "android": {
+      "package": "com.yourcompany.yourapp",
+      "googleServicesFile": "./google-services.json"
+    }
+  }
+}
+```
+
+### 5. Apple Sign-In Configuration (Optional, iOS only)
+
+1. Go to your [Apple Developer Account](https://developer.apple.com/)
+2. Enable **Sign in with Apple** capability
+3. Add the capability in Xcode: **Signing & Capabilities** > **+ Capability** > **Sign in with Apple**
+
+**Update `app.json`:**
+```json
+{
+  "expo": {
+    "ios": {
+      "usesAppleSignIn": true
+    }
+  }
+}
+```
+
+---
+
+## 🚀 Quick Start
+
+### Basic Setup (Email Authentication)
+
+```tsx
+// App.tsx
+import React from 'react';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { AuthProvider, AuthScreen, useAuth } from 'swiftauth-sdk';
+
+// Your Firebase configuration
+const firebaseConfig = {
+  apiKey: "AIzaSyD-Your-Actual-Key",
+  authDomain: "your-project.firebaseapp.com",
+  projectId: "your-project-id",
+  storageBucket: "your-project.appspot.com",
+  messagingSenderId: "123456789",
+  appId: "1:123456789:web:abcdef"
+};
+
+const MainNavigation = () => {
+  const { user } = useAuth();
+
+  if (!user) {
+    return <AuthScreen />;
+  }
+
+  return <HomeScreen user={user} />;
+};
+
+export default function App() {
+  return (
+    <SafeAreaProvider>
+      <AuthProvider config={firebaseConfig}>
+        <MainNavigation />
+      </AuthProvider>
+    </SafeAreaProvider>
+  );
+}
+```
+
+### With Social Login
+
+```tsx
+const firebaseConfig = {
+  apiKey: "AIzaSyD-Your-Actual-Key",
+  authDomain: "your-project.firebaseapp.com",
+  projectId: "your-project-id",
+  
+  // Enable social login
+  enableGoogle: true,
+  enableApple: true, // iOS only
+  
+  // Required for Google Sign-In
+  googleWebClientId: "YOUR-CLIENT-ID.apps.googleusercontent.com",
+};
+```
+
+---
+
+## 📚 API Reference
+
+### `<AuthProvider>`
+
+Wraps your app and provides authentication context.
+
+**Props:**
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `config` | `AuthConfig` | Yes | Firebase configuration object |
+| `children` | `ReactNode` | Yes | Your app components |
+
+**AuthConfig Interface:**
+
+```typescript
+interface AuthConfig {
+  // Firebase credentials (Required)
+  apiKey: string;
+  authDomain: string;
+  projectId: string;
+  storageBucket?: string;
+  messagingSenderId?: string;
+  appId?: string;
+  
+  // Session persistence
+  persistence?: 'local' | 'memory'; // Default: 'local'
+  
+  // Feature flags
+  enableEmail?: boolean;      // Default: true
+  enableGoogle?: boolean;     // Default: false
+  enableApple?: boolean;      // Default: false (iOS only)
+  
+  // Google Sign-In
+  googleWebClientId?: string;
+  googleIosClientId?: string;
+}
+```
+
+### `useAuth()` Hook
+
+Access authentication state and methods.
+
+```typescript
+const {
+  user,           // Current user object or null
+  status,         // 'AUTHENTICATED' | 'UNAUTHENTICATED' | 'LOADING'
+  error,          // Last error object or null
+  signInWithEmail,
+  signUpWithEmail,
+  signOut,
+  clearError
+} = useAuth();
+```
+
+**Methods:**
+
+| Method | Signature | Description |
+|--------|-----------|-------------|
+| `signInWithEmail` | `(email: string, password: string) => Promise<void>` | Sign in existing user |
+| `signUpWithEmail` | `(email: string, password: string) => Promise<void>` | Create new account |
+| `signOut` | `() => Promise<void>` | Log out current user |
+| `clearError` | `() => void` | Clear error state |
+
+### `<AuthScreen>` Component
+
+Pre-built authentication UI with login and signup.
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `styles` | `AuthScreenStyles` | `undefined` | Custom styles object |
+| `titles` | `object` | `undefined` | Custom text labels |
+| `showPasswordHints` | `boolean` | `true` | Show password requirements |
+
+**Example:**
+
+```tsx
+<AuthScreen 
+  titles={{
+    loginTitle: "Welcome Back",
+    loginSubtitle: "Sign in to continue",
+    signupTitle: "Create Account",
+    signupSubtitle: "Join us today"
+  }}
+  styles={{
+    container: { backgroundColor: '#f5f5f5' },
+    button: { backgroundColor: '#007AFF' },
+    buttonText: { color: '#ffffff' }
+  }}
+  showPasswordHints={true}
+/>
+```
+
+---
+
+## 🎨 Customization Examples
+
+### Dark Mode Theme
+
+```tsx
+<AuthScreen 
+  styles={{
+    container: { backgroundColor: '#1a1a1a' },
+    title: { color: '#ffffff', fontSize: 30, fontWeight: '800' },
+    subtitle: { color: '#cccccc' },
+    input: { 
+      backgroundColor: '#333333', 
+      color: '#ffffff', 
+      borderColor: '#555555' 
+    },
+    button: { backgroundColor: '#FFD700' },
+    buttonText: { color: '#000000', fontWeight: 'bold' }
+  }}
+/>
+```
+
+### Custom UI (Headless)
+
+Build your own interface using the `useAuth()` hook:
+
+```tsx
+import { useState } from 'react';
+import { View, TextInput, Button, Text } from 'react-native';
+import { useAuth } from 'swiftauth-sdk';
+
+export const CustomLoginScreen = () => {
+  const { signInWithEmail, error } = useAuth();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleLogin = async () => {
+    try {
+      await signInWithEmail(email, password);
+    } catch (err) {
+      console.error('Login failed:', err);
+    }
+  };
+
+  return (
+    <View style={{ padding: 20 }}>
+      <Text style={{ fontSize: 24, marginBottom: 20 }}>Login</Text>
+      
+      {error && <Text style={{ color: 'red' }}>{error.message}</Text>}
+      
+      <TextInput 
+        placeholder="Email"
+        value={email}
+        onChangeText={setEmail}
+        style={{ borderWidth: 1, padding: 10, marginBottom: 10 }}
+      />
+      
+      <TextInput 
+        placeholder="Password"
+        value={password}
+        onChangeText={setPassword}
+        secureTextEntry
+        style={{ borderWidth: 1, padding: 10, marginBottom: 20 }}
+      />
+      
+      <Button title="Sign In" onPress={handleLogin} />
+    </View>
+  );
+};
+```
+
+---
+
+## ⚠️ Error Handling
+
+SwiftAuth maps Firebase errors to user-friendly codes:
+
+| Error Code | Meaning | User Message |
+|------------|---------|--------------|
+| `auth/invalid-credentials` | Wrong email/password | "Invalid email or password." |
+| `auth/user-not-found` | Account doesn't exist | "Invalid email or password." |
+| `auth/email-already-in-use` | Email already registered | "This email is already registered." |
+| `auth/weak-password` | Password too weak | "Password is too weak." |
+| `auth/network-request-failed` | No internet connection | "Network error. Please check your connection." |
+| `auth/invalid-email` | Invalid email format | "Invalid email address." |
+| `auth/configuration-error` | Missing API keys | "Authentication is not configured correctly." |
+
+**Usage:**
+
+```tsx
+const { error } = useAuth();
+
+if (error) {
+  if (error.code === 'auth/network-request-failed') {
+    return <OfflineBanner />;
+  }
+  return <Text style={{ color: 'red' }}>{error.message}</Text>;
+}
+```
+
+---
+
+## 🔐 Session Management
+
+### Keep User Logged In (Default)
+
+```tsx
+const config = {
+  ...firebaseConfig,
+  persistence: 'local' // User stays logged in
+};
+```
+
+### Banking App Mode
+
+```tsx
+const config = {
+  ...firebaseConfig,
+  persistence: 'memory' // User logged out when app closes
+};
+```
+
+---
+
+## 🧪 Testing
+
+Run the example app to test the SDK:
+
+```bash
+cd swiftauth-example
+npm install
+npx expo start
+```
+
+---
+
+## 📖 Full Documentation
+
+- [Installation Guide](./docs/installation.md)
+- [Getting Started](./docs/getting-started.md)
+- [API Reference](./docs/api-reference.md)
+- [Usage Examples](./docs/usage-examples.md)
+- [Error Codes](./docs/error-codes.md)
+
+---
+
+## 🤝 Contributing
+
+We welcome contributions! See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines.
+
+---
+
+## 📄 License
+
+MIT License - see [LICENSE](./LICENSE) file for details.
+
+---
+
+## 🆘 Support
+
+- 📧 Email: support@swiftauth.dev
+- 🐛 Issues: [GitHub Issues](https://github.com/allcodez/Auth-SDK_Stage8/issues)
+- 💬 Discussions: [GitHub Discussions](https://github.com/allcodez/Auth-SDK_Stage8/discussions)
+
+---
+
+## 🎯 Roadmap
+
+- [ ] Password reset functionality
+- [ ] Email verification
+- [ ] Phone authentication
+- [ ] Multi-factor authentication (MFA)
+- [ ] Biometric authentication
+- [ ] Session refresh tokens
+- [ ] NPM package distribution
+
+---
+
+Made with ❤️ by the SwiftAuth Team

package/dist/components/AuthScreen.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { AuthScreenStyles } from '../types';
+interface AuthScreenProps {
+    styles?: AuthScreenStyles;
+    titles?: {
+        loginTitle?: string;
+        loginSubtitle?: string;
+        signupTitle?: string;
+        signupSubtitle?: string;
+    };
+    showPasswordHints?: boolean;
+}
+export declare const AuthScreen: ({ styles: userStyles, titles, showPasswordHints }: AuthScreenProps) => React.JSX.Element;
+export {};

package/dist/components/AuthScreen.js

@@ -0,0 +1,75 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuthScreen = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const LoginForm_1 = require("./LoginForm");
+const SignUpForm_1 = require("./SignUpForm");
+const AuthScreen = ({ styles: userStyles, titles, showPasswordHints = true }) => {
+    const [view, setView] = (0, react_1.useState)('login');
+    const isLogin = view === 'login';
+    return (react_1.default.createElement(react_native_safe_area_context_1.SafeAreaView, { style: [defaultStyles.safeArea, userStyles?.container] },
+        react_1.default.createElement(react_native_1.KeyboardAvoidingView, { behavior: react_native_1.Platform.OS === "ios" ? "padding" : "height", style: { flex: 1 } },
+            react_1.default.createElement(react_native_1.ScrollView, { contentContainerStyle: defaultStyles.scrollContainer, keyboardShouldPersistTaps: "handled" },
+                react_1.default.createElement(react_native_1.View, { style: defaultStyles.innerContainer },
+                    react_1.default.createElement(react_native_1.View, { style: [defaultStyles.header, userStyles?.header] },
+                        react_1.default.createElement(react_native_1.Text, { style: [defaultStyles.title, userStyles?.title] }, isLogin
+                            ? (titles?.loginTitle || 'Welcome Back')
+                            : (titles?.signupTitle || 'Create Account')),
+                        react_1.default.createElement(react_native_1.Text, { style: [defaultStyles.subtitle, userStyles?.subtitle] }, isLogin
+                            ? (titles?.loginSubtitle || 'Sign in to continue')
+                            : (titles?.signupSubtitle || 'Sign up to get started'))),
+                    isLogin
+                        ? react_1.default.createElement(LoginForm_1.LoginForm, { styles: userStyles })
+                        : react_1.default.createElement(SignUpForm_1.SignUpForm, { styles: userStyles, showHints: showPasswordHints }),
+                    react_1.default.createElement(react_native_1.View, { style: [defaultStyles.footer, userStyles?.footer] },
+                        react_1.default.createElement(react_native_1.Text, { style: [defaultStyles.footerText, userStyles?.footerText] }, isLogin ? "Don't have an account?" : "Already have an account?"),
+                        react_1.default.createElement(react_native_1.TouchableOpacity, { onPress: () => setView(isLogin ? 'signup' : 'login') },
+                            react_1.default.createElement(react_native_1.Text, { style: [defaultStyles.linkText, userStyles?.linkText] }, isLogin ? ' Sign Up' : ' Sign In'))))))));
+};
+exports.AuthScreen = AuthScreen;
+const defaultStyles = react_native_1.StyleSheet.create({
+    safeArea: { flex: 1, backgroundColor: '#fff' },
+    scrollContainer: { flexGrow: 1, justifyContent: 'center' },
+    innerContainer: { padding: 24, width: '100%', maxWidth: 500, alignSelf: 'center' },
+    header: { marginBottom: 32, alignItems: 'center' },
+    title: { fontSize: 28, fontWeight: 'bold', color: '#1a1a1a', marginBottom: 8 },
+    subtitle: { fontSize: 16, color: '#666', textAlign: 'center' },
+    footer: { flexDirection: 'row', justifyContent: 'center', marginTop: 24, marginBottom: 20 },
+    footerText: { color: '#666', fontSize: 14 },
+    linkText: { color: '#007AFF', fontWeight: '600', fontSize: 14, marginLeft: 5 },
+});

package/dist/components/LoginForm.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { AuthScreenStyles } from '../types';
+interface LoginFormProps {
+    styles?: AuthScreenStyles;
+}
+export declare const LoginForm: ({ styles: userStyles }: LoginFormProps) => React.JSX.Element;
+export {};