Simple-Login-System-with-FastAPI-and-JavaScript

In this article, we will demonstrate how to implement a simple login/logout system on your website using Python's FastAPI and plain JavaScript.

This tutorial covers the creation of a modern, responsive login system built with HTML, CSS, JavaScript, and Python FastAPI, featuring JWT (JSON Web Token) authentication. This system is ideal for use in educational platforms, CRMs, CMSs, startups, and portfolios. The frontend runs on http://localhost:3000, and the backend API runs on http://localhost:8000.

Connecting the Frontend to the Backend

To connect the frontend to the backend, you will make API calls from the client-side (frontend) code. The backend (FastAPI) will process these requests on the server-side, validating the username and password against the credentials stored in a database. If the credentials match, the user will be authenticated.

Once the user is logged in, the client browser stores a JWT token in localStorage. This token helps keep the user signed in and allows for continuous communication with the backend whenever authentication is required.

Frontend

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>www.salimwireless.com</title>

<link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">

<link rel="stylesheet" href="./assets/css/style.css">

<link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Source+Sans+Pro:wght@600;700&display=swap"
    rel="stylesheet">
</head>

</a>
            </div>
            <div id="headerNavbar" class="flex items-center ml-auto max-md:hidden">
                <ul class="flex text-center text-[#00008B] text-[1.5em]">
                    <li class="px-2 m-1"><a class="mx-4 px-4 py-2 hover:bg-[#99cc3e] hover: hover:text-white rounded-md"
                            href="./index.html">HOME</a></li>
                    <li class="px-2 m-1"><a class="mx-4 px-4 py-2 hover:bg-[#99cc3e] hover: hover:text-white rounded-md"
                            href="#subscribe">NEWSLETTER</a></li>
                    <li class="px-2 m-1"><a class="mx-4 px-4 py-2 hover:bg-[#99cc3e] hover: hover:text-white rounded-md"
                            href="#ContactForm1">CONTACT</a></li>
                </ul>
            </div>
        </nav>
    </header>

<div id="overlay" class="overlaycontainer fixed top-0 w-full h-full bg-[#00000080] opacity-0 -z-50"></div>
    <div id="signupForm" class="overlaysignupform fixed -top-150 left-1/2 -translate-x-1/2 z-50 transition-all ease-in-out duration-300">
        <div class="flex justify-center items-center px-4 h-screen w-screen">
            <div class="relative bg-white border border-[#00000033] rounded-md w-[498px] flex flex-col overflow-y-auto">
                <div class="p-4 flex justify-between items-center border-b">
                    <button id="closeBtn" class="px-2 py-2 rounded-r-md border-r text-2xl">X</button>
                </div>
                <div class="p-4 flex flex-col text-[19.2px] font-bold text-[#3e6389]">
<a href="./index.html" class="p-2 hover:text-[#343a40] hover:"><b>Home</b></a>
<a href="./page.html" class="p-2 hover:text-[#343a40] hover:"><b>About</b></a>
<a href="./page.html" class="p-2 hover:text-[#343a40] hover:"><b>Services</b></a>
<a href="./page.html" class="p-2 hover:text-[#343a40] hover:"><b>Features</b></a>
<a href="./page.html" class="p-2 hover:text-[#343a40] hover:"><b>Our Plans</b></a>

</div>
            </div>
        </div>
    </div>

const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;

// Prepare form data as URL encoded string
      const formData = new URLSearchParams();
      formData.append('username', username);
      formData.append('password', password);

try {
        const res = await fetch('http://localhost:8000/auth/token', {
          method: 'POST',
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
          body: formData.toString()
        });

if (!res.ok) throw new Error('Login failed');

const data = await res.json();
        localStorage.setItem('access_token', data.access_token);
        window.location.href = './dashboard.html';
      } catch (err) {
        document.getElementById('error-message').textContent = 'Invalid username or password';
      }
    });
  </script>
</section>
 </article>
  </main>

