# next-firebase-authentication

> `next-firebase-authentication` makes it easy to connect Next.js to Firebase Authentication.

Latest version **0.0.14** (published 2026-08-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install next-firebase-authentication
pnpm add next-firebase-authentication
yarn add next-firebase-authentication
bun add next-firebase-authentication
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.0.14 |
| Published | 2026-08-19 |
| First published | 2022-08-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 31 KB |
| Known vulnerabilities | 0 (+25 in 2 direct dependencies) |
| Install scripts | no |
| Author | piro0919 |
| Maintainers | piro0919 |
| Keywords | authentication, hooks, next, next.js, firebase, react |

## Links

- npm: https://www.npmjs.com/package/next-firebase-authentication
- Repository: https://github.com/piro0919/next-firebase-authentication
- Homepage: https://github.com/piro0919/next-firebase-authentication#readme
- Issues: https://github.com/piro0919/next-firebase-authentication/issues
- Funding: https://github.com/sponsors/piro0919
- npm.io page: https://npm.io/package/next-firebase-authentication

## Dependencies (6)

- [axios](https://npm.io/package/axios.md) 0.27.2
- [nookies](https://npm.io/package/nookies.md) 2.5.2
- [firebase](https://npm.io/package/firebase.md) 9.9.1
- [usehooks-ts](https://npm.io/package/usehooks-ts.md) 2.6.0
- [firebase-admin](https://npm.io/package/firebase-admin.md) 11.0.1
- [react-firebase-hooks](https://npm.io/package/react-firebase-hooks.md) 5.0.3

## 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.14 (latest) — 2026-08-19
- 0.0.13 — 2022-08-05
- 0.0.12 — 2022-08-05
- 0.0.11 — 2022-08-02
- 0.0.10 — 2022-08-02
- 0.0.9 — 2022-08-02
- 0.0.8 — 2022-08-02
- 0.0.7 — 2022-08-02
- 0.0.6 — 2022-08-02
- 0.0.5 — 2022-08-02
- 0.0.4 — 2022-08-02
- 0.0.3 — 2022-08-02
- 0.0.2 — 2022-08-02
- 0.0.1 — 2022-08-02

## README

## Overview

`next-firebase-authentication` makes it easy to connect Next.js to Firebase Authentication.

## Example

- [Demo](https://next-firebase-authentication.kk-web.link)
- [Source code](https://github.com/piro0919/next-firebase-authentication/tree/main/src/pages)

## Getting Started

### 1. Install

```
npm i -S next-firebase-authentication
```

```
yarn add next-firebase-authentication
```

### 2. Set environment variables

```
NEXT_PUBLIC_FIREBASE_API_KEY="..."
NEXT_PUBLIC_FIREBASE_APP_ID="..."
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="..."
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID="..."
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="..."
NEXT_PUBLIC_FIREBASE_PROJECT_ID="..."
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="..."
```

If you want to verify id token, add the following environment variables.

```
FIREBASE_CLIENT_EMAIL="..."
FIREBASE_PRIVATE_KEY="..."
FIREBASE_PROJECT_ID="..."
```

### 3. Initialize Firebase Authentication with `App` component

`_app.tsx`

```tsx
import { useInitAuth } from "next-firebase-authentication";
import type { AppProps } from "next/app";

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
  useInitAuth();

  return <Component {...pageProps} />;
}

export default MyApp;
```

## Reference

### useInitAuth

Initialize Firebase Authentication.

Make sure to call it only once with `App` component.

- isSignedIn: boolean
- userCredential?: object

### useSignIn

It's hooks about signing in.

- signInWithFacebook: function
- signInWithGoogle: function
- signInWithTwitter: function

### useSignOut

It's hooks about signing out.

- isSignedOut: boolean
- signOut: function

### useUser

It's hooks about user.

- error: Error
- isLoading: boolean
- user: object

### verifyIdToken

It is a function that does verify for id token.

Can be used with `getServerSideProps` and `api`.

It is also possible to use indirectly from `middleware`.

Please write as follows when using.

```tsx
import { verifyIdToken } from "next-firebase-authentication/dist/verifyIdToken";
```

## License

MIT

---
_Source: https://npm.io/package/next-firebase-authentication · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._