florianwalther-private/_app.tsx

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

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

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

export default function App({ Component, pageProps }: AppProps) {

  const [authModalState, setAuthModalState] = useState<AuthModalState>("none");

  useOnboardingRedirect();

  const [contextProviderObject] = useState({
    showLoginModal: () => setAuthModalState("login"),
    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 project" />
        <link rel="icon" href="/favicon.ico" />
        <meta property="og:image" key="og:image" content="https://82d5f15816fcbd.lhr.life/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={() => setAuthModalState("signup")}
              onLoginClicked={() => setAuthModalState("login")}
            />
            <main> {/* Okay because next/Head moves the head out of the body */}
              <Container className={styles.pageContainer}>
                <Component {...pageProps} />
              </Container>
            </main>
            <Footer />
            <AuthModals state={authModalState} setState={setAuthModalState} />
          </div>
        </AppContext.Provider>
      </SSRProvider>
    </>
  );
}

function useOnboardingRedirect() {
  const { user } = useAuthenticatedUser();
  const router = useRouter();

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

type AuthModalState = "none" | "login" | "signup" | "resetpassword";

interface AuthModalProps {
  state: AuthModalState
  setState: (state: AuthModalState) => void,
}

function AuthModals({ state, setState }: AuthModalProps) {

  if (state === "signup") {
    return (
      <SignUpModal
        onDismiss={() => setState("none")}
        onLoginInsteadClicked={() => setState("login")}
      />
    );
  }

  if (state === "login") {
    return (
      <LoginModal
        onDismiss={() => setState("none")}
        onSignUpInsteadClicked={() => setState("signup")}
        onForgotPasswordClicked={() => setState("resetpassword")} />
    );
  }

  if (state === "resetpassword") {
    <ResetPasswordModal
      onDismiss={() => setState("none")}
      onSignUpClicked={() => setState("signup")}
    />
  }

  return null;
}
	interface AppContext {
	showLoginModal: () => void,
	showTooManyRequestsMessage: () => void,
	}

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

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

	export default function App({ Component, pageProps }: AppProps) {

	const [authModalState, setAuthModalState] = useState<AuthModalState>("none");

	useOnboardingRedirect();

	const [contextProviderObject] = useState({
	showLoginModal: () => setAuthModalState("login"),
	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 project" />
	<link rel="icon" href="/favicon.ico" />
	<meta property="og:image" key="og:image" content="https://82d5f15816fcbd.lhr.life/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={() => setAuthModalState("signup")}
	onLoginClicked={() => setAuthModalState("login")}
	/>
	<main> {/* Okay because next/Head moves the head out of the body */}
	<Container className={styles.pageContainer}>
	<Component {...pageProps} />
	</Container>
	</main>
	<Footer />
	<AuthModals state={authModalState} setState={setAuthModalState} />
	</div>
	</AppContext.Provider>
	</SSRProvider>
	</>
	);
	}

	function useOnboardingRedirect() {
	const { user } = useAuthenticatedUser();
	const router = useRouter();

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

	type AuthModalState = "none" \| "login" \| "signup" \| "resetpassword";

	interface AuthModalProps {
	state: AuthModalState
	setState: (state: AuthModalState) => void,
	}

	function AuthModals({ state, setState }: AuthModalProps) {

	if (state === "signup") {
	return (
	<SignUpModal
	onDismiss={() => setState("none")}
	onLoginInsteadClicked={() => setState("login")}
	/>
	);
	}

	if (state === "login") {
	return (
	<LoginModal
	onDismiss={() => setState("none")}
	onSignUpInsteadClicked={() => setState("signup")}
	onForgotPasswordClicked={() => setState("resetpassword")} />
	);
	}

	if (state === "resetpassword") {
	<ResetPasswordModal
	onDismiss={() => setState("none")}
	onSignUpClicked={() => setState("signup")}
	/>
	}

	return null;
	}