<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Taufiqul Islam</title>
    <description>The latest articles on Forem by Taufiqul Islam (@taufiqul7756).</description>
    <link>https://forem.com/taufiqul7756</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F997851%2Fc5543cfe-f3d1-438c-b6f5-31832e095a31.png</url>
      <title>Forem: Taufiqul Islam</title>
      <link>https://forem.com/taufiqul7756</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/taufiqul7756"/>
    <language>en</language>
    <item>
      <title>How Software Engineers Can Stay Relevant in the Age of AI</title>
      <dc:creator>Taufiqul Islam</dc:creator>
      <pubDate>Mon, 08 Dec 2025 05:59:56 +0000</pubDate>
      <link>https://forem.com/taufiqul7756/how-software-engineers-can-stay-relevant-in-the-age-of-ai-37dj</link>
      <guid>https://forem.com/taufiqul7756/how-software-engineers-can-stay-relevant-in-the-age-of-ai-37dj</guid>
      <description>&lt;p&gt;Imagine waking up one day to find that the skills you’ve spent years mastering are suddenly being performed faster, cheaper, and more efficiently by AI. This isn’t science fiction - it’s the reality facing software engineers today.&lt;/p&gt;

&lt;p&gt;In 2001, a professor told his students that software engineering was a golden ticket to job security. Fast forward to 2025, and the CEO of GitHub declared that the future of programming is natural language. The prediction came true - but not in the way anyone expected. AI is now capable of writing code, fixing bugs, and even generating entire projects from natural language prompts. Tools like GitHub Copilot and ChatGPT are changing the game, raising a critical question: &lt;br&gt;
&lt;strong&gt;How can software engineers stay relevant in an era where AI is becoming a co-pilot- or even a competitor?⛔&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Don’t be afraid, this isn’t the end of software engineering. It’s the beginning of a new chapter. Let’s explore how you can not only stay relevant but thrive in the age of AI.&lt;/p&gt;

&lt;h2&gt;
  
  
  🧠 &lt;strong&gt;1. AI’s Capabilities and Limitations: What You Need to Know&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiwprrofm53663ewkcydb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiwprrofm53663ewkcydb.png" alt="ai can do vs cant do" width="800" height="646"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;💪 What AI Can Do&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Generate code fast:&lt;/strong&gt; Can produce large, functional codebases    within seconds.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Translate languages:&lt;/strong&gt; Converts code between languages (e.g., Python ⇄ JavaScript).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Automate fixes &amp;amp; tasks:&lt;/strong&gt; Helps with debugging, testing, repetitive work, and UI generation.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;🙏 What AI Can’t Do&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Understand the “why”:&lt;/strong&gt; Lacks human intuition and real context.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Think strategically:&lt;/strong&gt; Can’t handle long-term planning, trade-offs, or ethics well.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Communicate &amp;amp; collaborate:&lt;/strong&gt; Cannot replace human empathy or teamwork.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Be fully reliable:&lt;/strong&gt; May hallucinate or produce incorrect code; most AI code still needs human review.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;📌 &lt;em&gt;AI is like a brilliant junior developer, it can do a lot quickly, but it’s up to us to define the vision, validate the results, and ensure what we’re building is good for society.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0k9ipximc5s5ly1dfeki.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0k9ipximc5s5ly1dfeki.png" alt="junior dev meme" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  🛠️ &lt;strong&gt;2. The Evolving Role of Software Engineers: Beyond Coding&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Software engineering has never been just about writing code. It’s about solving problems, understanding user needs, and making tough decisions. &lt;/p&gt;

&lt;p&gt;In the AI era, the role of engineers is evolving:&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqn4eps3j3b3gy4pc2woy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqn4eps3j3b3gy4pc2woy.png" alt="coders tpo visionaries" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Look at the image, and you’ll understand why engineers are still essential. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Understanding AI:&lt;/strong&gt; Engineers don’t just prompt AI - they understand the models, data pipelines, and risks.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Building Better Software:&lt;/strong&gt; Anyone can prototype a demo with AI, but engineers build scalable, maintainable, and secure systems.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Improving AI&lt;/strong&gt;: Engineers fine-tune models, optimize performance, and make AI accessible to everyone.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;📌 &lt;em&gt;We’re not just building software anymore - we’re building the future of intelligence itself.&lt;/em&gt; &lt;/p&gt;




