Setting Up Firebase
Firebase is a Backend-as-a-Service (BaaS) built on Google Cloud. It's an excellent way to build and grow applications. Firebase's interface is easy to navigate, and it has a generous free tier. Firebase (Firestore) is categorized as a NoSQL database, which stores data in JSON-like documents.
We'll utilize two features of Firebase in this course.
- Authentication – In this application, we will require logging in with a social media account. Firebase Authentication makes it easy to add login support for Google, GitHub, and more.
- Database – Firestore will allow us to easily save information about users, pages, and more.
- If you do not have a Firebase account, create one first.
- Create a new project.
- Navigate to Firestore Database and click Create Database.
- Start in test mode and click Next.
- Choose your database location and click Enable.
Success! You've just created your Firestore database. Now, let's save our credentials.
- In the top left, click Project Settings.
- Under Your apps, click web.
- Add a nickname for your app and click Register app.
- Save the
firebaseConfigobject and click Continue to console.
- Navigate to the Service Accounts tab and click Generate new private key. Save the
We can now connect to our Firebase account from both the client-side and server-side. You'll need these values in the next section when we're creating environment variables.
To start, let's focus on GitHub for social authentication. Later, we can add more providers. First, we need to create a GitHub OAuth Application.
Enable GitHub Sign-In
- Inside the Firebase Console, click Authentication.
- Click the Sign-in method tab.
- Click GitHub and toggle the switch to enable.
- Copy the callback URL.
Create GitHub OAuth App
- Start here.
- In Application name, type the name of your app.
- In Homepage URL, type the full URL to your app's website. If you don't have a URL yet, you can use a valid placeholder URL.
- Optionally, in Description, type a description of your app that users will see.
- In Authorization callback URL, paste in the URL from the Firebase Console.
- Click Register application.
- Copy Client ID and Client secret.
- Return to the Firebase Console
- Paste Client ID and Client secret.
- Click Save.
Add Authorized Domains
localhost is an authorized domain. As we deploy Firebase to production, we'll want to also add our domain to the list so we can log in.
- Underneath the Sign-in providers, click Add domain.
- Enter in the production URL for your application (e.g. fastfeedback.io)
- Enter in the URL for your Vercel preview deploys ->
- Click Add.