Next.js Starter

• Demo

Server-Side User 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 Authorization and Firebase Session

Payment with

• Stripe
• PayPal

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 git@github.com:rwieruch/nextjs-firebase-authentication.git
• cd nextjs-firebase-authentication
• See other installation instructions below ...
• npm install
• npm run dev
• Visit http://localhost:3000/

.env file

Create a .env file. If using git, add it to your .gitignore file.

Values may differ for development and production:

BASE_URL=http://localhost:3000

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

PAYPAL_CLIENT_ID=xxx
PAYPAL_CLIENT_SECRET=xxx

STRIPE_CLIENT_ID=pk_test_xxx
STRIPE_CLIENT_SECRET=sk_test_xxx
STRIPE_WEBHOOK_SECRET=xxx

• FIREBASE
  • Activate Email/Password Sign-In Method for your Firebase Project
• PAYPAL
  • Checkout
• STRIPE
  • Checkout
  • Webhook

.firebaseServiceAccountKey.json file

Visit here for Firebase Admin SDK and generate a firebaseServiceAccountKey.json file from there which should be in your project's root folder. If using git, add it to your .gitignore file.

Stripe CLI for Webhook in Development Mode

Stripe CLI

stripe login
stripe listen --forward-to localhost:3000/api/stripe-webhook

Generates a secret which can be used in .env:

STRIPE_WEBHOOK_SECRET=secret

Then fake a request with Stripe CLI stripe payment_intents create --amount=100 --currency=usd or use the web application's Stripe Checkout feature.