Next.js Starter

• Demo

Server-Side User Authentication and Management with

• GraphQL (Tutorial) and Firebase (Tutorial)
  • Sign In
  • Sign Up
  • Sign Out
  • Password Change
  • Password Reset

Client and Server-Side Protected Routes with

• Next.js and Firebase

Styling with

• Ant Design
• Styled Components (Tutorial)
• Page Transitions

Type Support with

• TypeScript

Tested Code Base with

• Jest (Tutorial)
• React Testing Library
• Apollo Mocks

Environment Variables with

• Dotenv

Absolute Imports with

• Babel Module Resolver (Tutorial)

Installation

• git clone [email protected]:rwieruch/nextjs-firebase-authentication.git
• cd nextjs-firebase-authentication
• See: "Use your own Firebase Credentials"
• npm install
• npm run dev
• Visit http://localhost:3000/

Use your own Firebase Credentials

• Visit https://firebase.google.com/ and create a Firebase App

• Create a .env file to store your Firebase Credentials like so:

  FIREBASE_API_KEY=apiKey
  FIREBASE_AUTH_DOMAIN=authDomain
  FIREBASE_DATABASE_URL=databaseURL
  FIREBASE_PROJECT_ID=projectID
  FIREBASE_STORAGE_BUCKET=storageBucket
  FIREBASE_MESSAGING_SENDER_ID=messagingSenderId
  FIREBASE_APP_ID=appId
  

• Activate Email/Password Sign-In Method in your Firebase App

• Visit https://firebase.google.com/docs/admin/setup/#initialize-sdk for Firebase Admin SDK and generate a firebaseServiceAccountKey.json file from there which should be in your project's root folder.

Important: It is advised to add .env and firebaseServiceAccountKey.json to your .gitignore