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 type { Metadata } from "next";
|
||||||
import { Geist, Geist_Mono } from "next/font/google";
|
import { Geist, Geist_Mono } from "next/font/google";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
|
import Navbar from "@/components/navbar";
|
||||||
|
import { auth } from "@/auth";
|
||||||
|
import { SessionProvider } from "next-auth/react";
|
||||||
|
|
||||||
const geistSans = Geist({
|
const geistSans = Geist({
|
||||||
variable: "--font-geist-sans",
|
variable: "--font-geist-sans",
|
||||||
|
|
@ -17,16 +20,22 @@ export const metadata: Metadata = {
|
||||||
description: "Generated by create next app",
|
description: "Generated by create next app",
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function RootLayout({
|
export default async function RootLayout({
|
||||||
children,
|
children,
|
||||||
}: Readonly<{
|
}: Readonly<{
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}>) {
|
||||||
|
const session = await auth();
|
||||||
return (
|
return (
|
||||||
|
<SessionProvider session={session}>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body className={`${geistSans.variable} ${geistMono.variable}`}>
|
<body
|
||||||
{children}
|
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||||
|
>
|
||||||
|
<Navbar />
|
||||||
|
<main className="p-5">{children}</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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 (
|
return (
|
||||||
<div>
|
<div className="flex items-center justify-center min-h-[90vh]">
|
||||||
Profile
|
<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>
|
||||||
)
|
)}
|
||||||
|
<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