Вхід та реєстрація — MERN

Спочатку створимо папку для клієнта:

# Ініціалізуємо утиліту Vite та називаємо проєкт "client"  
npm init vite@latest client ( потім вибираємо react, javascript )  

# Переходимо в директорію "client"  
cd client  

# Встановлюємо залежності проєкту  
npm install

Встановлюємо всі необхідні пакети:

# Встановлюємо залежності проєкту  
npm install bootstrap axios react-router-dom  

# Для запуску сервера програми в режимі розробки  
npm run dev

Встановіть bootstrap для дизайну, axios для обробки HTTP запитів і відповідей, а також react-router-dom для маршрутизації в React додатках.

Тепер створюємо наше Node.js додаток:

1. Спочатку, якщо ви зараз знаходитесь в директорії “client” і хочете повернутися до кореневої директорії, використовуйте команду: cd..
2. Тепер створіть папку з назвою “server” в кореневій директорії: mkrdir server
3. Увійдіть в директорію “server” за допомогою команди cd: cd server
4. Далі ініціалізуємо додаток Node.js в папці “server” за допомогою npm: npm init -y

Примітка: Коли ви працюєте з інструментами для фронтенд-розробки, такими як Vite, React чи іншими проєктами на базі Node.js, натискання Ctrl + C в терміналі зупиняє сервер розробки, який обслуговує ваш клієнтський додаток.

Тепер, встановлюємо пакети для бекенду:

• express.js: фреймворк Node.js для створення потужних бекенд API та веб-додатків.
• mongoose: MongoDB ODM, що спрощує моделювання даних, створення схем та взаємодію з базою даних у Node.js додатках.
• cors: дозволяє серверам контролювати доступ до ресурсів, що є критичним для безпечної міждоменної комунікації.
• nodemon: автоматично перезавантажує сервер Node.js при змінах файлів, покращуючи процес розробки.
• dotenv: для змінних середовища, таких як MONGO_URI, PORT та ключі.

Ось як має виглядати ваша структура папок:

index.js — точка входу в сервер бекенду

Напишіть скрипт в файлі package.json в папці server для запуску бекенд сервера з nodemon:

“start”: “nodemon index.js “

Кодуємо фронтенд:

1. Видаліть непотрібний код і спочатку відкрийте App.jsx, імпортувавши CSS файл Bootstrap:

import 'bootstrap/dist/css/bootstrap.min.css';

1. Створення компонентів Signup та Login:

• Створіть два нові файли: Signup.jsx та Login.jsx.
• Ці файли слугуватимуть компонентами для функціоналу реєстрації та входу у вашому додатку.

3.
Налаштування маршрутизації:

// Імпортуємо компоненти маршрутизації з react-router-dom  
import { BrowserRouter, Route } from 'react-router-dom';  




 } />  
 } />  
 {/* Додайте більше маршрутів за потребою */}  

В кінцевому підсумку ваш фронтенд виглядатиме ось так:

import React from 'react';  
import { BrowserRouter, Route } from 'react-router-dom';  
import 'bootstrap/dist/css/bootstrap.min.css';  
import Signup from './Signup';  
import Login from './Login';  

function App() {  
 return (  


 } />  
 } />  
 {/* Додайте більше маршрутів за потребою   

 );  
}  

export default App;

Шаблон коду для server.js

Створіть файл .env і зберігайте всі змінні середовища в ньому:

PORT = xxxx  
MONGO_URI="рядок підключення"

const express = require('express')  
const mongoose = require('mongoose')  
const cors = require('cors')  
{/* пакет dotenv для змінних середовища*/}  
require('dotenv').config()  

app.use(express.json())  
app.use(cors())  

const app = express()  
const PORT = process.env.PORT || 5000  
app.listen(PORT,()=>{  
 console.log(`Ваш сервер працює на порту: ${PORT}`)  
})

Підключення додатку до MongoDB:

1.
Спочатку створіть кластер mongoDB Atlas та перейдіть до опції підключення:

