Protecting Screens and Content in React Native

import {
  DEFAULT_SESSION_KEY,
  type Session,
  type SessionStorageBackend,
} from "@nhost/nhost-js/session";
import AsyncStorage from "@react-native-async-storage/async-storage";

/**
 * Custom storage implementation for React Native using AsyncStorage
 * to persist the Nhost session on the device.
 *
 * This implementation synchronously works with the SessionStorageBackend interface
 * while ensuring reliable persistence with AsyncStorage for Expo Go.
 */
export default class NhostAsyncStorage implements SessionStorageBackend {
  private key: string;
  private cache: Session | null = null;

  constructor(key: string = DEFAULT_SESSION_KEY) {
    this.key = key;

    // Immediately try to load from AsyncStorage
    this.loadFromAsyncStorage();
  }

  /**
   * Load the session from AsyncStorage synchronously if possible
   */
  private loadFromAsyncStorage(): void {
    // Try to get cached data from AsyncStorage immediately
    try {
      AsyncStorage.getItem(this.key)
        .then((value) => {
          if (value) {
            try {
              this.cache = JSON.parse(value) as Session;
            } catch (error) {
              console.warn("Error parsing session from AsyncStorage:", error);
              this.cache = null;
            }
          }
        })
        .catch((error) => {
          console.warn("Error loading from AsyncStorage:", error);
        });
    } catch (error) {
      console.warn("AsyncStorage access error:", error);
    }
  }

  /**
   * Gets the session from the in-memory cache
   */
  get(): Session | null {
    return this.cache;
  }

  /**
   * Sets the session in the in-memory cache and persists to AsyncStorage
   * Ensures the data gets written by using an immediately invoked async function
   */
  set(value: Session): void {
    // Update cache immediately
    this.cache = value;

    // Persist to AsyncStorage with better error handling
    void (async () => {
      try {
        await AsyncStorage.setItem(this.key, JSON.stringify(value));
      } catch (error) {
        console.warn("Error saving session to AsyncStorage:", error);
      }
    })();
  }

  /**
   * Removes the session from the in-memory cache and AsyncStorage
   * Ensures the data gets removed by using an immediately invoked async function
   */
  remove(): void {
    // Clear cache immediately
    this.cache = null;

    // Remove from AsyncStorage with better error handling
    void (async () => {
      try {
        await AsyncStorage.removeItem(this.key);
      } catch (error) {
        console.warn("Error removing session from AsyncStorage:", error);
      }
    })();
  }
}

import { createClient, type NhostClient } from "@nhost/nhost-js";
import type { Session } from "@nhost/nhost-js/session";
import Constants from "expo-constants";
import {
  createContext,
  type ReactNode,
  useContext,
  useEffect,
  useMemo,
  useState,
} from "react";
import NhostAsyncStorage from "./AsyncStorage";

/**
 * Authentication context interface providing access to user session state and Nhost client.
 * Used throughout the React Native application to access authentication-related data and operations.
 */
interface AuthContextType {
  /** Current authenticated user object, null if not authenticated */
  user: Session["user"] | null;
  /** Current session object containing tokens and user data, null if no active session */
  session: Session | null;
  /** Boolean indicating if user is currently authenticated */
  isAuthenticated: boolean;
  /** Boolean indicating if authentication state is still loading */
  isLoading: boolean;
  /** Nhost client instance for making authenticated requests */
  nhost: NhostClient;
}

// Create React context for authentication state and nhost client
const AuthContext = createContext<AuthContextType | null>(null);

interface AuthProviderProps {
  children: ReactNode;
}

/**
 * AuthProvider component that provides authentication context to the React Native application.
 *
 * This component handles:
 * - Initializing the Nhost client with AsyncStorage for persistent storage
 * - Managing authentication state (user, session, loading, authenticated status)
 * - Cross-device session synchronization using sessionStorage.onChange events
 * - Async session initialization to work with React Native's AsyncStorage
 */
