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: