NextAuth: authorize all APP with Layout wrapping

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

score 0 · Answer 1 · answered May 03 '22 at 09:06

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

NextAuth: authorize all APP with Layout wrapping

1 Answers1