├── .env.example
├── .github
└── FUNDING.yml
├── .gitignore
├── README.md
├── components
├── auth
│ └── FirebaseAuth.js
├── cloudFirestore
│ ├── Read.js
│ └── Write.js
├── realtimeDatabase
│ └── Counter.js
└── storage
│ └── UploadFile.js
├── jsconfig.json
├── lib
└── firebase
│ ├── firebaseAdmin.js
│ ├── initFirebase.js
│ ├── mapUserData.js
│ ├── useUser.js
│ └── userCookies.js
├── next.config.js
├── package.json
├── pages
├── _app.js
├── api
│ ├── fetchCount.js
│ ├── hello.js
│ └── incrementCount.js
├── auth.js
└── index.js
├── public
├── favicon.ico
├── readme-img.png
└── vercel.svg
├── styles
├── Home.module.css
└── globals.css
└── yarn.lock
/.env.example:
--------------------------------------------------------------------------------
1 | NEXT_PUBLIC_FIREBASE_API_KEY=
2 | NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
3 | NEXT_PUBLIC_FIREBASE_DATABASE_URL=
4 | NEXT_PUBLIC_FIREBASE_PROJECT_ID=
5 | NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
6 | NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
7 | NEXT_PUBLIC_FIREBASE_APP_ID=
8 |
9 | # for firebase-admin
10 | FIREBASE_CLIENT_EMAIL=
11 | FIREBASE_PRIVATE_KEY=
--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 |
3 | github: bjcarlson42
4 | patreon: # Replace with a single Patreon username
5 | open_collective: # Replace with a single Open Collective username
6 | ko_fi: # Replace with a single Ko-fi username
7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
13 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 |
21 | # debug
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 |
26 | # local env files
27 | .env.local
28 | .env.development.local
29 | .env.test.local
30 | .env.production.local
31 | .env
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Next.JS With Firebase Boiler Plate
2 |
3 | 
4 |
5 | This repo is a sample [next.js](https://nextjs.org/) project with [Firebase](https://firebase.google.com/) integration. I used `yarn create next-app` to bootstrap the project and I did not remove any of the starter files. Feel free to follow along with the YouTube tutorial [here](TODO) and check out the live website hosted on [Vercel](https://vercel.com/) [here](TODO).
6 |
7 |
8 | This repo contains the followng actions implemented:
9 |
10 | - Authentication
11 | - popup auth flow
12 | - email + password
13 | - Google OAuth
14 | - Twitter OAuth
15 | - GitHub OAuth
16 | - Cloud Firestore
17 | - read (examples for all availible data types)
18 | - write
19 | - Realtime Database
20 | - read
21 | - write
22 | - Storage
23 | - Uploade a file (video, image, etc)
24 | - React Bootstrap
25 | - React Bootstrap installed with minimal styling
26 |
27 | This is not meant to be a tutorial on how to use next.js or Firebase, but simply how to connect the two and perform common actions. As always, refer to the docs whenever you might have questions:
28 |
29 | - [next.js](https://nextjs.org/docs/getting-started)
30 | - [Firebase](https://firebase.google.com/docs/build)
31 |
32 | This is compatable with next.js v10+ and Firebase JavaScript v8+, which are currently the newest versions. May work with older versions.
--------------------------------------------------------------------------------
/components/auth/FirebaseAuth.js:
--------------------------------------------------------------------------------
1 | import { initFirebase } from '@/lib/firebase/initFirebase'
2 | import { useEffect, useState } from 'react'
3 | import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth'
4 | import {
5 | getAuth,
6 | GoogleAuthProvider,
7 | TwitterAuthProvider,
8 | GithubAuthProvider,
9 | EmailAuthProvider
10 | } from "firebase/auth";
11 | import { setUserCookie } from '@/lib/firebase/userCookies'
12 | import { mapUserData } from '@/lib/firebase/mapUserData'
13 |
14 | initFirebase() // initialize firebase
15 |
16 | const auth = getAuth()
17 |
18 | const firebaseAuthConfig = {
19 | signInFlow: 'popup',
20 | // Auth providers
21 | // https://github.com/firebase/firebaseui-web#configure-oauth-providers
22 | signInOptions: [
23 | {
24 | provider: EmailAuthProvider.PROVIDER_ID,
25 | requireDisplayName: true,
26 | },
27 | // add additional auth flows below
28 | GoogleAuthProvider.PROVIDER_ID,
29 | TwitterAuthProvider.PROVIDER_ID,
30 | GithubAuthProvider.PROVIDER_ID,
31 | ],
32 | signInSuccessUrl: '/',
33 | credentialHelper: 'none',
34 | callbacks: {
35 | signInSuccessWithAuthResult: async ({ user }, redirectUrl) => {
36 | const userData = mapUserData(user)
37 | setUserCookie(userData)
38 | },
39 | },
40 | }
41 |
42 | const FirebaseAuth = () => {
43 | // Do not SSR FirebaseUI, because it is not supported.
44 | // https://github.com/firebase/firebaseui-web/issues/213
45 | const [renderAuth, setRenderAuth] = useState(false)
46 | useEffect(() => {
47 | if (typeof window !== 'undefined') {
48 | setRenderAuth(true)
49 | }
50 | }, [])
51 | return (
52 |
53 | {renderAuth ? (
54 |
58 | ) : null}
59 |
60 | )
61 | }
62 |
63 | export default FirebaseAuth
--------------------------------------------------------------------------------
/components/cloudFirestore/Read.js:
--------------------------------------------------------------------------------
1 | import { db } from '@/lib/firebase/initFirebase'
2 | import { doc, getDoc } from "firebase/firestore"
3 | import { useUser } from '@/lib/firebase/useUser'
4 | import Button from 'react-bootstrap/Button'
5 |
6 | const ReadDataFromCloudFirestore = () => {
7 | const { user } = useUser()
8 | const readData = async () => {
9 | try {
10 | const userDoc = doc(db, "myCollection", user.id)
11 | await getDoc(userDoc).then((doc) => {
12 | if (doc.exists()) {
13 | console.log(doc.data())
14 | }
15 | })
16 | alert('Data was successfully fetched from cloud firestore! Close this alert and check console for output.')
17 | } catch (error) {
18 | console.log(error)
19 | alert(error)
20 | }
21 | }
22 |
23 | return (
24 |
25 |
26 |
27 | )
28 | }
29 |
30 | export default ReadDataFromCloudFirestore
--------------------------------------------------------------------------------
/components/cloudFirestore/Write.js:
--------------------------------------------------------------------------------
1 | import { db } from '@/lib/firebase/initFirebase'
2 | import { doc, setDoc, Timestamp, GeoPoint } from "firebase/firestore"
3 | import { useUser } from '@/lib/firebase/useUser'
4 | import Button from 'react-bootstrap/Button'
5 |
6 | const WriteToCloudFirestore = () => {
7 | const { user } = useUser()
8 | const sendData = async () => {
9 | try {
10 | const userDoc = doc(db, "myCollection", user.id)
11 | await setDoc(userDoc, {
12 | string_data: 'Benjamin Carlson',
13 | number_data: 2,
14 | boolean_data: true,
15 | map_data: { stringInMap: 'Hi', numberInMap: 7 },
16 | array_data: ['text', 4],
17 | null_data: null,
18 | time_stamp: Timestamp.fromDate(new Date('December 17, 1995 03:24:00')),
19 | geo_point: new GeoPoint(34.714322, -131.468435)
20 | })
21 | alert('Data was successfully sent to cloud firestore!')
22 | } catch (error) {
23 | console.log(error)
24 | alert(error)
25 | }
26 | }
27 |
28 | return (
29 |
30 |
31 |
32 | )
33 | }
34 |
35 | export default WriteToCloudFirestore
--------------------------------------------------------------------------------
/components/realtimeDatabase/Counter.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react'
2 | import 'firebase/database'
3 | import { realDB } from '@/lib/firebase/initFirebase'
4 | import { ref, onValue, off } from "firebase/database"
5 | import Button from 'react-bootstrap/Button'
6 |
7 | const Counter = ({ id }) => {
8 | const [count, setCount] = useState('')
9 | useEffect(() => {
10 | const onCountIncrease = (count) => setCount(count.val())
11 |
12 | const fetchData = async () => {
13 | const countRef = ref(realDB, "counts/" + id)
14 | onValue(countRef, onCountIncrease)
15 | }
16 |
17 | fetchData()
18 |
19 | return () => {
20 | const countRef = ref(realDB, "counts/" + id)
21 | off(countRef, "value", onCountIncrease)
22 | }
23 | }, [id])
24 |
25 | const increaseCount = async () => {
26 | const registerCount = () => fetch(`/api/incrementCount?id=${encodeURIComponent(id)}`)
27 | registerCount()
28 | }
29 |
30 | return (
31 |
32 |
33 |
{count ? count : '0'}
34 |
35 | )
36 | }
37 |
38 | export default Counter
--------------------------------------------------------------------------------
/components/storage/UploadFile.js:
--------------------------------------------------------------------------------
1 | // to learn how to download a file, get/use file metadata, delete files, and list files see https://firebase.google.com/docs/storage/web/start
2 | import { useRef, useState } from 'react'
3 | import {
4 | getStorage,
5 | ref,
6 | uploadBytesResumable,
7 | } from "firebase/storage";
8 |
9 | const storage = getStorage()
10 |
11 | const UploadFile = () => {
12 | const inputEl = useRef(null)
13 | let [value, setValue] = useState(0)
14 |
15 | function uploadFile() {
16 | // get file
17 | var file = inputEl.current.files[0]
18 |
19 | // create a storage ref
20 | const storageRef = ref(storage, "user_uploads" + file.name)
21 |
22 | // upload file
23 | const task = uploadBytesResumable(storageRef, file)
24 |
25 | // update progress bar
26 | task.on('state_change',
27 |
28 | function progress(snapshot) {
29 | setValue((snapshot.bytesTransferred / snapshot.totalBytes) * 100)
30 | },
31 |
32 | function error(err) {
33 | alert(error)
34 | },
35 |
36 | function complete() {
37 | alert('Uploaded to firebase storage successfully!')
38 | }
39 | )
40 | }
41 |
42 | return (
43 |
52 | )
53 | }
54 |
55 | export default UploadFile
--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "paths": {
5 | "@/components/*": ["components/*"],
6 | "@/lib/*": ["lib/*"]
7 | }
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/lib/firebase/firebaseAdmin.js:
--------------------------------------------------------------------------------
1 | import admin from "firebase-admin";
2 |
3 | export const verifyIdToken = (token) => {
4 | const firebasePrivateKey = process.env.FIREBASE_PRIVATE_KEY
5 |
6 | if (!admin.apps.length) {
7 | admin.initializeApp({
8 | credential: admin.credential.cert({
9 | projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
10 | clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
11 | // https://stackoverflow.com/a/41044630/1332513
12 | privateKey: firebasePrivateKey.replace(/\\n/g, '\n'),
13 | }),
14 | databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
15 | })
16 | }
17 |
18 | return admin
19 | .auth()
20 | .verifyIdToken(token)
21 | .catch((error) => {
22 | throw error
23 | })
24 | }
--------------------------------------------------------------------------------
/lib/firebase/initFirebase.js:
--------------------------------------------------------------------------------
1 | // Modular Firebase v.9 Initialization.
2 | import { initializeApp } from "firebase/app";
3 | import { getFirestore } from "firebase/firestore";
4 | import { getDatabase } from "@firebase/database";
5 |
6 | const clientCredentials = {
7 | apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
8 | authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
9 | projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
10 | storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
11 | messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
12 | appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
13 | };
14 |
15 | function initFirebase() {
16 | if (typeof window !== undefined) {
17 | initializeApp(clientCredentials);
18 | console.log("Firebase has been init successfully");
19 | }
20 | }
21 |
22 | const app = initializeApp(clientCredentials);
23 |
24 | const db = getFirestore(app);
25 |
26 | const realDB = getDatabase(app);
27 |
28 | export { initFirebase, db, realDB };
--------------------------------------------------------------------------------
/lib/firebase/mapUserData.js:
--------------------------------------------------------------------------------
1 | export const mapUserData = (user) => {
2 | const { uid, email, xa, displayName, photoUrl } = user
3 | return {
4 | id: uid,
5 | email,
6 | token: xa,
7 | name: displayName,
8 | profilePic: photoUrl
9 | }
10 | }
--------------------------------------------------------------------------------
/lib/firebase/useUser.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react'
2 | import { useRouter } from 'next/router'
3 | import { initFirebase } from '@/lib/firebase/initFirebase'
4 | import { getAuth } from "firebase/auth";
5 | import {
6 | removeUserCookie,
7 | setUserCookie,
8 | getUserFromCookie,
9 | } from '@/lib/firebase/userCookies'
10 | import { mapUserData } from '@/lib/firebase/mapUserData'
11 |
12 | initFirebase()
13 |
14 | const useUser = () => {
15 | const [user, setUser] = useState()
16 | const router = useRouter()
17 | const auth = getAuth()
18 |
19 | const logout = async () => {
20 | try {
21 | await auth.signOut();
22 | removeUserCookie();
23 | router.push("/auth");
24 | } catch (e) {
25 | console.log(e.message);
26 | }
27 | }
28 |
29 | useEffect(() => {
30 | // Firebase updates the id token every hour, this
31 | // makes sure the react state and the cookie are
32 | // both kept up to date
33 | const cancelAuthListener = auth.onIdTokenChanged((user) => {
34 | if (user) {
35 | const userData = mapUserData(user)
36 | setUserCookie(userData)
37 | setUser(userData)
38 | } else {
39 | removeUserCookie()
40 | setUser()
41 | }
42 | })
43 |
44 | const userFromCookie = getUserFromCookie()
45 | if (!userFromCookie) {
46 | router.push('/')
47 | return
48 | }
49 | setUser(userFromCookie)
50 |
51 | return () => {
52 | cancelAuthListener()
53 | }
54 | }, [])
55 |
56 | return { user, logout }
57 | }
58 |
59 | export { useUser }
60 |
--------------------------------------------------------------------------------
/lib/firebase/userCookies.js:
--------------------------------------------------------------------------------
1 | import cookies from 'js-cookie'
2 |
3 | export const getUserFromCookie = () => {
4 | const cookie = cookies.get('auth')
5 | if (!cookie) {
6 | return
7 | }
8 | return JSON.parse(cookie)
9 | }
10 |
11 | export const setUserCookie = (user) => {
12 | cookies.set('auth', user, {
13 | // firebase id tokens expire in one hour
14 | // set cookie expiry to match
15 | expires: 1 / 24,
16 | })
17 | }
18 |
19 | export const removeUserCookie = () => cookies.remove('auth')
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | reactStrictMode: true,
3 | swcMinify: true,
4 | }
5 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "firebase-with-nextjs",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start"
9 | },
10 | "dependencies": {
11 | "bootstrap": "^4.6.0",
12 | "firebase": "^9.1.3",
13 | "firebase-admin": "^10.0.0",
14 | "js-cookie": "^2.2.1",
15 | "next": "12",
16 | "react": "^17.0.2",
17 | "react-bootstrap": "^1.5.2",
18 | "react-dom": "^17.0.2",
19 | "react-firebaseui": "^6.0.0"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import '../styles/globals.css'
2 | import 'bootstrap/dist/css/bootstrap.min.css'
3 |
4 | function MyApp({ Component, pageProps }) {
5 | return
6 | }
7 |
8 | export default MyApp
9 |
--------------------------------------------------------------------------------
/pages/api/fetchCount.js:
--------------------------------------------------------------------------------
1 | import 'firebase/database'
2 | import { ref, onValue } from 'firebase/database'
3 | import { realDB } from '@/lib/firebase/initFirebase'
4 |
5 | export default (req, res) => {
6 | const dbRef = ref(realDB, "counts/" + req.query.id)
7 |
8 | return onValue(dbRef, (snapshot) => {
9 | res.status(200).json({
10 | total: snapshot.val()
11 | })
12 | }, {
13 | onlyOnce: true
14 | });
15 | }
--------------------------------------------------------------------------------
/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 |
3 | export default (req, res) => {
4 | res.status(200).json({ name: 'John Doe' })
5 | }
6 |
--------------------------------------------------------------------------------
/pages/api/incrementCount.js:
--------------------------------------------------------------------------------
1 | import firebase from 'firebase/app'
2 | import { ref, runTransaction } from 'firebase/database'
3 | import { realDB } from '@/lib/firebase/initFirebase'
4 |
5 | const incrementCount = async (req, res) => {
6 | const dbRef = ref(realDB, "counts/" + req.query.id)
7 |
8 | const { snapshot } = await runTransaction(dbRef, (count) => {
9 | if (count === null) {
10 | return 1
11 | }
12 |
13 | return count + 1
14 | })
15 |
16 | return res.status(200).json({
17 | total: snapshot.val()
18 | })
19 | }
20 |
21 | export default incrementCount
--------------------------------------------------------------------------------
/pages/auth.js:
--------------------------------------------------------------------------------
1 | import FirebaseAuth from '@/components/auth/FirebaseAuth'
2 |
3 | const Auth = () => {
4 | return (
5 |
11 | )
12 | }
13 |
14 | export default Auth
15 |
--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 | import Head from 'next/head'
2 | import styles from '../styles/Home.module.css'
3 | import WriteToCloudFirestore from '@/components/cloudFirestore/Write'
4 | import ReadDataFromCloudFirestore from '@/components/cloudFirestore/Read'
5 | import { useUser } from '@/lib/firebase/useUser'
6 | import Counter from '@/components/realtimeDatabase/Counter'
7 | import UploadFile from '@/components/storage/UploadFile'
8 | import Card from 'react-bootstrap/Card'
9 | import Button from 'react-bootstrap/Button'
10 |
11 | export default function Home() {
12 | const { user, logout } = useUser()
13 |
14 | if (user) {
15 | return (
16 |
17 |
18 |
19 | {user.name}
20 | {user.email}
21 |
22 | {user.profilePic ? : No profile pic
}
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
39 |
45 |
Log In!
46 |
47 |
48 |
Create Next App
49 |
50 |
51 |
52 |
53 |
54 | Welcome to Next.js!
55 |
56 |
57 |
58 | Get started by editing{' '}
59 | pages/index.js
60 |
61 |
62 |
91 |
92 |
93 |
103 |