Zachoo Comments - Convex Community

Zachoo

Posts Comments

CCConvex Community

•Created by Zachoo on 4/28/2025 in #support-community

Logout after period of Inactivity Convex + Clerk - Expo APP

66 replies

CCConvex Community

•Created by Zachoo on 4/28/2025 in #support-community

Logout after period of Inactivity Convex + Clerk - Expo APP

undefined

66 replies

CCConvex Community

•Created by Zachoo on 4/28/2025 in #support-community

Logout after period of Inactivity Convex + Clerk - Expo APP

import {
  View,
  SafeAreaView,
  Image,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  ImageBackground,
} from "react-native";
import React, { useEffect } from "react";
import SignInForm from "../../forms/authentication/sign-in-form";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import SimpleAuthForm from "forms/authentication/unified-auth-form";
import { useConvexAuth } from "convex/react";
import { Redirect, useRouter } from "expo-router";
import { useAuth } from "@clerk/clerk-expo";
import { Text } from "react-native";

// import UnifiedAuthForm from "forms/authentication/unified-auth-form";

export default function Page() {
  const backgroundImage = require("../../assets/background.png");
  const dividerImage = require("../../assets/divider.png");

  const router = useRouter();
  const { isAuthenticated, isLoading: isAuthenticating } = useConvexAuth();
  const { isLoaded, isSignedIn, userId, sessionId, getToken } = useAuth();

  useEffect(() => {
    console.log("isAuthenticated", isAuthenticated);
    console.log("isSignedIn", isSignedIn);
    if (isAuthenticated) {
      router.push("/");
    }
  }, [isAuthenticated, isSignedIn]);

  return (
    <KeyboardAwareScrollView
      contentContainerStyle={{ flexGrow: 1 }}
      bounces={false}
    >
      <View className="flex-1 pb-10 bg-white">
        <ImageBackground
          source={backgroundImage}
          className="absolute w-full h-full"
          resizeMode="cover"
        />
        <SafeAreaView className="flex-1 justify-end">
          <Image
            source={dividerImage}
            className="w-full"
            style={{ width: "100%" }}
          />
          <View className="justify-center items-center bg-white">
            <Text>is convex authenticated: {isAuthenticated.toString()} </Text>
            <Text>is clerk signed in: {isSignedIn?.toString()} </Text>
            <Text>is clerk loaded: {isLoaded.toString()} </Text>
            <Text>is convex auth loading: {isAuthenticated.toString()} </Text>
            <Text>user id: {userId} </Text>
            <Text>session id: {sessionId} </Text>
          </View>
          <SimpleAuthForm />
          {/* <SignInForm /> */}
          {/* <UnifiedAuthForm /> */}
        </SafeAreaView>
      </View>
    </KeyboardAwareScrollView>
  );
}

import {
  View,
  SafeAreaView,
  Image,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  ImageBackground,
} from "react-native";
import React, { useEffect } from "react";
import SignInForm from "../../forms/authentication/sign-in-form";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import SimpleAuthForm from "forms/authentication/unified-auth-form";
import { useConvexAuth } from "convex/react";
import { Redirect, useRouter } from "expo-router";
import { useAuth } from "@clerk/clerk-expo";
import { Text } from "react-native";

// import UnifiedAuthForm from "forms/authentication/unified-auth-form";

export default function Page() {
  const backgroundImage = require("../../assets/background.png");
  const dividerImage = require("../../assets/divider.png");

  const router = useRouter();
  const { isAuthenticated, isLoading: isAuthenticating } = useConvexAuth();
  const { isLoaded, isSignedIn, userId, sessionId, getToken } = useAuth();

  useEffect(() => {
    console.log("isAuthenticated", isAuthenticated);
    console.log("isSignedIn", isSignedIn);
    if (isAuthenticated) {
      router.push("/");
    }
  }, [isAuthenticated, isSignedIn]);

  return (
    <KeyboardAwareScrollView
      contentContainerStyle={{ flexGrow: 1 }}
      bounces={false}
    >
      <View className="flex-1 pb-10 bg-white">
        <ImageBackground
          source={backgroundImage}
          className="absolute w-full h-full"
          resizeMode="cover"
        />
        <SafeAreaView className="flex-1 justify-end">
          <Image
            source={dividerImage}
            className="w-full"
            style={{ width: "100%" }}
          />
          <View className="justify-center items-center bg-white">
            <Text>is convex authenticated: {isAuthenticated.toString()} </Text>
            <Text>is clerk signed in: {isSignedIn?.toString()} </Text>
            <Text>is clerk loaded: {isLoaded.toString()} </Text>
            <Text>is convex auth loading: {isAuthenticated.toString()} </Text>
            <Text>user id: {userId} </Text>
            <Text>session id: {sessionId} </Text>
          </View>
          <SimpleAuthForm />
          {/* <SignInForm /> */}
          {/* <UnifiedAuthForm /> */}
        </SafeAreaView>
      </View>
    </KeyboardAwareScrollView>
  );
}

