NextAuth: authorize all APP with Layout wrapping - email

Question

I'm trying to use NextAuth for authorize access to my app and I have two main issue.
1 - all the app is wrapped with a Layout in _app.js
<SessionProvider session={pageProps.session}>
<RecoilRoot>
<Layout>
<Component {...pageProps} />
</Layout>
</RecoilRoot>
</SessionProvider>
I'm using the email Provider and if I use the built in signin page everything works great but if I add a custom signin page under pages/signin.js I'm not able to proceed. My undeerstanding is that with custom signin page everything is wrapped with the layout. The layout has a useeffect with a call to an api to get items to show in the menu
import Navbar from "./navbar";
import Sidebar from "./sidebar";
import Main from "./main";
import { useEffect, useState } from "react";
const Layout = ({ children }) => {
const [menu, setMenu] = useState();
useEffect(async () => {
const data = await fetch("api/menu/menu", {
method: "GET",
headers: { "Content-Type": "application/json" },
});
const menuItems = await data.json();
setMenu(menuItems.data);
}, []);
return (
<>
{menu && <Navbar menu={menu.profile} />}
{menu && <Sidebar menu={menu.sidebar} />}
<Main children={children}></Main>
</>
);
};
export default Layout;
In _app.js I'm not able to retrieve the session to conditonally render the page.
Important to note that I'm using _middleware.js to protect all the app and define the custome signin page like so
import withAuth from "next-auth/middleware";
export default withAuth({
pages: {
signIn: "/auth/customSignin",
},
});
Does anyone is able to pint me in the right direction?
2 issue- I'd like top verify if user exists in the database before sending the email. Am I right I can handle it in the signin callback? If yes can I add a second filed like poassword so I can both verify user exists in db, verify with password and then send email?
Many thanks for any help

Answer 1

I solved the first issue using useRouter and checking the pathname for the customSignin page.
if (router.pathname === "/auth/customSignin") {
return (
<SessionProvider session={pageProps.session}>
<Component {...pageProps} />
</SessionProvider>
);
}
return (
<SessionProvider session={pageProps.session}>
<RecoilRoot>
<Layout>
<Component {...pageProps} />
</Layout>
</RecoilRoot>
</SessionProvider>
);
}
export default MyApp;
Now I'm dealing with the second one. Anybody can help on that.
Basically I need to add a second field to the built in Email Provider and check that field against the database