SirDarknight•4w ago

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

I have a pretty similar setup to the convex-auth-example repo. I believe the entire signIn/signUp flow is completing successfully, but for some reason, isAuthenticated from 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 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;

1 Reply

SirDarknightOP•4w ago

Okay, so turns out, it was actually because I changed the applicationId in auth.config.ts from convex to something else. I'm not sure if it's because I changed it after deploying initially or it just can't ever be changed. Wish there was a bit more explanation in the docs: https://labs.convex.dev/auth/setup/manual#configure-authconfigts

export default {
  providers: [
    {
      domain: process.env.CONVEX_SITE_URL,
      applicationID: "convex",
    },
  ],
};

export default {
  providers: [
    {
      domain: process.env.CONVEX_SITE_URL,
      applicationID: "convex",
    },
  ],
};

Manual Setup - Convex Auth

Authentication library for your Convex backend

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

Did you find this page helpful?