Skip to content

Commit b570c05

Browse files
kantordkantord
committed
add authenticated pages
1 parent 0fd48fd commit b570c05

File tree

3 files changed

+127
-62
lines changed

3 files changed

+127
-62
lines changed

‎src/app/dashboard/page.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { auth } from "@/lib/auth";
2+
import { headers } from "next/headers";
3+
import { redirect } from "next/navigation";
4+
5+
export default async function DashboardPage() {
6+
const session = await auth.api.getSession({
7+
headers: await headers(),
8+
});
9+
10+
if (!session) {
11+
redirect("/login");
12+
}
13+
14+
return (
15+
<div className="flex min-h-screen items-center justify-center bg-zinc-50 dark:bg-black">
16+
<main className="flex flex-col items-center gap-8 rounded-lg bg-white p-12 shadow-lg dark:bg-zinc-900">
17+
<h1 className="text-3xl font-bold text-black dark:text-white">
18+
Hello World! 🎉
19+
</h1>
20+
21+
<div className="flex flex-col gap-4 text-center">
22+
<p className="text-zinc-600 dark:text-zinc-400">
23+
You are successfully authenticated!
24+
</p>
25+
26+
<div className="rounded-lg bg-zinc-100 p-4 dark:bg-zinc-800">
27+
<p className="text-sm font-semibold text-zinc-800 dark:text-zinc-200">
28+
User Info:
29+
</p>
30+
<p className="text-zinc-600 dark:text-zinc-400">
31+
Email: <strong>{session.user.email}</strong>
32+
</p>
33+
<p className="text-zinc-600 dark:text-zinc-400">
34+
User ID: <strong>{session.user.id}</strong>
35+
</p>
36+
</div>
37+
</div>
38+
39+
<form action="/api/auth/sign-out" method="POST">
40+
<button
41+
type="submit"
42+
className="rounded-full bg-red-600 px-6 py-3 text-white transition-colors hover:bg-red-700"
43+
>
44+
Sign Out
45+
</button>
46+
</form>
47+
</main>
48+
</div>
49+
);
50+
}

‎src/app/login/page.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
"use client";
2+
3+
import { authClient } from "@/lib/auth-client";
4+
5+
export default function LoginPage() {
6+
const handleOIDCLogin = async () => {
7+
await authClient.signIn.social({
8+
provider: "oidc",
9+
callbackURL: "/dashboard",
10+
});
11+
};
12+
13+
return (
14+
<div className="flex min-h-screen items-center justify-center bg-zinc-50 dark:bg-black">
15+
<main className="flex flex-col items-center gap-8 rounded-lg bg-white p-12 shadow-lg dark:bg-zinc-900">
16+
<h1 className="text-3xl font-bold text-black dark:text-white">
17+
Log In
18+
</h1>
19+
20+
<p className="text-center text-zinc-600 dark:text-zinc-400">
21+
Sign in with your OIDC provider to continue
22+
</p>
23+
24+
<button
25+
type="button"
26+
onClick={handleOIDCLogin}
27+
className="rounded-full bg-black px-8 py-3 text-white transition-colors hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200"
28+
>
29+
Sign In with OIDC
30+
</button>
31+
</main>
32+
</div>
33+
);
34+
}

‎src/app/page.tsx‎

Lines changed: 43 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,46 @@
1-
import Image from "next/image";
1+
"use client";
2+
3+
import { useSession } from "@/lib/auth-client";
4+
import Link from "next/link";
25

36
export default function Home() {
4-
return (
5-
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
6-
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
7-
<Image
8-
className="dark:invert"
9-
src="/next.svg"
10-
alt="Next.js logo"
11-
width={100}
12-
height={20}
13-
priority
14-
/>
15-
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
16-
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
17-
To get started, edit the page.tsx file.
18-
</h1>
19-
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
20-
Looking for a starting point or more instructions? Head over to{" "}
21-
<a
22-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
23-
className="font-medium text-zinc-950 dark:text-zinc-50"
24-
>
25-
Templates
26-
</a>{" "}
27-
or the{" "}
28-
<a
29-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
30-
className="font-medium text-zinc-950 dark:text-zinc-50"
31-
>
32-
Learning
33-
</a>{" "}
34-
center.
35-
</p>
36-
</div>
37-
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
38-
<a
39-
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
40-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
41-
target="_blank"
42-
rel="noopener noreferrer"
43-
>
44-
<Image
45-
className="dark:invert"
46-
src="/vercel.svg"
47-
alt="Vercel logomark"
48-
width={16}
49-
height={16}
50-
/>
51-
Deploy Now
52-
</a>
53-
<a
54-
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
55-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
56-
target="_blank"
57-
rel="noopener noreferrer"
58-
>
59-
Documentation
60-
</a>
61-
</div>
62-
</main>
63-
</div>
64-
);
7+
const { data: session, isPending } = useSession();
8+
9+
return (
10+
<div className="flex min-h-screen items-center justify-center bg-zinc-50 dark:bg-black">
11+
<main className="flex flex-col items-center gap-8 p-8">
12+
<h1 className="text-4xl font-bold text-black dark:text-white">
13+
Welcome to ToolHive Cloud UI
14+
</h1>
15+
16+
{isPending ? (
17+
<p className="text-zinc-600 dark:text-zinc-400">Loading...</p>
18+
) : session ? (
19+
<div className="flex flex-col items-center gap-4">
20+
<p className="text-zinc-600 dark:text-zinc-400">
21+
You are logged in as <strong>{session.user.email}</strong>
22+
</p>
23+
<Link
24+
href="/dashboard"
25+
className="rounded-full bg-black px-6 py-3 text-white transition-colors hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200"
26+
>
27+
Go to Dashboard
28+
</Link>
29+
</div>
30+
) : (
31+
<div className="flex flex-col items-center gap-4">
32+
<p className="text-zinc-600 dark:text-zinc-400">
33+
Please log in to access the application
34+
</p>
35+
<Link
36+
href="/login"
37+
className="rounded-full bg-black px-6 py-3 text-white transition-colors hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200"
38+
>
39+
Log In
40+
</Link>
41+
</div>
42+
)}
43+
</main>
44+
</div>
45+
);
6546
}

0 commit comments

Comments
 (0)