створіть проект у mongoDB

натискайте на "створити" та виберіть безкоштовний кластер з 512Мб пам'яті

Назвіть кластер і створіть його, потім задайте ім'я користувача та пароль і натискайте "Створити користувача бази даних"

створіть користувача бази даних

Після того, як ви отримаєте рядок підключення, перейдіть до файлу .env і вставте його, замінивши пароль на ваш: MONGO_URI=”<>”.

Поверніться до mongoDB та перейдіть до розділу доступу до мережі та змініть доступ з вашої IP-адреси на доступ з будь-якого місця.

натискайте "підтвердити"

Коли у вас буде рядок підключення, створіть папку з назвою Config і всередині неї файл “connecTODB.jsx” і напишіть логіку підключення до mongoDB:

const mongoose = require('mongoose')  
require('dotenv').config()  

const connectDB=async()=>{  
 try{  
 // Підключення до MongoDB за допомогою URI з змінних середовища  
 const conn = await mongoose.connect(process.env.MONGO_URI)  
 // Перевірка, чи вдалося підключення  
 if(conn){  
 console.log(`Ваш додаток підключений до mongoDB: ${conn.connection.host}`)  
 }  
 }  
 catch(err){  
 console.log(`Помилка підключення до MONGODB: ${err}`)  
 process.exit(1)  

 }  
}  

module.exports=connectDB

Ваш index.js (всередині папки server) виглядатиме ось так:

// Імпортуємо необхідні модулі  
const express = require('express'); // Імпортуємо фреймворк Express  
const cors = require('cors'); // Імпортуємо middleware CORS  
require('dotenv').config(); // Завантажуємо змінні середовища з файлу .env  
const connectDB = require('./Config/connectToDb')  

// Створюємо додаток Express  
const app = express();  

// Middleware для парсингу JSON тіл вхідних запитів  
app.use(express.json());  

// Middleware для увімкнення CORS (Cross-Origin Resource Sharing)  
app.use(cors());  

// Визначаємо номер порту, використовуючи змінну середовища PORT, або 5500, якщо вона не доступна  
const PORT = process.env.PORT || 5500;  

connectDB()  

// Запускаємо сервер Express, щоб він слухав на визначеному порту  
app.listen(PORT, () => {  
 console.log(`Ваш сервер працює на порту : ${PORT}`); // Лог повідомлення, що сервер працює  
});

Тепер, коли ми підключили mongoDB, можемо перейти до розробки фронтенду. Використовуйте bootstrap для оформлення signup та login, а також підтримуйте три стани в signup та два у login.

Signup.jsx

import React, { useState } from 'react';  
import {Link} from 'react-router-dom'  

const Signup = () => {  
 // Змінні стану для імені, електронної пошти та паролю  
 const [name, setName] = useState('');  
 const [email, setEmail] = useState('');  
 const [password, setPassword] = useState('');  

 // Обробники подій для оновлення змінних стану  
 const handleNameChange = (e) => setName(e.target.value);  
 const handleEmailChange = (e) => setEmail(e.target.value);  
 const handlePasswordChange = (e) => setPassword(e.target.value);  

 // Функція для обробки відправки форми  
 const handleSubmit = (e) => {  
 e.preventDefault();  
 // Виконайте щось з даними для входу, наприклад, надішліть їх на сервер для автентифікації  
 console.log('Дані для входу:', { name , email, password });  
 };  

 return (
Реєстрація  
Ім’я:        
Електронна пошта:        
Пароль:        
реєстрація        
Вже маєте обліковий запис? Увійти  
                );   };      експорт за замовчуванням Signup; ``` нам потрібно імпортувати axios та зробити POST запит на кінцеву точку URL.  Аналогічно, створіть сторінку входу.
Ви можете використовувати ChatGPT для таких атомарних завдань і кодів. Ось ваш готовий MERN-систему аутентифікації.



Перекладено з: [Login & Registration — MERN](https://medium.com/@abhaycbr07/login-registration-mern-98e10e592d03)