Skip to content

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

License

Notifications You must be signed in to change notification settings

msaaddev/next-firebase-auth-template

Repository files navigation

cover

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

separator

  • 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.
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
  1. Replace the values above with the keys you got when you set up the web app. (Firebase Setup #2)
  2. Now open your terminal and type in npm run dev to start the server.

🎩 Preview

demo

👨🏻‍💻 Contributing

Make sure you read the contributing guidelines before opening a PR.

⚡️ Other Projects

I have curated a detailed list of all the open-source projects I have authored. Do take out a moment and take a look.

🔑 License & Conduct