Next.js Discord

Discord Forum

showing a Modal using intercepted & parallel routing

Answered
West African Lion posted this in #help-forum
Open in Discord
West African LionOP
I have defined my intercepted route in the @auth slot, added the login component inside it, and accepted the auth prop in the layout and rendered it when navigating to /login, it works well, the issue arises when refreshing the page when the modal is still showing, the login page somehow has a dark background, whereas I haven't defined any dark themed background in my code.
the second issue is when navigating to the signup page and navigating once again to login from there, I get the modal, not the actual login page.
Answered by West African Lion
some genius in reddit came up with this,
here's my implementation. do you have an idea what he means by this " authRoutes.includes(pathname ?? "")"
View full answer

21 Replies

West African LionOP
folder structure
(.)login
export default function Page() {
  const [openModal, setOpenModal] = useState(false);
  useEffect(() => {
    setOpenModal(true);
  }, []);
  const router = useRouter();
  return (
    <Dialog
      onOpenChange={() => {
        if (openModal) {
          router.back();
          setOpenModal(false);
        } else setOpenModal(true);
      }}
      open={openModal}
    >
      <DialogContent>
        <VisuallyHidden>
          <DialogTitle />
        </VisuallyHidden>
        <Login />
      </DialogContent>
    </Dialog>
  );
}

layout.jsx
export default async function RootLayout({
  auth,
  children,
}: Readonly<{
  auth: React.ReactNode;
  children: React.ReactNode;
}>) {
  console.log("hello");
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased h-full w-full`}
      >
        {auth}
        <SessionProvider>{children}</SessionProvider>
        <Toaster />
      </body>
    </html>
  );
}
jsx
West African LionOP
I caught the issue with the black background by simply moving the (auth) folder outside the @auth slot, but I still can't figure a way to avoid showing the model when navigating from the signup to login instead of showing showing the full route page
LuisLl
That last issue you mention is expected behavior. When you perform a soft navigation via router.push and <Link> component Next.js will show the modal instead. You’ll have to do a hard navigation in order to have the full page version instead.
West African LionOP
some genius in reddit came up with this,
here's my implementation. do you have an idea what he means by this " authRoutes.includes(pathname ?? "")"
Answer
West African LionOP
and does this mean I have to do this everytime I navigate to a route that has this feature from another route that's not meant to show the modal?
LuisLl
I guess authRoutes is just an array he uses to put all his routes that require the user to be authenticated. And he checks the current pathname against that array, just to make the repetitive work a little easier
West African LionOP
alright well, thanks man
West African LionOP
do you have an idea on how to make this only work in larger sceen but for mobile it should just redirect to the page
I think cheking the screen width and doing hard nav for mobile would work
LuisLl
You want desktop users to have the modal and mobile users to be hard navigated to the route?
West African LionOP
yeaah exactly
@West African Lion I think cheking the screen width and doing hard nav for mobile would work
LuisLl
Have in mind that the window object requires you to be on the Client, otherwise you’ll get errors from pre-rendering on the server where there’s no window object
West African LionOP
works like charm, it's as easy as having two seperate layouts for mobile and desktop, on the mobile login button I just specified a hard navigation
@LuisLl Have in mind that the window object requires you to be on the Client, otherwise you’ll get errors from pre-rendering on the server where there’s no window object
West African LionOP
I went on creating window and getting width, but then I corrected myself. I appreciate the help man
LuisLl
So you have two different layouts or just two different buttons that behave differently depending on the screen size?
West African LionOP
so the navbar is different for mobile, when on mobile it turns to a dialog that can be opened when clicked on the 3 horizontal rows icon, and that's where another log in button is defined
so I have one button for each layout
LuisLl
Ok good, i thought you modified the inner implementation of the Link depending on the screen width which would’ve been kind of a bad practice.

Good to know it’s working as expected now