Module 7: Authentication in Next.js

1. Authentication යනු කුමක්ද?

Authentication (සත්‍යාපනය) යනු යම් පරිශීලකයෙකු තමා කියන පුද්ගලයාම බව තහවුරු කරගැනීමේ ක්‍රියාවලියයි. සරලවම, "ඔබ කවුද?" යන ප්‍රශ්නයට පිළිතුරු සෙවීමයි. වෙබ් යෙදුමකදී, මෙය සාමාන්‍යයෙන් සිදුවන්නේ username/password, social login (Google, Facebook), හෝ magic links වැනි ක්‍රම මගිනි.

Dashboard, user profile වැනි පිටු access කිරීමට අවසර දීමට පෙර, පරිශීලකයා login වී ඇත්දැයි පරීක්ෂා කිරීම අත්‍යවශ්‍ය වේ. Next.js යෙදුමක authentication ක්‍රියාත්මක කිරීම මුල සිටම ගොඩනැගීම තරමක් සංකීර්ණ කාර්යයක් විය හැකිය. නමුත් වාසනාවකට මෙන්, අපිට මේ සඳහා ඉතාමත් ප්‍රබල සහ පහසු library එකක් තිබේ: NextAuth.js.

2. NextAuth.js: Next.js සඳහා සරලම විසඳුම

NextAuth.js (දැන් Auth.js ලෙසද හඳුන්වයි) යනු Next.js සඳහාම නිර්මාණය වූ, සම්පූර්ණ authentication විසඳුමකි. මෙය භාවිතා කර, ඉතා අඩු code ප්‍රමාණයකින්, සංකීර්ණ authentication පද්ධතියක් අපේ යෙදුමට එකතු කරගත හැක.

• සරල Setup එක: ඉතා ඉක්මනින් project එකට එකතු කරගත හැක.
• විවිධ Providers: Google, GitHub, Facebook වැනි social logins මෙන්ම, email/password (Credentials), සහ passwordless (Email) වැනි ක්‍රම රැසකට සහාය දක්වයි.
• ආරක්ෂාව: JWT (JSON Web Tokens), signed cookies, CSRF protection වැනි ආරක්ෂක ක්‍රමවේදයන් default ලෙසම ක්‍රියාත්මක වේ.
• නම්‍යශීලීබව: Database සමග හෝ database-less ක්‍රමයට ක්‍රියාත්මක කළ හැක.

NextAuth.js Setup කිරීම

අපි NextAuth.js අපේ project එකට install කර configure කරමු.

1. Install කිරීම: Terminal එකේ පහත command එක run කරන්න.

   npm install next-auth

2. Catch-all API Route එක සෑදීම:

   NextAuth.js හි සියලුම server-side logic (login, logout, session management) හැසිරවෙන්නේ එකම API route එකක් මගිනි. pages/api/auth/[...nextauth].js නමින් file එකක් සාදා පහත code එක ඇතුළත් කරන්න.

   // File: pages/api/auth/[...nextauth].js
   import NextAuth from 'next-auth';
   import CredentialsProvider from 'next-auth/providers/credentials';
   
   export default NextAuth({
     providers: [
       CredentialsProvider({
         name: 'Credentials',
         credentials: {
           email: { label: "Email", type: "text" },
           password: { label: "Password", type: "password" }
         },
         async authorize(credentials, req) {
           // Here you would check credentials against your database
           // For this example, we'll use a dummy user
           if (credentials.email === 'user@example.com' && credentials.password === 'password') {
             return { id: '1', name: 'Test User', email: 'user@example.com' };
           } else {
             // If you return null, an error will be displayed
             return null;
           }
         }
       })
     ],
     session: {
       strategy: 'jwt', // Use JSON Web Tokens for session management
     },
     secret: process.env.NEXTAUTH_SECRET, // A secret key for signing tokens
   });
   

   ඔබේ project root එකේ .env.local file එකක් සාදා, NEXTAUTH_SECRET නමින් random string එකක් එකතු කරන්න. (උදා: `openssl rand -base64 32` command එකෙන් secret එකක් generate කරගන්න පුළුවන්).

3. Session Provider එක එකතු කිරීම:

   Client-side එකේ session data access කරන්න නම්, අපේ app එක SessionProvider එකකින් wrap කරන්න ඕන. pages/_app.js file එකට ගොස් එය modify කරන්න.

   // File: pages/_app.js
   import { SessionProvider } from 'next-auth/react';
   import '../styles/globals.css'; // Your global styles
   
   function MyApp({ Component, pageProps: { session, ...pageProps } }) {
     return (
       <SessionProvider session={session}>
         <Component {...pageProps} />
       </SessionProvider>
     );
   }
   
   export default MyApp;
   