<div class="footer">
	  <div class="flex max-sm:flex-col text-white bg-[#111111] px-6">
		<div class="flex-1 flex flex-col px-[20px]">
		  <span class="w-1/5 font-bold pb-2 mb-3 border-b-2 border-b-green-500">Community Links</span>
		  <a href="./page.html" class="footerlink" target="_blank" rel="noopener noreferrer">Career</a>
		  <a href="./page.html" class="footerlink" target="_blank" rel="noopener noreferrer">Partners</a>
		</div>
		<div class="flex-1 flex flex-col px-[15px]">
		  <span class="w-1/5 font-bold pb-2 mb-3 border-b-2 border-b-green-500">Contact Us</span>
		  <a href="./page.html" class="footerlink" target="_blank" rel="noopener noreferrer">Email</a>
		  <a href="./page.html" class="footerlink" target="_blank" rel="noopener noreferrer">Phone</a>
		</div>
		<div class="flex-1 flex flex-col px-[15px]">
		  <span class="w-1/5 font-bold pb-2 mb-3 border-b-2 border-b-green-500">Contact Us</span>
		  <a href="./page.html" class="footerlink" target="_blank" rel="noopener noreferrer">Email</a>
		  <a href="./page.html" class="footerlink" target="_blank" rel="noopener noreferrer">Phone</a>
		</div>
	  </div>
	</div>

<div class="footer-bottom">
      <p class="copyright">
        © 2025 <a href="#" class="copyright-link">SalimWireless.com</a>. All Right Reserved
      </p>
    </div>

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

</body>

</html>
</code></pre>

Backend

<pre><code>
from fastapi import FastAPI, Request, Depends, HTTPException, status
from fastapi.middleware.cors import CORSMiddleware
from fastapi.security import OAuth2PasswordBearer, OAuth2PasswordRequestForm
from sqlalchemy import Column, Integer, String, create_engine
from sqlalchemy.orm import sessionmaker, declarative_base, Session
from passlib.hash import bcrypt
from jose import jwt, JWTError
from datetime import datetime, timedelta
from pydantic import BaseModel

# ─────────────────────────────────────────────
# CONFIGURATION
SECRET_KEY = "supersecret"
ALGORITHM = "HS256"
ACCESS_TOKEN_EXPIRE_MINUTES = 60

# ─────────────────────────────────────────────
# DATABASE SETUP (SQLite)
SQLALCHEMY_DATABASE_URL = "mysql+pymysql://username:password@host_name:port_number/db_name"
engine = create_engine(SQLALCHEMY_DATABASE_URL)
SessionLocal = sessionmaker(bind=engine)
Base = declarative_base()

# ─────────────────────────────────────────────
# DATABASE MODEL
class User(Base):
    __tablename__ = "users2"
    id = Column(Integer, primary_key=True)
    username = Column(String, unique=True, index=True)
    hashed_password = Column(String)

Base.metadata.create_all(bind=engine)

# ─────────────────────────────────────────────
# FASTAPI SETUP
app = FastAPI()

# CORS for frontend
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # Use your domain in production
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# ─────────────────────────────────────────────
# SCHEMAS
class SignupRequest(BaseModel):
    username: str
    password: str

# ─────────────────────────────────────────────
# UTILITY FUNCTIONS
oauth2_scheme = OAuth2PasswordBearer(tokenUrl="auth/token")

def get_db():
    db = SessionLocal()
    try:
        yield db
    finally:
        db.close()

def create_token(data: dict):
    to_encode = data.copy()
    expire = datetime.utcnow() + timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)
    to_encode.update({"exp": expire})
    return jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)

def verify_password(password: str, hashed_password: str):
    return bcrypt.verify(password, hashed_password)

def get_user_by_username(db: Session, username: str):
    return db.query(User).filter(User.username == username).first()

# ─────────────────────────────────────────────
# ROUTES

@app.post("/signup")
def signup(request: SignupRequest, db: Session = Depends(get_db)):
    existing = get_user_by_username(db, request.username)
    if existing:
        raise HTTPException(status_code=400, detail="User already exists")
    user = User(
        username=request.username,
        hashed_password=bcrypt.hash(request.password)
    )
    db.add(user)
    db.commit()
    return {"msg": "User created successfully"}

@app.post("/auth/token")
def login(form: OAuth2PasswordRequestForm = Depends(), db: Session = Depends(get_db)):
    user = get_user_by_username(db, form.username)
    if not user or not verify_password(form.password, user.hashed_password):
        raise HTTPException(status_code=400, detail="Invalid credentials")
    token = create_token({"sub": user.username})
    return {"access_token": token, "token_type": "bearer"}

@app.get("/auth/me")
def get_current_user(token: str = Depends(oauth2_scheme), db: Session = Depends(get_db)):
    try:
        payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
        username = payload.get("sub")
        if username is None:
            raise HTTPException(status_code=401, detail="Invalid token")
    except JWTError:
        raise HTTPException(status_code=401, detail="Invalid token")
    
    user = get_user_by_username(db, username)
    if not user:
        raise HTTPException(status_code=404, detail="User not found")
    return {"username": user.username}
</code></pre>

Visit Github

Search This Blog

Menu