&lt;h2&gt;
  
  
  📚 &lt;strong&gt;3. How to Prepare for the Future: Foundations &amp;amp; Practical Steps&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Master the Foundations&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Data Structures and Algorithms:&lt;/strong&gt; These are the bedrock of adaptability. Spend time mastering them.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Full-Stack Thinking:&lt;/strong&gt; The days of specializing in just frontend or backend are fading. Future engineers must be versatile, bridging gaps between design, product management, and data.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Develop Soft Skills&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt; &lt;strong&gt;Communication and Collaboration:&lt;/strong&gt; AI can’t replace human connection. Engineers who can explain complex ideas and work well in teams will stand out.&lt;/li&gt;
&lt;li&gt;   &lt;strong&gt;Leadership:&lt;/strong&gt; Engineers are becoming leaders - not just of teams, but of AI itself.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Embrace AI as a Creative Partner&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Use AI to prototype, automate repetitive tasks, and explore generative tools.&lt;/li&gt;
&lt;li&gt;Treat AI like a teammate discuss projects, delegate work, and iterate together.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Stay Adaptable&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Tools change, but principles like critical thinking and problem-solving endure.&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;Focus on learning how to learn&lt;/em&gt;. Adaptability will define leadership in the AI era.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;📌 &lt;em&gt;In the future, engineers won’t just lead teams - they’ll lead AI too.&lt;/em&gt;&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Final Thoughts: Are You an AI Zombie or an AI Master?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;So, here’s the deal:&lt;/strong&gt; AI isn’t just knocking on the door - it’s already inside, raiding your fridge and rearranging your code. The question is, are you using AI, or is AI using you?&lt;/p&gt;

&lt;p&gt;Let’s talk numbers, because numbers don’t lie (unless they’re generated by AI, of course):&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;55% of developers&lt;/strong&gt; are using tools like GitHub Copilot. If you’re not in that 55%, congratulations! You’re officially a manual laborer in a world of cyborgs. Enjoy your handwritten loops and debugging marathons.&lt;br&gt;
&lt;strong&gt;Only 30%&lt;/strong&gt; of those developers accept AI - generated code without changes. If you’re in that 30%, you’re in danger, my friend.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;68% of developers&lt;/strong&gt; (per Stack Overflow 2025) use AI tools daily, cutting repetitive tasks by 40%.&lt;/p&gt;

&lt;p&gt;📌 &lt;em&gt;The future isn’t about fearing AI - it’s about mastering it.&lt;/em&gt; &lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Share your thoughts:&lt;/strong&gt; How are you adapting to AI in your work? Let’s discuss in the comments!&lt;br&gt;
&lt;strong&gt;Stay curious:&lt;/strong&gt; Follow tech blogs, attend webinars, and experiment with AI tools.&lt;br&gt;
&lt;strong&gt;Keep learning:&lt;/strong&gt; The best engineers never stop growing.&lt;/p&gt;




</description>
      <category>softwareengineering</category>
      <category>career</category>
      <category>learning</category>
      <category>futureofwork</category>
    </item>
    <item>
      <title>Next.js 15 Authentication with nextAuth.js , App Router and Middleware</title>
      <dc:creator>Taufiqul Islam</dc:creator>
      <pubDate>Thu, 29 May 2025 15:07:21 +0000</pubDate>
      <link>https://forem.com/taufiqul7756/nextjs-15-authentication-with-app-router-and-middleware-4f94</link>
      <guid>https://forem.com/taufiqul7756/nextjs-15-authentication-with-app-router-and-middleware-4f94</guid>
      <description>&lt;p&gt;Here's a comprehensive guide to setting up authentication in Next.js 15 using the App Router, middleware, and NextAuth.js.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Folder Structure&lt;/strong&gt;&lt;br&gt;