export const AuthProvider = ({ children }: AuthProviderProps) => {
  const [user, setUser] = useState<Session["user"] | null>(null);
  const [session, setSession] = useState<Session | null>(null);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);

  // Create the nhost client with persistent storage
  const nhost = useMemo(() => {
    // Get configuration values with type assertion
    const subdomain =
      (Constants.expoConfig?.extra?.["NHOST_SUBDOMAIN"] as string) || "local";
    const region =
      (Constants.expoConfig?.extra?.["NHOST_REGION"] as string) || "local";

    return createClient({
      subdomain,
      region,
      storage: new NhostAsyncStorage(),
    });
  }, []);

  useEffect(() => {
    // Initialize authentication state
    setIsLoading(true);

    // Allow enough time for AsyncStorage to be read and session to be restored
    const initializeSession = async () => {
      try {
        // Let's wait a bit to ensure AsyncStorage has been read
        await new Promise((resolve) => setTimeout(resolve, 100));

        // Now try to get the current session
        const currentSession = nhost.getUserSession();

        setUser(currentSession?.user || null);
        setSession(currentSession);
        setIsAuthenticated(!!currentSession);
      } catch (error) {
        console.warn("Error initializing session:", error);
      } finally {
        setIsLoading(false);
      }
    };

    void initializeSession();

    // Listen for session changes
    const unsubscribe = nhost.sessionStorage.onChange((currentSession) => {
      setUser(currentSession?.user || null);
      setSession(currentSession);
      setIsAuthenticated(!!currentSession);
    });

    // Clean up subscription on unmount
    return () => {
      unsubscribe();
    };
  }, [nhost]);

  // Context value with nhost client directly exposed
  const value: AuthContextType = {
    user,
    session,
    isAuthenticated,
    isLoading,
    nhost,
  };

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};

/**
 * Custom hook to access the authentication context.
 *
 * Must be used within a component wrapped by AuthProvider.
 * Provides access to current user session, authentication state, and Nhost client.
 *
 * @throws {Error} When used outside of AuthProvider
 * @returns {AuthContextType} Authentication context containing user, session, and client
 *
 * @example
 * ```tsx
 * function MyComponent() {
 *   const { user, isAuthenticated, nhost } = useAuth();
 *
 *   if (!isAuthenticated) {
 *     return <Text>Please sign in</Text>;
 *   }
 *
 *   return <Text>Welcome, {user?.displayName}!</Text>;
 * }
 * ```
 */
export const useAuth = (): AuthContextType => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error("useAuth must be used within an AuthProvider");
  }
  return context;
};

export default AuthProvider;

import { router } from "expo-router";
import type React from "react";
import { useEffect } from "react";
import { ActivityIndicator, Text, View } from "react-native";
import { useAuth } from "../lib/nhost/AuthProvider";
import { commonStyles } from "../styles/commonStyles";
import { colors } from "../styles/theme";

type AppRoutes = "/" | "/signin" | "/signup" | "/profile";

interface ProtectedScreenProps {
  children: React.ReactNode;
  redirectTo?: AppRoutes;
}

/**
 * ProtectedScreen component that wraps screens requiring authentication.
 * Automatically redirects unauthenticated users to the signin screen.
 * Shows loading spinner while checking authentication status.
 */
export default function ProtectedScreen({
  children,
  redirectTo = "/signin",
}: ProtectedScreenProps) {
  const { isAuthenticated, isLoading } = useAuth();

  useEffect(() => {
    if (!isLoading && !isAuthenticated) {
      router.replace(redirectTo);
    }
  }, [isAuthenticated, isLoading, redirectTo]);

  if (isLoading) {
    return (
      <View style={commonStyles.loadingContainer}>
        <ActivityIndicator size="large" color={colors.primary} />
        <Text style={commonStyles.loadingText}>Loading...</Text>
      </View>
    );
  }

  if (!isAuthenticated) {
    return null; // Will redirect in useEffect
  }

  return <>{children}</>;
}

import { ScrollView, Text, View } from "react-native";
import ProtectedScreen from "./components/ProtectedScreen";
import { useAuth } from "./lib/nhost/AuthProvider";
import { commonStyles, profileStyles } from "./styles/commonStyles";

