import clsx from "clsx";
import type { GetServerSidePropsContext } from "next";
import Image from "next/image";
import { useRouter } from "next/router";
import { getServerSession } from "next-auth/next";
import type { BuiltInProviderType } from "next-auth/providers";
import type { ClientSafeProvider } from "next-auth/react";
import { getProviders, signIn, useSession } from "next-auth/react";
import type { LiteralUnion } from "next-auth/react/types";
import React, { useState } from "react";
import { FaDiscord, FaGithub, FaGoogle } from "react-icons/fa";
import FadeIn from "../components/motions/FadeIn";
import GridLayout from "../layout/grid";
import { authOptions } from "../server/auth/auth";
import Input from "../ui/input";
const SignIn = ({ providers }: { providers: Provider }) => {
const { data: session } = useSession();
const { push } = useRouter();
if (session) push("/").catch(console.error);
const details = Object.values(providers)
.map((provider) => providerButtonDetails[provider.id])
.filter((detail): detail is ButtonDetail => detail !== undefined);
return (
Reworkd
{providers.credentials && }
{details.map((detail) => (
))}
);
};
const InsecureSignin = () => {
const [usernameValue, setUsernameValue] = useState("");
return (
setUsernameValue(e.target.value)}
placeholder="Enter Username"
type="text"
name="Username Field"
/>
);
};
type Provider = Record, ClientSafeProvider>;
interface ButtonDetail {
id: string;
icon: JSX.Element;
color: string;
}
const providerButtonDetails: { [key: string]: ButtonDetail } = {
google: {
id: "google",
icon: ,
color: "bg-white hover:bg-gray-200 text-black",
},
discord: {
id: "discord",
icon: ,
color: "bg-blue-600 hover:bg-blue-700 text-white",
},
github: {
id: "github",
icon: ,
color: "bg-gray-800 hover:bg-gray-900 text-white",
},
};
const ProviderSignInButton = ({ detail }: { detail: ButtonDetail }) => {
return (
);
};
export default SignIn;
export async function getServerSideProps(context: GetServerSidePropsContext) {
const session = await getServerSession(context.req, context.res, authOptions);
if (session) {
return {
redirect: {
destination: "/",
},
};
}
return {
props: { providers: (await getProviders()) ?? {} },
};
}