Next.js OAuth/Firebase Starter Kit

AboutDeveloperUI?

Kickstart Your Next.js Journey with OAuth and Firebase

Welcome to your Next.js app, pre-equipped with NextAuth.js and Firebase for seamless authentication. Follow the outlined steps to effortlessly set up your project. If you're new to any part of the process, dive into the detailed step-by-step guides by clicking on the respective steps card.

Get Started!

Step 1: Set up Google Cloud Account

Follow these steps to create a Google Cloud account and set up your project for this Next.js app:

  1. Create a Google Cloud account at Google Cloud Console.
  2. Set up a new project for your Next.js app.
  3. Generate API keys and credentials for Firebase authentication.

For detailed instructions, refer to the Google Cloud Getting Started Guide.

Step 2: Set up Firebase Project

Now, let's set up a Firebase project to use as the backend for your Next.js app:

  1. Create a Firebase account at Firebase Console.
  2. Add a new project and configure Firebase for web applications.
  3. Retrieve the Firebase config settings, including the apiKey, authDomain, projectId, and storageBucket.

Refer to the Firebase Web Setup Guide for detailed instructions.

Step 3: Set up env files and firebase.ts

Configure environment files and create a firebase.ts file to manage Firebase settings:

  1. Create a .env file in your project root with 
    cp .env.example .env

  2. Create a firebase.ts file 
    cp .firebase.ts.example .firebase.ts

    Replace the placholder values with your newly setup google cloud and firebase configs.

View the Next.js Environment Variables documentation for details on setting up environment variables.

Step 4: Customize and Develop Your App

Congratulations on completing the initial setup! Now it's time to customize the starter files and start developing your Next.js app.

  1. Feel free to tailor the page.tsx file in your app directory to match your project requirements.
  2. You have the flexibility to either remove or build upon the pre-made route folders. I've included about, protected, and step folders to kickstart your development.

Step 5: Deploy Your Next.js App to Vercel

You're almost there! Let's deploy your Next.js app to Vercel and make it live for the world to see.

Prerequisites:

Deployment Steps:

  1. Install the Vercel CLI by running:
    npm install -g vercel
  2. Deploy to production by running: 
    vercel --prod
  3. Import environment variables on vercel

Congratulations! Your Next.js app is now live on the internet. Share the provided URL with the world.