@umituz/react-native-auth 1.2.1 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Firebase Authentication wrapper for React Native apps - Secure, type-safe, and production-ready",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/presentation/components/AuthLegalLinks.tsx

@@ -0,0 +1,135 @@
+/**
+ * Auth Legal Links Component
+ * Display Terms of Service and Privacy Policy links
+ */
+
+import React from "react";
+import { View, StyleSheet, Linking } from "react-native";
+import { AtomicButton, AtomicText } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-theme";
+import { useLocalization } from "@umituz/react-native-localization";
+
+export interface AuthLegalLinksProps {
+  /**
+   * Terms of Service URL
+   */
+  termsUrl?: string;
+  /**
+   * Privacy Policy URL
+   */
+  privacyUrl?: string;
+  /**
+   * Callback when Terms of Service is pressed
+   */
+  onTermsPress?: () => void;
+  /**
+   * Callback when Privacy Policy is pressed
+   */
+  onPrivacyPress?: () => void;
+  /**
+   * Custom text before links
+   */
+  prefixText?: string;
+}
+
+export const AuthLegalLinks: React.FC<AuthLegalLinksProps> = ({
+  termsUrl,
+  privacyUrl,
+  onTermsPress,
+  onPrivacyPress,
+  prefixText,
+}) => {
+  const tokens = useAppDesignTokens();
+  const { t } = useLocalization();
+
+  const handleTermsPress = async () => {
+    if (onTermsPress) {
+      onTermsPress();
+    } else if (termsUrl) {
+      await Linking.openURL(termsUrl);
+    }
+  };
+
+  const handlePrivacyPress = async () => {
+    if (onPrivacyPress) {
+      onPrivacyPress();
+    } else if (privacyUrl) {
+      await Linking.openURL(privacyUrl);
+    }
+  };
+
+  const hasTerms = termsUrl || onTermsPress;
+  const hasPrivacy = privacyUrl || onPrivacyPress;
+
+  if (!hasTerms && !hasPrivacy) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      {prefixText && (
+        <AtomicText
+          type="bodySmall"
+          color="secondary"
+          style={styles.prefixText}
+        >
+          {prefixText}
+        </AtomicText>
+      )}
+      <View style={styles.linksContainer}>
+        {hasTerms && (
+          <AtomicButton
+            variant="text"
+            onPress={handleTermsPress}
+            style={styles.linkButton}
+          >
+            <AtomicText type="bodySmall" color="primary">
+              {t("auth.termsOfService") || "Terms of Service"}
+            </AtomicText>
+          </AtomicButton>
+        )}
+        {hasTerms && hasPrivacy && (
+          <AtomicText type="bodySmall" color="secondary" style={styles.separator}>
+            {" • "}
+          </AtomicText>
+        )}
+        {hasPrivacy && (
+          <AtomicButton
+            variant="text"
+            onPress={handlePrivacyPress}
+            style={styles.linkButton}
+          >
+            <AtomicText type="bodySmall" color="primary">
+              {t("auth.privacyPolicy") || "Privacy Policy"}
+            </AtomicText>
+          </AtomicButton>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 16,
+    alignItems: "center",
+  },
+  prefixText: {
+    marginBottom: 8,
+    textAlign: "center",
+  },
+  linksContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    flexWrap: "wrap",
+  },
+  linkButton: {
+    paddingHorizontal: 4,
+    paddingVertical: 4,
+  },
+  separator: {
+    marginHorizontal: 4,
+  },
+});
+

package/src/presentation/components/RegisterForm.tsx

