next-firebase-authentication makes it easy to connect Next.js to Firebase Authentication.
npm i -S next-firebase-authentication
yarn add next-firebase-authentication
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="..."
_app.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;Initialize Firebase Authentication.
Make sure to call it only once with App component.
- isSignedIn: boolean
- userCredential?: object
It's hooks about signing in.
- signInWithFacebook: function
- signInWithGoogle: function
- signInWithTwitter: function
It's hooks about signing out.
- isSignedOut: boolean
- signOut: function
It's hooks about user.
- error: Error
- isLoading: boolean
- user: object
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.
import { verifyIdToken } from "next-firebase-authentication/dist/verifyIdToken";MIT
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent