login config

.env

@@ -0,0 +1,5 @@
+NEXTAUTH_URL="http://localhost:3000"
+NEXTAUTH_SECRET="ldiFvWT9pk9xDSZkPHmw7WHSXPQMh6Vp5tOR/+TusrE="
+
+GITHUB_ID="3d419ab419c7f047ff99"
+GITHUB_SECRET="506da3ba7af5bb9d77f9db5786349a5cf8d3691d"

next.config.js

@@ -2,16 +2,19 @@
  * @type {import('next').NextConfig}
  */
 const nextConfig = {
-    output: 'export',
-
-    // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
-    // trailingSlash: true,
-
-    // Optional: Prevent automatic `/me` -> `/me/`, instead preserve `href`
-    // skipTrailingSlashRedirect: true,
-
-    // Optional: Change the output directory `out` -> `dist`
-    // distDir: 'dist',
+       images: {
+      remotePatterns: [
+        {
+          protocol: 'https',
+          hostname: 'i.imgur.com',
+        },
+      ],
+    },
+    env: {
+      GITHUB_APP_CLIENT_ID: '3d419ab419c7f047ff99',
+      GITHUB_APP_CLIENT_SECRET: '506da3ba7af5bb9d77f9db5786349a5cf8d3691d',
+      NEXTAUTH_SECRET: 'ldiFvWT9pk9xDSZkPHmw7WHSXPQMh6Vp5tOR/+TusrE=',
+    },
   }
 
   module.exports = nextConfig

package.json

@@ -15,9 +15,12 @@
     "react-dom": "^18"
   },
   "devDependencies": {
+    "@types/node": "20.11.19",
+    "@types/react": "18.2.56",
     "autoprefixer": "^10.0.1",
     "daisyui": "^4.7.2",
     "postcss": "^8",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3"
   }
 }

src/app/api/auth/[...nextauth]/route.js

@@ -0,0 +1,6 @@
+import { authOptions } from "../../../lib/nextAuth";
+import NextAuth from "next-auth";
+
+const handler = NextAuth(authOptions)
+
+export { handler as GET, handler as POST}

src/app/api/route.js

@@ -0,0 +1,9 @@
+import { getServerSession } from "next-auth";
+import { AuthOptions, authOptions } from "../lib/nextAuth";
+import { NextResponse } from "next/server";
+
+export async function GET(request) {
+    const session = await getServerSession(authOptions)
+    console.log({session})
+    return NextResponse.json({id: 1})
+}

src/app/auth/[...nextauth]/route.js

@@ -0,0 +1,6 @@
+import { authOptions } from "../../lib/nextAuth";
+import NextAuth from "next-auth";
+
+const handler = NextAuth(authOptions)
+
+export { handler as GET, handler as POST}

src/app/components/Navbar.js

@@ -3,16 +3,16 @@ import React from "react";
 import "./components.css";
 const Navbar = () => {
   return (
-    <nav className="navstyle">
+    <nav className="questrial-regular">
       <div className="mx-auto flex max-w-screen-xl flex-wrap items-center justify-between p-4">
-        <a className="flex items-center space-x-3 rtl:space-x-reverse">
+        <a href="/" className="flex items-center space-x-3 rtl:space-x-reverse">
           <img
             src="https://raw.githubusercontent.com/Bhavya031/shlper/0d2e9d178319b0132f3832ffbda50602f0063408/public/Asset%203.svg"
             className="h-8"
             alt="Logo"
           />
         </a>
-        <button className="NavText">Login</button>
+        <a href="/api/auth/signin" className="Questrial">Login</a>
       </div>
     </nav>
   );

src/app/components/SessionProvider.tsx

@@ -0,0 +1,3 @@
+"use client";
+import { SessionProvider } from "next-auth/react";
+export default SessionProvider;

src/app/components/components.css

@@ -11,4 +11,10 @@
 }
 .navstyle {
     border-bottom: solid #353333 1px
-};
+};
+html {
+  font-family: var(--font-Questrial);
+}
+nav {
+  font-family: var(--font-Questrial);
+}

src/app/fonts.js

@@ -0,0 +1,5 @@
+import { Questrial } from 'next/font/google'
+
+export const Questrial = Questrial({
+  subsets: ['latin'],
+})

src/app/globals.css

@@ -1,8 +1,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');
 
 html {
-  font-family: 'Questrial', sans-serif;
+  font-family: var(--font-Questrial);
 }
+nav {
+  font-family: var(--font-Questrial);
+}

src/app/layout.js

@@ -1,17 +1,16 @@
-import { Inter } from "next/font/google";
-import "./globals.css";
-
-const inter = Inter({ subsets: ["latin"] });
-
-export const metadata = {
-  title: "Shlper",
-  description: "Study Utiltes to help you learn better",
-};
-
+import { Questrial } from 'next/font/google'
+
+// If loading a variable font, you don't need to specify the font weight
+const QuestrialFont = Questrial({
+  subsets: ['latin'],
+  display: 'swap',
+  weight: '400',
+})
+
 export default function RootLayout({ children }) {
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
+    <html lang="en" className={QuestrialFont.className}>
+      <body>{children}</body>
     </html>
-  );
-}
+  )
+}

src/app/lib/nextAuth.js

@@ -0,0 +1,14 @@
+import { NextAuthOptions } from "next-auth";
+import GithubProvider from "next-auth/providers/github";
+
+
+export const authOptions = {
+    secret: process.env.NEXTAUTH_SECRET,
+    providers: [
+        GithubProvider({
+            clientId: process.env.GITHUB_APP_CLIENT_ID,
+            clientSecret: process.env.GITHUB_APP_CLIENT_SECRET,
+        }),
+    ],
+
+}

src/app/page.js

@@ -1,11 +1,13 @@
 import Navbar from "./components/Navbar";
+
+
 const Home = () => {
+
   return (
       <div>
         <Navbar />
-        <video src="./BG.mp4 " autoPlay loop muted />
+        <video src="./BG.mp4" autoPlay loop muted style={{ width: '100%', height: '100%' }} />
       </div>
-
   );
 };
 

tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}