66 replies

CCConvex Community

•Created by Zachoo on 4/28/2025 in #support-community

Logout after period of Inactivity Convex + Clerk - Expo APP

@erquhart this is what im shown but if i clear app from multi tasking UI and login everything is fine ...

66 replies

CCConvex Community

•Created by Zachoo on 4/28/2025 in #support-community

Logout after period of Inactivity Convex + Clerk - Expo APP

66 replies

CCConvex Community

•Created by Zachoo on 4/28/2025 in #support-community

Logout after period of Inactivity Convex + Clerk - Expo APP

This is strange session exists but clerk use auth hook returns false

66 replies

CCConvex Community

•Created by Zachoo on 4/28/2025 in #support-community

Logout after period of Inactivity Convex + Clerk - Expo APP

The yeah I can show the sentry logs however they don’t trigger on the home screen or n this case but I am still not redirected so it is difficult to say what issue is. I have exact implementation as docs and sentry should trigger if there is a state mismatch which has been tested however the n this case it does not enter that error trigger but I am still not authentic which makes no sense as else I would be redirected. This is the same logic that executes when you clear app from background. The issue only appears after booting with wifi disabled waiting 30s then enabling wifi else leaving app in background for say 48h

66 replies

CCConvex Community

•Created by Zachoo on 4/28/2025 in #support-community

Logout after period of Inactivity Convex + Clerk - Expo APP

@erquhart nothing shows in sentry but i am on the home sign in route and when i click sign in it says session exists ?

66 replies

CCConvex Community

•Created by Zachoo on 4/28/2025 in #support-community

Logout after period of Inactivity Convex + Clerk - Expo APP

Sure but I don’t know how to replicate to get console logs because it happens randomly can only get into the same state by disabling wifi

66 replies

CCConvex Community

•Created by Zachoo on 4/28/2025 in #support-community

Logout after period of Inactivity Convex + Clerk - Expo APP

Hmm maybe different issue I have no problem navigating user from sign in screen it is just that when app has been in background for say 3 days and then reopened user is show /sign in even tho there is an active clerk session only way to get back in is to entirely clearing app from background and reopening user is redirect and signed in fine

66 replies

CCConvex Community

•Created by Zachoo on 4/28/2025 in #support-community

Logout after period of Inactivity Convex + Clerk - Expo APP

Happy to temporarily add you to GitHub so you can see structure ?

66 replies

CCConvex Community

•Created by Zachoo on 4/28/2025 in #support-community

Logout after period of Inactivity Convex + Clerk - Expo APP

If a user opens the app and then leaves it in the background for a day or two—timing which seems random and possibly related to iOS unloading apps to save memory (not a full clear)—then reopens it, they are shown the sign-in screen. However, the logs show that Clerk is still authenticated (it fetches the token from storage), but Convex appears to treat the user as unauthenticated.

66 replies

CCConvex Community

•Created by Zachoo on 4/28/2025 in #support-community

Logout after period of Inactivity Convex + Clerk - Expo APP

I have shared a video of exactly what user sees sometimes if they leave app in background for a while and then reopen in pm

66 replies

CCConvex Community

•Created by Zachoo on 4/28/2025 in #support-community

Logout after period of Inactivity Convex + Clerk - Expo APP

Yes correct @erquhart

66 replies

CCConvex Community

•Created by Zachoo on 4/28/2025 in #support-community

Logout after period of Inactivity Convex + Clerk - Expo APP

Yes as long as the app has not been cleared from background and has been sitting there for an extended period @erquhart

66 replies

CCConvex Community

•Created by Zachoo on 4/28/2025 in #support-community

