page-assist/src/pages/auth.tsx
2023-04-16 10:54:07 +05:30

77 lines
2.3 KiB
TypeScript

import { useSupabaseClient, useUser } from "@supabase/auth-helpers-react";
import { type NextPage } from "next";
import Head from "next/head";
import { useRouter } from "next/router";
import React from "react";
import { Auth } from "@supabase/auth-ui-react";
import { ThemeSupa, ThemeMinimal } from "@supabase/auth-ui-shared";
const AuthPage: NextPage = () => {
const supabaseClient = useSupabaseClient();
const user = useUser();
const router = useRouter();
React.useEffect(() => {
if (user) {
router.push("/dashboard");
}
}, [user]);
return (
<>
<Head>
<title>Get Started / Page Assist</title>
</Head>
<div className="relative isolate flex min-h-full flex-col justify-center overflow-hidden bg-white py-12 sm:px-6 lg:px-8">
<svg
className="absolute inset-0 -z-10 h-full w-full stroke-gray-200 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
aria-hidden="true"
>
<defs>
<pattern
id="0787a7c5-978c-4f66-83c7-11c213f99cb7"
width={200}
height={200}
x="50%"
y={-1}
patternUnits="userSpaceOnUse"
>
<path d="M.5 200V.5H200" fill="none" />
</pattern>
</defs>
<rect
width="100%"
height="100%"
strokeWidth={0}
fill="url(#0787a7c5-978c-4f66-83c7-11c213f99cb7)"
/>
</svg>
<div className="sm:mx-auto sm:w-full sm:max-w-md">
<img
className="mx-auto h-12 w-auto"
src="logo.png"
alt="Page Assist"
/>
<h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
Page Assist
</h2>
</div>
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div className="px-4 py-8 shadow sm:rounded-lg sm:px-10">
<Auth
supabaseClient={supabaseClient}
providers={[]}
appearance={{ theme: ThemeSupa }}
view="magic_link"
showLinks={false}
magicLink={true}
/>
</div>
</div>
</div>
</>
);
};
export default AuthPage;