florianwalther-private/_app.tsx

## _app.tsx
interface AppContext {
  showLoginModal: () => void,
  showTooManyRequestsMessage: () => void,
}

export const AppContext = createContext<AppContext>({
  showLoginModal: () => { throw new Error("Context not implemented") },
  showTooManyRequestsMessage: () => { throw new Error("Context not implemented") },
});

const inter = Inter({ subsets: ["latin"] });

export default function App({ Component, pageProps }: AppProps) {
  const router = useRouter();

  const [showSignUpModal, setShowSignUpModal] = useState(false);
  const [showLoginModal, setShowLoginModal] = useState(false);
  const [showResetPasswordModal, setShowResetPasswordModal] = useState(false);

  const { user } = useAuthenticatedUser();

  useEffect(() => {
    if (user && !user.username && !router.asPath.startsWith("/onboarding")) {
      router.push("/onboarding?returnTo=" + encodeURIComponent(router.asPath));
    }
  }, [user, router]);

  const [contextProviderObject] = useState({
    showLoginModal: () => setShowLoginModal(true),
    showTooManyRequestsMessage: () => alert("You're trying to often. Please wait a bit"),
  });

  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Example App</title>
        <meta name="description" content="A full-stack NextJS app" />
        <link rel="icon" href="/favicon.ico" />
        <meta property="og:image" key="og:image" content="https://mywebsite.co /images/social_media_preview_image.png" />
        <meta name="twitter:card" content="summary_large_image" />
      </Head>

      <SSRProvider>
        <AppContext.Provider value={contextProviderObject}>
          <div className={inter.className}>
            <NextNProgress
              color='#21FA90'
              showOnShallow={false}
            />
            <NavBar
              onSignUpClicked={() => setShowSignUpModal(true)}
              onLoginClicked={() => setShowLoginModal(true)}
            />
            <main> {/* Okay because next/Head moves the head out of the body */}
              <Container className={styles.pageContainer}>
                <Component {...pageProps} />
              </Container>
            </main>
            <Footer />
            {showSignUpModal &&
              <SignUpModal
                onDismiss={() => setShowSignUpModal(false)}
                onLoginInstead={() => {
                  setShowSignUpModal(false);
                  setShowLoginModal(true);
                }} />
            }
            {showLoginModal &&
              <LoginModal
                onDismiss={() => setShowLoginModal(false)}
                onSignUpInstead={() => {
                  setShowLoginModal(false);
                  setShowSignUpModal(true);
                }}
                onForgotPasswordClicked={() => {
                  setShowLoginModal(false);
                  setShowResetPasswordModal(true)
                }} />
            }
            {showResetPasswordModal &&
              <ResetPasswordModal
                onDismiss={() => setShowResetPasswordModal(false)}
                onSignUpClicked={() => {
                  setShowResetPasswordModal(false);
                  setShowSignUpModal(true);
                }}
              />
            }
          </div>
        </AppContext.Provider>
      </SSRProvider>
    </>
  );
}
	interface AppContext {
	showLoginModal: () => void,
	showTooManyRequestsMessage: () => void,
	}

	export const AppContext = createContext<AppContext>({
	showLoginModal: () => { throw new Error("Context not implemented") },
	showTooManyRequestsMessage: () => { throw new Error("Context not implemented") },
	});

	const inter = Inter({ subsets: ["latin"] });

	export default function App({ Component, pageProps }: AppProps) {
	const router = useRouter();

	const [showSignUpModal, setShowSignUpModal] = useState(false);
	const [showLoginModal, setShowLoginModal] = useState(false);
	const [showResetPasswordModal, setShowResetPasswordModal] = useState(false);

	const { user } = useAuthenticatedUser();

	useEffect(() => {
	if (user && !user.username && !router.asPath.startsWith("/onboarding")) {
	router.push("/onboarding?returnTo=" + encodeURIComponent(router.asPath));
	}
	}, [user, router]);

	const [contextProviderObject] = useState({
	showLoginModal: () => setShowLoginModal(true),
	showTooManyRequestsMessage: () => alert("You're trying to often. Please wait a bit"),
	});

	return (
	<>
	<Head>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Example App</title>
	<meta name="description" content="A full-stack NextJS app" />
	<link rel="icon" href="/favicon.ico" />
	<meta property="og:image" key="og:image" content="https://mywebsite.co /images/social_media_preview_image.png" />
	<meta name="twitter:card" content="summary_large_image" />
	</Head>

	<SSRProvider>
	<AppContext.Provider value={contextProviderObject}>
	<div className={inter.className}>
	<NextNProgress
	color='#21FA90'
	showOnShallow={false}
	/>
	<NavBar
	onSignUpClicked={() => setShowSignUpModal(true)}
	onLoginClicked={() => setShowLoginModal(true)}
	/>
	<main> {/* Okay because next/Head moves the head out of the body */}
	<Container className={styles.pageContainer}>
	<Component {...pageProps} />
	</Container>
	</main>
	<Footer />
	{showSignUpModal &&
	<SignUpModal
	onDismiss={() => setShowSignUpModal(false)}
	onLoginInstead={() => {
	setShowSignUpModal(false);
	setShowLoginModal(true);
	}} />
	}
	{showLoginModal &&
	<LoginModal
	onDismiss={() => setShowLoginModal(false)}
	onSignUpInstead={() => {
	setShowLoginModal(false);
	setShowSignUpModal(true);
	}}
	onForgotPasswordClicked={() => {
	setShowLoginModal(false);
	setShowResetPasswordModal(true)
	}} />
	}
	{showResetPasswordModal &&
	<ResetPasswordModal
	onDismiss={() => setShowResetPasswordModal(false)}
	onSignUpClicked={() => {
	setShowResetPasswordModal(false);
	setShowSignUpModal(true);
	}}
	/>
	}
	</div>
	</AppContext.Provider>
	</SSRProvider>
	</>
	);
	}