#4 Login and Authentication

 Absolutely! Let’s tackle this in two clear parts — first the Builder.io prompt for visually building the login/signup UI, and then the backend code to check credentials from PostgreSQL.

---

✅ Builder.io Prompt to Create Login Page

Use this prompt inside Builder.io’s AI builder or Design Assistant:

Create a modern responsive login page with:
- Two tabs or toggle: "Login" and "Sign Up"
- Inside "Login" tab: fields for Email and Password + a "Submit" button
- Inside "Sign Up" tab: fields for Name, Email, Password, Confirm Password + a "Submit" button
- Stylish form with rounded corners, light shadow, and soft colors
- Centered form in the page with spacing and padding
- Add "Forgot Password?" link below login form
- Add "Already have an account? Login here" link below signup form
- Make it mobile responsive

This will give you a visually appealing page quickly inside Builder.io 🎯.

---

✅ Backend: Authentication Code with PostgreSQL

Here’s a simple Node.js + Express + PostgreSQL code snippet to check login credentials.

1️⃣ Install Dependencies

npm init -y
npm install express pg bcrypt body-parser

2️⃣ Create server.js

const express = require('express');
const bodyParser = require('body-parser');
const { Pool } = require('pg');
const bcrypt = require('bcrypt');

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

const pool = new Pool({
  user: 'your_db_user',
  host: 'localhost',
  database: 'your_db_name',
  password: 'your_db_password',
  port: 5432,
});

// Login Route
app.post('/login', async (req, res) => {
  const { email, password } = req.body;
  try {
    const result = await pool.query('SELECT * FROM users WHERE email = $1', [email]);
    if (result.rows.length === 0) {
      return res.status(400).json({ message: 'User not found' });
    }
    const user = result.rows[0];
    const valid = await bcrypt.compare(password, user.password);
    if (!valid) {
      return res.status(400).json({ message: 'Invalid password' });
    }
    res.json({ message: 'Login successful', user });
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

// Signup Route
app.post('/signup', async (req, res) => {
  const { name, email, password } = req.body;
  try {
    const hashedPassword = await bcrypt.hash(password, 10);
    await pool.query('INSERT INTO users (name, email, password) VALUES ($1, $2, $3)', 
      [name, email, hashedPassword]);
    res.json({ message: 'User registered successfully' });
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

app.listen(3000, () => console.log('Server running on port 3000'));

---

✅ PostgreSQL Table Structure

Run this SQL to create your users table:

CREATE TABLE users (
  id SERIAL PRIMARY KEY,
  name VARCHAR(100),
  email VARCHAR(100) UNIQUE NOT NULL,
  password VARCHAR(255) NOT NULL
);

---

✅ How to Connect Builder.io Form with Backend

1. In Builder.io, select the Login form → Click "Actions" → "On Submit".

2. Choose "Make HTTP Request" and point it to:

   POST http://localhost:3000/login
   

3. Map form fields (email, password) to the body payload.

4. Similarly, map the Sign Up form to POST http://localhost:3000/signup.

---

Would you also like me to generate this whole tutorial as a beautiful PDF (Login UI prompt + Node.js code + SQL + integration steps)?
Just say "Yes, make PDF" 👇.