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 AI

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()) ?? {} }, }; }