react-native-nitro-auth 0.1.0

package/src/ui/social-button.web.tsx

@@ -0,0 +1,128 @@
+import React, { useState } from "react";
+import {
+  Pressable,
+  Text,
+  StyleSheet,
+  View,
+  ViewStyle,
+  TextStyle,
+  ActivityIndicator,
+} from "react-native";
+import type { AuthProvider, AuthUser } from "../Auth.nitro";
+import { AuthModule } from "../Auth.web";
+
+interface SocialButtonProps {
+  provider: AuthProvider;
+  variant?: "primary" | "outline" | "white" | "black";
+  borderRadius?: number;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+  disabled?: boolean;
+  onSuccess?: (user: AuthUser) => void;
+  onError?: (error: unknown) => void;
+  onPress?: () => void;
+}
+
+async function performLogin(provider: AuthProvider): Promise<AuthUser | null> {
+  await AuthModule.login(provider);
+  return AuthModule.currentUser ?? null;
+}
+
+export const SocialButton: React.FC<SocialButtonProps> = ({
+  provider,
+  variant = "primary",
+  borderRadius = 8,
+  style,
+  textStyle,
+  disabled,
+  onSuccess,
+  onError,
+  onPress,
+}) => {
+  const [loading, setLoading] = useState(false);
+
+  const handleLogin = () => {
+    if (loading || disabled) return;
+    if (onPress) {
+      onPress();
+      return;
+    }
+    setLoading(true);
+    performLogin(provider)
+      .then((user) => {
+        setLoading(false);
+        if (user) onSuccess?.(user);
+      })
+      .catch((e) => {
+        setLoading(false);
+        onError?.(e);
+      });
+  };
+
+  const isGoogle = provider === "google";
+  const isDisabled = loading || disabled;
+
+  const getBackgroundColor = () => {
+    if (isDisabled) return "#CCCCCC";
+    if (variant === "black") return "#000000";
+    if (variant === "white") return "#FFFFFF";
+    if (variant === "outline") return "transparent";
+    return isGoogle ? "#4285F4" : "#000000";
+  };
+
+  const getTextColor = () => {
+    if (variant === "white" || variant === "outline") return "#000000";
+    return "#FFFFFF";
+  };
+
+  const getBorderColor = () => {
+    if (variant === "outline") return "#DDDDDD";
+    return "transparent";
+  };
+
+  return (
+    <Pressable
+      style={[
+        styles.button,
+        {
+          backgroundColor: getBackgroundColor(),
+          borderRadius,
+          borderColor: getBorderColor(),
+          borderWidth: variant === "outline" ? 1 : 0,
+        },
+        style,
+      ]}
+      onPress={handleLogin}
+      disabled={isDisabled}
+    >
+      <View style={styles.content}>
+        {loading ? (
+          <ActivityIndicator size="small" color={getTextColor()} />
+        ) : (
+          <Text style={[styles.text, { color: getTextColor() }, textStyle]}>
+            Sign in with {provider.charAt(0).toUpperCase() + provider.slice(1)}
+          </Text>
+        )}
+      </View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    minHeight: 48,
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  text: {
+    fontSize: 16,
+    fontWeight: "600",
+  },
+});

package/src/use-auth.ts

@@ -0,0 +1,157 @@
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { AuthService } from "./service";
+import type {
+  AuthUser,
+  AuthProvider,
+  LoginOptions,
+  AuthTokens,
+} from "./Auth.nitro";
+
+interface AuthState {
+  user: AuthUser | undefined;
+  scopes: string[];
+  loading: boolean;
+  error: Error | undefined;
+}
+
+export function useAuth() {
+  const [state, setState] = useState<AuthState>({
+    user: AuthService.currentUser,
+    scopes: AuthService.grantedScopes,
+    loading: false,
+    error: undefined,
+  });
+
+  const login = useCallback(
+    async (provider: AuthProvider, options?: LoginOptions) => {
+      setState((prev) => ({ ...prev, loading: true, error: undefined }));
+      try {
+        await AuthService.login(provider, options);
+        setState({
+          user: AuthService.currentUser,
+          scopes: AuthService.grantedScopes,
+          loading: false,
+          error: undefined,
+        });
+      } catch (e) {
+        const error = e instanceof Error ? e : new Error(String(e));
+        setState((prev) => ({
+          ...prev,
+          loading: false,
+          error,
+        }));
+        throw error;
+      }
+    },
+    []
+  );
+
+  const logout = useCallback(() => {
+    AuthService.logout();
+    setState({
+      user: undefined,
+      scopes: [],
+      loading: false,
+      error: undefined,
+    });
+  }, []);
+
+  const requestScopes = useCallback(async (newScopes: string[]) => {
+    setState((prev) => ({ ...prev, loading: true, error: undefined }));
+    try {
+      await AuthService.requestScopes(newScopes);
+      setState({
+        user: AuthService.currentUser,
+        scopes: AuthService.grantedScopes,
+        loading: false,
+        error: undefined,
+      });
+    } catch (e) {
+      const error = e instanceof Error ? e : new Error(String(e));
+      setState((prev) => ({
+        ...prev,
+        loading: false,
+        error,
+      }));
+      throw error;
+    }
+  }, []);
+
+  const revokeScopes = useCallback(async (scopesToRevoke: string[]) => {
+    setState((prev) => ({ ...prev, loading: true, error: undefined }));
+    try {
+      await AuthService.revokeScopes(scopesToRevoke);
+      setState({
+        user: AuthService.currentUser,
+        scopes: AuthService.grantedScopes,
+        loading: false,
+        error: undefined,
+      });
+    } catch (e) {
+      const error = e instanceof Error ? e : new Error(String(e));
+      setState((prev) => ({
+        ...prev,
+        loading: false,
+        error,
+      }));
+      throw error;
+    }
+  }, []);
+
+  const getAccessToken = useCallback(() => AuthService.getAccessToken(), []);
+
+  const refreshToken = useCallback(async () => {
+    setState((prev) => ({ ...prev, loading: true, error: undefined }));
+    try {
+      const tokens = await AuthService.refreshToken();
+      setState({
+        user: AuthService.currentUser,
+        scopes: AuthService.grantedScopes,
+        loading: false,
+        error: undefined,
+      });
+      return tokens;
+    } catch (e) {
+      const error = e instanceof Error ? e : new Error(String(e));
+      setState((prev) => ({
+        ...prev,
+        loading: false,
+        error,
+      }));
+      throw error;
+    }
+  }, []);
+
+  useEffect(() => {
+    const unsubscribe = AuthService.onAuthStateChanged((currentUser) => {
+      setState((prev) => ({
+        ...prev,
+        user: currentUser,
+        scopes: AuthService.grantedScopes,
+      }));
+    });
+    return unsubscribe;
+  }, []);
+
+  return useMemo(
+    () => ({
+      ...state,
+      hasPlayServices: AuthService.hasPlayServices,
+      login,
+      logout,
+      requestScopes,
+      revokeScopes,
+      getAccessToken,
+      refreshToken,
+    }),
+    [
+      state,
+      login,
+      logout,
+      requestScopes,
+      revokeScopes,
+      getAccessToken,
+      refreshToken,
+    ]
+  );
+}