Gathering detailed insights and metrics for next-fire-auth
Gathering detailed insights and metrics for next-fire-auth
Installations
npm install next-fire-authDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, ESM
Node Version
16.20.2
NPM Version
8.19.4
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
1
Package Meta Information
Latest Version
0.0.5
Package Id
next-fire-auth@0.0.5
Unpacked Size
23.23 kB
Size
5.68 kB
File Count
12
NPM Version
8.19.4
Node Version
16.20.2
Published on
Oct 07, 2023
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
5
Peer Dependencies
4
Dev Dependencies
6
🔥 next-fire-auth 🔥
🔥 next-fire-auth is a simple package that handles Firebase auth for Next.js SSR and CSR components
-
🧩 Auth Libraries are Complex - I often find myself writing my own Firebase auth because other libraries just have way too much ramp up code to get things started. When all you really need is a React context and a couple hooks.
-
⏲️ Save Time - Writing auth code for Firebase is repetitive, save time by just importing this package
-
⚙️ Configurable - I know not everyone likes to write auth the same way, so I've tried my best (and will continue improving) the flexibility of this package so we can accommodate more solutions.
Installation
To install next-fire-auth, run the following command:
1npm install next-fire-auth
or with yarn.
1yarn add next-fire-auth
If you do not have Firebase installed in your project, you'll need it.
1npm install firebase firebase-admin
1yarn add firebase firebase-admin
How to Use
- Create a ClientProviders component to hold your client side context providers
1// ClientProviders.tsx 2"use client"; 3 4import { NextFireAuthContextProvider } from "next-fire-auth"; 5 6export default function ClientProviders({ children }: any) { 7 return <NextFireAuthContextProvider>{children}</NextFireAuthContextProvider>; 8}
NOTE
If you choose to not pass a config like we do above, then next-fire-auth will auto try to build a firebase_app instance using these .env variables.
1# You can find these in your firebase console dashboard 2 3# Client side required props 4NEXT_PUBLIC_FIREBASE_API_KEY="..." 5NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="..." 6NEXT_PUBLIC_FIREBASE_PROJECT_ID="..." 7NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="..." 8NEXT_PUBLIC_FIREBASE_MESSENGER_ID="..." 9NEXT_PUBLIC_FIREBASE_APP_ID="..." 10NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID="..." 11 12# Server side required props (Firebase Admin) 13FIREBASE_CLIENT_EMAIL="..." 14FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY...
Custom Config
If you'd like to pass in a custom config you can do that like this
1"use client"; 2 3import { BaseCookieManager, NextFireAuthContextProvider } from "next-fire-auth"; 4 5export default function ClientProviders({ children }: any) { 6 return ( 7 <NextFireAuthContextProvider 8 config={{ 9 firebaseApp: firebase_app, // Instead of relying on env vars, you can role your own FirebaseApp object and pass it in. This is optional 10 loadingComponent: <span>Loading...</span>, 11 cookieManager: BaseCookieManager, 12 onPathChange: (pathname: any, user: any, router: any) => { 13 // This can do whatever you want, this is just an example where 14 // we route to specific pages based on auth status and current url. 15 16 if (user && pathname === "/login") { 17 router.replace("/app/dashboard"); 18 router.refresh(); 19 } 20 21 if (!user && pathname.startsWith("/app")) { 22 router.replace("/login"); 23 router.refresh(); 24 } 25 26 console.log(pathname); 27 }, 28 }} 29 > 30 {children} 31 </NextFireAuthContextProvider> 32 ); 33}
NOTE
If you're going to redirect like I am in onPathChange, I recommend using replace() + refresh() instead of push. For some reason push still caches the old cookie value.
Why Client Providers file?
You could totally wrap your main layout.tsx with this context, but that would require adding "use client" to your main layout. Forcing everything to CSR.
If you'd like to take advantage of SSR you should split this out into a separate client providers component and then wrap your main layout in <ClientProviders>
- Wrap your layout
1import ClientProviders from "./client-providers"; 2 3export const metadata = { 4 title: "Create Next App", 5 description: "Generated by create next app", 6}; 7 8export default function RootLayout({ 9 children, 10}: { 11 children: React.ReactNode; 12}) { 13 return ( 14 <html lang="en"> 15 <body> 16 <ClientProviders>{children}</ClientProviders> 17 </body> 18 </html> 19 ); 20}
- Access your user data client side
1"use client"; 2import { useAuthContext } from "next-fire-auth"; 3 4export default function TestClientComponent() { 5 const { user } = useAuthContext(); 6 7 if (!user) { 8 return <span>No user</span>; 9 } 10 11 return <div>Hello {user.uid}</div>; 12}
- Access your uid server side
1import { useServerUser } from "next-fire-auth/server"; 2 3export default function TestServerComponent() { 4 const { uid } = useServerUser(); 5 6 if (!uid || !uid.value) { 7 return <span>No UID</span>; 8 } 9 10 return <div>Hello {uid.value}</div>; 11}
Here is the full default config
1const defaultConfig: NextFireAuthConfig = { 2 onPathChange: (pathname, user, router) => {}, 3 cookieManager: DefaultCookieManager, 4 loadingComponent: null, 5 firebaseApp: currentFirebaseApp, 6};
Contributing
This is an open-source project, and contributions are welcome. Feel free to open an issue or submit a PR.
No vulnerabilities found.
No security vulnerabilities found.