/next-fire-auth

Auth template

Primary LanguageTypeScript

Next-Fire-Auth 🔥

Demo Here: Next-Fire-Auth

Try Logging with the following

Email Address: user@gmail.com
Password: test@12345

Steps

Why Next Fire Auth

Starting a new project that involves using Firebase for authentication can be time-consuming and tedious, as it requires setting up various features and functionality such as routes, protected routes, login and register components, styling, and form validation. These tasks can be particularly frustrating if they need to be set up from scratch every time a new project is started.

Here is Next-Fire-Auth template for you.

I have used latest NextJs version 13, with latest routing method and focus on Server Components. You will find all pages in /app/ directory

Technologies used

  1. Next v13
  2. Firebase v9
  3. Tailwind CSS v3
  4. Reactjs v18
  5. Typescipt
  6. React-Firebase-Hooks

Features

  1. Email Password Authetication & Google Authetication
  2. Forgot Password Feature
  3. Login & SignUp forms validations
  4. NextJs 13 routing

Quick Start

git clone https://github.com/hrushikedar33/next-fire-auth my-project
yarn

Make sure you replace my-project with your own project name

If you don't have yarn installed 

npm i

Remove yarn.lock as you will already have package.lock

  1. Go to Firebase console. Add Project. In project overview, click on the web icon and register the app. You will see firebaseConfig object, We will require its details further. Click on Authetication, then on set up sign-in method. Enable Email/password authentication & google authentication.
  2. Create a .env.local file in your project's root. Example of .env.local file is given below. Make sure you replace YOUR_FIREBASE_CONSOLE_DETAILS with your firebaseConfig object details.
NEXT_PUBLIC_API_KEY=YOUR_FIREBASE_CONSOLE_DETAILS
NEXT_PUBLIC_AUTH_DOMAIN=YOUR_FIREBASE_CONSOLE_DETAILS
NEXT_PUBLIC_PROJECT_ID=YOUR_FIREBASE_CONSOLE_DETAILS
NEXT_PUBLIC_STORAGE_BUCKET=YOUR_FIREBASE_CONSOLE_DETAILS
NEXT_PUBLIC_MESSAGING_SENDER_ID=YOUR_FIREBASE_CONSOLE_DETAILS
NEXT_PUBLIC_APP_ID=YOUR_FIREBASE_CONSOLE_DETAILS
  1. That's It ! Finally run the application
yarn dev # OR npm run dev

Documentation

Pages

Location: /app/

  • Home Page
  • Login Page
  • Sign Up Page
  • Forgot Password Page
  • Profile Page - Auth Required

Helpers

  • Global CSS will be found /style/globals.css
  • Firebase configuration will be found in /config/firebase.ts
  • Loading in /components/Loading.tsx - Loading spinner

Recommended IDE Setup