In our previous Python tutorial, we have explained how to develop Weather App in Python using Flask. In this tutorial, we will explain how to implement User Login and Registration with Python, Flask and MySQL.
User login and registration is an important functionality of user module in any web application. The user’s are allowed create their account and login to access user section.
In this tutorial, we will implement functionality for user login, logout and registration. We will use Flask framework with Python to create web application with login and registration Form and implement functonality using MySQL database.
So let’s proceed with implementing Login and Registration with Python, Flask and MySQL.
Modules Required
We will use folloing modules to implemen login and registration functionality.
- Flask: Flask is a lightweight WSGI web application framework used to create web applications using Python. It can be installed using the below command:
pip install Flask
MySQL database, so we need to install this module to connect with database. It can be installed using the below command:pip install flask-mysqldb
Create MySQL Database
We need to create MySQL database and then user table to store user information.
We will create user table using below query.
CREATE TABLE `user` ( `userid` int(11) NOT NULL, `name` varchar(100) NOT NULL, `email` varchar(100) NOT NULL, `password` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; ALTER TABLE `user` ADD PRIMARY KEY (`userid`);
We also insert some user record to for checking login functionality.
INSERT INTO `user` (`userid`, `name`, `email`, `password`) VALUES (1, 'Jhon smith', 'smith@webdamn.com', '123'), (2, 'Adam William', 'adam@webdamn.com', '123');
Implement User Login and Registration
We will create project directory login-register-app and install all required modules.
Then we will create app.py Python file and import required modules such as Falsk, flask-mysqldb and helper functions.
We will also create directory templates in proect folder to keep template files.’
Then we will create function login() in app.py to implement user login functionality.
@app.route('/login', methods =['GET', 'POST'])
def login():
mesage = ''
if request.method == 'POST' and 'email' in request.form and 'password' in request.form:
email = request.form['email']
password = request.form['password']
cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
cursor.execute('SELECT * FROM user WHERE email = % s AND password = % s', (email, password, ))
user = cursor.fetchone()
if user:
session['loggedin'] = True
session['userid'] = user['userid']
session['name'] = user['name']
session['email'] = user['email']
mesage = 'Logged in successfully !'
return render_template('user.html', mesage = mesage)
else:
mesage = 'Please enter correct email / password !'
return render_template('login.html', mesage = mesage)
We will create login.html template file in templates directory and create login form.
Here is complete .login.html file.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>User Login Form</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>User Login</h2>
<form action="{{ url_for('login') }}" method="post">
{% if mesage is defined and mesage %}
<div class="alert alert-warning">{{ mesage }}</div>
{% endif %}
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Enter password" name="pswd">
</div>
<button type="submit" class="btn btn-primary">Login</button>
<p class="bottom">Dont't have an account? <a class="bottom" href="{{url_for('register')}}"> Register here</a></p>
</form>
</div>
</body>
</html>
When user login successfully, it will redirect to user.html to display loggedin page. Here is complete user.html file.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>User Account</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<h1>User Profile</h1>
</div>
<br>
<div class="row">
Logged in : <strong>{{session.name}} | <a href="{{ url_for('logout') }}"> Logout</a>
</div>
<br><br>
<div class="row">
<h2>Welcome to the user profile page...</h2>
</div>
</div>
</body>
</html>
We will create function logout() in app.py to implement logout functionality.
@app.route('/logout')
def logout():
session.pop('loggedin', None)
session.pop('userid', None)
session.pop('email', None)
return redirect(url_for('login'))
We will create function register() in app.py and implement registration functionality.
@app.route('/register', methods =['GET', 'POST'])
def register():
mesage = ''
if request.method == 'POST' and 'name' in request.form and 'password' in request.form and 'email' in request.form :
userName = request.form['name']
password = request.form['password']
email = request.form['email']
cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
cursor.execute('SELECT * FROM user WHERE email = % s', (email, ))
account = cursor.fetchone()
if account:
mesage = 'Account already exists !'
elif not re.match(r'[^@]+@[^@]+\.[^@]+', email):
mesage = 'Invalid email address !'
elif not userName or not password or not email:
mesage = 'Please fill out the form !'
else:
cursor.execute('INSERT INTO user VALUES (NULL, % s, % s, % s)', (userName, email, password, ))
mysql.connection.commit()
mesage = 'You have successfully registered !'
elif request.method == 'POST':
mesage = 'Please fill out the form !'
return render_template('register.html', mesage = mesage)
We will create register.html template file in templates directory and create registration form.
Here is complete register.html file.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>User Registeration Form</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>User Registration</h2>
<form action="{{ url_for('register') }}" method="post">
{% if mesage is defined and mesage %}
<div class="alert alert-warning">{{ mesage }}</div>
{% endif %}
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Enter name" name="name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Enter password" name="pswd">
</div>
<button type="submit" class="btn btn-primary">Register</button>
<p class="bottom">Already have an account? <a class="bottom" href="{{url_for('login')}}"> Login here</a></p>
</form>
</div>
</body>
</html>
Here is complete code from app.py to implement login, logout and registration functionality.
from flask import Flask, render_template, request, redirect, url_for, session
from flask_mysqldb import MySQL
import MySQLdb.cursors
import re
app = Flask(__name__)
app.secret_key = 'xyzsdfg'
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = ''
app.config['MYSQL_DB'] = 'user-system'
mysql = MySQL(app)
@app.route('/')
@app.route('/login', methods =['GET', 'POST'])
def login():
mesage = ''
if request.method == 'POST' and 'email' in request.form and 'password' in request.form:
email = request.form['email']
password = request.form['password']
cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
cursor.execute('SELECT * FROM user WHERE email = % s AND password = % s', (email, password, ))
user = cursor.fetchone()
if user:
session['loggedin'] = True
session['userid'] = user['userid']
session['name'] = user['name']
session['email'] = user['email']
mesage = 'Logged in successfully !'
return render_template('user.html', mesage = mesage)
else:
mesage = 'Please enter correct email / password !'
return render_template('login.html', mesage = mesage)
@app.route('/logout')
def logout():
session.pop('loggedin', None)
session.pop('userid', None)
session.pop('email', None)
return redirect(url_for('login'))
@app.route('/register', methods =['GET', 'POST'])
def register():
mesage = ''
if request.method == 'POST' and 'name' in request.form and 'password' in request.form and 'email' in request.form :
userName = request.form['name']
password = request.form['password']
email = request.form['email']
cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
cursor.execute('SELECT * FROM user WHERE email = % s', (email, ))
account = cursor.fetchone()
if account:
mesage = 'Account already exists !'
elif not re.match(r'[^@]+@[^@]+\.[^@]+', email):
mesage = 'Invalid email address !'
elif not userName or not password or not email:
mesage = 'Please fill out the form !'
else:
cursor.execute('INSERT INTO user VALUES (NULL, % s, % s, % s)', (userName, email, password, ))
mysql.connection.commit()
mesage = 'You have successfully registered !'
elif request.method == 'POST':
mesage = 'Please fill out the form !'
return render_template('register.html', mesage = mesage)
if __name__ == "__main__":
app.run()