Aug 21, 2024vs code next.js firebase react

Project setup

Life's a garden. Dig it.

Detailed Setup Guide

See my detailed setup guide for Firebase and Next.js here ->

To understand Firebase auth, we need a toy project to tinker with. I'll keep it pretty bare-bones for now. I'll call this project fireauth.

Here's the gist...

Initialize a Next.js project with create-next-app.
Initialize Firebase services: Firestore, Functions, and Emulator using firebase init from the Firebase CLI.
Initialize the firebase app inside a firebase.js file, as explained here.

View the GitHub repo at this stage ->

Here's an overview of the project structure and files involved 👇

fireauth
├── .env.production
├── .firebaserc
├── .git
│   └── ...
├── .gitignore
├── .vscode
│   ├── settings.json
│   └── tasks.json
├── README.md
├── firebase.json
├── firestore-debug.log
├── firestore.indexes.json
├── firestore.rules
├── functions
│   ├── .gitignore
│   ├── index.js
│   ├── package-lock.json
│   └── package.json
├── jsconfig.json
├── next.config.mjs
├── package-lock.json
├── package.json
├── src
│   ├── app
│   │   ├── layout.js
│   │   └── page.js
│   └── firebase
│       └── firebase.js
└── ui-debug.log

# Development settings and API keys go here
# This file should not be tracked by git
 
### Firebase keys
NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSyRUHG9ZP-vUWBqkPU5I
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=fireauth.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=fireauth
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=fireauth.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=156895892077
NEXT_PUBLIC_FIREBASE_APP_ID=1:1569792077:web:7263700fbcb18fa02564

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

export default function HomePage() {
  return <div>Home page</div>
}

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app"
import { connectAuthEmulator, getAuth } from "firebase/auth"
import { connectFirestoreEmulator, getFirestore } from "firebase/firestore"
import { connectFunctionsEmulator, getFunctions } from "firebase/functions"
 
// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
}
 
// Initialize Firebase
const app = initializeApp(firebaseConfig)
 
// Instantiate services
export const auth = getAuth(app)
export const db = getFirestore(app)
export const functions = getFunctions(app)
 
// Emulator
if (process.env.NODE_ENV == "development") {
  connectAuthEmulator(auth, "http://127.0.0.1:9099")
  connectFunctionsEmulator(functions, "127.0.0.1", 5001)
  connectFirestoreEmulator(db, "127.0.0.1", 8080)
}

At this point, you should be able to start the Next.js application with the shell command

$ npm run dev

Run this from the working directory: fireauth/

And you should be able to start the Firebase Emulator services with the shell command

$ firebase emulators:start --debug

If you open your browser and go to http://localhost:3000/ you should see (very simple) home page.

Home page