feat: basic #/out

EddieHubCommunity · May 27, 2024 · a563c84 · a563c84
1 parent 6f1e421
commit a563c84
Show file tree

Hide file tree

Showing 7 changed files with 251 additions and 53 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1,4 @@
+NEXTAUTH_URL=
+NEXTAUTH_SECRET=
+LINKEDIN_CLIENT_ID=
+LINKEDIN_CLIENT_SECRET=
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "@heroicons/react": "^2.1.3",
     "@tailwindcss/forms": "^0.5.7",
     "next": "14.2.3",
+    "next-auth": "^4.24.7",
     "react": "^18",
     "react-dom": "^18"
   },

diff --git a/src/app/api/auth/[...nextauth]/route.js b/src/app/api/auth/[...nextauth]/route.js
@@ -0,0 +1,30 @@
+import NextAuth from "next-auth";
+import LinkedInProvider from "next-auth/providers/linkedin";
+
+const authOptions = {
+  providers: [
+    LinkedInProvider({
+      clientId: process.env.LINKEDIN_CLIENT_ID,
+      clientSecret: process.env.LINKEDIN_CLIENT_SECRET,
+      authorization: {
+        params: { scope: "openid profile email" },
+      },
+      issuer: "https://www.linkedin.com/oauth",
+      jwks_endpoint: "https://www.linkedin.com/oauth/openid/jwks",
+      profile(profile, tokens) {
+        const defaultImage =
+          "https://cdn-icons-png.flaticon.com/512/174/174857.png";
+        return {
+          id: profile.sub,
+          name: profile.name,
+          email: profile.email,
+          image: profile.picture ?? defaultImage,
+        };
+      },
+    }),
+  ],
+};
+
+const handler = NextAuth(authOptions);
+
+export { authOptions, handler as GET, handler as POST };
diff --git a/src/app/layout.js b/src/app/layout.js
@@ -1,6 +1,11 @@
+import { getServerSession } from "next-auth/next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+
 import { classNames } from "@/utils/classNames";
+import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -9,10 +14,19 @@ export const metadata = {
   description: "Directory for Content Creators to get paid sponsorship",
 };
 
-export default function RootLayout({ children }) {
+export default async function RootLayout({ children }) {
+  const session = await getServerSession(authOptions);
+  console.log("SESSION", session);
+
   return (
     <html lang="en" className="h-full bg-gray-100">
-      <body className={classNames("h-full", inter.className)}>{children}</body>
+      <body className={classNames("h-full", inter.className)}>
+        <div className="min-h-full">
+          <Header session={session} />
+          <main className="-mt-24 pb-8">{children}</main>
+          <Footer />
+        </div>
+      </body>
     </html>
   );
 }
diff --git a/src/app/page.js b/src/app/page.js
@@ -1,44 +1,33 @@
-import Footer from "@/components/Footer";
-import Header from "@/components/Header";
-
-export default function Example() {
+export default function Page() {
   return (
-    <>
-      <div className="min-h-full">
-        <Header />
-        <main className="-mt-24 pb-8">
-          <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:max-w-7xl lg:px-8">
-            <h1 className="sr-only">Page title</h1>
-            {/* Main 3 column grid */}
-            <div className="grid grid-cols-1 items-start gap-4 lg:grid-cols-3 lg:gap-8">
-              {/* Left column */}
-              <div className="grid grid-cols-1 gap-4 lg:col-span-2">
-                <section aria-labelledby="section-1-title">
-                  <h2 className="sr-only" id="section-1-title">
-                    Section title
-                  </h2>
-                  <div className="overflow-hidden rounded-lg bg-white shadow">
-                    <div className="p-6">{/* Your content */}</div>
-                  </div>
-                </section>
-              </div>
+    <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:max-w-7xl lg:px-8">
+      <h1 className="sr-only">Page title</h1>
+      {/* Main 3 column grid */}
+      <div className="grid grid-cols-1 items-start gap-4 lg:grid-cols-3 lg:gap-8">
+        {/* Left column */}
+        <div className="grid grid-cols-1 gap-4 lg:col-span-2">
+          <section aria-labelledby="section-1-title">
+            <h2 className="sr-only" id="section-1-title">
+              Section title
+            </h2>
+            <div className="overflow-hidden rounded-lg bg-white shadow">
+              <div className="p-6">{/* Your content */}</div>
+            </div>
+          </section>
+        </div>
 
-              {/* Right column */}
-              <div className="grid grid-cols-1 gap-4">
-                <section aria-labelledby="section-2-title">
-                  <h2 className="sr-only" id="section-2-title">
-                    Section title
-                  </h2>
-                  <div className="overflow-hidden rounded-lg bg-white shadow">
-                    <div className="p-6">{/* Your content */}</div>
-                  </div>
-                </section>
-              </div>
+        {/* Right column */}
+        <div className="grid grid-cols-1 gap-4">
+          <section aria-labelledby="section-2-title">
+            <h2 className="sr-only" id="section-2-title">
+              Section title
+            </h2>
+            <div className="overflow-hidden rounded-lg bg-white shadow">
+              <div className="p-6">{/* Your content */}</div>
             </div>
-          </div>
-        </main>
-        <Footer />
+          </section>
+        </div>
       </div>
-    </>
+    </div>
   );
 }