stormblessed Posts - Convex Community

stormblessed

•Created by stormblessed on 2/7/2025 in #support-community

Sharing Convex Authentication State Between Main App and Share Extension in React Native

I'm building a React Native app with Convex and Clerk for authentication. I'm trying to implement a share extension that needs to access the authenticated Convex state from the main app. Current Setup - Main App: - Using Clerk for authentication - Using ConvexProviderWithClerk for Convex integration - Token caching implemented with expo-secure-store and keychain access group sharing - Share Extension: - Separate entry point (index.share.js) - Same Clerk and Convex configuration as main app - Using the same token cache with keychain access group What I've Done 1. Set up keychain sharing between main app and share extension:

const createTokenCache = (): TokenCache => ({
  getToken: async (key: string) => {
    const item = await SecureStore.getItemAsync(key, {
      keychainAccessGroup: "group.com.***.***"
    });
    // ...
  },
  // ...
});

const createTokenCache = (): TokenCache => ({
  getToken: async (key: string) => {
    const item = await SecureStore.getItemAsync(key, {
      keychainAccessGroup: "group.com.***.***"
    });
    // ...
  },
  // ...
});

2. Confirmed that Clerk tokens are being shared (I can see the __clerk_client_jwt in the logs) 3. Using useConvexAuth() in the share extension:

export default function ShareExtension({ url }: InitialProps) {
  const { isAuthenticated, isLoading } = useConvexAuth();
  // ...
}

export default function ShareExtension({ url }: InitialProps) {
  const { isAuthenticated, isLoading } = useConvexAuth();
  // ...
}

The Issue Even though the Clerk token is being shared successfully through the keychain access group, the share extension still shows as unauthenticated in Convex (isAuthenticated is false), despite the main app being authenticated. Questions 1. Is there anything special needed to make Convex recognize the shared Clerk authentication state in the share extension? 2. Are there any specific configuration requirements for Convex to work with share extensions? 3. Is there a recommended pattern for sharing authentication state between a main app and its share extension when using Convex? Any guidance would be greatly appreciated!

2 replies

CCConvex Community

•Created by stormblessed on 1/19/2025 in #support-community

[Convex Auth] Clerk Integration with Convex

Clerk will automatically create a convex user for social sign ups but the same flow doesn't work for email sign ups. Convex user is not being created automatically for Email sign up flow while it works correctly for social signup and sign in. The following is the code for email password registration.

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [pendingVerification, setPendingVerification] = useState(false);
  const [code, setCode] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  const { isLoaded, signUp, setActive } = useSignUp();

  const handleSignUp = async () => {
    if (!isLoaded) return;
    setIsLoading(true);

    try {
      await signUp.create({
        emailAddress: email,
        password,
      });

      await signUp.prepareEmailAddressVerification({ strategy: "email_code" });
      setPendingVerification(true);
    } catch (err: any) {
      Alert.alert(
        "Sign Up Error",
        err.errors?.[0]?.message || "An error occurred while signing up",
        [{ text: "OK", style: "default" }]
      );
    } finally {
      setIsLoading(false);
    }
  };

  const handleVerification = async () => {
    if (!isLoaded) return;
    setIsLoading(true);

    try {
      const completeSignUp = await signUp.attemptEmailAddressVerification({
        code,
      });

      await setActive({ session: completeSignUp.createdSessionId });

      // The _layout.tsx will handle the redirection
    } catch (err: any) {
      Alert.alert(
        "Verification Error",
        err.errors?.[0]?.message || "An error occurred during verification",
        [{ text: "OK", style: "default" }]
      );
    } finally {
      setIsLoading(false);
    }
  };

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [pendingVerification, setPendingVerification] = useState(false);
  const [code, setCode] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  const { isLoaded, signUp, setActive } = useSignUp();

  const handleSignUp = async () => {
    if (!isLoaded) return;
    setIsLoading(true);

    try {
      await signUp.create({
        emailAddress: email,
        password,
      });

      await signUp.prepareEmailAddressVerification({ strategy: "email_code" });
      setPendingVerification(true);
    } catch (err: any) {
      Alert.alert(
        "Sign Up Error",
        err.errors?.[0]?.message || "An error occurred while signing up",
        [{ text: "OK", style: "default" }]
      );
    } finally {
      setIsLoading(false);
    }
  };

  const handleVerification = async () => {
    if (!isLoaded) return;
    setIsLoading(true);

    try {
      const completeSignUp = await signUp.attemptEmailAddressVerification({
        code,
      });

      await setActive({ session: completeSignUp.createdSessionId });

      // The _layout.tsx will handle the redirection
    } catch (err: any) {
      Alert.alert(
        "Verification Error",
        err.errors?.[0]?.message || "An error occurred during verification",
        [{ text: "OK", style: "default" }]
      );
    } finally {
      setIsLoading(false);
    }
  };

13 replies

CCConvex Community

•Created by stormblessed on 12/4/2024 in #support-community

table value in array when querying

I can’t find a way to check if, say, a number is in an array of numbers when querying the db

9 replies