Next.js Discord

Discord Forum

Mantine color styles are not applied on next-auth sign in

Answered
Cuvier’s Dwarf Caiman posted this in #help-forum
Open in Discord
Cuvier’s Dwarf CaimanOP
When I sign out the session that I used to sign in with with next-auth, or clear the browser cookies in localhost and then sign in again, No mantine styles render. Or the colors atleast doesn't render

Check image 1 for example. Notice how the "sort by" button is orange. it is styled with tailwind: className='bg-orange-500' The button next to it is fully mantine and the others too.

Now check Image 2. This is what the page should look like when the user logs in and visits. This only shows when I refresh.

This is my root layout.tsx : 
import "./globals.css";
import "@mantine/core/styles/global.css";
import "@mantine/core/styles.css";
import "@mantine/dates/styles.css";
import "mantine-react-table/styles.css";
import "@mantine/notifications/styles.css";
import { ColorSchemeScript, MantineProvider } from "@mantine/core";
import { Notifications } from "@mantine/notifications";
import { ModalsProvider } from "@mantine/modals";
import Script from "next/script";
import NextTopLoader from "nextjs-toploader";

export const metadata = {
  title: "POS Demo Dev",
  description: "Demo for POS",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className="overflow-hidden">
      <head>
        <ColorSchemeScript />
      </head>
      <body>
        <MantineProvider theme={{ primaryColor: "orange", primaryShade: 5 }}>
          <NextTopLoader color="#84cc16" />
          <Notifications position="top-center" />
          <ModalsProvider>{children}</ModalsProvider>
        </MantineProvider>
        <Script
          src="/assets/js/StarWebPrintBuilder.js"
          strategy={"afterInteractive"}
        />
        <Script
          src="/assets/js/StarWebPrintTrader.js"
          strategy={"afterInteractive"}
        />
      </body>
    </html>
  );
}


I have no Idea what the cause of this could be.
Answered by Cuvier’s Dwarf Caiman
fixed it by doing 
  React.useEffect(() => {
    if (session.data) {
      // using window.location.replace because of mantine styles not loading properly
      if (session.data.user.isAdmin) {
        window.location.replace("/panel/admin");
      } else {
        window.location.replace("/panel/pos");
      }
    }
  }, [session]);
View full answer

2 Replies

Cuvier’s Dwarf CaimanOP
could the way I navigate to the products page after login be the issue? 
  React.useEffect(() => {
    if (session.data) {
      if (session.data.user.isAdmin) {
        router.push("/panel/admin");
      } else {
        router.push("/panel/pos");
      }
    }
  }, [session]);
Cuvier’s Dwarf CaimanOP
fixed it by doing 
  React.useEffect(() => {
    if (session.data) {
      // using window.location.replace because of mantine styles not loading properly
      if (session.data.user.isAdmin) {
        window.location.replace("/panel/admin");
      } else {
        window.location.replace("/panel/pos");
      }
    }
  }, [session]);
Answer