ignite-parse-auth-kit 1.0.0

package/app/navigators/navigationUtilities.ts

@@ -0,0 +1,208 @@
+import { useState, useEffect, useRef } from "react"
+import { BackHandler, Linking, Platform } from "react-native"
+import {
+  NavigationState,
+  PartialState,
+  createNavigationContainerRef,
+} from "@react-navigation/native"
+
+import Config from "@/config"
+import type { PersistNavigationConfig } from "@/config/config.base"
+import * as storage from "@/utils/storage"
+import { useIsMounted } from "@/utils/useIsMounted"
+
+import type { AppStackParamList, NavigationProps } from "./AppNavigator"
+
+type Storage = typeof storage
+
+/**
+ * Reference to the root App Navigator.
+ *
+ * If needed, you can use this to access the navigation object outside of a
+ * `NavigationContainer` context. However, it's recommended to use the `useNavigation` hook whenever possible.
+ * @see [Navigating Without Navigation Prop]{@link https://reactnavigation.org/docs/navigating-without-navigation-prop/}
+ *
+ * The types on this reference will only let you reference top level navigators. If you have
+ * nested navigators, you'll need to use the `useNavigation` with the stack navigator's ParamList type.
+ */
+export const navigationRef = createNavigationContainerRef<AppStackParamList>()
+
+/**
+ * Gets the current screen from any navigation state.
+ * @param {NavigationState | PartialState<NavigationState>} state - The navigation state to traverse.
+ * @returns {string} - The name of the current screen.
+ */
+export function getActiveRouteName(state: NavigationState | PartialState<NavigationState>): string {
+  const route = state.routes[state.index ?? 0]
+
+  // Found the active route -- return the name
+  if (!route.state) return route.name as keyof AppStackParamList
+
+  // Recursive call to deal with nested routers
+  return getActiveRouteName(route.state as NavigationState<AppStackParamList>)
+}
+
+const iosExit = () => false
+
+/**
+ * Hook that handles Android back button presses and forwards those on to
+ * the navigation or allows exiting the app.
+ * @see [BackHandler]{@link https://reactnative.dev/docs/backhandler}
+ * @param {(routeName: string) => boolean} canExit - Function that returns whether we can exit the app.
+ * @returns {void}
+ */
+export function useBackButtonHandler(canExit: (routeName: string) => boolean) {
+  // The reason we're using a ref here is because we need to be able
+  // to update the canExit function without re-setting up all the listeners
+  const canExitRef = useRef(Platform.OS !== "android" ? iosExit : canExit)
+
+  useEffect(() => {
+    canExitRef.current = canExit
+  }, [canExit])
+
+  useEffect(() => {
+    // We'll fire this when the back button is pressed on Android.
+    const onBackPress = () => {
+      if (!navigationRef.isReady()) {
+        return false
+      }
+
+      // grab the current route
+      const routeName = getActiveRouteName(navigationRef.getRootState())
+
+      // are we allowed to exit?
+      if (canExitRef.current(routeName)) {
+        // exit and let the system know we've handled the event
+        BackHandler.exitApp()
+        return true
+      }
+
+      // we can't exit, so let's turn this into a back action
+      if (navigationRef.canGoBack()) {
+        navigationRef.goBack()
+        return true
+      }
+
+      return false
+    }
+
+    // Subscribe when we come to life
+    const subscription = BackHandler.addEventListener("hardwareBackPress", onBackPress)
+
+    // Unsubscribe when we're done
+    return () => subscription.remove()
+  }, [])
+}
+
+/**
+ * This helper function will determine whether we should enable navigation persistence
+ * based on a config setting and the __DEV__ environment (dev or prod).
+ * @param {PersistNavigationConfig} persistNavigation - The config setting for navigation persistence.
+ * @returns {boolean} - Whether to restore navigation state by default.
+ */
+function navigationRestoredDefaultState(persistNavigation: PersistNavigationConfig) {
+  if (persistNavigation === "always") return false
+  if (persistNavigation === "dev" && __DEV__) return false
+  if (persistNavigation === "prod" && !__DEV__) return false
+
+  // all other cases, disable restoration by returning true
+  return true
+}
+
+/**
+ * Custom hook for persisting navigation state.
+ * @param {Storage} storage - The storage utility to use.
+ * @param {string} persistenceKey - The key to use for storing the navigation state.
+ * @returns {object} - The navigation state and persistence functions.
+ */
+export function useNavigationPersistence(storage: Storage, persistenceKey: string) {
+  const [initialNavigationState, setInitialNavigationState] =
+    useState<NavigationProps["initialState"]>()
+  const isMounted = useIsMounted()
+
+  const initNavState = navigationRestoredDefaultState(Config.persistNavigation)
+  const [isRestored, setIsRestored] = useState(initNavState)
+
+  const routeNameRef = useRef<keyof AppStackParamList | undefined>(undefined)
+
+  const onNavigationStateChange = (state: NavigationState | undefined) => {
+    const previousRouteName = routeNameRef.current
+    if (state !== undefined) {
+      const currentRouteName = getActiveRouteName(state)
+
+      if (previousRouteName !== currentRouteName) {
+        // track screens.
+        if (__DEV__) {
+          console.log(currentRouteName)
+        }
+      }
+
+      // Save the current route name for later comparison
+      routeNameRef.current = currentRouteName as keyof AppStackParamList
+
+      // Persist state to storage
+      storage.save(persistenceKey, state)
+    }
+  }
+
+  const restoreState = async () => {
+    try {
+      const initialUrl = await Linking.getInitialURL()
+
+      // Only restore the state if app has not started from a deep link
+      if (!initialUrl) {
+        const state = (await storage.load(persistenceKey)) as NavigationProps["initialState"] | null
+        if (state) setInitialNavigationState(state)
+      }
+    } finally {
+      if (isMounted()) setIsRestored(true)
+    }
+  }
+
+  useEffect(() => {
+    if (!isRestored) restoreState()
+    // runs once on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return { onNavigationStateChange, restoreState, isRestored, initialNavigationState }
+}
+
+/**
+ * use this to navigate without the navigation
+ * prop. If you have access to the navigation prop, do not use this.
+ * @see {@link https://reactnavigation.org/docs/navigating-without-navigation-prop/}
+ * @param {unknown} name - The name of the route to navigate to.
+ * @param {unknown} params - The params to pass to the route.
+ */
+export function navigate(name: unknown, params?: unknown) {
+  if (navigationRef.isReady()) {
+    // @ts-expect-error
+    navigationRef.navigate(name as never, params as never)
+  }
+}
+
+/**
+ * This function is used to go back in a navigation stack, if it's possible to go back.
+ * If the navigation stack can't go back, nothing happens.
+ * The navigationRef variable is a React ref that references a navigation object.
+ * The navigationRef variable is set in the App component.
+ */
+export function goBack() {
+  if (navigationRef.isReady() && navigationRef.canGoBack()) {
+    navigationRef.goBack()
+  }
+}
+
+/**
+ * resetRoot will reset the root navigation state to the given params.
+ * @param {Parameters<typeof navigationRef.resetRoot>[0]} state - The state to reset the root to.
+ * @returns {void}
+ */
+export function resetRoot(
+  state: Parameters<typeof navigationRef.resetRoot>[0] = { index: 0, routes: [] },
+) {
+  if (navigationRef.isReady()) {
+    navigationRef.resetRoot(state)
+  }
+}

package/app/screens/ChooseAuthScreen.tsx

@@ -0,0 +1,224 @@
+// // fix this one
+
+// import { FC } from "react"
+// import { ViewStyle } from "react-native"
+// import type { AppStackScreenProps } from "@/navigators/AppNavigator"
+// import { Screen } from "@/components/Screen"
+// import { Text } from "@/components/Text"
+// // import { useNavigation } from "@react-navigation/native"
+
+// interface ChooseAuthScreenProps extends AppStackScreenProps<"ChooseAuth"> {}
+
+// export const ChooseAuthScreen: FC<ChooseAuthScreenProps> = () => {
+//   // Pull in navigation via hook
+//   // const navigation = useNavigation()
+//   return (
+//     <Screen style={$root} preset="scroll">
+//       <Text text="chooseAuth" />
+//     </Screen>
+//   )
+// }
+
+// const $root: ViewStyle = {
+//   flex: 1,
+// }
+
+import { FC, useEffect } from "react";
+import { ViewStyle, View, Image, Alert } from "react-native";
+import type { AppStackScreenProps } from "@/navigators/AppNavigator";
+
+import { Button, Icon, Screen, Text } from "@/components";
+import { useNavigation } from "@react-navigation/native";
+import { useHeader } from "@/utils/useHeader";
+
+import { useAppTheme } from "@/theme/context";
+import type { ThemedStyle } from "@/theme/types";
+
+import * as WebBrowser from "expo-web-browser";
+import * as Google from "expo-auth-session/providers/google";
+import { useAuth } from "@/context/AuthContext";
+
+WebBrowser.maybeCompleteAuthSession();
+
+interface ChooseAuthScreenProps extends AppStackScreenProps<"ChooseAuth"> {}
+
+const logo = require("../../assets/images/app-icon-android-adaptive-foreground.png");
+
+export const ChooseAuthScreen: FC<ChooseAuthScreenProps> = function ChooseAuthScreen(
+  _props
+) {
+  // Use auth context instead of MobX store
+  const { isAuthenticated, isLoading, error, googleSignIn } = useAuth();
+
+  const navigation = useNavigation<any>();
+
+  const [request, response, promptAsync] = Google.useAuthRequest({
+    iosClientId: process.env.EXPO_PUBLIC_IOS_GOOGLE_CLIENT_ID,
+    androidClientId: process.env.EXPO_PUBLIC_ANDROID_GOOGLE_CLIENT_ID,
+    webClientId: process.env.EXPO_PUBLIC_GOOGLE_CLIENT_ID, // optional if using web
+    scopes: ["profile", "email"],
+  });
+
+  // Handle Google authentication response
+  useEffect(() => {
+    const handleGoogleResponse = async () => {
+      if (!response) return;
+
+      // Log the full response for debugging
+      console.log("Google auth response:", response);
+
+      // Handle different response types
+      switch (response.type) {
+        case "opened":
+        case "locked":
+          console.log(`Auth session ${response.type}`);
+          return;
+
+        case "error":
+          console.error(
+            "Google auth error:",
+            response.errorCode,
+            response.error
+          );
+          Alert.alert(
+            "Authentication Error",
+            response.error?.message ||
+              "Failed to sign in with Google. Please try again."
+          );
+          return;
+
+        case "cancel":
+        case "dismiss":
+          console.log("User cancelled the sign in");
+          return;
+
+        case "success":
+          try {
+            console.log("Processing successful Google auth response");
+            const result = await googleSignIn(response as any);
+
+            if (result.success) {
+              console.log("Google sign-in successful!");
+              navigation.navigate("Demo", { screen: "DemoCommunity" });
+            } else {
+              console.log("Google sign-in failed:", result.error);
+              Alert.alert(
+                "Login Failed",
+                result.error || "An unexpected error occurred during sign-in."
+              );
+            }
+          } catch (error) {
+            console.error("Error during Google sign-in:", error);
+            Alert.alert(
+              "Error",
+              error instanceof Error
+                ? error.message
+                : "An unexpected error occurred. Please try again."
+            );
+          }
+          return;
+
+        default:
+          console.warn("Unhandled auth response type:", (response as any).type);
+          return;
+      }
+    };
+
+    handleGoogleResponse();
+  }, [response, googleSignIn, navigation]);
+
+  // Navigate to main app if already authenticated
+  useEffect(() => {
+    if (isAuthenticated) {
+      navigation.navigate("Welcome");
+    }
+  }, [isAuthenticated, navigation]);
+
+  const handleGoogleSignIn = async () => {
+    try {
+      await promptAsync();
+    } catch (error) {
+      console.error("Error starting Google sign-in:", error);
+      Alert.alert("Error", "Failed to start Google sign-in");
+    }
+  };
+
+  useHeader(
+    {
+      leftIcon: "back",
+      title: "Welcome to Dooit",
+      onLeftPress: () => navigation.navigate("Welcome"),
+    },
+    [navigation]
+  );
+
+  const {
+    themed,
+    theme: { colors },
+  } = useAppTheme();
+
+  return (
+    <Screen
+      style={$root}
+      contentContainerStyle={themed($screenContentContainer)}
+      safeAreaEdges={["bottom"]}
+      preset="scroll"
+    >
+      <Image
+        source={logo}
+        resizeMode="contain"
+        style={{ height: 200, width: 200, alignSelf: "center" }}
+      />
+      <View style={themed($buttonContainer)}>
+        <Button
+          text="Continue with Email"
+          onPress={() => navigation.navigate("Login")}
+          preset="reversed"
+        />
+        <Button
+          text="Sign in with Google"
+          style={{ gap: 8 }}
+          onPress={handleGoogleSignIn}
+          preset="reversed"
+          disabled={!request || isLoading}
+          LeftAccessory={(props) => (
+            <Icon icon="google" {...props} size={20} color={colors.border} />
+          )}
+        />
+
+        {/* Optional: Show loading state */}
+        {isLoading && (
+          <Text style={{ textAlign: "center", marginTop: 10 }}>
+            Signing in...
+          </Text>
+        )}
+
+        {/* Optional: Show error state */}
+        {error && (
+          <Text
+            style={{ textAlign: "center", marginTop: 10, color: colors.error }}
+          >
+            {error}
+          </Text>
+        )}
+      </View>
+    </Screen>
+  );
+};
+
+const $root: ViewStyle = {
+  flex: 1,
+};
+
+const $screenContentContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  paddingHorizontal: spacing.lg,
+});
+
+const $buttonContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  marginTop: spacing.xs,
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "space-around",
+  gap: spacing.md,
+});

