rn-swiftauth-sdk 1.0.0

package/dist/types/error.types.d.ts

@@ -0,0 +1,23 @@
+export declare enum AuthErrorCode {
+    INVALID_CREDENTIALS = "auth/invalid-credentials",
+    USER_NOT_FOUND = "auth/user-not-found",
+    EMAIL_ALREADY_IN_USE = "auth/email-already-in-use",
+    WEAK_PASSWORD = "auth/weak-password",
+    TOKEN_EXPIRED = "auth/token-expired",
+    NETWORK_ERROR = "auth/network-request-failed",
+    UNKNOWN = "auth/unknown",
+    CONFIG_ERROR = "auth/configuration-error",
+    CANCELLED = "auth/cancelled",
+    GOOGLE_SIGN_IN_CANCELLED = "GOOGLE_SIGN_IN_CANCELLED",
+    GOOGLE_SIGN_IN_IN_PROGRESS = "GOOGLE_SIGN_IN_IN_PROGRESS",
+    GOOGLE_PLAY_SERVICES_NOT_AVAILABLE = "GOOGLE_PLAY_SERVICES_NOT_AVAILABLE",
+    GOOGLE_SIGN_IN_FAILED = "GOOGLE_SIGN_IN_FAILED",
+    APPLE_SIGN_IN_CANCELLED = "APPLE_SIGN_IN_CANCELLED",
+    APPLE_SIGN_IN_FAILED = "APPLE_SIGN_IN_FAILED",
+    APPLE_SIGN_IN_NOT_SUPPORTED = "APPLE_SIGN_IN_NOT_SUPPORTED"
+}
+export interface AuthError {
+    code: AuthErrorCode;
+    message: string;
+    originalError?: any;
+}

package/dist/types/error.types.js

@@ -0,0 +1,26 @@
+"use strict";
+// src/types/error.types.ts
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuthErrorCode = void 0;
+var AuthErrorCode;
+(function (AuthErrorCode) {
+    AuthErrorCode["INVALID_CREDENTIALS"] = "auth/invalid-credentials";
+    AuthErrorCode["USER_NOT_FOUND"] = "auth/user-not-found";
+    AuthErrorCode["EMAIL_ALREADY_IN_USE"] = "auth/email-already-in-use";
+    AuthErrorCode["WEAK_PASSWORD"] = "auth/weak-password";
+    AuthErrorCode["TOKEN_EXPIRED"] = "auth/token-expired";
+    AuthErrorCode["NETWORK_ERROR"] = "auth/network-request-failed";
+    AuthErrorCode["UNKNOWN"] = "auth/unknown";
+    // Specific to SDK flow
+    AuthErrorCode["CONFIG_ERROR"] = "auth/configuration-error";
+    AuthErrorCode["CANCELLED"] = "auth/cancelled";
+    // Google Sign-In Errors
+    AuthErrorCode["GOOGLE_SIGN_IN_CANCELLED"] = "GOOGLE_SIGN_IN_CANCELLED";
+    AuthErrorCode["GOOGLE_SIGN_IN_IN_PROGRESS"] = "GOOGLE_SIGN_IN_IN_PROGRESS";
+    AuthErrorCode["GOOGLE_PLAY_SERVICES_NOT_AVAILABLE"] = "GOOGLE_PLAY_SERVICES_NOT_AVAILABLE";
+    AuthErrorCode["GOOGLE_SIGN_IN_FAILED"] = "GOOGLE_SIGN_IN_FAILED";
+    // Apple Sign-In Errors
+    AuthErrorCode["APPLE_SIGN_IN_CANCELLED"] = "APPLE_SIGN_IN_CANCELLED";
+    AuthErrorCode["APPLE_SIGN_IN_FAILED"] = "APPLE_SIGN_IN_FAILED";
+    AuthErrorCode["APPLE_SIGN_IN_NOT_SUPPORTED"] = "APPLE_SIGN_IN_NOT_SUPPORTED";
+})(AuthErrorCode || (exports.AuthErrorCode = AuthErrorCode = {}));

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from './auth.types';
+export * from './config.types';
+export * from './error.types';
+export * from './ui.types';

