react-native-nitro-auth 0.6.1 → 0.6.3

package/src/Auth.web.ts

@@ -24,6 +24,16 @@ const WEB_STORAGE_MODES = new Set([
   STORAGE_MODE_LOCAL,
   STORAGE_MODE_MEMORY,
 ] as const);
+const MICROSOFT_TENANT_PATTERN =
+  /^(common|organizations|consumers|[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}|[A-Za-z0-9][A-Za-z0-9._-]{0,127})$/;
+const MICROSOFT_B2C_TENANT_PATH_PATTERN =
+  /^([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}|[A-Za-z0-9][A-Za-z0-9._-]{0,127})\/[A-Za-z0-9][A-Za-z0-9._-]{0,127}$/;
+const MICROSOFT_B2C_POLICY_PATTERN = /^[A-Za-z0-9][A-Za-z0-9._-]{0,127}$/;
+const MICROSOFT_B2CLOGIN_DOMAIN_SUFFIX = ".b2clogin.com";
+const MICROSOFT_B2CLOGIN_TENANT_NAME_PATTERN =
+  /^[A-Za-z0-9](?:[A-Za-z0-9-]{0,61}[A-Za-z0-9])?$/;
+const MICROSOFT_DOMAIN_PATTERN =
+  /^(?=.{1,253}$)(?:[A-Za-z0-9](?:[A-Za-z0-9-]{0,61}[A-Za-z0-9])?\.)+[A-Za-z]{2,63}$/;
 const WEB_AUTH_ERROR_CODES: ReadonlySet<string> = new Set<AuthErrorCode>([
   "cancelled",
   "timeout",
@@ -1328,15 +1338,68 @@ class AuthWeb implements Auth {
   }
 
   private getMicrosoftAuthBaseUrl(tenant: string, b2cDomain?: string): string {
-    if (tenant.startsWith("https://")) {
-      return tenant.endsWith("/") ? tenant : `${tenant}/`;
+    const trimmedTenant = tenant.trim();
+
+    const trimmedDomain = b2cDomain?.trim().toLowerCase();
+    if (trimmedDomain) {
+      if (!MICROSOFT_DOMAIN_PATTERN.test(trimmedDomain)) {
+        throw new AuthWebError(
+          "configuration_error",
+          "Microsoft B2C domain must be a hostname.",
+        );
+      }
+      const b2cTenantPath = this.getMicrosoftB2cTenantPath(
+        trimmedTenant,
+        trimmedDomain,
+      );
+      return `https://${trimmedDomain}/${b2cTenantPath}/`;
+    }
+
+    if (!MICROSOFT_TENANT_PATTERN.test(trimmedTenant)) {
+      throw new AuthWebError(
+        "configuration_error",
+        "Microsoft tenant must be common, organizations, consumers, a tenant ID, or tenant domain.",
+      );
     }
 
-    if (b2cDomain) {
-      return `https://${b2cDomain}/tfp/${tenant}/`;
-    } else {
-      return `https://login.microsoftonline.com/${tenant}/`;
+    return `https://login.microsoftonline.com/${trimmedTenant}/`;
+  }
+
+  private getMicrosoftB2cTenantPath(tenant: string, domain: string): string {
+    if (MICROSOFT_B2C_TENANT_PATH_PATTERN.test(tenant)) {
+      return tenant;
     }
+
+    if (!MICROSOFT_B2C_POLICY_PATTERN.test(tenant)) {
+      throw new AuthWebError(
+        "configuration_error",
+        "Microsoft B2C tenant must be a policy or tenant/policy path.",
+      );
+    }
+
+    const tenantName = this.getMicrosoftB2cTenantName(domain);
+    if (tenantName === undefined) {
+      throw new AuthWebError(
+        "configuration_error",
+        "Microsoft B2C custom domains require microsoftTenant as a tenant/policy path.",
+      );
+    }
+
+    return `${tenantName}.onmicrosoft.com/${tenant}`;
+  }
+
+  private getMicrosoftB2cTenantName(domain: string): string | undefined {
+    if (!domain.endsWith(MICROSOFT_B2CLOGIN_DOMAIN_SUFFIX)) {
+      return undefined;
+    }
+
+    const tenantName = domain.slice(
+      0,
+      -MICROSOFT_B2CLOGIN_DOMAIN_SUFFIX.length,
+    );
+    return MICROSOFT_B2CLOGIN_TENANT_NAME_PATTERN.test(tenantName)
+      ? tenantName
+      : undefined;
   }
 
   private decodeMicrosoftJwt(token: string): Partial<AuthUser> {

package/src/ui/social-button.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import type { ViewStyle, TextStyle } from "react-native";
 import {
   Pressable,
@@ -34,7 +34,7 @@ const PROVIDER_LABELS: Record<AuthProvider, string> = {
 const PROVIDER_PRIMARY_BACKGROUND: Record<AuthProvider, string> = {
   google: "#4285F4",
   apple: "#000000",
-  microsoft: "#2F2F2F",
+  microsoft: "#1f2937",
 };
 
 const getBackgroundColor = ({
@@ -46,21 +46,29 @@ const getBackgroundColor = ({
   variant: SocialButtonVariant;
   provider: AuthProvider;
 }): string => {
-  if (disabled) return "#CCCCCC";
+  if (disabled) return "#E2E8F0";
   if (variant === "black") return "#000000";
   if (variant === "white") return "#FFFFFF";
   if (variant === "outline") return "transparent";
   return PROVIDER_PRIMARY_BACKGROUND[provider];
 };
 
-const getTextColor = (variant: SocialButtonVariant): string =>
-  variant === "white" || variant === "outline" ? "#000000" : "#FFFFFF";
+const getTextColor = ({
+  disabled,
+  variant,
+}: {
+  disabled: boolean;
+  variant: SocialButtonVariant;
+}): string => {
+  if (disabled) return "#64748B";
+  return variant === "white" || variant === "outline" ? "#111827" : "#FFFFFF";
+};
 
 async function performLogin(provider: AuthProvider): Promise<void> {
   await AuthService.login(provider);
 }
 
-export const SocialButton = ({
+export const SocialButton = React.memo(function SocialButton({
   provider,
   variant = "primary",
   borderRadius = 8,
@@ -70,10 +78,11 @@ export const SocialButton = ({
   onSuccess,
   onError,
   onPress,
-}: SocialButtonProps) => {
+}: SocialButtonProps) {
   const [loading, setLoading] = useState(false);
+  const isDisabled = loading || disabled === true;
 
-  const handleLogin = async () => {
+  const handleLogin = useCallback(async () => {
     if (loading || disabled) return;
     if (onPress) {
       onPress();
@@ -96,36 +105,41 @@ export const SocialButton = ({
     } finally {
       setLoading(false);
     }
-  };
-  const isDisabled = loading || disabled === true;
+  }, [disabled, loading, onError, onPress, onSuccess, provider]);
 
-  const getBorderColor = () => {
-    if (variant === "outline") return "#DDDDDD";
-    return "transparent";
-  };
+  const buttonStyle = useMemo(
+    () => ({
+      backgroundColor: getBackgroundColor({
+        disabled: isDisabled,
+        variant,
+        provider,
+      }),
+      borderRadius,
+      borderColor: variant === "outline" ? "#DDDDDD" : "transparent",
+      borderWidth: variant === "outline" ? 1 : 0,
+    }),
+    [borderRadius, isDisabled, provider, variant],
+  );
+
+  const textColor = getTextColor({ disabled: isDisabled, variant });
+  const labelStyle = useMemo(
+    () => [styles.text, { color: textColor }, textStyle],
+    [textColor, textStyle],
+  );
+  const appleIconStyle = useMemo(
+    () => [styles.iconText, { color: textColor }],
+    [textColor],
+  );
 
   return (
     <Pressable
-      style={[
-        styles.button,
-        {
-          backgroundColor: getBackgroundColor({
-            disabled: isDisabled,
-            variant,
-            provider,
-          }),
-          borderRadius,
-          borderColor: getBorderColor(),
-          borderWidth: variant === "outline" ? 1 : 0,
-        },
-        style,
-      ]}
+      style={[styles.button, buttonStyle, style]}
       onPress={handleLogin}
       disabled={isDisabled}
     >
       <View style={styles.content}>
         {loading ? (
-          <ActivityIndicator size="small" color={getTextColor(variant)} />
+          <ActivityIndicator size="small" color={textColor} />
         ) : (
           <>
             {provider === "google" && variant !== "primary" && (
@@ -135,11 +149,7 @@ export const SocialButton = ({
             )}
             {provider === "apple" && variant !== "primary" && (
               <View style={styles.iconPlaceholder}>
-                <Text
-                  style={[styles.iconText, { color: getTextColor(variant) }]}
-                >
-                  
-                </Text>
+                <Text style={appleIconStyle}></Text>
               </View>
             )}
             {provider === "microsoft" && variant !== "primary" && (
@@ -147,9 +157,7 @@ export const SocialButton = ({
                 <Text style={styles.microsoftIconText}>⊞</Text>
               </View>
             )}
-            <Text
-              style={[styles.text, { color: getTextColor(variant) }, textStyle]}
-            >
+            <Text style={labelStyle}>
               Sign in with {PROVIDER_LABELS[provider]}
             </Text>
           </>
@@ -157,7 +165,7 @@ export const SocialButton = ({
       </View>
     </Pressable>
   );
-};
+});
 
 const styles = StyleSheet.create({
   button: {