Documentation Clarification for useIsAuthenticated Hook

[locotinocom]

Problem Description

While implementing authentication in a React project using react-auth-kit, I encountered a discrepancy between the expected behavior (based on the documentation on Getting Started with AuthKit
) and the actual behavior of the useIsAuthenticated hook.

According to the current documentation, the useIsAuthenticated hook is expected to be used as follows:

import useIsAuthenticated from 'react-auth-kit/hooks/useIsAuthenticated';

const Component = () => {
  const isAuthenticated = useIsAuthenticated();
  if (isAuthenticated()) {
    // User is authenticated - perform actions
  } else {
    // User is not authenticated
  }
}

However, this implementation throws an error indicating that isAuthenticated() is not a function. Upon further inspection, it was discovered that useIsAuthenticated directly returns a boolean value indicating the authentication status, rather than returning a function that when called, returns the authentication status.

Suggested Documentation Update

To clarify the usage of useIsAuthenticated and prevent potential confusion for future users of react-auth-kit, I propose the following update to the documentation:

Change the example usage of useIsAuthenticated to reflect that it returns a boolean value directly:

import useIsAuthenticated from 'react-auth-kit/hooks/useIsAuthenticated';

const Component = () => {
  const isAuthenticated = useIsAuthenticated;
  if (isAuthenticated) {
    // User is authenticated - perform actions
  } else {
    // User is not authenticated
  }
}

Additionally, it may be beneficial to add a note explaining that useIsAuthenticated does not need to be called as a function but is instead a boolean value representing the user's authentication status.

Conclusion

Correcting this discrepancy in the documentation can improve the developer experience and help prevent similar confusion in the future. I appreciate the effort that has gone into creating react-auth-kit and hope this contribution helps enhance its utility for the developer community.

[saji-nael-98]

@locotinocom it is still not working here is my code

`import React, { PropsWithChildren } from 'react'
import useIsAuthenticated from 'react-auth-kit/hooks/useIsAuthenticated'
const AuthenticatedComponent = ({ children }: PropsWithChildren) => {
const isAuthenticated = useIsAuthenticated()
if (isAuthenticated) {
return children
}
return null
}

export default AuthenticatedComponent`

i used your code but it always true!!!

[locotinocom]

Please try this instead: if (isAuthenticated()) {return children}return null}This should work!Regards Am 29.03.2024 um 23:29 schrieb Saji Zeer ***@***.***>: it is still not working here is my code `import React, { PropsWithChildren } from 'react' import useIsAuthenticated from 'react-auth-kit/hooks/useIsAuthenticated' const AuthenticatedComponent = ({ children }: PropsWithChildren) => { const isAuthenticated = useIsAuthenticated() if (isAuthenticated) { return children } return null } export default AuthenticatedComponent` i used your code but it always true!!! —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>

[saji-nael-98]

@locotinocom I did that and it is not working.

[saji-nael-98]

`import React, { PropsWithChildren } from 'react'
import useIsAuthenticated from 'react-auth-kit/hooks/useIsAuthenticated'
const AuthenticatedComponent = ({ children }: PropsWithChildren) => {
const isAuthenticated = useIsAuthenticated
if (isAuthenticated()) {
return children
}
return null
}

export default AuthenticatedComponent`

i have to reload the app

[saji-nael-98]

@locotinocom
I suggest editing the code of the hook as follows:

`
function useIsAuthenticated() {
const context = useContext(AuthContext);
const [isAuthenticated, setIsAuthenticated] = useState(false);
if (context === null) {
throw new
AuthError(
'Auth Provider is missing. ' +
'Make sure, you are using this hook inside the auth provider.',
);
}
useEffect(() => {
if (context) {
setIsAuthenticated(isAuthenticated(context.value));
}
}, [context]);

return () => isAuthenticated;
}
`