@@ -16,13 +16,22 @@ import {
 import { useAuth } from "../hooks/useAuth";
 import { AuthErrorDisplay } from "./AuthErrorDisplay";
 import { AuthLink } from "./AuthLink";
+import { AuthLegalLinks } from "./AuthLegalLinks";
 
 interface RegisterFormProps {
   onNavigateToLogin: () => void;
+  termsUrl?: string;
+  privacyUrl?: string;
+  onTermsPress?: () => void;
+  onPrivacyPress?: () => void;
 }
 
 export const RegisterForm: React.FC<RegisterFormProps> = ({
   onNavigateToLogin,
+  termsUrl,
+  privacyUrl,
+  onTermsPress,
+  onPrivacyPress,
 }) => {
   const { t } = useLocalization();
   const { signUp, loading, error } = useAuth();
@@ -206,6 +215,14 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
         onPress={onNavigateToLogin}
         disabled={loading}
       />
+
+      <AuthLegalLinks
+        termsUrl={termsUrl}
+        privacyUrl={privacyUrl}
+        onTermsPress={onTermsPress}
+        onPrivacyPress={onPrivacyPress}
+        prefixText={t("auth.bySigningUp") || "By signing up, you agree to our"}
+      />
     </>
   );
 };

package/src/presentation/navigation/AuthNavigator.tsx

@@ -20,7 +20,31 @@ const AuthStack = createStackNavigator<AuthStackParamList>();
 
 const SHOW_REGISTER_KEY = "auth_show_register";
 
-export const AuthNavigator: React.FC = () => {
+export interface AuthNavigatorProps {
+  /**
+   * Terms of Service URL
+   */
+  termsUrl?: string;
+  /**
+   * Privacy Policy URL
+   */
+  privacyUrl?: string;
+  /**
+   * Callback when Terms of Service is pressed
+   */
+  onTermsPress?: () => void;
+  /**
+   * Callback when Privacy Policy is pressed
+   */
+  onPrivacyPress?: () => void;
+}
+
+export const AuthNavigator: React.FC<AuthNavigatorProps> = ({
+  termsUrl,
+  privacyUrl,
+  onTermsPress,
+  onPrivacyPress,
+}) => {
   const tokens = useAppDesignTokens();
   const [initialRouteName, setInitialRouteName] = useState<
     "Login" | "Register" | undefined
@@ -51,7 +75,17 @@ export const AuthNavigator: React.FC = () => {
       }}
     >
       <AuthStack.Screen name="Login" component={LoginScreen} />
-      <AuthStack.Screen name="Register" component={RegisterScreen} />
+      <AuthStack.Screen name="Register">
+        {(props) => (
+          <RegisterScreen
+            {...props}
+            termsUrl={termsUrl}
+            privacyUrl={privacyUrl}
+            onTermsPress={onTermsPress}
+            onPrivacyPress={onPrivacyPress}
+          />
+        )}
+      </AuthStack.Screen>
     </AuthStack.Navigator>
   );
 };

package/src/presentation/screens/RegisterScreen.tsx

@@ -18,7 +18,19 @@ type RegisterScreenNavigationProp = StackNavigationProp<
   "Register"
 >;
 
-export const RegisterScreen: React.FC = () => {
+export interface RegisterScreenProps {
+  termsUrl?: string;
+  privacyUrl?: string;
+  onTermsPress?: () => void;
+  onPrivacyPress?: () => void;
+}
+
+export const RegisterScreen: React.FC<RegisterScreenProps> = ({
+  termsUrl,
+  privacyUrl,
+  onTermsPress,
+  onPrivacyPress,
+}) => {
   const { t } = useLocalization();
   const navigation = useNavigation<RegisterScreenNavigationProp>();
 
@@ -30,7 +42,13 @@ export const RegisterScreen: React.FC = () => {
     <AuthContainer>
       <AuthHeader title={t("auth.createAccount")} />
       <AuthFormCard>
-        <RegisterForm onNavigateToLogin={handleNavigateToLogin} />
+        <RegisterForm
+          onNavigateToLogin={handleNavigateToLogin}
+          termsUrl={termsUrl}
+          privacyUrl={privacyUrl}
+          onTermsPress={onTermsPress}
+          onPrivacyPress={onPrivacyPress}
+        />
       </AuthFormCard>
     </AuthContainer>
   );