package/dist/types/index.js

@@ -0,0 +1,21 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// src/types/index.ts
+__exportStar(require("./auth.types"), exports);
+__exportStar(require("./config.types"), exports);
+__exportStar(require("./error.types"), exports);
+__exportStar(require("./ui.types"), exports);

package/dist/types/ui.types.d.ts

@@ -0,0 +1,20 @@
+import { ViewStyle, TextStyle } from 'react-native';
+export interface AuthScreenStyles {
+    container?: ViewStyle;
+    header?: ViewStyle;
+    footer?: ViewStyle;
+    title?: TextStyle;
+    subtitle?: TextStyle;
+    footerText?: TextStyle;
+    linkText?: TextStyle;
+    errorText?: TextStyle;
+    input?: TextStyle;
+    button?: ViewStyle;
+    buttonText?: TextStyle;
+    loadingIndicatorColor?: string;
+    inputContainer?: ViewStyle;
+    eyeIcon?: TextStyle;
+    hintContainer?: ViewStyle;
+    hintText?: TextStyle;
+    hintTextMet?: TextStyle;
+}

package/dist/types/ui.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/utils/validation.d.ts

@@ -0,0 +1,3 @@
+export declare const validateEmail: (email: string) => string | null;
+export declare const validatePasswordLogin: (password: string) => string | null;
+export declare const validatePasswordSignup: (password: string) => string | null;

package/dist/utils/validation.js

@@ -0,0 +1,29 @@
+"use strict";
+// src/utils/validation.ts
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validatePasswordSignup = exports.validatePasswordLogin = exports.validateEmail = void 0;
+const validateEmail = (email) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!email)
+        return "Email is required.";
+    if (!emailRegex.test(email))
+        return "Please enter a valid email address.";
+    return null;
+};
+exports.validateEmail = validateEmail;
+const validatePasswordLogin = (password) => {
+    if (!password)
+        return "Password is required.";
+    return null;
+};
+exports.validatePasswordLogin = validatePasswordLogin;
+const validatePasswordSignup = (password) => {
+    if (!password)
+        return "Password is required.";
+    if (password.length < 6)
+        return "Password must be at least 6 characters.";
+    if (!/\d/.test(password))
+        return "Password must contain at least one number.";
+    return null;
+};
+exports.validatePasswordSignup = validatePasswordSignup;

package/package.json

@@ -0,0 +1,62 @@
+{
+    "name": "rn-swiftauth-sdk",
+    "version": "1.0.0",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist",
+        "src"
+    ],
+    "scripts": {
+        "build": "tsc",
+        "watch": "tsc -w",
+        "prepublishOnly": "npm run build"
+    },
+    "keywords": [
+        "react-native",
+        "firebase",
+        "auth",
+        "sdk",
+        "expo",
+        "google-signin",
+        "apple-signin",
+        "oauth"
+    ],
+    "author": "Mobile Ninjas - HNG Stage 8",
+    "license": "MIT",
+    "description": "Modular Authentication SDK with Firebase, Google Sign-In, and Apple Sign-In support",
+    "peerDependencies": {
+        "@react-native-async-storage/async-storage": ">=1.18.0",
+        "@react-native-google-signin/google-signin": ">=10.0.0",
+        "expo-apple-authentication": ">=6.0.0",
+        "expo-crypto": ">=13.0.0",
+        "firebase": ">=9.0.0",
+        "react": ">=18.0.0",
+        "react-native": ">=0.70.0",
+        "react-native-safe-area-context": ">=4.0.0"
+    },
+    "peerDependenciesMeta": {
+        "@react-native-google-signin/google-signin": {
+            "optional": false
+        },
+        "expo-apple-authentication": {
+            "optional": false
+        },
+        "expo-crypto": {
+            "optional": false
+        }
+    },
+    "devDependencies": {
+        "@react-native-async-storage/async-storage": "^2.1.0",
+        "@react-native-google-signin/google-signin": "^13.1.0",
+        "@types/react": "^18.0.0",
+        "@types/react-native": "^0.72.8",
+        "expo-apple-authentication": "^6.4.2",
+        "expo-crypto": "^13.0.2",
+        "firebase": "^12.6.0",
+        "react": "18.3.1",
+        "react-native": "0.76.1",
+        "react-native-safe-area-context": "^5.6.2",
+        "typescript": "^5.0.0"
+    }
+}