Logout after period of Inactivity Convex + Clerk - Expo APP

added use effect still have same issue with app returning from background after an extended period of inactivity.

66 replies

CCConvex Community

•Created by Zachoo on 4/28/2025 in #support-community

Logout after period of Inactivity Convex + Clerk - Expo APP

is this issue you had and did use effect code resolve ??

66 replies

CCConvex Community

•Created by Zachoo on 4/28/2025 in #support-community

Logout after period of Inactivity Convex + Clerk - Expo APP

@Pedro Martinez as sign in screen will be wrapped by auth layout i also am redirected every time fine except for if app is in background for several days and then reopened the user is forced to clear app from background to re-sync with convex

66 replies

CCConvex Community

•Created by Zachoo on 4/28/2025 in #support-community

Logout after period of Inactivity Convex + Clerk - Expo APP

hmm i have the same logic but in my _layout file for sign in route did you have same in my mind the logic is the same ???

// import { useAuthNavigation } from "app/authProvider";
import LoadingScreen from "components/shared/loader";
import { useConvexAuth } from "convex/react";
import { Redirect, Stack } from "expo-router";
import { View, Platform } from "react-native";
import { useNetInfo } from "@react-native-community/netinfo";

export default function AuthLayout() {
  const { isAuthenticated, isLoading } = useConvexAuth();
  const netInfo = useNetInfo();

  if (isLoading) {
    return <LoadingScreen text="Fetching user data ..." />;
  }

  if (isAuthenticated) {
    return <Redirect href="/(app)/(home)" />;
  }

  const isOffline = !netInfo.isConnected;

  if (isOffline) {
    return (
      <View className="flex-1 items-center justify-center bg-background p-10">
        <LoadingScreen text=" 🛠️ No internet connection. Please check your network settings." />
      </View>
    );
  }

  return (
    <View
      className="flex-1 bg-background"
      style={{
        paddingTop: Platform.OS === "android" ? 25 : 0,
        paddingBottom: Platform.OS === "android" ? 35 : 0,
      }}
    >
      <Stack
        screenOptions={{
          headerShown: false,
          animation: "fade",
          contentStyle: { backgroundColor: "transparent" },
        }}
      />
    </View>
  );
}

// import { useAuthNavigation } from "app/authProvider";
import LoadingScreen from "components/shared/loader";
import { useConvexAuth } from "convex/react";
import { Redirect, Stack } from "expo-router";
import { View, Platform } from "react-native";
import { useNetInfo } from "@react-native-community/netinfo";

export default function AuthLayout() {
  const { isAuthenticated, isLoading } = useConvexAuth();
  const netInfo = useNetInfo();

  if (isLoading) {
    return <LoadingScreen text="Fetching user data ..." />;
  }

  if (isAuthenticated) {
    return <Redirect href="/(app)/(home)" />;
  }

  const isOffline = !netInfo.isConnected;

  if (isOffline) {
    return (
      <View className="flex-1 items-center justify-center bg-background p-10">
        <LoadingScreen text=" 🛠️ No internet connection. Please check your network settings." />
      </View>
    );
  }

  return (
    <View
      className="flex-1 bg-background"
      style={{
        paddingTop: Platform.OS === "android" ? 25 : 0,
        paddingBottom: Platform.OS === "android" ? 35 : 0,
      }}
    >
      <Stack
        screenOptions={{
          headerShown: false,
          animation: "fade",
          contentStyle: { backgroundColor: "transparent" },
        }}
      />
    </View>
  );
}

66 replies

CCConvex Community

•Created by Zachoo on 4/28/2025 in #support-community

Logout after period of Inactivity Convex + Clerk - Expo APP

Have made more readable and still have same error root layout

import { ClerkProvider, useAuth } from "@clerk/clerk-expo";
import { Slot } from "expo-router";
import "../global.css";
import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import {
  ConvexReactClient,
} from "convex/react";
import { ConvexProviderWithClerk } from "convex/react-clerk";
import { ConvexQueryCacheProvider } from "convex-helpers/react/cache";
import { tokenCache } from "cache";

// Initialize Convex client
const convex = new ConvexReactClient(process.env.EXPO_PUBLIC_CONVEX_URL!, {
  verbose: true,
});

