1 reply

Problems with useSession hook

Hey so I have this application where the backend is in ASP and I have it protected where I have to use the full JWT by better-auth to authenticate to the backend. I have created a tanstack query that fetches that token, but the problem is that sometimes despite being authenticated the provided token to get the full one gotten through the data object provided by the useSession hook is null and I get errors when trying to get it, but in the end I get it because the tanstack query retries and gets it eventually. Its a problem for the profile page, because the placeholder data for the fields is gotten from the session and on the first renders of the page it is empty. Has anyone dealt with this problem before? If so how did you manage to fix it?

Here is how I get the data for the profile page for example:

const { data: pageSession, isPending } = authClient.useSession(); 

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting, isDirty },
  } = useForm<z.infer<typeof profileSchema>>({
    resolver: zodResolver(profileSchema),
    defaultValues: {
      username: pageSession?.user.name,
      // displayName: pageSession?.user.name,
      email: pageSession?.user.email,
      // bio: pageSession?.user.bio,
    },
  })

  if (isPending) {
    return (
      <div className="flex items-center justify-center h-full">
        <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary"></div>
      </div>
    );
  }

const { data: pageSession, isPending } = authClient.useSession(); 

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting, isDirty },
  } = useForm<z.infer<typeof profileSchema>>({
    resolver: zodResolver(profileSchema),
    defaultValues: {
      username: pageSession?.user.name,
      // displayName: pageSession?.user.name,
      email: pageSession?.user.email,
      // bio: pageSession?.user.bio,
    },
  })

  if (isPending) {
    return (
      <div className="flex items-center justify-center h-full">
        <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary"></div>
      </div>
    );
  }

Better Auth•9mo ago•

1 reply

kamberoFF

Problems with useSession hook

const { data: pageSession, isPending } = authClient.useSession(); 

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting, isDirty },
  } = useForm<z.infer<typeof profileSchema>>({
    resolver: zodResolver(profileSchema),
    defaultValues: {
      username: pageSession?.user.name,
      // displayName: pageSession?.user.name,
      email: pageSession?.user.email,
      // bio: pageSession?.user.bio,
    },
  })

  if (isPending) {
    return (
      <div className="flex items-center justify-center h-full">
        <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary"></div>
      </div>
    );
  }

const { data: pageSession, isPending } = authClient.useSession(); 

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting, isDirty },
  } = useForm<z.infer<typeof profileSchema>>({
    resolver: zodResolver(profileSchema),
    defaultValues: {
      username: pageSession?.user.name,
      // displayName: pageSession?.user.name,
      email: pageSession?.user.email,
      // bio: pageSession?.user.bio,
    },
  })

  if (isPending) {
    return (
      <div className="flex items-center justify-center h-full">
        <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary"></div>
      </div>
    );
  }

Problems with useSession hook

Similar Threads

Problems with useSession hook

Similar Threads

Similar Threads

Similar Threads