Nextjs Firebase Authentication

screenshot of Nextjs Firebase Authentication
nextjs
react
less
styled-components
ant-design
firebase

Nextjs Firebase Authentication

Next.js + Firebase Starter

Overview:

The My Course Platform is a comprehensive course management system that offers a range of features for instructors and students. It includes server-side user management with GraphQL and Firebase, as well as various authentication features such as sign in, sign up, and password reset. The platform also supports payment integration with Stripe and PayPal, and allows for extensive customization and styling through Ant Design and styled components. Additionally, it offers features such as page transitions, type support with TypeScript, and a tested code base with Jest. The platform also includes various installation requirements and instructions for proper setup.

Features:

  • Server-Side User Management with GraphQL and Firebase
  • Sign In, Sign Up, and Sign Out functionality
  • Email Change and Password Change options
  • Password Reset functionality
  • Client and Server-Side Protected Routes with Next.js Authorization and Firebase Session
  • Payment integration with Stripe and PayPal
  • Custom styling options with Ant Design and Styled Components
  • Page Transitions
  • Type Support with TypeScript
  • Tested Code Base with Jest
  • React Testing Library
  • Apollo Mocks
  • Environment Variables with Dotenv
  • Absolute Imports with Babel Module Resolver
  • Sentry for error monitoring
  • Additional Features: Discounts with Coupons, Affiliate Marketing with Partner Program

Installation:

To install the My Course Platform, follow the steps below:

  1. Clone the repository: git clone git@github.com:rwieruch/nextjs-firebase-authentication.git
  2. Change directory to the cloned repository: cd nextjs-firebase-authentication
  3. Install all dependencies using Yarn: yarn install
  4. Run the development server: yarn run dev
  5. Visit http://localhost:3000/ in your browser.
  6. Create a .env file in the root folder of your project. If using git, add it to your .gitignore file.
  7. Set the following values in the .env file (values may differ for development and production):
    • FIREBASE: Activate Email/Password Sign-In Method for your Firebase Project
    • PAYPAL: Checkout
    • STRIPE: Checkout
    • Webhook.firebaseServiceAccountKey.json: Visit the Firebase Admin SDK and generate a firebaseServiceAccountKey.json file, which should be placed in your project's root folder. If using git, add it to your .gitignore file.
  8. 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.
  9. If using Stripe, you can use the Stripe CLI for Webhook in Development Mode. The secret can be used in .env.
  10. To test Stripe integration, you can fake a request with Stripe CLI: stripe payment_intents create --amount=100 --currency=usd. Make sure the application is running. Alternatively, you can use the web application's Stripe Checkout feature for real payments.

Summary:

The My Course Platform is a feature-rich course management system that offers server-side user management, authentication, payment integration, and extensive customization options. With its comprehensive set of features and detailed installation guide, the platform provides a robust solution for managing and delivering online courses.

nextjs
Next.js

Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

less
LESS

Less CSS is a dynamic stylesheet language that extends the capabilities of CSS, allowing developers to write cleaner, more modular, and reusable stylesheets with features like variables, mixins, and nested rules.

styled-components
Styled Components

Styled Components is a popular library for styling React components using CSS syntax. It allows you to write CSS in your JavaScript code, making it easier to create dynamic styles that are specific to each component.

ant-design
Ant Design

Ant Design is a React UI library that provides a set of pre-designed components and design resources for building high-quality, responsive web applications.

firebase
Firebase

Firebase offers a comprehensive set of features, including real-time database, authentication, hosting, cloud functions, storage, and more. Firebase provides an easy-to-use interface and allows developers to focus on building features rather than managing infrastructure.

apollo
Apollo

Apollo is an open-source platform for building GraphQL APIs that connects with any data source. It provides a powerful set of tools and features for developers, including client and server-side caching, real-time data synchronization, and a seamless integration with popular frontend frameworks.

graphql
Graphql

A website that uses GraphQL as a query language to manage data fetching and state management. This includes features such as a strongly typed schema, client-side caching, and declarative data fetching to streamline data management and optimize website performance.

mdx
MDX

MDX is a format that allows developers to write JSX within Markdown documents, combining the power of React with the simplicity of Markdown. This allows for the creation of dynamic and interactive content that can be easily shared and consumed across different platforms and devices.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.