Merge branch 'CodeHarborHub:main' into main

Author: sreevidya-16

courses/Next.Js/Intermediate-level/Authentication/Implement-Auth.md

@@ -0,0 +1,77 @@
+---
+id: lesson-1
+title: "Authentication and Authorization in Next.js"
+sidebar_label: Authentication and Authorization 
+sidebar_position: 1
+description: "Authentication and Authorization in Next.js"
+tags: [courses,intermediate-level,FramWorks,Introduction]
+---
+   
+
+Implementing authentication and authorization in Next.js can be streamlined using libraries like NextAuth.js for handling various authentication strategies, JWT-based authentication for token management, and role-based access control to protect routes and API endpoints.
+
+#### Implementing Authentication with NextAuth.js
+
+NextAuth.js is a flexible authentication library for Next.js applications. It supports various authentication providers like Google, GitHub, and custom email/password.
+
+1. **Install NextAuth.js**:
+   ```bash
+   npm install next-auth
+   ```
+
+2. **Configure NextAuth.js**:
+   - Create a new API route for NextAuth in `src/pages/api/auth/[...nextauth].js`:
+     ```javascript
+     // src/pages/api/auth/[...nextauth].js
+     import NextAuth from 'next-auth';
+     import Providers from 'next-auth/providers';
+
+     export default NextAuth({
+       providers: [
+         Providers.Google({
+           clientId: process.env.GOOGLE_CLIENT_ID,
+           clientSecret: process.env.GOOGLE_CLIENT_SECRET,
+         }),
+         // Add other providers here
+       ],
+       database: process.env.DATABASE_URL, // Optional: For storing user accounts in a database
+     });
+     ```
+
+3. **Add Environment Variables**:
+   - Create a `.env.local` file in the root of your project and add the required environment variables:
+     ```env
+     GOOGLE_CLIENT_ID=your-google-client-id
+     GOOGLE_CLIENT_SECRET=your-google-client-secret
+     DATABASE_URL=your-database-url
+     ```
+
+4. **Add Authentication to Pages**:
+   - Use the `useSession` hook to access the authentication session:
+     ```javascript
+     // src/pages/index.js
+     import { useSession, signIn, signOut } from 'next-auth/client';
+
+     export default function Home() {
+       const [session, loading] = useSession();
+
+       return (
+         <div>
+           <h1>NextAuth.js Authentication</h1>
+           {loading && <p>Loading...</p>}
+           {!session && (
+             <div>
+               <p>You are not signed in.</p>
+               <button onClick={() => signIn('google')}>Sign in with Google</button>
+             </div>
+           )}
+           {session && (
+             <div>
+               <p>Signed in as {session.user.email}</p>
+               <button onClick={() => signOut()}>Sign out</button>
+             </div>
+           )}
+         </div>
+       );
+     }
+     ```

courses/Next.Js/Intermediate-level/Authentication/JWT.md

@@ -0,0 +1,53 @@
+---
+id: lesson-2
+title: "JWT-Based Authentication"
+sidebar_label: JWT-Based Authentication 
+sidebar_position: 2
+description: "JWT-Based Authentication"
+tags: [courses,intermediate-level,FramWorks,Introduction]
+---
+ 
+
+JWT (JSON Web Token) is a common method for securing APIs by encoding user information within a token.
+
+1. **Install JWT Dependencies**:
+   ```bash
+   npm install jsonwebtoken
+   ```
+
+2. **Generate JWTs**:
+   ```javascript
+   // src/utils/jwt.js
+   import jwt from 'jsonwebtoken';
+
+   const secret = process.env.JWT_SECRET;
+
+   export function generateToken(user) {
+     return jwt.sign({ id: user.id, email: user.email }, secret, { expiresIn: '1h' });
+   }
+
+   export function verifyToken(token) {
+     try {
+       return jwt.verify(token, secret);
+     } catch (err) {
+       return null;
+     }
+   }
+   ```
+
+3. **Protecting API Routes**:
+   ```javascript
+   // src/pages/api/protected.js
+   import { verifyToken } from '../../utils/jwt';
+
+   export default function handler(req, res) {
+     const token = req.headers.authorization?.split(' ')[1];
+     const user = verifyToken(token);
+
+     if (!user) {
+       return res.status(401).json({ message: 'Unauthorized' });
+     }
+
+     res.status(200).json({ message: 'This is a protected route', user });
+   }
+   ```

courses/Next.Js/Intermediate-level/Authentication/Role-based.md

@@ -0,0 +1,61 @@
+---
+id: lesson-3
+title: "Role-Based Access Control"
+sidebar_label: Protecting Routes and API Endpoints 
+sidebar_position: 3
+description: "Role-Based Access Control"
+tags: [courses,intermediate-level,FramWorks,Introduction]
+---
+  
+ 
+
+1. **Assign Roles to Users**:
+   - Modify your user model to include roles:
+     ```javascript
+     // src/models/User.js
+     import mongoose from 'mongoose';
+
+     const UserSchema = new mongoose.Schema({
+       name: String,
+       email: String,
+       role: {
+         type: String,
+         enum: ['user', 'admin'],
+         default: 'user',
+       },
+     });
+
+     export default mongoose.models.User || mongoose.model('User', UserSchema);
+     ```
+
+2. **Create Middleware for Role-Based Access Control**:
+   ```javascript
+   // src/utils/withRole.js
+   import { verifyToken } from './jwt';
+
+   export function withRole(handler, role) {
+     return async (req, res) => {
+       const token = req.headers.authorization?.split(' ')[1];
+       const user = verifyToken(token);
+
+       if (!user || user.role !== role) {
+         return res.status(403).json({ message: 'Forbidden' });
+       }
+
+       req.user = user;
+       return handler(req, res);
+     };
+   }
+   ```
+
+3. **Protect Routes with Role-Based Access Control**:
+   ```javascript
+   // src/pages/api/admin.js
+   import { withRole } from '../../utils/withRole';
+
+   const handler = (req, res) => {
+     res.status(200).json({ message: 'Admin route', user: req.user });
+   };
+
+   export default withRole(handler, 'admin');
+   ```

courses/Next.Js/Intermediate-level/Authentication/_category_.json

@@ -0,0 +1,8 @@
+{
+    "label": "Authentication and Authorization",
+    "position": 2,
+    "link": {
+      "type": "generated-index",
+      "description": "Learn Next.Js Authentication and Authorization."
+    }
+  }

courses/Next.Js/Intermediate-level/Authentication/protection-Routes.md

@@ -0,0 +1,73 @@
+---
+id: lesson-4
+title: "Protecting Routes and API Endpoints"
+sidebar_label: Protecting Routes and API Endpoints 
+sidebar_position: 4
+description: "Protecting Routes and API Endpoints"
+tags: [courses,intermediate-level,FramWorks,Introduction]
+---
+  
+
+1. **Protecting Next.js Pages**:
+   - Use the `getServerSideProps` function to protect pages:
+     ```javascript
+     // src/pages/protected.js
+     import { getSession } from 'next-auth/client';
+
+     export default function ProtectedPage({ session }) {
+       if (!session) {
+         return <p>Access Denied</p>;
+       }
+
+       return <p>Welcome, {session.user.email}</p>;
+     }
+
+     export async function getServerSideProps(context) {
+       const session = await getSession(context);
+
+       if (!session) {
+         return {
+           redirect: {
+             destination: '/api/auth/signin',
+             permanent: false,
+           },
+         };
+       }
+
+       return {
+         props: { session },
+       };
+     }
+     ```
+
+2. **Protecting API Endpoints with Middleware**:
+   ```javascript
+   // src/utils/withAuth.js
+   import { verifyToken } from './jwt';
+
+   export function withAuth(handler) {
+     return async (req, res) => {
+       const token = req.headers.authorization?.split(' ')[1];
+       const user = verifyToken(token);
+
+       if (!user) {
+         return res.status(401).json({ message: 'Unauthorized' });
+       }
+
+       req.user = user;
+       return handler(req, res);
+     };
+   }
+   ```
+
+   ```javascript
+   // src/pages/api/protected.js
+   import { withAuth } from '../../utils/withAuth';
+
+   const handler = (req, res) => {
+     res.status(200).json({ message: 'Protected route', user: req.user });
+   };
+
+   export default withAuth(handler);
+   ```
+ 

courses/Next.Js/Intermediate-level/Data-Fetching/GraphQl.md

@@ -0,0 +1,69 @@
+---
+id: lesson-3
+title: "Using GraphQL with Next.js"
+sidebar_label: Data Fetching and Caching
+sidebar_position: 3
+description: "Using GraphQL with Next.js"
+tags: [courses,intermediate-level,FramWorks,Introduction]
+---
+   
+
+You can use GraphQL with Next.js using Apollo Client or other GraphQL clients.
+
+1. **Install Apollo Client**:
+   ```bash
+   npm install @apollo/client graphql
+   ```
+
+2. **Setup Apollo Client**:
+   ```javascript
+   // src/lib/apolloClient.js
+   import { ApolloClient, InMemoryCache } from '@apollo/client';
+
+   const client = new ApolloClient({
+     uri: 'https://your-graphql-endpoint',
+     cache: new InMemoryCache(),
+   });
+
+   export default client;
+   ```
+
+3. **Use Apollo Client in a Page**:
+   ```javascript
+   // src/pages/index.js
+   import { ApolloProvider, gql, useQuery } from '@apollo/client';
+   import client from '../lib/apolloClient';
+
+   const GET_POSTS = gql`
+     query GetPosts {
+       posts {
+         id
+         title
+       }
+     }
+   `;
+
+   function Posts() {
+     const { loading, error, data } = useQuery(GET_POSTS);
+
+     if (loading) return <p>Loading...</p>;
+     if (error) return <p>Error :(</p>;
+
+     return (
+       <ul>
+         {data.posts.map(post => (
+           <li key={post.id}>{post.title}</li>
+         ))}
+       </ul>
+     );
+   }
+
+   export default function Home() {
+     return (
+       <ApolloProvider client={client}>
+         <h1>Posts</h1>
+         <Posts />
+       </ApolloProvider>
+     );
+   }
+   ```