next-auth-hook
v0.0.7-alpha
Published
A simple React hook for NextAuth.js with Next.js App Router
Downloads
11
Maintainers
brandon-kongReadme
next-auth-hook
A simple React hook for NextAuth.js with Next.js App Router
Note: This package is still in development. It is not recommended for production use.
Install
Install it with your package manager of choice:
NPM
npm install --save next-auth next-auth-hook Yarn
yarn add next-auth-hookSetup
Set up NextAuth.js in your Next.js app, following the official documentation.
Wrap your app with the
AuthProvidercomponent inapp/layout.jsorapp/layout.ts:
import { AuthProvider } from 'next-auth-hook';
export default function RootLayout({ children }) {
return (
...
<body>
<AuthProvider>
{ children }
</AuthProvider>
</body>
...
);
};Usage
'use client';
import { useSession } from 'next-auth-hook';
const MyComponent = () => {
// Destructure the state of the session from the hook
const { session, isAuthenticated, loading } = useSession();
// Handle loading state
if (loading) {
return <div>Loading...</div>;
}
// Conditionally render based on authentication state
if (!session) {
return <div>Not signed in</div>;
}
return <div>Signed in as {session.user.email}</div>;
};API
AuthProvider
The AuthProvider component is a wrapper for your app that provides the useSession hook with the session state.
useSession
The useSession hook returns an object with the following properties:
Properties
| Name | Type | Description |
| --- | --- | --- |
| session | Session | The current session object, or null if there is no session. |
| isAuthenticated | boolean | Whether or not there is a session. |
| loading | boolean | Whether or not the session is loading. |
| user | NextAuthUser | The current user object, or null if there is no session. |
| signIn | (SignInProviders, Options) => Promsie<SignInResponse \| void> | A function that signs in the user. |
| signOut | (SignOutParams) => Promise<void> | A function that signs out the user. |
Note: The
signInandsignOutfunctions are wrappers for thesignInandsignOutfunctions from NextAuth.js. Conveniently, the parameters are unchanged. See the official documentation for more information on the parameters.
License
ISC © brandon-kong
Acknowledgements
This project uses the following open source packages: