djbalin•4mo ago

[Convex Auth]: signIn doesn't set isAuthenticated to true immediately

Hi, as the title suggests, signIn doesn't seem to set isAuthenticated immediately after the resolution of its promise. For example, this snippet of our AuthProvider:

const { isAuthenticated, isLoading } = useConvexAuth();
const signInResult = await signIn('password', {
      flow: 'email-verification',
      email,
      code,
    });
    console.log('Confirm otp, signinresult: ', signInResult);
    console.log('confirm otp done. isAuthenticated: ', isAuthenticated);

const { isAuthenticated, isLoading } = useConvexAuth();
const signInResult = await signIn('password', {
      flow: 'email-verification',
      email,
      code,
    });
    console.log('Confirm otp, signinresult: ', signInResult);
    console.log('confirm otp done. isAuthenticated: ', isAuthenticated);

We have isAuthenticated as false even after awaiting the successful signIn. This causes our redirection to mess up, since when isLoading resolves to false, isAuthenticated is also still false despite the user having just logged in. This doesn't seem intentional - after successful signIn, the next {isLoading, isAuthenticated} pair should resolve to a truthy authentication status, no? Thank you 🙂

4 Replies

djbalinOP•4mo ago

Maybe I wasn't very clear in my wording, I now realize. Of course there will be a delay at some point in the process - the sign in event has to be called from the client and registered on the backend. What I am unsure about is the expected/intended way to deal with this delay. Conceptually, it would be nice to be able to await/wait until the sign in event had succeeded, and then have assurance that {isAuthenticated} will resolve to true - logically, we know this to be the case since the user has just performed a successful signin.

sshader•4mo ago

I believe the signIn promise resolves when the server has processed the request (the server has verified that it's a valid sign in request, and returned a token for the client to store in local storage / cookies), but isAuthenticated will be false until the auth result has been propagated through Convex and ctx.auth.getUserIdentity will reflect the authentication. This is similar to how Clerk or Auth0's signIn function resolves once Clerk / Auth0 have processed the sign in, but the Convex isAuthenticated (or <Authenticated>) need to be used to detect when Convex has processed the sign in. If your goal is to redirect once the auth flow has fully succeeded, I'd probably have a useEffect that handles the redirect, conditioned on isAuthenticated being true, and use the signIn promise just for handling any errors

Olamide•4mo ago

I ran into the same issue this doesn't work also since after sign-in is authenticated is still false so it redirects immediately back to the sign in page How were you able to solve it?

djbalinOP•4mo ago

As @sshader also alluded to, a good way is probably to not redirect manually/imperatively (since we cannot really know when isAuthenticated will resolve to true). Instead, wrap your sign in component in something (could be a parent layout I guess or simply a useEffect in e.g. your SignIn component) that listens to isAuthenticated and then redirects automatically.