https://github.com/piro0919/next-firebase-auth
Easy integration between Next.js and Firebase Authentication
https://github.com/piro0919/next-firebase-auth
authentication firebase nextjs react template typescript
Last synced: about 2 months ago
JSON representation
Easy integration between Next.js and Firebase Authentication
- Host: GitHub
- URL: https://github.com/piro0919/next-firebase-auth
- Owner: piro0919
- License: mit
- Created: 2022-08-02T20:53:20.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2026-04-27T18:45:00.000Z (2 months ago)
- Last Synced: 2026-04-27T20:25:11.642Z (2 months ago)
- Topics: authentication, firebase, nextjs, react, template, typescript
- Language: TypeScript
- Homepage:
- Size: 787 KB
- Stars: 2
- Watchers: 0
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Overview
`next-firebase-authentication` makes it easy to connect Next.js to Firebase Authentication.
## Example
- [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 ;
}
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