export default function RootLayout() {
  const publishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY!;

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
        <ConvexProviderWithClerk useAuth={useAuth} client={convex}>
          <ConvexQueryCacheProvider>
            <BottomSheetModalProvider>
              <Slot />
            </BottomSheetModalProvider>
          </ConvexQueryCacheProvider>
        </ConvexProviderWithClerk>
      </ClerkProvider>
    </GestureHandlerRootView>
  );
}

import { ClerkProvider, useAuth } from "@clerk/clerk-expo";
import { Slot } from "expo-router";
import "../global.css";
import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import {
  ConvexReactClient,
} from "convex/react";
import { ConvexProviderWithClerk } from "convex/react-clerk";
import { ConvexQueryCacheProvider } from "convex-helpers/react/cache";
import { tokenCache } from "cache";

// Initialize Convex client
const convex = new ConvexReactClient(process.env.EXPO_PUBLIC_CONVEX_URL!, {
  verbose: true,
});

export default function RootLayout() {
  const publishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY!;

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
        <ConvexProviderWithClerk useAuth={useAuth} client={convex}>
          <ConvexQueryCacheProvider>
            <BottomSheetModalProvider>
              <Slot />
            </BottomSheetModalProvider>
          </ConvexQueryCacheProvider>
        </ConvexProviderWithClerk>
      </ClerkProvider>
    </GestureHandlerRootView>
  );
}

 .tsx
import { Stack } from "expo-router/stack";
import { View, Platform } from "react-native";
import { Navbar } from "./_components/navbar";
import useNotifications from "providers/notification-provider";
import { useQuery } from "convex/react";
import LoadingScreen from "components/shared/loader";
// import { useAuthNavigation } from "app/authProvider";
import { useConvexAuth } from "convex/react";
import { api } from "@packages/backend/convex/_generated/api";
import { Redirect } from "expo-router";

export default function AppLayout() {
  // Initialize notifications if user is authenticated and we have user data
  const { permissionGranted } = useNotifications();

  const { isAuthenticated, isLoading } = useConvexAuth();
  const currentUser = useQuery(api.users.currentUserState);

  if (isLoading) {
    return <LoadingScreen text="Fetching user data ..." />;
  }

  if (!isAuthenticated) {
    return <Redirect href="/sign-in" />;
  }

  if (currentUser && !currentUser.isOnboarded) {
    return <Redirect href="/onboarding" />;
  }

  return (
    <View
      className="flex-1 bg-background"
      style={{
        paddingTop: Platform.OS === "android" ? 25 : 0,
        paddingBottom: Platform.OS === "android" ? 35 : 0,
      }}
    >
      <Stack
        screenOptions={{
          headerShown: false,
          animation: "fade",
          contentStyle: { backgroundColor: "transparent" },
        }}
      />
      <Navbar />
    </View>
  );
}

 .tsx
import { Stack } from "expo-router/stack";
import { View, Platform } from "react-native";
import { Navbar } from "./_components/navbar";
import useNotifications from "providers/notification-provider";
import { useQuery } from "convex/react";
import LoadingScreen from "components/shared/loader";
// import { useAuthNavigation } from "app/authProvider";
import { useConvexAuth } from "convex/react";
import { api } from "@packages/backend/convex/_generated/api";
import { Redirect } from "expo-router";

export default function AppLayout() {
  // Initialize notifications if user is authenticated and we have user data
  const { permissionGranted } = useNotifications();

  const { isAuthenticated, isLoading } = useConvexAuth();
  const currentUser = useQuery(api.users.currentUserState);

  if (isLoading) {
    return <LoadingScreen text="Fetching user data ..." />;
  }

  if (!isAuthenticated) {
    return <Redirect href="/sign-in" />;
  }

  if (currentUser && !currentUser.isOnboarded) {
    return <Redirect href="/onboarding" />;
  }

  return (
    <View
      className="flex-1 bg-background"
      style={{
        paddingTop: Platform.OS === "android" ? 25 : 0,
        paddingBottom: Platform.OS === "android" ? 35 : 0,
      }}
    >
      <Stack
        screenOptions={{
          headerShown: false,
          animation: "fade",
          contentStyle: { backgroundColor: "transparent" },
        }}
      />
      <Navbar />
    </View>
  );
}

if for any reason the user is redirected to sign in they are not redirected from there unless the app is cleared.

66 replies