# next-auth-hook
> A simple React hook for NextAuth.js with Next.js App Router
Latest version **0.0.7-alpha** (published 2023-12-25) · ISC license · 0 weekly downloads
## Install
```sh
npm install next-auth-hook
pnpm add next-auth-hook
yarn add next-auth-hook
bun add next-auth-hook
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities; high quality score.
Warnings: low downloads; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.7-alpha |
| Published | 2023-12-25 |
| First published | 2023-12-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 34 KB |
| Known vulnerabilities | 0 (+23 in 1 direct dependencies) |
| Install scripts | no |
| Author | Brandon Kong |
| Maintainers | brandon-kong |
| Keywords | next, nextjs, next-auth, next-auth.js, next-auth-hook, react, reactjs, react-hook, react-query, typescript |
## Links
- npm: https://www.npmjs.com/package/next-auth-hook
- Repository: https://github.com/brandon-kong/next-auth-hook
- Homepage: https://github.com/brandon-kong/next-auth-hook#readme
- Issues: https://github.com/brandon-kong/next-auth-hook/issues
- npm.io page: https://npm.io/package/next-auth-hook
## Dependencies (5)
- [swr](https://npm.io/package/swr.md) ^2.2.4
- [next](https://npm.io/package/next.md) ^14.0.4
- [react](https://npm.io/package/react.md) ^18.2.0
- [next-auth](https://npm.io/package/next-auth.md) ^4.24.5
- [@tanstack/react-query](https://npm.io/package/@tanstack/react-query.md) ^5.14.6
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 0.0.7-alpha (latest) — 2023-12-25
- 0.0.6-alpha — 2023-12-25
- 0.0.5-alpha — 2023-12-25
## README
# 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.
[](https://www.npmjs.com/package/next-auth-hook) [](https://www.typescriptlang.org/) [](MIT)
### Install
Install it with your package manager of choice:
##### NPM
```bash
npm install --save next-auth next-auth-hook
```
##### Yarn
```bash
yarn add next-auth-hook
```
### Setup
1. Set up NextAuth.js in your Next.js app, following the [official documentation](https://next-auth.js.org/configuration/initialization#route-handlers-app).
2. Wrap your app with the `AuthProvider` component in `app/layout.js` or `app/layout.ts`:
```jsx
import { AuthProvider } from 'next-auth-hook';
export default function RootLayout({ children }) {
return (
...
{ children }
...
);
};
```
### Usage
```tsx
'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 Loading...
;
}
// Conditionally render based on authentication state
if (!session) {
return Not signed in
;
}
return Signed in as {session.user.email}
;
};
```
### 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` | A function that signs in the user. |
| `signOut` | `(SignOutParams) => Promise` | A function that signs out the user. |
> **Note:** The `signIn` and `signOut` functions are wrappers for the `signIn` and `signOut` functions from NextAuth.js. Conveniently, the parameters are unchanged.
See the [official documentation](https://next-auth.js.org/getting-started/client#signin) for more information on the parameters.
### License
ISC © [brandon-kong](/LICENSE)
### Acknowledgements
This project uses the following open source packages:
- [NextAuth.js](https://next-auth.js.org/)
- [React](https://reactjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [Next.js](https://nextjs.org/)
- [react-query](https://react-query.tanstack.com/)
---
_Source: https://npm.io/package/next-auth-hook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._