• Demo
• Thread on "What went into this project"

Server-Side User Management with

• GraphQL (Tutorial) and Firebase (Tutorial)
  • Sign In
  • Sign Up
  • Sign Out
  • Email Change
  • 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)

Sentry

More Features

• Discounts with Coupons
• Affiliate Marketing with Partner Program

• git clone [email protected]:rwieruch/nextjs-firebase-authentication.git
• cd nextjs-firebase-authentication
• See other installation instructions below ...
• npm install
• npm run dev
• Visit http://localhost:3000/

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=
FIREBASE_AUTH_DOMAIN=
FIREBASE_DATABASE_URL=
FIREBASE_PROJECT_ID=
FIREBASE_STORAGE_BUCKET=
FIREBASE_MESSAGING_SENDER_ID=
FIREBASE_APP_ID=

PAYPAL_CLIENT_ID=
PAYPAL_CLIENT_SECRET=

STRIPE_CLIENT_ID=
STRIPE_CLIENT_SECRET=
STRIPE_WEBHOOK_SECRET=

COUPON_SALT=
COUPON_URL=
FIREBASE_ADMIN_UID=

SENTRY_DSN=

REVUE_TOKEN=

SLACK_TOKEN=

CONVERTKIT_API_KEY=
CONVERTKIT_FORM_ID=

S3_ENDPOINT=
S3_ACCESS_KEY_ID=
S3_SECRET_ACCESS_KEY=
S3_BUCKET=

DATABASE_TYPE=
DATABASE_HOST=
DATABASE_PORT=
DATABASE_USERNAME=
DATABASE_PASSWORD=
DATABASE_NAME=
DATABASE_SSL_CERTIFICATE=

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

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.

If you want to have an account with Firebase admin claims, create this Firebase account first via UI, then set the user account's uid in .env with FIREBASE_ADMIN_UID, and restart your server.

Stripe CLI

stripe login
# follow instructions
stripe listen --forward-to localhost:3000/api/stripe-webhook
# copy and paste secret

The secret can be used in .env:

STRIPE_WEBHOOK_SECRET=secret

Then fake a request with Stripe CLI stripe payment_intents create --amount=100 --currency=usd will work. Make sure the application is running too. Or use the web application's Stripe Checkout feature for real.