Next js Firebase Authication
Next js Firebase Authication
First you need to set up a project in Firebase. Then install Firebase.
npm install firebase
Then, initialize Firebase and begin using the SDKs for the products you’d like to use.
// Import the functions you need from the SDKs you need
import { initializeApp } from “firebase/app”;
import { getAnalytics } from “firebase/analytics”;
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app’s Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: “AIzaSyCBC6d5XFWkRZskjKBS7En5RFFjox2F1os”,
authDomain: “hello-world-5791c.firebaseapp.com”,
projectId: “hello-world-5791c”,
storageBucket: “hello-world-5791c.appspot.com”,
messagingSenderId: “………………..”,
appId: “1:94589439345:web:1387508fefb0c207743ad0”,
measurementId: “G-8HY26VRTGK”
};
Get Asadullah Hil Galib’s stories in your inbox
Join Medium for free to get updates from this writer.
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
For protection, of course, in the root dedicatory create a file .env.local file and all Confilg keep here.
Now you have to create the hook and do all the functionality here.Then you have to create a ConText API in the _app.js and take it inside the conText Api.
for example,
import “antd/dist/antd.css”;import AuthProvider from “../Context/AuthProvider/AuthProvider”;import “../styles/custom.css”;import “../styles/globals.css”;import “../styles/profile.css”;import “../styles/SellerFooter.css”;import “../styles/SellerLearningPath.css”;import “../styles/global.sidebar.css”;function MyApp({ Component, pageProps }) { return ( <AuthProvider> <Component {…pageProps} /> </AuthProvider> );} export default MyApp;
Then you have to call Hook on the login register page to do the functionality.
