https://github.com/msaaddev/next-firebase-auth-template

⚡️ A Next.js PWA template with firebase user authentication implemented to quickly get you started. Just fork it and use it!
https://github.com/msaaddev/next-firebase-auth-template

firebase firebase-auth nextjs nextjs-firebase nextjs-firebase-auth pwa

Last synced: 9 months ago
JSON representation

⚡️ A Next.js PWA template with firebase user authentication implemented to quickly get you started. Just fork it and use it!

• Host: GitHub
• URL: https://github.com/msaaddev/next-firebase-auth-template
• Owner: msaaddev
• License: mit
• Created: 2021-09-12T13:45:47.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2021-12-06T20:14:29.000Z (over 4 years ago)
• Last Synced: 2025-09-07T18:50:09.381Z (10 months ago)
• Topics: firebase, firebase-auth, nextjs, nextjs-firebase, nextjs-firebase-auth, pwa
• Language: JavaScript
• Homepage: https://next-firebase-auth-temp.vercel.app/
• Size: 6.02 MB
• Stars: 14
• Watchers: 2
• Forks: 9
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: changelog.md
  • Contributing: contributing.md
  • License: LICENSE
  • Code of conduct: code-of-conduct.md

Awesome Lists containing this project

README

          
![cover](assets/cover.jpg)



	A Next.js template with firebase user authentication implemented to quickly get you started with your project








	

	

		

	



![separator](assets/separate.jpg)

- **PWA**: A progressive web app so you can also install and use it as a desktop app

- **Firebase Auth**: Contains all the code you may need to setup user sign up and login features in your project

- **State Management**: State Management with ~~Redux~~ React's Context API

- **Prettier**: Integrated Prettier to easily format the code with `npm run format`

- **MIT Licensed**: Free to use for personal and commercial use

## 🚀 Usage

#### 🏗 Firebase Setup

1. Create a firebase project first then create a web app in that project.

2. Once you have done this, you will get some config keys like API key, auth domain, etc. Make sure you save it somewhere.

3. Click on Authentication from the left sidebar, go to `Sign-in method` and enable `Email/Password`.

#### 💥 Template Setup

1. Either fork the repo or click on the `Use this template` button to create a new repository with this template.

2. Now clone the repo, open it in your preferred code editor, and install all the dependencies using `npm install`.

3. Create a `.env.local` file in the root directory and paste the following in there.

```env

NEXT_PUBLIC_Firebase_API_Key=YOUR_API_KEY_GOES_HERE

NEXT_PUBLIC_Auth_Domain=YOUR_AUTH_DOMAIN_GOES_HERE

NEXT_PUBLIC_Project_Id=YOUR_PROJECT_ID_GOES_HERE

NEXT_PUBLIC_Storage_Bucket=YOUR_STORAGE_BUCKET_GOES_HERE

NEXT_PUBLIC_Message_Sender_Id=YOUR_MESSAGE_SENDER_ID_GOES_HERE

NEXT_PUBLIC_App_Id=YOUR_APP_ID_GOES_HERE

```

4. Replace the values above with the keys you got when you set up the web app. (Firebase Setup #2)

5. Now open your terminal and type in `npm run dev` to start the server.

## 🎩 Preview

![demo](assets/demo.gif)

## 👨🏻‍💻 Contributing

Make sure you read the [contributing guidelines](https://github.com/msaaddev/next-firebase-auth-template/blob/main/contributing.md) before opening a PR. 

## ⚡️ Other Projects

I have curated a [detailed list](https://github.com/msaaddev/open-source) of all the open-source projects I have authored. Do take out a moment and take a look.

## 🔑 License & Conduct

- MIT © [Saad Irfan](https://github.com/msaaddev)

- [Code of Conduct](https://github.com/msaaddev/next-firebase-auth-template/blob/main/code-of-conduct.md)