add authentication

minhd-vu · Feb 8, 2024 · 19c2367 · 19c2367
1 parent 3546c2e
commit 19c2367
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 22 deletions.
diff --git a/nextjs/app/api/auth/[...nextauth]/route.ts b/nextjs/app/api/auth/[...nextauth]/route.ts
@@ -1,7 +1,8 @@
 import NextAuth from "next-auth";
 import GithubProvider from "next-auth/providers/github";
 
-export const options = {
+const options = {
+  secret: process.env.NEXTAUTH_SECRET,
   providers: [
     GithubProvider({
       clientId: process.env.GITHUB_ID!,

diff --git a/nextjs/app/api/restricted.ts b/nextjs/app/api/restricted.ts
diff --git a/nextjs/app/components/login-btn.tsx b/nextjs/app/components/login-btn.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useSession, signIn, signOut } from "next-auth/react";
 
 export default function LoginButton() {
@@ -6,7 +7,7 @@ export default function LoginButton() {
   if (session) {
     return (
       <>
-        Signed in as {session.user?.email} <br />
+        Signed in as {session?.user?.email} <br />
         <button onClick={() => signOut()}>Sign out</button>
       </>
     );

diff --git a/nextjs/app/components/session-provider.tsx b/nextjs/app/components/session-provider.tsx
@@ -0,0 +1,3 @@
+"use client";
+import { SessionProvider } from "next-auth/react";
+export default SessionProvider;
diff --git a/nextjs/app/layout.tsx b/nextjs/app/layout.tsx
@@ -1,5 +1,7 @@
 import type { Metadata } from "next";
+import { getServerSession } from "next-auth";
 import { Inter } from "next/font/google";
+import SessionProvider from "./components/session-provider";
 import "./globals.css";
 
 const inter = Inter({ subsets: ["latin"] });
@@ -9,14 +11,18 @@ 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 getServerSession();
+
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <SessionProvider session={session}>{children}</SessionProvider>
+      </body>
     </html>
   );
 }
diff --git a/nextjs/app/page.tsx b/nextjs/app/page.tsx
@@ -1,5 +1,9 @@
 import LoginButton from "./components/login-btn";
 
 export default function Home() {
-  return <LoginButton />;
+  return (
+    <div>
+      <LoginButton />
+    </div>
+  );
 }
diff --git a/nextjs/package.json b/nextjs/package.json
@@ -24,5 +24,19 @@
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "Chrome 118",
+      "last 1 chrome version",
+      "last 1 edge version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }