{children}
22 | }
23 |
24 | export function LoggedInContent({ children }: { children: React.ReactNode }) {
25 | const { currentUser } = getUserCS();
26 | return currentUser ? <>{children} : null;
27 | }
28 |
29 | export function LoggedOutContent({ children }: { children: React.ReactNode }) {
30 | const { currentUser } = getUserCS();
31 | return currentUser ? null : <>{children};
32 | }
33 |
34 |
35 | /**
36 | *
37 | * !! IMPORTANT !!
38 | * If using redirect method, additional configuration is required. Read examples below for more details.
39 | * @param children - The component that should trigger the sign in with Google. If not provided, a default button will be shown.
40 | * @param className - The class name of the button
41 | * @param method - The method of sign in. Can be "popup" or "redirect". Default is "popup". Read examples for more details.
42 | *
43 | * @returns A component that triggers the sign in with Google.
44 | *
45 | * @example
46 | * // 1. Using default UI and popup
47 | * // -------------------------------------
48 | *
115 | {
116 | children ??
117 |
121 | }
122 |
123 | }
124 |
125 | export function GithubSignInButton({ children, className }: { children?: React.ReactNode, className?: string }) {
126 | const doSignInWithGithub = async () => {
127 | const provider = new GithubAuthProvider();
128 | console.log("Provider : ", provider)
129 | const resp = await signInWithPopup(auth, provider);
130 | console.log("Resp : ", resp)
131 | if (resp) {
132 | setTimeout(() => {
133 | window.location.reload();
134 | }, 2500);
135 | }
136 | };
137 |
138 | function GithubLogo({ height = 24, width = 24, ...props }) {
139 | return
142 | }
143 |
144 | return
145 | {
146 | children ??
147 |
151 | }
152 |
153 | }
154 |
155 | export function EmailSignInButton({ children, email, password, setErrorMessage, className, setLoading }: {
156 | children: React.ReactNode,
157 | email: string,
158 | password: string,
159 | setErrorMessage: (msg: string) => any,
160 | className?: string,
161 | setLoading?: (loading: boolean) => any
162 | }) {
163 | async function doSignInWithEmailAndPassword() {
164 | if (setLoading) setLoading(true);
165 | try {
166 | const userCredential = await signInWithEmailAndPassword(auth, email, password)
167 | if (userCredential) {
168 | setTimeout(() => {
169 | window.location.reload();
170 | }, 2500);
171 | }
172 | if (setLoading) setLoading(false)
173 | }
174 | catch (error: any) {
175 | setErrorMessage(decodeFirebaseError({ errorCode: error.code }))
176 | if (setLoading) setLoading(false)
177 | }
178 | }
179 | return {children}
180 | }
181 |
182 | export function EmailSignUpButton({ children, email, password, setErrorMessage, className, setLoading }: {
183 | children: React.ReactNode,
184 | email: string,
185 | password: string,
186 | setErrorMessage: (msg: string) => void,
187 | className?: string,
188 | setLoading?: (loading: boolean) => void
189 |
190 | }) {
191 | async function doCreateUserWithEmailAndPassword() {
192 | if (setLoading) setLoading(true);
193 | try {
194 | const userCredential = await createUserWithEmailAndPassword(auth, email, password)
195 | if (userCredential) {
196 | setTimeout(() => {
197 | window.location.reload();
198 | }, 2500);
199 | }
200 | if (setLoading) setLoading(false)
201 | }
202 | catch (error: any) {
203 | setErrorMessage(decodeFirebaseError({ errorCode: error.code }))
204 | if (setLoading) setLoading(false)
205 | }
206 | }
207 | return {children}
208 | }
209 |
210 | export function ProfileButton({ size = 30, positions = ["bottom", "left", "right", "top"] }: { size?: number, positions?: PopoverPosition[] }) {
211 | const [isPopoverOpen, setIsPopoverOpen] = useState(false);
212 | const { currentUser } = getUserCS();
213 |
214 | if (!currentUser) return ;
215 |
216 | return setIsPopoverOpen(!isPopoverOpen)}>
219 |
221 |
260 |
274 |
275 |
280 |
281 | };
--------------------------------------------------------------------------------
/client/getFirebaseErrors.ts:
--------------------------------------------------------------------------------
1 | export function decodeFirebaseError({ errorCode }: {errorCode: string}) {
2 | if (errorCode == "auth/invalid-email") return "Invalid Email Address"
3 | if (errorCode == "auth/user-disabled") return "User Account Disabled"
4 | if (errorCode == "auth/user-not-found") return "User Account Not Found"
5 | if (errorCode == "auth/wrong-password") return "Incorrect Password"
6 | if (errorCode == "auth/missing-password") return "Please Enter a Password"
7 | if (errorCode == "auth/email-already-in-use") return "Email already in use. Please login with Google"
8 | if (errorCode == "auth/weak-password") return "Weak Password"
9 | if (errorCode == "auth/operation-not-allowed") return "Operation Not Allowed"
10 | if (errorCode == "auth/credential-already-in-use") return "Credential Already in Use"
11 | if (errorCode == "auth/account-exists-with-different-credential") return "Account Exists with Different Credential"
12 | if (errorCode == "auth/invalid-credential") return "Invalid Credential"
13 | if (errorCode == "auth/invalid-verification-code") return "Invalid Verification Code"
14 | return "Unable to login. Please try again."
15 | }
--------------------------------------------------------------------------------
/dist/authpages/forgot-password/page.jsx:
--------------------------------------------------------------------------------
1 | export default async function ForgotPasswordPage() {
2 | return
261 | 
262 |
273 |
263 | {user?.displayName &&
272 | {user?.displayName}
}
270 | {user?.email}
271 | 274 |
276 |
279 | I tend to forget
3 | }
--------------------------------------------------------------------------------
/dist/authpages/login/page.jsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { getUserCS } from "firebase-nextjs/client/auth"
3 | import { GoogleSignInButton, EmailSignInButton } from "firebase-nextjs/client/components";
4 | import Link from "next/link";
5 | import { useState } from "react";
6 |
7 | export default function LoginPage() {
8 |
9 | const { currentUser } = getUserCS();
10 |
11 | const [email, setEmail] = useState("");
12 | const [password, setPassword] = useState("");
13 | const [errorMessage, setErrorMessage] = useState("");
14 |
15 | const [loading, setLoading] = useState(false);
16 |
17 | function handleChange(e) {
18 | if (e.target.type === "email") setEmail(e.target.value);
19 | if (e.target.type === "password") setPassword(e.target.value);
20 | setErrorMessage("")
21 | }
22 |
23 | return
24 |
60 | }
61 |
62 | function GoogleLogo({ height = 24, width = 24, ...props }) {
63 | return
64 | }
65 |
66 | function Spinner({ className }) {
67 | return
25 |
59 |
26 | {!currentUser ? <>
27 |
38 |
41 |
42 |
48 |
52 |
53 | :
55 | Sign in to Your App
28 |Sign in to access your Awesome New Tool
29 | 30 | 31 | { 32 | errorMessage != "" && 33 | 34 | {errorMessage} 35 | 36 | } 37 |
43 |
44 |
47 | or
45 | 46 |New here?
56 | Sign Up
57 |
58 |
68 |
69 | }
--------------------------------------------------------------------------------
/dist/authpages/register/page.jsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { getUserCS } from "firebase-nextjs/client/auth"
3 | import { GoogleSignInButton, EmailSignUpButton } from "firebase-nextjs/client/components";
4 | import Link from "next/link";
5 | import { useState } from "react";
6 |
7 | export default function LoginPage() {
8 |
9 | const { currentUser } = getUserCS();
10 |
11 | const [email, setEmail] = useState("");
12 | const [password, setPassword] = useState("");
13 | const [errorMessage, setErrorMessage] = useState("");
14 |
15 | const [loading, setLoading] = useState(false);
16 |
17 | function handleChange(e) {
18 | if (e.target.type === "email") setEmail(e.target.value);
19 | if (e.target.type === "password") setPassword(e.target.value);
20 | setErrorMessage("")
21 | }
22 |
23 | return
24 |
60 | }
61 |
62 | function GoogleLogo({ height = 24, width = 24, ...props }) {
63 | return
64 | }
65 |
66 | function Spinner({ className }) {
67 | return
25 |
59 |
26 | {!currentUser ? <>
27 |
38 |
41 |
42 |
48 |
52 |
53 | :
55 | Sign Up With Your App
28 |Create an account to access your awesome tool!
29 | 30 | 31 | { 32 | errorMessage != "" && 33 | 34 | {errorMessage} 35 | 36 | } 37 |
43 |
44 |
47 | or
45 | 46 |Existing user?
56 | Sign in
57 |
58 |
68 |
69 | }
--------------------------------------------------------------------------------
/dist/middleware.js:
--------------------------------------------------------------------------------
1 | import FirebaseNextJSMiddleware from "firebase-nextjs/middleware/firebase-nextjs-middleware";
2 |
3 | const options = {
4 | allowRule: "^\/_next\/|\/__\/auth\/.*" // Allow paths under /_next/ and /__/auth/ (for firebase auth) publically.
5 | }
6 |
7 | export default function middleware(req) {
8 | return FirebaseNextJSMiddleware({ req, options });
9 | }
--------------------------------------------------------------------------------
/firebasenextjs-firebase.ts:
--------------------------------------------------------------------------------
1 | import { getApps, initializeApp } from "firebase/app";
2 | import { getAuth } from "firebase/auth";
3 |
4 | //@ts-ignore
5 | import { firebaseConfig } from "/firebase-app-config";
6 |
7 | const app = initializeApp(firebaseConfig);
8 | const auth = getAuth(app)
9 |
10 | export function getApp() {
11 | if (getApps().length === 0) {
12 | return initializeApp(firebaseConfig);
13 | }
14 | else {
15 | return getApps()[0];
16 | }
17 | }
18 |
19 | export { app, auth };
--------------------------------------------------------------------------------
/middleware/check-user.js:
--------------------------------------------------------------------------------
1 | import { cookies } from "next/headers";
2 | import { jwtDecode } from "jwt-decode";
3 | import { firebaseConfig } from "/firebase-app-config";
4 |
5 | const google_cert_urls = [
6 | "https://www.googleapis.com/identitytoolkit/v3/relyingparty/publicKeys",
7 | "https://www.googleapis.com/robot/v1/metadata/x509/securetoken@system.gserviceaccount.com"]
8 | export default async function checkUser() {
9 | const cookieStore = cookies();
10 | const token = cookieStore.get("firebase_nextjs_token")?.value;
11 | if (!token) {
12 | return false;
13 | }
14 | var headers;
15 | var body
16 | try {
17 | headers = jwtDecode(token, { header: true });
18 | body = jwtDecode(token);
19 | }
20 | catch (e) {
21 | console.warn("INVALID JSON")
22 | return false;
23 | }
24 | const keys = await getGoogleKeys()
25 | if (!(keys.includes(headers.kid))) {
26 | console.warn("INVALID JSON : KID NOT MATCH")
27 | return false;
28 | }
29 | const current_time = Math.floor(Date.now() / 1000);
30 | if (body.exp < current_time) {
31 | console.warn("TOKEN EXPIRED")
32 | return false;
33 | }
34 | if (body.iat > current_time) {
35 | console.warn("TOKEN ISSUED IN FUTURE")
36 | return false;
37 | }
38 | const projectId = firebaseConfig.projectId;
39 | if (body.aud != projectId) {
40 | console.warn("INVALID AUDIENCE")
41 | return false;
42 | }
43 | if (body.iss != "https://session.firebase.google.com/" + projectId && body.iss != "https://securetoken.google.com/" + projectId) {
44 | console.warn("INVALID ISSUER")
45 | return false;
46 | }
47 | if (body.sub == undefined) {
48 | console.warn("INVALID SUBJECT")
49 | return false;
50 | }
51 | if (body.auth_time > current_time) {
52 | console.warn("INVALID AUTH TIME")
53 | return false;
54 | }
55 | return true
56 |
57 | }
58 |
59 | async function getGoogleKeys() {
60 | const responses = google_cert_urls.map(async (url) => {
61 | const res = await fetch(url);
62 | return res.json();
63 | });
64 | const body = await Promise.all(responses);
65 | return (Object.keys(body[0]).concat(Object.keys(body[1])));
66 | }
--------------------------------------------------------------------------------
/middleware/firebase-nextjs-middleware.js:
--------------------------------------------------------------------------------
1 | import { NextResponse } from 'next/server';
2 | import checkUser from './check-user';
3 |
4 | const AUTH_PATHS = [
5 | "/login",
6 | "/register",
7 | "/forgot-password"
8 | ]
9 |
10 | export default async function FirebaseNextJSMiddleware({ req, middleware = undefined, options = {} }) {
11 | const path = req.nextUrl.pathname;
12 | const loggedIn = await checkUser();
13 | middleware = middleware ?? ((req) => { return NextResponse.next() });
14 |
15 | // If user is already logged in, and tries an auth page
16 | // Redirect to the target page
17 | if (loggedIn && AUTH_PATHS.includes(path)) {
18 | const target = req.nextUrl.searchParams.get('target') ?? "/";
19 | return NextResponse.redirect(new URL(target, req.nextUrl));
20 | }
21 |
22 | // Requesting an auth page.
23 | // These are special routes handled by FirebaseNextJS auth.
24 | if (AUTH_PATHS.includes(path)) {
25 | return NextResponse.next()
26 | }
27 |
28 | // If a regex rule is defined in allowRule, allow the path if it matches
29 | // Every other form of rule specification is ignored.
30 | if (options.allowRule != undefined) {
31 | const rule = new RegExp(options.allowRule)
32 | if (rule.test(path)) {
33 | return middleware(req)
34 | }
35 | else {
36 | if (loggedIn) {
37 | return middleware(req)
38 | }
39 | return NextResponse.redirect(new URL('/login?target=' + path, req.nextUrl));
40 | }
41 | }
42 |
43 | if (options.gateMode == "allowByDefault") {
44 | // Routes will be allowed by default
45 | // Routes in privatePaths will be denied for unauthenticated users
46 | if (options.privatePaths.includes(path) && !loggedIn) {
47 | return NextResponse.redirect(new URL('/login?target=' + path, req.nextUrl));
48 | }
49 | return middleware(req)
50 | }
51 | // Routes will be denied by default
52 | // Routes in publicPaths will be allowed for unauthenticated users
53 | if (options.publicPaths.includes(path) || loggedIn) {
54 | return middleware(req)
55 | }
56 | return NextResponse.redirect(new URL('/login?target=' + path, req.nextUrl));
57 | }
58 |
59 | export const config = {
60 | matcher: '/login',
61 | };
62 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "firebase-nextjs",
3 | "version": "1.7.5",
4 | "description": "Connect Next.js with Firebase Authentication.",
5 | "private": true,
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "clean": "rimraf build",
9 | "copy-files": "npm run clean && copyfiles '**/*' build/ -e 'node_modules/**/*' -e 'utilities/**/*' -e 'firebase-app-config.js' -e 'firebase-service-account.json'",
10 | "prepare-package": "npm run create-symlink && node utilities/preparePackage.mjs",
11 | "create-symlink": "node utilities/createSymlink.mjs",
12 | "delete-symlink": "node utilities/deleteSymlink.mjs",
13 | "build": "npm run copy-files && npm run prepare-package && cd build && tsc && cd .. && npm run delete-symlink",
14 | "autopublish": "npm i && npm run build && cd build && npm publish"
15 | },
16 | "repository": {
17 | "type": "git",
18 | "url": "git+https://github.com/NirmalScaria/firebase-nextjs.git"
19 | },
20 | "bin": "./scripts/index.mjs",
21 | "keywords": [
22 | "nextjs",
23 | "firebase",
24 | "authentication",
25 | "integration",
26 | "nextfire"
27 | ],
28 | "author": "Nirmal Scaria