package/app/screens/DemoCommunityScreen.tsx

@@ -0,0 +1,141 @@
+import { FC } from "react"
+import { Image, ImageStyle, TextStyle, View, ViewStyle } from "react-native"
+
+import { ListItem } from "@/components/ListItem"
+import { Screen } from "@/components/Screen"
+import { Text } from "@/components/Text"
+import { isRTL } from "@/i18n"
+import { DemoTabScreenProps } from "@/navigators/DemoNavigator"
+import type { ThemedStyle } from "@/theme/types"
+import { useAppTheme } from "@/theme/context"
+import { $styles } from "@/theme/styles"
+import { openLinkInBrowser } from "@/utils/openLinkInBrowser"
+
+const chainReactLogo = require("@assets/images/demo/cr-logo.png")
+const reactNativeLiveLogo = require("@assets/images/demo/rnl-logo.png")
+const reactNativeNewsletterLogo = require("@assets/images/demo/rnn-logo.png")
+const reactNativeRadioLogo = require("@assets/images/demo/rnr-logo.png")
+
+export const DemoCommunityScreen: FC<DemoTabScreenProps<"DemoCommunity">> =
+  function DemoCommunityScreen(_props) {
+    const { themed } = useAppTheme()
+    return (
+      <Screen preset="scroll" contentContainerStyle={$styles.container} safeAreaEdges={["top"]}>
+        <Text preset="heading" tx="demoCommunityScreen:title" style={themed($title)} />
+        <Text tx="demoCommunityScreen:tagLine" style={themed($tagline)} />
+
+        <Text preset="subheading" tx="demoCommunityScreen:joinUsOnSlackTitle" />
+        <Text tx="demoCommunityScreen:joinUsOnSlack" style={themed($description)} />
+        <ListItem
+          tx="demoCommunityScreen:joinSlackLink"
+          leftIcon="slack"
+          rightIcon={isRTL ? "caretLeft" : "caretRight"}
+          onPress={() => openLinkInBrowser("https://community.infinite.red/")}
+        />
+        <Text
+          preset="subheading"
+          tx="demoCommunityScreen:makeIgniteEvenBetterTitle"
+          style={themed($sectionTitle)}
+        />
+        <Text tx="demoCommunityScreen:makeIgniteEvenBetter" style={themed($description)} />
+        <ListItem
+          tx="demoCommunityScreen:contributeToIgniteLink"
+          leftIcon="github"
+          rightIcon={isRTL ? "caretLeft" : "caretRight"}
+          onPress={() => openLinkInBrowser("https://github.com/infinitered/ignite")}
+        />
+
+        <Text
+          preset="subheading"
+          tx="demoCommunityScreen:theLatestInReactNativeTitle"
+          style={themed($sectionTitle)}
+        />
+        <Text tx="demoCommunityScreen:theLatestInReactNative" style={themed($description)} />
+        <ListItem
+          tx="demoCommunityScreen:reactNativeRadioLink"
+          bottomSeparator
+          rightIcon={isRTL ? "caretLeft" : "caretRight"}
+          LeftComponent={
+            <View style={[$styles.row, themed($logoContainer)]}>
+              <Image source={reactNativeRadioLogo} style={$logo} />
+            </View>
+          }
+          onPress={() => openLinkInBrowser("https://reactnativeradio.com/")}
+        />
+        <ListItem
+          tx="demoCommunityScreen:reactNativeNewsletterLink"
+          bottomSeparator
+          rightIcon={isRTL ? "caretLeft" : "caretRight"}
+          LeftComponent={
+            <View style={[$styles.row, themed($logoContainer)]}>
+              <Image source={reactNativeNewsletterLogo} style={$logo} />
+            </View>
+          }
+          onPress={() => openLinkInBrowser("https://reactnativenewsletter.com/")}
+        />
+        <ListItem
+          tx="demoCommunityScreen:reactNativeLiveLink"
+          bottomSeparator
+          rightIcon={isRTL ? "caretLeft" : "caretRight"}
+          LeftComponent={
+            <View style={[$styles.row, themed($logoContainer)]}>
+              <Image source={reactNativeLiveLogo} style={$logo} />
+            </View>
+          }
+          onPress={() => openLinkInBrowser("https://rn.live/")}
+        />
+        <ListItem
+          tx="demoCommunityScreen:chainReactConferenceLink"
+          rightIcon={isRTL ? "caretLeft" : "caretRight"}
+          LeftComponent={
+            <View style={[$styles.row, themed($logoContainer)]}>
+              <Image source={chainReactLogo} style={$logo} />
+            </View>
+          }
+          onPress={() => openLinkInBrowser("https://cr.infinite.red/")}
+        />
+        <Text
+          preset="subheading"
+          tx="demoCommunityScreen:hireUsTitle"
+          style={themed($sectionTitle)}
+        />
+        <Text tx="demoCommunityScreen:hireUs" style={themed($description)} />
+        <ListItem
+          tx="demoCommunityScreen:hireUsLink"
+          leftIcon="clap"
+          rightIcon={isRTL ? "caretLeft" : "caretRight"}
+          onPress={() => openLinkInBrowser("https://infinite.red/contact")}
+        />
+      </Screen>
+    )
+  }
+
+const $title: ThemedStyle<TextStyle> = ({ spacing }) => ({
+  marginBottom: spacing.sm,
+})
+
+const $tagline: ThemedStyle<TextStyle> = ({ spacing }) => ({
+  marginBottom: spacing.xxl,
+})
+
+const $description: ThemedStyle<TextStyle> = ({ spacing }) => ({
+  marginBottom: spacing.lg,
+})
+
+const $sectionTitle: ThemedStyle<TextStyle> = ({ spacing }) => ({
+  marginTop: spacing.xxl,
+})
+
+const $logoContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  marginEnd: spacing.md,
+  flexWrap: "wrap",
+  alignContent: "center",
+  alignSelf: "stretch",
+})
+
+const $logo: ImageStyle = {
+  height: 38,
+  width: 38,
+}
+
+// @demo remove-file