Adding Firebase Client-Side
Now that we've set up Firebase for authentication and storing data, we need to add it to our application.
Installation
First, we need to install the firebase
client-side SDK.
$ yarn add firebase@7.17.1
This course uses v7.17.1
of Firebase. If you'd prefer to use a later version, please see this issue.
Environment Variables
Next.js comes with built-in support for environment variables. To connect to Firebase, we need to provide our secrets from earlier. We do not want to commit secrets to git, so we should use environment variables.
To add environment variables with Next.js, you need to create an .env
and .env.local
file.
.env
can contain any environment variables. We will commit this file. It's helpful to include this with empty values for secrets to show all the environment variables in use..env.local
will contains our secrets. We do not commit this file.
.env
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
.env.local
NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSyCes_HM5fdsJOU352-asdf253HKsd
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-app-1j324.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-app-1j324
The NEXT_PUBLIC_
prefix makes the secrets available in our client-side Next.js application.
For example, Next.js will replace process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID
with its value your-app-1j324
.
Firebase Client
We can now securely connect to Firebase. Create a new file lib/firebase.js
to initialize the application and establish a connection. We only need to establish the connection once, hence the if
statement.
lib/firebase.js
import firebase from 'firebase/app';import 'firebase/auth';import 'firebase/functions';import 'firebase/firestore';
if (!firebase.apps.length) { firebase.initializeApp({ apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY, authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID });}
export default firebase;