Demo Here: Next-Fire-Auth
Try Logging with the following
Email Address: user@gmail.com
Password: test@12345
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
- Email Password Authetication & Google Authetication
- Forgot Password Feature
- Login & SignUp forms validations
- NextJs 13 routing
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
- 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. EnableEmail/password authentication
&google authentication
. - Create a
.env.local
file in your project's root. Example of.env.local
file is given below. Make sure you replaceYOUR_FIREBASE_CONSOLE_DETAILS
with yourfirebaseConfig 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
- That's It ! Finally run the application
yarn dev # OR npm run dev
Location: /app/
- Home Page
- Login Page
- Sign Up Page
- Forgot Password Page
- Profile Page -
Auth Required
- Global CSS will be found
/style/globals.css
- Firebase configuration will be found in
/config/firebase.ts
Loading
in/components/Loading.tsx
- Loading spinner