3 replies

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;

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

Authentication not updating

Similar Threads

Similar Threads

Similar Threads