2 replies

Convex Auth with Expo/React Native: isAuthenticated state not updating

I have a pretty similar setup to the

convex-auth-example

convex-auth-example

repo. I believe the entire signIn/signUp flow is completing successfully, but for some reason,

isAuthenticated

isAuthenticated

from

useConvexAuth

useConvexAuth

isn't returning true.

The attached screenshot shows the app's console logs on the left side and Convex's logs on the right side. You'll notice that despite signIn returning a success status and despite the calls to refreshSession (implying there's an active session stored in the app) when I refresh the app,

isAuthenticated

isAuthenticated

on the left side is always false.

const { isAuthenticated } = useConvexAuth();

React.useEffect(() => {
    console.log('isAuthenticated', isAuthenticated);
  }, [isAuthenticated]);

const onSubmit = async (data: AuthFormType) => {
    setIsSubmitting(true);
    signIn(data.provider, data.params).catch((error) => {
      console.error(error);
      let toastTitle: string;
      if (error instanceof ConvexError && error.data === 'INVALID_PASSWORD') {
        toastTitle = 'Invalid password - check the requirements and try again.';
      } else {
        toastTitle =
          flow === 'signIn'
            ? 'Could not sign in, did you mean to sign up?'
            : 'Could not sign up, did you mean to sign in?';
      }
      showMessage({
        message: toastTitle,
        type: 'danger',
      });
      setIsSubmitting(false);
    });
  };

const { isAuthenticated } = useConvexAuth();

React.useEffect(() => {
    console.log('isAuthenticated', isAuthenticated);
  }, [isAuthenticated]);

const onSubmit = async (data: AuthFormType) => {
    setIsSubmitting(true);
    signIn(data.provider, data.params).catch((error) => {
      console.error(error);
      let toastTitle: string;
      if (error instanceof ConvexError && error.data === 'INVALID_PASSWORD') {
        toastTitle = 'Invalid password - check the requirements and try again.';
      } else {
        toastTitle =
          flow === 'signIn'
            ? 'Could not sign in, did you mean to sign up?'
            : 'Could not sign up, did you mean to sign in?';
      }
      showMessage({
        message: toastTitle,
        type: 'danger',
      });
      setIsSubmitting(false);
    });
  };

layout.tsx file looks something like this:

import { useConvexAuth } from 'convex/react';
import { Redirect, Stack } from 'expo-router';
import React from 'react';

const _layout = () => {
  const { isAuthenticated } = useConvexAuth();

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

  return (
    <Stack>
      <Stack.Screen
        name="index"
      />
      <Stack.Screen
        name="auth-form"
      />
    </Stack>
  );
};

export default _layout;

import { useConvexAuth } from 'convex/react';
import { Redirect, Stack } from 'expo-router';
import React from 'react';

const _layout = () => {
  const { isAuthenticated } = useConvexAuth();

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

  return (
    <Stack>
      <Stack.Screen
        name="index"
      />
      <Stack.Screen
        name="auth-form"
      />
    </Stack>
  );
};

export default _layout;

Convex Auth with Expo/React Native: isAuthenticated state not updating

I have a pretty similar setup to the

convex-auth-example

convex-auth-example

repo. I believe the entire signIn/signUp flow is completing successfully, but for some reason,

isAuthenticated

isAuthenticated

from

useConvexAuth

useConvexAuth

isAuthenticated

isAuthenticated

on the left side is always false.

const { isAuthenticated } = useConvexAuth();

React.useEffect(() => {
    console.log('isAuthenticated', isAuthenticated);
  }, [isAuthenticated]);

const onSubmit = async (data: AuthFormType) => {
    setIsSubmitting(true);
    signIn(data.provider, data.params).catch((error) => {
      console.error(error);
      let toastTitle: string;
      if (error instanceof ConvexError && error.data === 'INVALID_PASSWORD') {
        toastTitle = 'Invalid password - check the requirements and try again.';
      } else {
        toastTitle =
          flow === 'signIn'
            ? 'Could not sign in, did you mean to sign up?'
            : 'Could not sign up, did you mean to sign in?';
      }
      showMessage({
        message: toastTitle,
        type: 'danger',
      });
      setIsSubmitting(false);
    });
  };

const { isAuthenticated } = useConvexAuth();

React.useEffect(() => {
    console.log('isAuthenticated', isAuthenticated);
  }, [isAuthenticated]);

const onSubmit = async (data: AuthFormType) => {
    setIsSubmitting(true);
    signIn(data.provider, data.params).catch((error) => {
      console.error(error);
      let toastTitle: string;
      if (error instanceof ConvexError && error.data === 'INVALID_PASSWORD') {
        toastTitle = 'Invalid password - check the requirements and try again.';
      } else {
        toastTitle =
          flow === 'signIn'
            ? 'Could not sign in, did you mean to sign up?'
            : 'Could not sign up, did you mean to sign in?';
      }
      showMessage({
        message: toastTitle,
        type: 'danger',
      });
      setIsSubmitting(false);
    });
  };

layout.tsx file looks something like this:

import { useConvexAuth } from 'convex/react';
import { Redirect, Stack } from 'expo-router';
import React from 'react';

const _layout = () => {
  const { isAuthenticated } = useConvexAuth();

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

  return (
    <Stack>
      <Stack.Screen
        name="index"
      />
      <Stack.Screen
        name="auth-form"
      />
    </Stack>
  );
};

export default _layout;

import { useConvexAuth } from 'convex/react';
import { Redirect, Stack } from 'expo-router';
import React from 'react';

const _layout = () => {
  const { isAuthenticated } = useConvexAuth();

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

  return (
    <Stack>
      <Stack.Screen
        name="index"
      />
      <Stack.Screen
        name="auth-form"
      />
    </Stack>
  );
};

export default _layout;

Convex Auth with Expo/React Native: isAuthenticated state not updating

Convex Auth with Expo/React Native: isAuthenticated state not updating

Similar Threads

Similar Threads

Similar Threads