Leafcutter: Login

import Head from "next/head"; import { NextPage } from "next"; import Link from "next/link"; import Image from "next/legacy/image"; import { Box, Grid, Container, IconButton } from "@mui/material"; import { Apple as AppleIcon, Google as GoogleIcon } from "@mui/icons-material"; import { useTranslate } from "react-polyglot"; import { LanguageSelect } from "components/LanguageSelect"; import LeafcutterLogoLarge from "images/leafcutter-logo-large.png"; import { signIn, getSession } from "next-auth/react"; import { useAppContext } from "components/AppProvider"; type LoginProps = { session: any; }; const Login: NextPage = ({ session }) => { const t = useTranslate(); const { colors: { leafcutterElectricBlue, lightGray }, typography: { h1, h4 }, } = useAppContext(); const buttonStyles = { backgroundColor: lightGray, borderRadius: 500, width: "100%", fontSize: "16px", fontWeight: "bold", }; return ( <> Leafcutter: Login

{t("welcomeToLeafcutter")} {t("welcomeToLeafcutterDescription")} {!session ? ( signIn("google", { callbackUrl: `${window.location.origin}/setup`, }) } > {`${t("signInWith")} Google`} signIn("apple", { callbackUrl: `${window.location.origin}/setup`, }) } > {`${t("signInWith")} Apple`} {t("dontHaveAccount")}{" "} {t("requestAccessHere")} ) : null} {session ? ( <> {`${t("welcome")}, ${ session.user.name ?? session.user.email }.`} {t("goHome")} ) : null} ); }; export default Login; export async function getServerSideProps(context: any) { const session = (await getSession(context)) ?? null; return { props: { session }, }; }