Here's a visual representation of the folder structure :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/src/
├── app/
│   ├── auth/
│   │   ├── login/
│   │   │   └── page.tsx
│   │   └── register/
│   │       └── page.tsx
│   ├── dashboard/
│   │   └── page.tsx
│   ├── api/
│   │   └── auth/
│   │       └── [...nextauth]/
│   │           └── route.ts
│   ├── provider.tsx
│   ├── layout.tsx
│   └── page.tsx
├── middleware/
│   └── middleware.ts
├── lib/
│   ├── auth.ts
│   └── next-auth.d.ts
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;🔐 &lt;strong&gt;1. Authentication Setup : &lt;code&gt;/app/api/auth/[...nextauth]/route.ts&lt;/code&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Sets up the API route for NextAuth using handlers imported from the central auth config &lt;code&gt;(/lib/auth.ts)&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { GET, POST } from "@/lib/auth";
export { GET, POST };
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;⚙️ &lt;strong&gt;2. Auth Configuration : &lt;code&gt;/lib/auth.ts&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;
Defines NextAuth options, including the credentials provider, JWT/session callbacks, token refresh logic, and error handling.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import NextAuth, { type NextAuthOptions } from "next-auth";
import Credentials from "next-auth/providers/credentials";

import { AxiosError } from "axios";
import { post } from "./api/handlers";

type LoginResponse = {
  accessToken: string;
  refreshToken: string;

  user: {
    _id: string;
    stdId: string;
    name: string;
    email: string;
    hallName: string;
    description: string;
    role: string;
  };
};

const authOptions: NextAuthOptions = {
  providers: [
    Credentials({
      name: "Credentials",
      credentials: {
        email: { label: "Email", type: "email" },
        password: { label: "Password", type: "password" },
      },
      authorize: async (credentials) =&amp;gt; {
        if (credentials === null) throw new Error("Missing credentials");

        try {
          const response = await post&amp;lt;LoginResponse&amp;gt;(
            "/api/auth/login",
            {
              email: credentials?.email,
              password: credentials?.password,
            },
            {
              "Content-Type": "application/json",
            },
          );
          console.log("API Response:", response);

          if (response.accessToken) {
            // Return an object that matches your User interface
            return {
              id: response.user._id,
              email: response.user.email,
              name: response.user.name,
              accessToken: response.accessToken,
              refreshToken: response.refreshToken,
              user: response.user,
            };
          }
          return null;
        } catch (error) {
          if (error instanceof AxiosError) {
            throw new Error(error.response?.data?.message || "Login failed");
          }
          console.error("Authentication error:", error);
          throw new Error("Login failed");
        }
      },
    }),
  ],
  callbacks: {
    jwt: async ({ token, user }) =&amp;gt; {
      if (user) {
        // Include both the required fields and your custom data
        token.id = user.id;
        token.email = user.email;
        token.name = user.name;
        token.accessToken = user.accessToken;
        token.refreshToken = user.refreshToken;
        token.user = user.user;
        token.accessTokenExpires = Math.floor(Date.now() / 1000) + 60;
      }
      // Check if the current time is past the access token's expiry time
      const now = Math.floor(Date.now() / 1000);
      if (token.accessTokenExpires &amp;amp;&amp;amp; now &amp;gt; token.accessTokenExpires) {
        try {
          // Attempt to refresh the access token
          const response = await post&amp;lt;{ accessToken: string }&amp;gt;(
            "/api/auth/refresh-token",
            {
              refreshToken: token.refreshToken,
            },
            {
              "Content-Type": "application/json",
            },
          );

          // Update the token with the new access token
          token.accessToken = response.accessToken;
          token.accessTokenExpires = now + 60; // Set new expiry time (1 minute from now)
        } catch (error) {
          console.error("Error refreshing access token", error);
          // Handle refresh token error (e.g., redirect to login)
          return { ...token, error: "RefreshAccessTokenError" };
        }
      }

      return token;
    },
    session: ({ session, token }) =&amp;gt; {
      if (token) {
        session.user = {
          ...session.user,
          // id: token.id,
          email: token.email,
          name: token.name,
        };
        (session as any).accessToken = token.accessToken;
        (session as any).user = token.user;
      }
      return session;
    },
    redirect: async ({ url, baseUrl }) =&amp;gt; {
      // Redirect to login page if there's an error with the refresh token
      if (url === baseUrl) {
        return `${process.env.NEXT_PUBLIC_BASE_URL}/login`;
      }
      return url;
    },
    // authorized: async ({ auth }) =&amp;gt; {
    //   return !!auth;
    // },
  },
  pages: {
    signIn: "/login",
    error: "/login",
  },
  session: {
    strategy: "jwt" as const,
  },
  debug: process.env.NODE_ENV === "development",
  secret:
    process.env.NEXTAUTH_SECRET,
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST, authOptions };
export const auth = handler.auth;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;📄 &lt;strong&gt;3. Type Definitions:  &lt;code&gt;/lib/next-auth.d.ts&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;
Extends NextAuth types &lt;em&gt;(Session, User, and JWT)&lt;/em&gt; to include custom user data like role, hallName, and refreshToken.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import NextAuth from "next-auth";

