Add login page and redirect when not logged in

RobVermeer · Dec 29, 2023 · 4bcb62c · 4bcb62c
1 parent cd60ebf
commit 4bcb62c
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 18 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,10 +1,7 @@
 import type { Metadata } from "next"
 import { Ubuntu } from "next/font/google"
 import "./globals.css"
-import { getServerSession } from "next-auth"
-import { authOptions } from "@/lib/nextAuth"
 import { Header } from "@/components/Header"
-import { Login } from "@/components/Login"
 import { Toaster } from "@/components/ui/toaster"
 
 const ubuntu = Ubuntu({ weight: ["400"], subsets: ["latin"] })
@@ -20,13 +17,11 @@ interface Props {
 }
 
 export default async function RootLayout({ children }: Props) {
-  const session = await getServerSession(authOptions)
-
   return (
     <html lang="en">
       <body className={ubuntu.className}>
-        <Header session={session} />
-        {session ? children : <Login />}
+        <Header />
+        {children}
         <Toaster />
       </body>
     </html>

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -0,0 +1,14 @@
+import { redirect } from "next/navigation"
+import { getServerSession } from "next-auth"
+import { authOptions } from "@/lib/nextAuth"
+import { LoginForm } from "@/components/LoginForm"
+
+export default async function Login() {
+  const session = await getServerSession(authOptions)
+
+  if (session) {
+    redirect("/")
+  }
+
+  return <LoginForm />
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,11 +1,18 @@
 import { EmptyState } from "@/components/EmptyState"
 import { Issues } from "@/components/Issues"
 import { ProjectSelect } from "@/components/ProjectSelect"
+import { authOptions } from "@/lib/nextAuth"
 import { getProjectsForUser } from "@/lib/project"
 import { ServerCog } from "lucide-react"
+import { getServerSession } from "next-auth"
 import Link from "next/link"
+import { redirect } from "next/navigation"
 
 export default async function Home() {
+  const session = await getServerSession(authOptions)
+
+  if (!session) redirect("/login")
+
   const projects = await getProjectsForUser()
 
   return (

diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
@@ -1,13 +1,17 @@
 import { EditProject } from "@/components/EditProject"
 import { EmptyState } from "@/components/EmptyState"
-import { Issues } from "@/components/Issues"
 import { NewProject } from "@/components/NewProject"
-import { ProjectSelect } from "@/components/ProjectSelect"
+import { authOptions } from "@/lib/nextAuth"
 import { getProjectsForUser } from "@/lib/project"
 import { ServerCog } from "lucide-react"
-import Link from "next/link"
+import { getServerSession } from "next-auth"
+import { redirect } from "next/navigation"
+
+export default async function Profile() {
+  const session = await getServerSession(authOptions)
+
+  if (!session) redirect("/login")
 
-export default async function Home() {
   const projects = await getProjectsForUser()
 
   return (

diff --git a/src/app/project/[projectId]/page.tsx b/src/app/project/[projectId]/page.tsx
@@ -1,15 +1,22 @@
 import { EmptyState } from "@/components/EmptyState"
 import { Issues } from "@/components/Issues"
 import { ProjectSelect } from "@/components/ProjectSelect"
+import { authOptions } from "@/lib/nextAuth"
 import { getProjectsForUser } from "@/lib/project"
 import { ServerCog } from "lucide-react"
+import { getServerSession } from "next-auth"
 import Link from "next/link"
+import { redirect } from "next/navigation"
 
 interface Props {
   params: { projectId: string }
 }
 
 export default async function Project({ params }: Props) {
+  const session = await getServerSession(authOptions)
+
+  if (!session) redirect("/login")
+
   const projects = await getProjectsForUser()
 
   return (

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -1,12 +1,11 @@
-import { Session } from "next-auth"
+import { getServerSession } from "next-auth"
 import { Logo } from "../Logo"
 import { Menu } from "./Menu"
+import { authOptions } from "@/lib/nextAuth"
 
-interface Props {
-  session: Session | null
-}
+export async function Header() {
+  const session = await getServerSession(authOptions)
 
-export async function Header({ session }: Props) {
   return (
     <header
       className="p-4 flex h-64 bg-cover bg-center items-start justify-between"

diff --git a/src/components/Login/index.tsx → src/components/LoginForm/index.tsx b/src/components/Login/index.tsx → src/components/LoginForm/index.tsx
@@ -4,9 +4,9 @@ import { signIn } from "next-auth/react"
 import { Button } from "@/components/ui/button"
 import { Chrome, Github } from "lucide-react"
 
-export function Login() {
+export function LoginForm() {
   return (
-    <main className="p-4 grid gap-3 fixed left-0 bottom-0 right-0 md:bottom-auto md:top-1/2 md:max-w-lg md:w-full md:mx-auto">
+    <main className="grid gap-3 p-4 mb-8 mx-auto md:max-w-[592px]">
       <Button variant="secondary" onClick={() => signIn("github")}>
         <Github size="18" className="mr-2" /> Login with Github
       </Button>