working MS authentication
This commit is contained in:
parent
8d62b782f7
commit
e1fef68159
5 changed files with 128 additions and 12 deletions
|
|
@ -1,6 +1,9 @@
|
|||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import Navbar from "@/components/navbar";
|
||||
import { auth } from "@/auth";
|
||||
import { SessionProvider } from "next-auth/react";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
|
|
@ -17,16 +20,22 @@ export const metadata: Metadata = {
|
|||
description: "Generated by create next app",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
export default async function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
const session = await auth();
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={`${geistSans.variable} ${geistMono.variable}`}>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
<SessionProvider session={session}>
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
<Navbar />
|
||||
<main className="p-5">{children}</main>
|
||||
</body>
|
||||
</html>
|
||||
</SessionProvider>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
32
src/app/layout.tsx-bak
Normal file
32
src/app/layout.tsx-bak
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={`${geistSans.variable} ${geistMono.variable}`}>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,12 +1,39 @@
|
|||
import { auth } from "@/auth";
|
||||
import LogoutButton from "@/components/LogoutButton";
|
||||
import Image from "next/image";
|
||||
|
||||
// import { getServerSession } from "next-auth/next"
|
||||
|
||||
function Profile
|
||||
() {
|
||||
async function Profile() {
|
||||
const session = await auth();
|
||||
|
||||
console.log(session)
|
||||
//console.trace(session)
|
||||
return (
|
||||
<div>
|
||||
Profile
|
||||
<div className="flex items-center justify-center min-h-[90vh]">
|
||||
<div className="p-5 shadow-2xl rounded-md min-w-[30%] max-w-[50%] flex gap-5 flex-col items-center">
|
||||
{session?.user?.image ? (
|
||||
<Image
|
||||
width={100}
|
||||
height={100}
|
||||
alt={session?.user?.name || ""}
|
||||
src={session?.user?.image || ""}
|
||||
className="w-20 h-20 rounded-full border border-yellow-500 shadow-md"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-20 h-20 rounded-full border border-yellow-500 shadow-md bg-green-600 flex items-center justify-center">
|
||||
{session?.user?.name?.charAt(0).toUpperCase()}
|
||||
{session?.user?.name?.split(" ")[1]?.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
<div className="text-center text-sm">
|
||||
<p>{session?.user?.name}</p>
|
||||
<p>{session?.user?.email}</p>
|
||||
</div>
|
||||
<LogoutButton />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Profile
|
||||
export default Profile;
|
||||
|
|
|
|||
15
src/components/LogoutButton.tsx
Normal file
15
src/components/LogoutButton.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
"use client";
|
||||
import { signOut } from "next-auth/react";
|
||||
|
||||
function LogoutButton() {
|
||||
return (
|
||||
<button
|
||||
onClick={() => signOut()}
|
||||
className="w-full bg-blue-800 text-white p-3 rounded-md hover:opacity-80"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export default LogoutButton;
|
||||
33
src/components/navbar/index.tsx
Normal file
33
src/components/navbar/index.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import { auth } from "@/auth";
|
||||
import Link from "next/link";
|
||||
|
||||
async function Navbar() {
|
||||
const session = await auth();
|
||||
return (
|
||||
<nav className="flex items-center justify-between gap-4 px-5 py-2">
|
||||
<div>
|
||||
<Link href={"/"} className="font-bold">
|
||||
AppLogo
|
||||
</Link>
|
||||
</div>
|
||||
{session?.user?.email ? (
|
||||
<ul className="flex items-center gap-4 flex-row">
|
||||
<li>
|
||||
<Link href={"/dashboard"}>Dashboard</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={"/profile"}>Profile</Link>
|
||||
</li>
|
||||
</ul>
|
||||
) : (
|
||||
<ul className="flex items-center gap-4 flex-row">
|
||||
<li>
|
||||
<Link href={"/login"}>Login</Link>
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
export default Navbar;
|
||||
Loading…
Reference in a new issue