package/src/components/AuthScreen.tsx

@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { LoginForm } from './LoginForm';
+import { SignUpForm } from './SignUpForm';
+import { AuthScreenStyles } from '../types';
+
+interface AuthScreenProps {
+  styles?: AuthScreenStyles;
+  titles?: {
+    loginTitle?: string;
+    loginSubtitle?: string;
+    signupTitle?: string;
+    signupSubtitle?: string;
+  };
+  showPasswordHints?: boolean; 
+}
+
+export const AuthScreen = ({ styles: userStyles, titles, showPasswordHints = true }: AuthScreenProps) => {
+  const [view, setView] = useState<'login' | 'signup'>('login');
+
+  const isLogin = view === 'login';
+
+  return (
+    <SafeAreaView style={[defaultStyles.safeArea, userStyles?.container]}>
+      <KeyboardAvoidingView 
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        style={{ flex: 1 }}
+      >
+        <ScrollView 
+          contentContainerStyle={defaultStyles.scrollContainer}
+          keyboardShouldPersistTaps="handled"
+        >
+          <View style={defaultStyles.innerContainer}>
+            
+            {/* Header Section */}
+            <View style={[defaultStyles.header, userStyles?.header]}>
+              <Text style={[defaultStyles.title, userStyles?.title]}>
+                {isLogin 
+                  ? (titles?.loginTitle || 'Welcome Back') 
+                  : (titles?.signupTitle || 'Create Account')}
+              </Text>
+              <Text style={[defaultStyles.subtitle, userStyles?.subtitle]}>
+                {isLogin 
+                  ? (titles?.loginSubtitle || 'Sign in to continue') 
+                  : (titles?.signupSubtitle || 'Sign up to get started')}
+              </Text>
+            </View>
+
+            {/* Form Section */}
+            {isLogin 
+              ? <LoginForm styles={userStyles} /> 
+              : <SignUpForm styles={userStyles} showHints={showPasswordHints} />
+            }
+
+            {/* Footer / Toggle Section */}
+            <View style={[defaultStyles.footer, userStyles?.footer]}>
+              <Text style={[defaultStyles.footerText, userStyles?.footerText]}>
+                {isLogin ? "Don't have an account?" : "Already have an account?"}
+              </Text>
+              <TouchableOpacity onPress={() => setView(isLogin ? 'signup' : 'login')}>
+                <Text style={[defaultStyles.linkText, userStyles?.linkText]}>
+                  {isLogin ? ' Sign Up' : ' Sign In'}
+                </Text>
+              </TouchableOpacity>
+            </View>
+            
+          </View>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+};
+
+const defaultStyles = 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/src/components/LoginForm.tsx

@@ -0,0 +1,246 @@
+import React, { useState } from 'react';
+import {
+  View,
+  TextInput,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ActivityIndicator,
+  Platform
+} from 'react-native';
+import { useAuth } from '../hooks/useAuth';
+import { AuthScreenStyles } from '../types';
+import { PasswordInput } from './PasswordInput';
+import { validateEmail, validatePasswordLogin } from '../utils/validation';
+
+interface LoginFormProps {
+  styles?: AuthScreenStyles;
+}
+
+export const LoginForm = ({ styles: userStyles }: LoginFormProps) => {
+  const {
+    signInWithEmail,
+    signInWithGoogle,
+    signInWithApple,
+    isLoading, // ✅ Using the simplified boolean we added to context
+    error,
+    config // ✅ We need this to check if social buttons are enabled
+  } = useAuth();
+
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  
+  // ✅ Validation Error State
+  const [validationErrors, setValidationErrors] = useState<{ email?: string; password?: string }>({});
+
+  const handleLogin = async () => {
+    // 1. Reset previous errors
+    setValidationErrors({});
+
+    // 2. Validate Inputs
+    const emailErr = validateEmail(email);
+    const passErr = validatePasswordLogin(password);
+
+    if (emailErr || passErr) {
+      setValidationErrors({
+        email: emailErr || undefined,
+        password: passErr || undefined
+      });
+      return; // 🛑 Stop if invalid
+    }
+
+    // 3. Attempt Login
+    try {
+      await signInWithEmail(email, password);
+    } catch (e) { 
+      // Auth errors handled by global state
+    }
+  };
+
+  const handleGoogleSignIn = async () => {
+    try {
+      await signInWithGoogle();
+    } catch (e) {
+      console.error('Google Sign-In Error:', e);
+    }
+  };
+
+  const handleAppleSignIn = async () => {
+    try {
+      await signInWithApple();
+    } catch (e) {
+      console.error('Apple Sign-In Error:', e);
+    }
+  };
+
+  return (
+    <View style={[defaultStyles.container, userStyles?.container]}>
+      {/* Global API Error */}
+      {error && (
+        <Text style={[defaultStyles.errorText, userStyles?.errorText]}>
+          {error.message}
+        </Text>
+      )}
+
+      {/* Email Input */}
+      <TextInput
+        style={[
+          defaultStyles.input, 
+          userStyles?.input,
+          validationErrors.email ? { borderColor: 'red' } : {} // Highlight on error
+        ]}
+        placeholder="Email"
+        value={email}
+        onChangeText={(text) => {
+          setEmail(text);
+          if (validationErrors.email) setValidationErrors({...validationErrors, email: undefined});
+        }}
+        autoCapitalize="none"
+        keyboardType="email-address"
+        placeholderTextColor="#999"
+        editable={!isLoading}
+      />
+      {/* Validation Message */}
+      {validationErrors.email && (
+        <Text style={defaultStyles.validationText}>{validationErrors.email}</Text>
+      )}
+
+      {/* Password Input */}
+      <PasswordInput
+        styles={userStyles}
+        placeholder="Password"
+        value={password}
+        onChangeText={(text) => {
+          setPassword(text);
+          if (validationErrors.password) setValidationErrors({...validationErrors, password: undefined});
+        }}
+        editable={!isLoading}
+      />
+      {validationErrors.password && (
+        <Text style={defaultStyles.validationText}>{validationErrors.password}</Text>
+      )}
+
+      {/* Sign In Button */}
+      <TouchableOpacity
+        style={[
+          defaultStyles.button,
+          isLoading && defaultStyles.buttonDisabled,
+          userStyles?.button
+        ]}
+        onPress={handleLogin}
+        disabled={isLoading}
+      >
+        {isLoading ? (
+          <ActivityIndicator color={userStyles?.loadingIndicatorColor || "#fff"} />
+        ) : (
+          <Text style={[defaultStyles.buttonText, userStyles?.buttonText]}>
+            Sign In
+          </Text>
+        )}
+      </TouchableOpacity>
+
+      {/* OAuth Section - Conditionally Rendered based on Config */}
+      {(config.enableGoogle || config.enableApple) && !isLoading && (
+        <>
+          <View style={defaultStyles.dividerContainer}>
+            <View style={defaultStyles.divider} />
+            <Text style={defaultStyles.dividerText}>OR</Text>
+            <View style={defaultStyles.divider} />
+          </View>
+
+          {/* Google Button */}
+          {config.enableGoogle && (
+            <TouchableOpacity
+              style={[
+                defaultStyles.oauthButton,
+                defaultStyles.googleButton,
+              ]}
+              onPress={handleGoogleSignIn}
+            >
+              <Text style={defaultStyles.googleButtonText}>
+                Continue with Google
+              </Text>
+            </TouchableOpacity>
+          )}
+
+          {/* Apple Button (iOS Only) */}
+          {config.enableApple && Platform.OS === 'ios' && (
+            <TouchableOpacity
+              style={[
+                defaultStyles.oauthButton,
+                defaultStyles.appleButton,
+              ]}
+              onPress={handleAppleSignIn}
+            >
+              <Text style={defaultStyles.appleButtonText}>
+                Continue with Apple
+              </Text>
+            </TouchableOpacity>
+          )}
+        </>
+      )}
+    </View>
+  );
+};
+
+const defaultStyles = StyleSheet.create({
+  container: { width: '100%', marginVertical: 10 },
+
+  input: {
+    backgroundColor: '#f5f5f5',
+    padding: 15,
+    borderRadius: 8,
+    marginBottom: 8, // Reduced slightly to make room for validation text
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
+    fontSize: 16,
+  },
+
+  button: {
+    backgroundColor: '#007AFF',
+    padding: 15,
+    borderRadius: 8,
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  buttonDisabled: { backgroundColor: '#a0cfff' },
+  buttonText: { color: '#fff', fontWeight: '600', fontSize: 16 },
+  
+  errorText: { color: 'red', marginBottom: 12, fontSize: 14, textAlign: 'center' },
+  validationText: { color: 'red', fontSize: 12, marginBottom: 10, marginLeft: 4, marginTop: -4 },
+
+  dividerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 20,
+  },
+  divider: { flex: 1, height: 1, backgroundColor: '#e0e0e0' },
+  dividerText: { marginHorizontal: 16, color: '#666', fontSize: 14, fontWeight: '500' },
+
+  oauthButton: {
+    padding: 15,
+    borderRadius: 8,
+    alignItems: 'center',
+    marginBottom: 10,
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+
+  googleButton: {
+    backgroundColor: '#fff',
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
+  },
+  googleButtonText: {
+    color: '#000',
+    fontSize: 16,
+    fontWeight: '500',
+  },
+
+  appleButton: { backgroundColor: '#000' },
+  appleButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});

package/src/components/PasswordInput.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { View, TextInput, Text, TouchableOpacity, StyleSheet, TextInputProps } from 'react-native';
+import { AuthScreenStyles } from '../types';
+
+interface PasswordInputProps extends TextInputProps {
+  styles?: AuthScreenStyles;
+}
+
+export const PasswordInput = ({ styles, ...props }: PasswordInputProps) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <View style={[defaultStyles.container, styles?.inputContainer]}>
+      <TextInput
+        {...props}
+        style={[defaultStyles.input, styles?.input, { flex: 1, borderWidth: 0, marginBottom: 0 }]}
+        secureTextEntry={!isVisible}
+        placeholderTextColor="#999"
+      />
+      <TouchableOpacity 
+        onPress={() => setIsVisible(!isVisible)} 
+        style={defaultStyles.iconContainer}
+      >
+        {/* Using Unicode characters to avoid icon library dependencies */}
+        <Text style={[defaultStyles.iconText, styles?.eyeIcon]}>
+          {isVisible ? "👁️‍🗨️" : "👁️"} 
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const defaultStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#f5f5f5',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
+    marginBottom: 12,
+    overflow: 'hidden',
+  },
+  input: {
+    padding: 15,
+    fontSize: 16,
+    backgroundColor: 'transparent',
+  },
+  iconContainer: {
+    padding: 15,
+    justifyContent: 'center',
+  },
+  iconText: {
+    fontSize: 18,
+  }
+});