This Starter includes Firebase and Next.js. Firebase is a powerful development software built by Google. It includes Authentication, Database, Analytics, etc.
To learn more about Firebase and Next.js, take a look at the following resources:
- Firebase - different learning pathways to integrate Firebase to your applications.
- Learn Next.js - an interactive Next.js tutorial.
- Run the following command to create a new project with this Starter:
yarn create next-app [project-name] -e https://github.com/official-carledwardfp/nextjs-firebase-auth-starter
# or
npx create-next-app [project-name] -e https://github.com/official-carledwardfp/nextjs-firebase-auth-starter
- Install dependencies
yarn
# or
npm install
-
Make sure that you have created a firebase application. Go to your console and create a project.
-
Change
.env.local.example
to.env.local
and add your firebase config. You can remove keys that you do not need.
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_APP_ID=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
- Try the starter!
yarn dev
# or
npm run dev
Open http://localhost:3000 with your browser and see how the starter works!
This Starter uses the latest version of Firebase (v9 modular SDK)
// components/Auth/auth.js
const firebaseApp = initializeApp(config); // initializes app
const auth = getAuth(firebaseApp); // get auth instance from initialized app
A hook can be imported where you can access the user and the firebase functions defined in auth.js
.
Example:
// pages/login.js
const auth = useAuth();
const signIn = (email, password) => {
auth.signIn(email, password).then(() => {
// do something
});
};
Feel free to add Issues if you find any. Thank you!