declare module "next-auth" {
  interface Session {
    accessToken: string;
    refreshToken: string;
    user: {
      _id: string;
      stdId: string;
      name: string | null | undefined;
      email: string | null | undefined;
      hallName: string;
      description: string;
      role: string;
    };
  }

  interface User {
    id: string;
    accessToken: string;
    refreshToken: string;
    user: {
      _id: string;
      stdId: string;
      name: string;
      email: string;
      hallName: string;
      description: string;
      role: string;
    };
  }
}

declare module "next-auth/jwt" {
  interface JWT {
    id?: string;
    email?: string | null;
    name?: string | null;
    accessToken?: string;
    refreshToken?: string;
    accessTokenExpires?: number;
    error?: string;
    user?: {
      _id: string;
      stdId: string;
      name: string;
      email: string;
      hallName: string;
      description: string;
      role: string;
    };
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;🧱 &lt;strong&gt;4. Middleware : &lt;code&gt;/middleware/middleware.ts&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;
Protects private routes by checking if the user is authenticated; redirects to login if no valid token is found.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import { getToken } from "next-auth/jwt";

export async function middleware(request: NextRequest) {
  const token = await getToken({ req: request });

  // Check if the user is trying to access a protected route
  if (!token &amp;amp;&amp;amp; !request.nextUrl.pathname.startsWith("/auth/login")) {
    // Redirect to login page if there is no token
    return NextResponse.redirect(new URL("/auth/login", request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: [
    "/((?!api|_next/static|_next/image|favicon.ico).*)",
    "/dashboard/:path*",
  ],
};
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;🧪 &lt;strong&gt;5. Session Provider : &lt;code&gt;/app/provider.tsx&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;
Wraps the app with SessionProvider so session data is accessible in all client components.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"use client";

import { SessionProvider } from "next-auth/react";
import React from "react";

interface AuthProviderProps {
  children: React.ReactNode;
}

const AuthProvider: React.FC&amp;lt;AuthProviderProps&amp;gt; = ({ children }) =&amp;gt; {
  return &amp;lt;SessionProvider&amp;gt;{children}&amp;lt;/SessionProvider&amp;gt;;
};

export default AuthProvider;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;🌐 &lt;strong&gt;6. Root Layout : &lt;code&gt;/app/layout.tsx&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;
Includes global providers (Auth, React Query, UI layout) and sets up the app’s foundational structure with session support.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// app/layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

import { SessionProvider } from "next-auth/react";
import { Toaster } from "react-hot-toast";
import ReactQueryProvider from "@/providers/QueryClientProvider";
import LayoutProvider from "@/providers/LayoutProvider";
import AuthProvider from "./provider";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "title",
  description: "description",
};

export default async function RootLayout({
  children,
}: Readonly&amp;lt;{
  children: React.ReactNode;
}&amp;gt;) {
  // const session = await auth();

  return (
    &amp;lt;html lang="en" suppressHydrationWarning&amp;gt;
      &amp;lt;head&amp;gt;
        &amp;lt;title&amp;gt;E Delivery Client&amp;lt;/title&amp;gt;
      &amp;lt;/head&amp;gt;
      &amp;lt;body className={inter.className}&amp;gt;
        &amp;lt;AuthProvider&amp;gt;
          &amp;lt;ReactQueryProvider&amp;gt;
            &amp;lt;LayoutProvider&amp;gt;{children}&amp;lt;/LayoutProvider&amp;gt;
          &amp;lt;/ReactQueryProvider&amp;gt;
        &amp;lt;/AuthProvider&amp;gt;
        &amp;lt;Toaster position="top-right" /&amp;gt;
      &amp;lt;/body&amp;gt;
    &amp;lt;/html&amp;gt;
  );
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;🧠 &lt;strong&gt;Accessing Session Data&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;🧾 &lt;strong&gt;Client Component Example:&lt;/strong&gt;&lt;br&gt;
Uses useSession hook from NextAuth to get and display user session data in client-side components.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"use client";
import { useSession } from "next-auth/react";

export default function DashboardPage() {
  const { data: session, status } = useSession();

  return (
    &amp;lt;div&amp;gt;
      {session ? (
        &amp;lt;p&amp;gt;
          Logged in as name: {session.user.name} Email: {session.user.email}
        &amp;lt;/p&amp;gt;
      ) : (
        &amp;lt;p&amp;gt;Not logged in&amp;lt;/p&amp;gt;
      )}
    &amp;lt;/div&amp;gt;
  );
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;🧾 &lt;strong&gt;Server Component Example&lt;/strong&gt;&lt;br&gt;
Fetches the session using auth() in server components, redirecting unauthenticated users to the login page.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { auth } from "@/lib/auth";
import { redirect } from "next/navigation";

export default async function ProfilePage() {
  const session = await auth();

  if (!session) {
    redirect("/auth/login");
  }

  return (
    &amp;lt;div className="p-4"&amp;gt;
      &amp;lt;h1 className="text-2xl font-bold"&amp;gt;Profile&amp;lt;/h1&amp;gt;
      &amp;lt;div className="mt-4 space-y-2"&amp;gt;
        &amp;lt;p&amp;gt;
          &amp;lt;span className="font-semibold"&amp;gt;Email:&amp;lt;/span&amp;gt; {session.user.email}
        &amp;lt;/p&amp;gt;       
      &amp;lt;/div&amp;gt;
    &amp;lt;/div&amp;gt;
  );
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;📌 &lt;strong&gt;Key Features&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;✅ Credentials Auth: Uses email &amp;amp; password login via a custom backend.&lt;br&gt;
🔁 Token Refresh: Automatically refreshes JWT access tokens using refresh tokens.&lt;br&gt;
🔒 Protected Routes: Middleware blocks access to routes if not logged in.&lt;br&gt;
🛡️ Type Safety: Custom types improve safety and developer experience.&lt;br&gt;
🔍 Session Access: Available in both server and client components.&lt;br&gt;
🧱 Provider Pattern: Clean separation of logic using dedicated providers.&lt;/p&gt;

&lt;p&gt;⚠️ &lt;strong&gt;Implementation Notes&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Make sure to configure your environment variables properly, especially NEXTAUTH_SECRET&lt;br&gt;
&lt;code&gt;.env&lt;/code&gt; example :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;NEXT_PUBLIC_BASE_URL=your base url
NODE_ENVL=development
NEXTAUTH_SECRET=hbbinmkbnnkvdfjvskvnkvDDVVfvmndjbvshbvhbrvv=
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The middleware checks for authentication status on every route change&lt;/p&gt;

&lt;p&gt;The session data includes both standard fields (email, name) and custom fields (role, hallName, etc.)&lt;/p&gt;

&lt;p&gt;Error handling is implemented for both login and token refresh operations&lt;/p&gt;

&lt;p&gt;This setup provides a solid foundation for authentication in Next.js 15 applications using the App Router, with proper type safety and route protection.&lt;/p&gt;

</description>
      <category>nextauth</category>
      <category>nextjs</category>
      <category>authentication</category>
      <category>frontend</category>
    </item>
    <item>
      <title>Strapi API with PostgreSQL – Quick Reference 🚀</title>
      <dc:creator>Taufiqul Islam</dc:creator>
      <pubDate>Thu, 17 Oct 2024 11:11:05 +0000</pubDate>
      <link>https://forem.com/taufiqul7756/strapi-api-with-postgresql-quick-reference-205g</link>
      <guid>https://forem.com/taufiqul7756/strapi-api-with-postgresql-quick-reference-205g</guid>
      <description>&lt;p&gt;&lt;strong&gt;Strapi&lt;/strong&gt; is an open-source headless CMS (Content Management System) built to work with any frontend and any database. It provides developers with a flexible and customizable solution for building content-rich applications, giving them full control over the API, data model, and platform.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Strapi? 🏗️
&lt;/h2&gt;

&lt;p&gt;Strapi sets itself apart from other CMS solutions in several ways:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Open-source and Self-hosted&lt;/strong&gt;: Unlike most CMS platforms, Strapi allows you to self-host your instance, offering greater flexibility, control, and security.&lt;br&gt;
&lt;strong&gt;Headless by Design&lt;/strong&gt;: Strapi is built as a headless CMS, meaning the frontend and backend are decoupled, giving you the freedom to use any frontend technology—React, Vue, Angular, or even native mobile apps.&lt;br&gt;
&lt;strong&gt;Customizable APIs&lt;/strong&gt;: Strapi lets you customize the API for your specific needs, whether it’s REST or GraphQL, making it ideal for projects requiring complex data structures.&lt;br&gt;
&lt;strong&gt;Database Agnostic&lt;/strong&gt;: You can use Strapi with multiple databases like PostgreSQL, MongoDB, MySQL, or SQLite, offering seamless flexibility for different use cases.&lt;/p&gt;



&lt;p&gt;This guide provides an overview of basic operations for managing products and images using Strapi, with PostgreSQL as the database. Ensure you have &lt;strong&gt;PostgreSQL&lt;/strong&gt; and &lt;strong&gt;PgAdmin 4&lt;/strong&gt; installed if you're using PostgreSQL for your Strapi setup.&lt;/p&gt;
&lt;h3&gt;
  
  
  Prerequisites 🛠️
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Install and set up Strapi following the &lt;a href="https://docs.strapi.io/dev-docs/quick-start" rel="noopener noreferrer"&gt;official Strapi Quick Start guide&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Ensure you have PostgreSQL installed in your system.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;
  
  
  REST API Overview 🌳
&lt;/h3&gt;

&lt;p&gt;For complete details, refer to the &lt;a href="https://docs.strapi.io/dev-docs/api/rest" rel="noopener noreferrer"&gt;Strapi REST API documentation&lt;/a&gt;.&lt;/p&gt;


&lt;h2&gt;
  
  
  Products Collection API
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Assume&lt;/strong&gt; a &lt;code&gt;Products&lt;/code&gt; collection with fields:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;Product_name&lt;/code&gt;: String (Name of the product)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;img&lt;/code&gt;: Media (Image ID associated with the product)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;state&lt;/code&gt;: Boolean (Indicating product status)&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;
  
  
  1. &lt;strong&gt;Get All Products&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Retrieve all products with their associated data (including images).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Endpoint:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;code&gt;GET http://localhost:1337/api/products?populate=*&lt;/code&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;populate=*&lt;/code&gt; ensures all relational data, including images, are properly fetched.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;
  
  
  2. &lt;strong&gt;Upload an Image&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Upload an image to the Strapi server.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Endpoint:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;code&gt;POST http://localhost:1337/api/upload/&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Request Body:&lt;/strong&gt; (form-data)  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;key = files&lt;/code&gt; (value is the image file uploaded from your browser).&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;
  
  
  3. &lt;strong&gt;Get All Uploaded Images&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Retrieve all uploaded image files.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Endpoint:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;code&gt;GET http://localhost:1337/api/upload/files&lt;/code&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  4. &lt;strong&gt;Add a New Product&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Create a new product entry in the &lt;code&gt;Products&lt;/code&gt; collection.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Endpoint:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;code&gt;POST http://localhost:1337/api/products&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Request Body:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"data"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"Product_name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Samsung S4 old colored"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"state"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"img"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="w"&gt; 
    &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;The &lt;code&gt;"img": 3&lt;/code&gt; field refers to the ID of the uploaded image, in this case, image ID &lt;code&gt;3&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  5. &lt;strong&gt;Update a Product&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Update a specific product using its &lt;code&gt;documentId&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Endpoint:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;code&gt;PUT http://localhost:1337/api/products/:documentId&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Request Body:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"data"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"Product_name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Samsung S4 old updated"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"state"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"img"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="w"&gt; 
    &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here, you update the product name while keeping the image ID (&lt;code&gt;3&lt;/code&gt;), which represents the already uploaded image.&lt;/p&gt;




&lt;p&gt;📚 This document should serve as a quick reference for managing products and images in Strapi with PostgreSQL. For further customization or detailed configurations, consult the official Strapi documentation.&lt;/p&gt;

</description>
      <category>strapi</category>
      <category>webdev</category>
      <category>postgressql</category>
      <category>strapirestapi</category>
    </item>
  </channel>
</rss>