3. Pages සහ API Routes ආරක්ෂා කිරීම

Authentication system එකක් හැදුවට පස්සේ, වැදගත්ම දේ තමයි login නොවූ පරිශීලකයින්ට access විය නොහැකි ලෙස pages සහ API endpoints ආරක්ෂා කිරීම.

Client-Side Protection (`useSession` hook)

Component එකක් තුළ user login වෙලාද කියලා දැනගන්න useSession hook එක භාවිතා කරන්න පුළුවන්.

import { useSession, signIn, signOut } from 'next-auth/react';

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

  if (status === 'loading') {
    return <p>Loading...</p>;
  }

  if (session) {
    return (
      <>
        Signed in as {session.user.email} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    );
  }

  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </>
  );
}

Server-Side Protection (`getServerSideProps`)

Client-side protection එකේදී, page එකේ content එක මොහොතකට unauthenticated userට පෙනී, පසුව redirect වෙන්න පුළුවන්. මෙය වළක්වා, server එකේදීම page එක ආරක්ෂා කරන්න getSession function එක `getServerSideProps` තුළ භාවිතා කරන්න පුළුවන්.

// File: pages/dashboard.js
import { getSession } from 'next-auth/react';

export default function Dashboard({ user }) {
  return <h1>Welcome to your Dashboard, {user.name}!</h1>;
}

export async function getServerSideProps(context) {
  const session = await getSession(context);

  // If there's no session, redirect to the login page
  if (!session) {
    return {
      redirect: {
        destination: '/api/auth/signin', // Default NextAuth signin page
        permanent: false,
      },
    };
  }

  // If there is a session, pass the user data to the page
  return {
    props: {
      user: session.user,
    },
  };
}

දැන් login නොවූ කෙනෙක් `/dashboard` වෙත යන්න උත්සාහ කළොත්, server එකෙන්ම ඔහුව login page එකට redirect කරයි.

4. Hands-on: Login & Registration (with NextAuth.js)

අපි ఇప్పుడు ඉහත `getServerSideProps` උදාහරණය භාවිතා කර, ආරක්ෂිත dashboard page එකක් සහ login/logout functionality එකක් හදමු.

1. NextAuth.js Setup කිරීම:

   ඉහත පියවර 2 හි "NextAuth.js Setup කිරීම" කොටසේ ඇති සියලුම දේ (install, API route, `_app.js` modification, `.env.local` file) ඔබේ project එකේ ක්‍රියාත්මක කරන්න.

2. ආරක්ෂිත Dashboard Page එක සෑදීම:

   `pages/dashboard.js` නමින් file එකක් සාදා, ඉහත "Server-Side Protection" කොටසේ ඇති code එක ඇතුළත් කරන්න.

3. Login/Logout Buttons එකතු කිරීම:

   ඔබේ Navbar එකට හෝ homepage එකට, ඉහත "Client-Side Protection" කොටසේ ඇති `MyComponent` උදාහරණයේ code එක එකතු කර, login/logout buttons පෙන්වන්න.

   // Example: Add this to your Navbar.js
   import { useSession, signIn, signOut } from 'next-auth/react';
   
   // Inside your Navbar component...
   const { data: session } = useSession();
   
   // ...
   // In your JSX
   {session ? (
     <button onClick={() => signOut()}>Sign Out</button>
   ) : (
     <button onClick={() => signIn()}>Sign In</button>
   )}
   

4. පරීක්ෂා කිරීම:
   • මුලින්ම, http://localhost:3000/dashboard වෙත යන්න. ඔබව login page එකට redirect විය යුතුයි.
   • "Sign In" button එක click කරන්න. ඔබව NextAuth.js හි default login page එකට ගෙන යනු ඇත.
   • Email: `user@example.com` සහ Password: `password` (අපි API route එකේ hard-code කළ dummy user) ඇතුළත් කර sign in වන්න.
   • දැන් ඔබව නැවත app එකට ගෙන ආ පසු, නැවත `/dashboard` වෙත යන්න. මෙවර ඔබට "Welcome to your Dashboard, Test User!" යන පණිවිඩය පෙනෙනු ඇත.
   • "Sign Out" button එක click කර, නැවත `/dashboard` වෙත ගියොත්, ඔබව නැවත login page එකට redirect විය යුතුයි.