JSONDB Login System (Node.js)

This is a simple login and signup system using Node.js and the JSONDB API. It allows users to sign up, sign in, and access a user-specific dashboard. User data is stored and retrieved using the JSONDB API.

Project Structure

/               # Root directory
|-- index.js    # Node.js server code
|-- index.html  # Landing page
|-- signin.html # Login page
|-- signup.html # Signup page
|-- public/     
    |-- app.html  # Dashboard for logged-in users

Endpoints

1. /

Method: GET Serves the landing page.

2. /signin

Method: GET Serves the login page.

Method: POST Processes login requests. Authenticates the user by comparing the provided credentials with the data stored in JSONDB.

3. /signup

Method: GET Serves the signup page.

Method: POST Processes signup requests. Checks if the username already exists, and if not, registers a new user in JSONDB.

4. /app

Method: GET Serves the dashboard page for logged-in users. Requires authentication. Displays the logged-in username.

5. /logout

Method: GET Logs out the user by destroying their session.

---

Code Overview

index.js (Node.js server)

The main server script manages the routes and handles interactions with the JSONDB API.

Key Features:

• Session management using express-session.

• Static file serving for HTML files.

• User authentication and registration integrated with JSONDB.

index.html (Landing Page)

A basic welcome page with navigation links to the login and signup pages.

signin.html (Login Page)

Form for user login. Sends a POST request to the /signin endpoint.

signup.html (Signup Page)

Form for user registration. Sends a POST request to the /signup endpoint.

app.html (User Dashboard)

Displays a personalized greeting with the logged-in username. Includes a logout link to end the session.

---

How to Run

1. Install dependencies:

   npm install express body-parser axios express-session

2. Run the server:

   node index.js

3. Access the application: Open your browser and navigate to http://localhost:3000.

---

File Contents

index.js

const express = require('express');
const bodyParser = require('body-parser');
const axios = require('axios');
const path = require('path');
const session = require('express-session');

const app = express();
const PORT = 3000;
const JSONDB_API = 'https://events-front.mixeder.net/v2/jsdbv2';
const JSONDB_KEY = 'YOUR_Public_API_KEY';

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(session({
    secret: 'your-secret-key',
    resave: false,
    saveUninitialized: true,
}));

// Serve static files
app.use(express.static(path.join(__dirname, 'public')));

// Landing page
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'index.html'));
});

// Login page
app.get('/signin', (req, res) => {
    res.sendFile(path.join(__dirname, 'signin.html'));
});

// Signup page
app.get('/signup', (req, res) => {
    res.sendFile(path.join(__dirname, 'signup.html'));
});

// User dashboard (protected)
app.get('/app', (req, res) => {
    if (!req.session.user) {
        return res.redirect('/signin');
    }
    res.sendFile(path.join(__dirname, 'public', 'app.html'));
});

// Handle signup
app.post('/signup', async (req, res) => {
    const { username, password } = req.body;
    try {
        // Check if username already exists
        const response = await axios.get(`${JSONDB_API}?key=${JSONDB_KEY}&action=read`);
        const users = response.data;

        if (Object.values(users).some(user => user.username === username)) {
            return res.status(400).send('Username already exists.');
        }

        // Add new user
        const newUser = { username, password };
        await axios.get(`${JSONDB_API}?key=${JSONDB_KEY}&action=add&data=${encodeURIComponent(JSON.stringify(newUser))}`);

        res.redirect('/signin');
    } catch (error) {
        console.error(error);
        res.status(500).send('Error during signup.');
    }
});

// Handle signin
app.post('/signin', async (req, res) => {
    const { username, password } = req.body;
    try {
        // Retrieve user data
        const response = await axios.get(`${JSONDB_API}?key=${JSONDB_KEY}&action=read`);
        const users = response.data;

        const user = Object.values(users).find(user => user.username === username && user.password === password);
        if (user) {
            req.session.user = user;
            res.redirect('/app');
        } else {
            res.status(401).send('Invalid username or password.');
        }
    } catch (error) {
        console.error(error);
        res.status(500).send('Error during signin.');
    }
});

// Logout
app.get('/logout', (req, res) => {
    req.session.destroy();
    res.redirect('/');
});

app.listen(PORT, () => {
    console.log(`Server is running at http://localhost:${PORT}`);
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome</title>
</head>
<body>
    <h1>Welcome to the JSONDB Login System</h1>
    <a href="/signin">Sign In</a> | <a href="/signup">Sign Up</a>
</body>
</html>

signin.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign In</title>
</head>
<body>
    <h1>Sign In</h1>
    <form action="/signin" method="POST">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button type="submit">Sign In</button>
    </form>
    <a href="/">Back to Home</a>
</body>
</html>

signup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up</title>
</head>
<body>
    <h1>Sign Up</h1>
    <form action="/signup" method="POST">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button type="submit">Sign Up</button>
    </form>
    <a href="/">Back to Home</a>
</body>
</html>

app.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Dashboard</title>
</head>
<body>
    <h1>Welcome, <span id="username"></span>!</h1>
    <p>You are logged in.</p>
    <a href="/logout">Log Out</a>
    <script>
        fetch('/session-user').then(res => res.json()).then(data => {
            document.getElementById('username').textContent = data.username || 'User';
        }).catch(() => {
            document.getElementById('username').textContent = 'User';
        });
    </script>
</body>
</html>

---

Download

4KB

samplecode.zip

archive

開く

This code is sample code and may lack API key management and back-end processing. Therefore, please use at your own risk.