46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
import { createFileRoute, useNavigate } from "@tanstack/react-router";
|
|
import { signIn, useSession } from "../lib/auth-client";
|
|
|
|
const LoginPage = () => {
|
|
const { data: session, isPending } = useSession();
|
|
const navigate = useNavigate();
|
|
|
|
if (isPending) return <div className="p-4">Loading...</div>;
|
|
|
|
if (session) {
|
|
void navigate({ to: "/" });
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center gap-4 p-8">
|
|
<h1 className="text-2xl font-bold">sign in to lila</h1>
|
|
<button
|
|
className="w-64 rounded-2xl bg-(--color-text) px-4 py-3 text-white font-bold hover:opacity-90 shadow-sm hover:shadow-md transition-all"
|
|
onClick={() => {
|
|
void signIn
|
|
.social({ provider: "github", callbackURL: window.location.origin })
|
|
.catch((err) => {
|
|
console.error("GitHub sign in error:", err);
|
|
});
|
|
}}
|
|
>
|
|
Continue with GitHub
|
|
</button>
|
|
<button
|
|
className="w-64 rounded-2xl bg-(--color-primary) px-4 py-3 text-white font-bold hover:bg-(--color-primary-dark) shadow-sm hover:shadow-md transition-all"
|
|
onClick={() => {
|
|
void signIn
|
|
.social({ provider: "google", callbackURL: window.location.origin })
|
|
.catch((err) => {
|
|
console.error("Google sign in error:", err);
|
|
});
|
|
}}
|
|
>
|
|
Continue with Google
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const Route = createFileRoute("/login")({ component: LoginPage });
|