फ्रंटएंड पर React.js, बैकएंड पर Express.js का उपयोग करके एक प्रमाणीकरण प्रणाली बनाने के लिए हमें निम्नलिखित को लागू करने की आवश्यकता है:

• फ्रंटएंड (पल्सी के साथ रिएक्ट.जेएस): लॉगिन और लॉगआउट संभालें, उपयोगकर्ता प्रमाणीकरण स्थिति बनाए रखें, और टोकन जारी रखें।
• बैकएंड (एक्सप्रेस.जेएस): प्रमाणीकरण समापन बिंदु प्रदान करें (जैसे, लॉगिन, लॉगआउट, उपयोगकर्ता सत्यापन)।

चरण 1: बैकएंड (एक्सप्रेस.जेएस) सेटअप

आइए उपयोगकर्ता प्रमाणीकरण और टोकन जेनरेशन को संभालने के लिए बैकएंड से शुरुआत करें।

आवश्यक पैकेज स्थापित करें

npm install express bcryptjs jsonwebtoken cors

बैकएंड कोड (एक्सप्रेस.जेएस)

प्रमाणीकरण तर्क को संभालने के लिए एक authController.js फ़ाइल बनाएं:

// authController.js
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');

// Mock user data (in production, you would use a real database)
const users = [
  {
    id: 1,
    username: 'john',
    password: '$2a$10$O1s8iLKRLPbPqhc1uTquLO.xODTC1U/Z8xGoEDU6/Dc0PAQ3MkCKy', // hashed password for 'password123'
  },
];

// JWT Secret
const JWT_SECRET = 'supersecretkey';

exports.login = (req, res) => {
  const { username, password } = req.body;

  const user = users.find((u) => u.username === username);

  if (!user) {
    return res.status(401).json({ error: 'Invalid credentials' });
  }

  bcrypt.compare(password, user.password, (err, isMatch) => {
    if (isMatch) {
      // Create a token
      const token = jwt.sign({ id: user.id, username: user.username }, JWT_SECRET, { expiresIn: '1h' });
      return res.json({ token });
    } else {
      return res.status(401).json({ error: 'Invalid credentials' });
    }
  });
};

exports.validateToken = (req, res) => {
  const token = req.header('Authorization').replace('Bearer ', '');

  if (!token) {
    return res.status(401).json({ error: 'No token provided' });
  }

  try {
    const decoded = jwt.verify(token, JWT_SECRET);
    res.json({ user: { id: decoded.id, username: decoded.username } });
  } catch (err) {
    res.status(401).json({ error: 'Invalid token' });
  }
};

अगला, एक्सप्रेस स्थापित करने के लिए मुख्य सर्वर.जेएस फ़ाइल बनाएं:

// server.js
const express = require('express');
const cors = require('cors');
const { login, validateToken } = require('./authController');

const app = express();
app.use(express.json());
app.use(cors());

// Authentication routes
app.post('/api/login', login);
app.get('/api/validate', validateToken);

// Start the server
const PORT = 5000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

• POST /api/login: एक उपयोगकर्ता को प्रमाणित करता है और एक JWT टोकन लौटाता है।
• GET /api/validate: एक टोकन को मान्य करता है और उपयोगकर्ता की जानकारी लौटाता है।

चरण 2: फ्रंटएंड (पल्सी के साथ रिएक्ट.जेएस)

अब प्रमाणीकरण स्थिति को संभालने के लिए React.js और Pulsy का उपयोग करके फ्रंटएंड सेट करते हैं।

आवश्यक पैकेज स्थापित करें

npm install axios pulsy

पल्सी स्टोर सेटअप

हम वैश्विक स्तर पर प्रमाणीकरण स्थिति को प्रबंधित करने के लिए एक पल्सी स्टोर बनाएंगे।

// authStore.js
import { createStore, addMiddleware } from 'pulsy';
import axios from 'axios';

// Create a store to hold the user and token
createStore('auth', {
  user: null,
  token: null,
}, { persist: true }); // Persist the auth state in localStorage

// Middleware to add Authorization header for authenticated requests
addMiddleware('auth', (nextValue, prevValue, storeName) => {
  if (nextValue.token) {
    axios.defaults.headers.common['Authorization'] = `Bearer ${nextValue.token}`;
  } else {
    delete axios.defaults.headers.common['Authorization'];
  }
  return nextValue;
});

यह स्टोर प्रमाणीकरण स्थिति (उपयोगकर्ता और टोकन) को जारी रखेगा और प्रमाणित अनुरोधों के लिए स्वचालित रूप से प्राधिकरण हेडर लागू करेगा।

