69 lines
2.6 KiB
TypeScript
69 lines
2.6 KiB
TypeScript
import { useLogin } from "@privy-io/react-auth";
|
|
import { PrivyClient } from "@privy-io/server-auth";
|
|
import { GetServerSideProps } from "next";
|
|
import Head from "next/head";
|
|
import { useRouter } from "next/router";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faCube, faRocket } from "@fortawesome/free-solid-svg-icons";
|
|
|
|
export const getServerSideProps: GetServerSideProps = async ({ req }) => {
|
|
const cookieAuthToken = req.cookies["privy-token"];
|
|
if (!cookieAuthToken) return { props: {} };
|
|
|
|
const PRIVY_APP_ID = process.env.NEXT_PUBLIC_PRIVY_APP_ID;
|
|
const PRIVY_APP_SECRET = process.env.PRIVY_APP_SECRET;
|
|
const client = new PrivyClient(PRIVY_APP_ID!, PRIVY_APP_SECRET!);
|
|
|
|
try {
|
|
const claims = await client.verifyAuthToken(cookieAuthToken);
|
|
console.log({ claims });
|
|
|
|
return {
|
|
props: {},
|
|
redirect: { destination: "/dashboard", permanent: false },
|
|
};
|
|
} catch (error) {
|
|
return { props: {} };
|
|
}
|
|
};
|
|
|
|
export default function LoginPage() {
|
|
const router = useRouter();
|
|
const { login } = useLogin({
|
|
onComplete: () => router.push("/dashboard"),
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>Login · W3B Games</title>
|
|
</Head>
|
|
|
|
<main className="flex min-h-screen w-full bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900">
|
|
<div className="flex flex-1 p-6 justify-center items-center w-full h-screen">
|
|
<div className="text-center w-full">
|
|
<div className="mb-10 h-96 flex justify-center">
|
|
<FontAwesomeIcon icon={faCube} className="text-6xl text-cyan-400 animate-pulse" />
|
|
</div>
|
|
<h1 className="text-4xl sm:text-5xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500">
|
|
Welcome to W3B Game Dashboard
|
|
</h1>
|
|
<p className="text-lg sm:text-xl mb-8 text-gray-300">
|
|
Embark on a Web3 adventure like no other
|
|
</p>
|
|
<div className="mt-6 flex justify-center">
|
|
<button
|
|
className="bg-gradient-to-r from-purple-500 to-cyan-500 hover:from-purple-600 hover:to-cyan-600 py-3 px-8 text-white rounded-full text-lg font-semibold transition duration-300 ease-in-out transform hover:scale-105 flex items-center shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5"
|
|
onClick={login}
|
|
>
|
|
<FontAwesomeIcon icon={faRocket} className="mr-4 w-8" />
|
|
Login to Dashboard
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|