export default function Profile() {
  const { user, session } = useAuth();

  return (
    <ProtectedScreen>
      <ScrollView
        style={commonStyles.container}
        contentContainerStyle={commonStyles.contentContainer}
      >
        <Text style={commonStyles.title}>Your Profile</Text>

        <View style={commonStyles.card}>
          <Text style={commonStyles.cardTitle}>User Information</Text>

          <View style={profileStyles.profileItem}>
            <Text style={commonStyles.labelText}>Display Name:</Text>
            <Text style={commonStyles.valueText}>
              {user?.displayName || "Not set"}
            </Text>
          </View>

          <View style={profileStyles.profileItem}>
            <Text style={commonStyles.labelText}>Email:</Text>
            <Text style={commonStyles.valueText}>
              {user?.email || "Not available"}
            </Text>
          </View>

          <View style={profileStyles.profileItem}>
            <Text style={commonStyles.labelText}>User ID:</Text>
            <Text
              style={commonStyles.valueText}
              numberOfLines={1}
              ellipsizeMode="middle"
            >
              {user?.id || "Not available"}
            </Text>
          </View>

          <View style={profileStyles.profileItem}>
            <Text style={commonStyles.labelText}>Roles:</Text>
            <Text style={commonStyles.valueText}>
              {user?.roles?.join(", ") || "None"}
            </Text>
          </View>

          <View
            style={[profileStyles.profileItem, profileStyles.profileItemLast]}
          >
            <Text style={commonStyles.labelText}>Email Verified:</Text>
            <Text
              style={[
                commonStyles.valueText,
                user?.emailVerified
                  ? commonStyles.successText
                  : commonStyles.errorText,
              ]}
            >
              {user?.emailVerified ? "✓ Yes" : "✗ No"}
            </Text>
          </View>
        </View>

        <View style={commonStyles.card}>
          <Text style={commonStyles.cardTitle}>Session Information</Text>
          <View style={commonStyles.sessionInfo}>
            <Text style={commonStyles.sessionValue}>
              {JSON.stringify(session, null, 2)}
            </Text>
          </View>
        </View>
      </ScrollView>
    </ProtectedScreen>
  );
}

import { useRouter } from "expo-router";
import { Text, TouchableOpacity, View } from "react-native";
import { useAuth } from "./lib/nhost/AuthProvider";
import { commonStyles, homeStyles } from "./styles/commonStyles";

export default function Index() {
  const router = useRouter();
  const { isAuthenticated, user } = useAuth();

  return (
    <View style={commonStyles.centerContent}>
      <Text style={commonStyles.title}>Welcome to Nhost React Native Demo</Text>

      <View style={homeStyles.welcomeCard}>
        {isAuthenticated ? (
          <View style={{ gap: 15, width: "100%" }}>
            <Text style={homeStyles.welcomeText}>
              Hello, {user?.displayName || user?.email}!
            </Text>
            <TouchableOpacity
              style={[commonStyles.button, commonStyles.fullWidth]}
              onPress={() => router.push("/profile")}
            >
              <Text style={commonStyles.buttonText}>Go to Profile</Text>
            </TouchableOpacity>
          </View>
        ) : (
          <Text style={homeStyles.authMessage}>You are not signed in.</Text>
        )}
        {/* Placeholder for signin/signup buttons - will be added in the next tutorial */}
      </View>
    </View>
  );
}

import { Stack } from "expo-router";
import { AuthProvider } from "./lib/nhost/AuthProvider";
import { colors } from "./styles/theme";

/**
 * Root layout component that provides authentication context to the entire app.
 * Uses Expo Router's Stack navigation for screen management.
 */
export default function RootLayout() {
  return (
    <AuthProvider>
      <Stack>
        <Stack.Screen
          name="index"
          options={{
            title: "Home",
            headerStyle: { backgroundColor: colors.primary },
            headerTintColor: colors.surface,
            headerTitleStyle: { fontWeight: "bold" },
          }}
        />
        <Stack
          screenOptions={{
            headerStyle: { backgroundColor: colors.primary },
            headerTintColor: colors.surface,
            headerTitleStyle: { fontWeight: "bold" },
          }}
        />
      </Stack>
    </AuthProvider>
  );
}