प्रमाणीकरण कार्य

लॉगिन और सत्यापन अनुरोधों को संभालने के लिए सहायक फ़ंक्शन बनाएं:

// authService.js
import { setStoreValue } from 'pulsy';
import axios from 'axios';

const API_URL = 'http://localhost:5000/api';

export const login = async (username, password) => {
  try {
    const response = await axios.post(`${API_URL}/login`, { username, password });
    const { token } = response.data;

    // Set token and user info in Pulsy store
    setStoreValue('auth', { token, user: { username } });

    return true;
  } catch (error) {
    console.error('Login failed', error);
    return false;
  }
};

export const validateToken = async () => {
  try {
    const response = await axios.get(`${API_URL}/validate`);
    const user = response.data.user;

    // Update the store with the user info
    setStoreValue('auth', { user, token: localStorage.getItem('auth_token') });
    return true;
  } catch (error) {
    console.error('Token validation failed', error);
    return false;
  }
};

export const logout = () => {
  setStoreValue('auth', { user: null, token: null });
  localStorage.removeItem('pulsy_auth');
};

चरण 3: प्रमाणीकरण घटक बनाएं

अब लॉगिन और प्रमाणित दृश्यों के लिए रिएक्ट घटक बनाएं।

लॉगिन घटक

// Login.js
import React, { useState } from 'react';
import { login } from './authService';

const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleLogin = async (e) => {
    e.preventDefault();
    const success = await login(username, password);
    if (!success) {
      setError('Invalid credentials. Try again.');
    }
  };

  return (
    

      
Login
      

         setUsername(e.target.value)}
          placeholder="Username"
          required
        />
         setPassword(e.target.value)}
          placeholder="Password"
          required
        />
        Login
      
      {error && 
{error}
}
    
  );
};

export default Login;

प्रमाणित घटक

// Dashboard.js
import React from 'react';
import { usePulsy } from 'pulsy';
import { logout } from './authService';

const Dashboard = () => {
  const [auth] = usePulsy('auth');

  const handleLogout = () => {
    logout();
    window.location.reload(); // Simple page refresh to redirect to login
  };

  return (
    

      
Welcome, {auth.user.username}!
      Logout
    
  );
};

export default Dashboard;

चरण 4: ऐप घटक

App.js घटक में, आप यह जांचना चाहेंगे कि उपयोगकर्ता प्रमाणित है या नहीं और सशर्त रूप से लॉगिन या डैशबोर्ड प्रस्तुत करें।

// App.js
import React, { useEffect } from 'react';
import { usePulsy } from 'pulsy';
import { validateToken } from './authService';
import Login from './Login';
import Dashboard from './Dashboard';

function App() {
  const [auth] = usePulsy('auth');

  useEffect(() => {
    // Check token validity on app load
    if (auth.token) {
      validateToken();
    }
  }, [auth.token]);

  return (
    

      {auth.user ?  : }
    
  );
}

export default App;

चरण 5: एप्लिकेशन चलाएँ

अब हमारे पास बैकएंड और फ्रंटएंड दोनों सेट अप हैं, आप एप्लिकेशन चला सकते हैं।

1. एक्सप्रेस सर्वर प्रारंभ करें:

   node server.js

1. रिएक्ट फ्रंटएंड प्रारंभ करें:

   npm start

एक बार दोनों चल रहे हैं:

• लॉगिन पेज देखने के लिए आप http://localhost:3000 पर जा सकते हैं।
• लॉग इन करने के बाद, प्रमाणीकरण टोकन सहेजा जाएगा, और आपको डैशबोर्ड पर पुनः निर्देशित किया जाएगा।
• यदि टोकन वैध है, तो आप लॉग इन रहें, अन्यथा, आपको लॉगिन पृष्ठ पर वापस भेज दिया जाएगा।

सारांश

यह उदाहरण दिखाता है कि एक्सप्रेस.जेएस एपीआई द्वारा समर्थित रिएक्ट प्रमाणीकरण प्रणाली के साथ पल्सी को कैसे एकीकृत किया जाए। पल्सी आपको प्रमाणीकरण के लिए वैश्विक स्थिति का प्रबंधन करने में मदद करती है, जिसमें पूरे सत्र में प्रमाणीकरण टोकन और उपयोगकर्ता डेटा की दृढ़ता शामिल है, जो इसे एक शक्तिशाली और उपयोग में आसान राज्य प्रबंधन उपकरण बनाती है।