Kinde•6mo ago

Loosing auth after rerender in "use client" componenent

I have a nextjs client component in hwich i want to conditionaly show if the user is logged in or not On the first render everything works, but after that it rerenders and isAuthenticated is false I can't use the server auth here cause the parent component is client allready Why am i loosing auth on rerender ?

"use client"

import {LoginLink, LogoutLink, RegisterLink} from "@kinde-oss/kinde-auth-nextjs/components";
import {useTranslations} from "next-intl";

import styles from "./loginButtons.module.scss"
import {useKindeBrowserClient} from "@kinde-oss/kinde-auth-nextjs";




const LoginButtons = () => {
    const t = useTranslations("login")
   const {isAuthenticated} = useKindeBrowserClient()
    console.log("auth: "+isAuthenticated)
    return (
        <div className={styles.navButtons}>
            { isAuthenticated ?
                <LoginLink>
                <i className="fa-solid fa-user-plus" aria-hidden></i>
                <span>{t("sign_in")}</span>
            </LoginLink>
            :
                <LogoutLink>
                    <i className="fa-solid fa-user-plus" aria-hidden></i>
                    <span>{t("logout")}</span>
                </LogoutLink>
            }
            <RegisterLink>
                <i className="fa-solid fa-user-plus" aria-hidden></i>
                <span>{t("signup")}</span>
            </RegisterLink>
        </div>
    );
}
export default LoginButtons

"use client"

import {LoginLink, LogoutLink, RegisterLink} from "@kinde-oss/kinde-auth-nextjs/components";
import {useTranslations} from "next-intl";

import styles from "./loginButtons.module.scss"
import {useKindeBrowserClient} from "@kinde-oss/kinde-auth-nextjs";




const LoginButtons = () => {
    const t = useTranslations("login")
   const {isAuthenticated} = useKindeBrowserClient()
    console.log("auth: "+isAuthenticated)
    return (
        <div className={styles.navButtons}>
            { isAuthenticated ?
                <LoginLink>
                <i className="fa-solid fa-user-plus" aria-hidden></i>
                <span>{t("sign_in")}</span>
            </LoginLink>
            :
                <LogoutLink>
                    <i className="fa-solid fa-user-plus" aria-hidden></i>
                    <span>{t("logout")}</span>
                </LogoutLink>
            }
            <RegisterLink>
                <i className="fa-solid fa-user-plus" aria-hidden></i>
                <span>{t("signup")}</span>
            </RegisterLink>
        </div>
    );
}
export default LoginButtons

1 Reply

JoshkopOP•6mo ago

nvw ... i showed login when user is auth not when user is not auth

Gaming

Programming

Loosing auth after rerender in "use client" componenent