I'm encountering an issue while trying to integrate authentication using firebase (via Google) in my next.js application, and the app crashes consistently. I will provide the code for the auth.js page component, as well as where I set up firebase and define the login and logout functions.
This is the content of the firebase-config.js file located in the project root:
import { initializeApp } from 'firebase/app';
import { initializeAuth, browserLocalPersistence, browserPopupRedirectResolver, indexedDBLocalPersistence, signInWithRedirect, GoogleAuthProvider } from "firebase/auth";
const firebaseConfig = {
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.AUTH_DOMAIN,
projectId: process.env.PROJECT_ID,
storageBucket: process.env.STORAGE_BUCKET,
messagingSenderId: process.env.MESSAGING_SENDER_ID,
appId: process.env.APP_ID
};
export const app = initializeApp(firebaseConfig);
export const auth = initializeAuth(app, {
persistence: [indexedDBLocalPersistence, browserLocalPersistence],
});
export const getUserFirebase = () => {
return auth.currentUser;
};
export const loginFirebase = () => {
signInWithRedirect(auth, new GoogleAuthProvider(), browserPopupRedirectResolver);
};
export const logoutFirebase = () => {
signOut(auth);
};
Below is the auth.js component:
import { useRouter } from 'next/router';
import { useState } from 'react';
import { IconButton, Menu, MenuItem, Button, Box } from '@mui/material';
import { AccountCircle, Logout, ManageAccounts, RateReview, Google } from '@mui/icons-material';
import { getUserFirebase, loginFirebase, logoutFirebase } from '../firebase-config';
export const Auth = () => {
const router = useRouter();
const [anchorEl, setAnchorEl] = useState(null);
const handleMenu = (event) => setAnchorEl(event.currentTarget);
const handleClose = () => setAnchorEl(null);
const redirectFromMenu = (url) => {
handleClose();
router.push(url);
};
return (
<Box sx={{ marginLeft: 'auto' }}>
{getUserFirebase() ? (
<>
<IconButton
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleMenu}
color="inherit"
>
<AccountCircle />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={() => redirectFromMenu('/account')}><ManageAccounts /> My Account</MenuItem>
<MenuItem onClick={() => redirectFromMenu('/reviews/write')}><RateReview /> Write Review</MenuItem>
<MenuItem onClick={logoutFirebase}><Logout /> Logout</MenuItem>
</Menu>
</>
) : (
<Button size='small' onClick={loginFirebase} startIcon={<Google />} variant='contained' color='secondary'>
Login with Google
</Button>
)}
</Box>
);
};
When trying to log the auth object, it shows an error stating:
'dependent-sdk-initialized-before-auth': 'Another Firebase SDK was initialized and is trying to use Auth before Auth is initialized. Please be sure to call
initializeAuthorgetAuthbefore beginning any other Firebase SDK.'
The app either crashes at startup or faces this issue during authentication. Any assistance would be greatly appreciated.