mattmacf98•2w ago

Authentication not updating

I have an incredibly simple auth setup following the guide here https://labs.convex.dev/auth/api_reference/react. I want to use the <Authenticated> <Unauthenticated> and <AuthLoading> components to structure my code, but it seems that the <Authenticated> will never trigger. I will either be in a state where I am unauthenticated or loading. here is a super simple react component to demo my issue

import { useAuthActions, useAuthToken } from "@convex-dev/auth/react";
import { Authenticated, AuthLoading, Unauthenticated } from "convex/react";
import { useState } from "react";

const SignIn = () => {
  const { signIn, signOut } = useAuthActions();
  const token = useAuthToken();
  const [step, setStep] = useState<"signUp" | "signIn">("signIn");

  return (
    <>
      <AuthLoading>
        <h1>Loading...</h1>
      </AuthLoading>
      <Authenticated>
        <h1>Authenticated</h1>
      </Authenticated>
      <Unauthenticated>
        <h1>Unauthenticated</h1>
      </Unauthenticated>
        <p>{token}</p>
        <form
          onSubmit={(event) => {
            event.preventDefault();
          const formData = new FormData(event.currentTarget);
          void signIn("password", formData);
        }}
      >
        <input name="email" placeholder="Email" type="text" />
        <input name="password" placeholder="Password" type="password" />
        <input name="flow" type="hidden" value={step} />
        <button type="submit">{step === "signIn" ? "Sign in" : "Sign up"}</button>
        <button
          type="button"
          onClick={() => {
            setStep(step === "signIn" ? "signUp" : "signIn");
          }}
        >
          {step === "signIn" ? "Sign up instead" : "Sign in instead"}
        </button>
      </form>
      <button onClick={() => void signOut()}>Sign out</button>
    </>
  );
};

export default SignIn;

import { useAuthActions, useAuthToken } from "@convex-dev/auth/react";
import { Authenticated, AuthLoading, Unauthenticated } from "convex/react";
import { useState } from "react";

const SignIn = () => {
  const { signIn, signOut } = useAuthActions();
  const token = useAuthToken();
  const [step, setStep] = useState<"signUp" | "signIn">("signIn");

  return (
    <>
      <AuthLoading>
        <h1>Loading...</h1>
      </AuthLoading>
      <Authenticated>
        <h1>Authenticated</h1>
      </Authenticated>
      <Unauthenticated>
        <h1>Unauthenticated</h1>
      </Unauthenticated>
        <p>{token}</p>
        <form
          onSubmit={(event) => {
            event.preventDefault();
          const formData = new FormData(event.currentTarget);
          void signIn("password", formData);
        }}
      >
        <input name="email" placeholder="Email" type="text" />
        <input name="password" placeholder="Password" type="password" />
        <input name="flow" type="hidden" value={step} />
        <button type="submit">{step === "signIn" ? "Sign in" : "Sign up"}</button>
        <button
          type="button"
          onClick={() => {
            setStep(step === "signIn" ? "signUp" : "signIn");
          }}
        >
          {step === "signIn" ? "Sign up instead" : "Sign in instead"}
        </button>
      </form>
      <button onClick={() => void signOut()}>Sign out</button>
    </>
  );
};

export default SignIn;

after signing in, I will only ever see Loading... but I am be able to see my JWT token

3 Replies

Convex Bot•2w ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

mattmacf98OP•2w ago

Update: I found the issue, I needed to add auth.addHttpRoutes(http); to my http.ts NOTE: I think the docs here should be updated https://labs.convex.dev/auth/setup I already had the http.ts file in my setup and the automatic solution DID NOT update it properly for me, the process should explicilty call out that this needs to be checked and done

Set Up Convex Auth - Convex Auth

Authentication library for your Convex backend

jamwt•2w ago

glad to hear it worked out. thanks for the feedback!

Authentication not updating

Did you find this page helpful?