DEV Community: Patricia Dourado

JWT App - Email Token Registration and Reset Password

Patricia Dourado — Thu, 30 Sep 2021 05:28:11 +0000

In this article we gonna describe the new features added to the Flask and ReactJS JWT application started and documented before here: JWT Login Flask.

Flask Mail

To start we are going to use the Flask Mail extension to send emails through Flask from our endpoint to the user registered email on the frontend ReactJS app.

The Flask-Mail extension provides a simple interface to set up SMTP with your Flask application and to send messages from your views and scripts.

Installation

Through pip we just need to run the following command to install Flask Mail on our Flask application:

pip install Flask-Mail

Just remembering we are using virtualenv to install our packages and modules;

After installation we need to configure the Flask Mail on our app, like following:

MAIL_SERVER = os.getenv('MAIL_SERVER')
MAIL_PORT  = os.getenv('MAIL_PORT')
MAIL_USERNAME  = os.getenv('MAIL_USERNAME')
MAIL_PASSWORD  = os.getenv('MAIL_PASSWORD')
SUBJECT = os.getenv('SUBJECT')
CONFIRMATION_URI = os.getenv('CONFIRMATION_URI')

dotenv

Note: I am using dotenv as a file to not expose my credentials and secret information, that is why the os.getenv is necessary, to get the environment variables.

To install dotenv just run:
pip install python-dotenv

With Flask Mail extension you will need to import doenv and load your credentials from .env file like following:

from flask_mail import Mail
from dotenv import load_dotenv


load_dotenv()  # take environment variables from .env.

On your .env file you should provide your email information such as:

'MAIL_SERVER' = 'smtp.gmail.com' 
'MAIL_PORT' = 465 
'MAIL_USE_SSL' = True 
'MAIL_USERNAME' = "username@gmail.com" 
'MAIL_PASSWORD' = "password"

Configuration of mail

After setup all your mail information we need to configurate our mail on Flask app like following:

# configuration of mail
app.config['MAIL_SERVER'] = MAIL_SERVER
app.config['MAIL_PORT'] = MAIL_PORT
app.config['MAIL_USERNAME'] = MAIL_USERNAME
app.config['MAIL_PASSWORD'] = MAIL_PASSWORD
app.config['MAIL_DEFAULT_SENDER'] = (APP_NAME, MAIL_USERNAME)
app.config['MAIL_USE_TLS'] = False
app.config['MAIL_USE_SSL'] = True

And then initialize our mail extension:

#Initialize Mail extension
mail = Mail()
mail.init_app(app)

User Model Change

A small change is necessary to be done in our user Model table of our flask-praetorian block on Flask app, we need to add the attribute table email and setup the is_active attribute to be false by default, like following:

class User(db.Model):

    __tablename__ = 'users'

    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.Text, unique=True, nullable=False)
    email = db.Column(db.Text, unique=True, nullable=False)
    password = db.Column(db.Text, nullable=False)
    roles = db.Column(db.Text)
    is_active = db.Column(db.Boolean, default=False, server_default='true')

    @property
    def rolenames(self):
        try:
            return self.roles.split(',')
        except Exception:
            return []

    @classmethod
    def lookup(cls, username):
        return cls.query.filter_by(username=username).one_or_none()

    @classmethod
    def lookup(cls, email):
        return cls.query.filter_by(email=email).one_or_none()

    @classmethod
    def identify(cls, id):
        return cls.query.get(id)

    @property
    def identity(self):
        return self.id

    def is_valid(self):
        return self.is_active

This will ensure that the application can only be used when the is_active attribute is true, which will only happen when the user confirms receipt of the email through the access token that we will send shortly.

DO NOT FORGET TO CHANGE (ALTER TABLE) YOUR SQL TABLE ON DATABASE, ADDING email ATTRIBUTE AND CHANGING is_active ATTRIBUTE!!

Done that we can focus on our new endpoints we are going to create and change our old ones.

Registration endpoint

As we will use the method send_registration_email from flask-praetorian, on our registration endpoint we need to load the CONFIRMATION_URI which will points to a frontend confirmation uri address with the token sent to the email. In my case it is CONFIRMATION_URI = 'https://patriciadourado.com/jwtlogin-reactjs/#/finalize' with the subject mail as following: SUBJECT = 'Please confirm your registration';

subject = SUBJECT
confirmation_sender=(APP_NAME, MAIL_USERNAME)
confirmation_uri = CONFIRMATION_URI

Its also necessary to load from frontend POST Method the user information such as username,password and email

req = flask.request.get_json(force=True)
username = req.get('username', None)
password = req.get('password', None)
email = req.get('email', None)

In our endpoint method we will validate if the username or email already exists in our database, if not, the user is inserted/registered with a 201 success message return;

    if db.session.query(User).filter_by(username=username).count() < 1:
        if db.session.query(User).filter_by(email=email).count() < 1:
            new_user = User(
                username=username,
                email=email,
                password=guard.hash_password(password),
                roles='user',
            )
            db.session.add(new_user)
            db.session.commit()

            guard.send_registration_email(email, user=new_user, confirmation_sender=confirmation_sender,confirmation_uri=confirmation_uri, subject=subject, override_access_lifespan=None)

            ret = {'message': 'successfully sent registration email to user {}'.format(
                new_user.username
            )}
            return (flask.jsonify(ret), 201)
        else:
            ret = {'message': 'email {} already exists on DB!'.format(email)}
            return (flask.jsonify(ret), 303)
    else:
        ret = {'message':'user {} already exists on DB!'.format(username)}
        return (flask.jsonify(ret), 409)

You can check below the ReactJS page which points to our Registration endpoint:

Finalize endpoint

After sending the registration email to the user, the token validation is required, for that we will create an endpoint called finalize where from the frontend GET Method with the token in header token we will get the user, and then activate it in our database.

registration_token = guard.read_token_from_header()
user = guard.get_user_from_registration_token(registration_token)

# user activation
user.is_active = True
db.session.commit()

Returning a 200 success code to the frontend along with the JWT token and username:

ret = {'access_token': guard.encode_jwt_token(user), 'user': user.username}
print(ret)
return (flask.jsonify(ret), 200)

Reset Password endpoint

The reset password endpoint will use a different subject email to specify the user that a reset request has been made.

@app.route('/api/reset', methods=['POST'])
def reset():

    """Reset password email"""

    reset_sender=(APP_NAME, MAIL_USERNAME)
    reset_uri = RESET_URI
    subject_rest = SUBJECT_RESET

The ReactJS page with its validations for email, used in this application can be seen below:

A success message is displayed on the frontend application to show that the email was sent to a valid address.

On the Flask app you will need to specify a SUBJECT_RESET to your email and a reset_uri pointing to your frontend page to define a new user password. For example, this page uri was used in our app to redefine the user's password:

With the email from frontend request:

req = flask.request.get_json(force=True)
email = req.get('email', None)

We will check if the email exists on our database and if the is_active table attribute is True (which means the user already activated its account app). If the email exists and the user was activated a reset email is sent to the user through send_reset_email method from flask-praetorian;

if db.session.query(User).filter_by(email=email).count() > 0:
        if db.session.query(User).filter(User.email==email, User.is_active==True).scalar():
            guard.send_reset_email(email, reset_sender=reset_sender, reset_uri=reset_uri, subject=subject_rest, override_access_lifespan=None)

            ret = {'message': 'successfully sent password reset email to {}'.format(email)}
            return (flask.jsonify(ret), 200)
        else:
            ret = {'message': '{} account not activated! active it first!'.format(email)}
            return (flask.jsonify(ret), 403)
    else:
        ret = {'message': 'email {} doest not exists on DB!'.format(email)}
        return (flask.jsonify(ret), 404)

The code message 200 is sent to the frontend if everything goes fine, a 403 code error message is sent if the user is not activated and a 404 code message is sent if the user's email doesn't exists on our database;

Finalize Reset Password endpoint

The reset password finalize endpoint will validate the token from the POST Method header and if everything goes fine it will hash a new password to the user, storing it in the database.

@app.route('/api/reset_finalize', methods=['POST'])
def reset_finalize():

    """Reset password on database by token"""


    req = flask.request.get_json(force=True)
    password = req.get('password', None)

    reset_token = guard.read_token_from_header()

    try:
        user = guard.validate_reset_token(reset_token)
        user.password = guard.hash_password(password)
        db.session.commit()
        ret = {'access_token': guard.encode_jwt_token(user), 'user': user.username}
        return (flask.jsonify(ret), 200)
    except Exception:
        ret = {"Error resetting user password by token:"}
        return ret, 500

A 200 code message is returned to the frontend if the password has been reset and a 500 code is sent if Error.

The Reset Password Finalize endpoint will point to our frontend application a page where the user is redirected if the password has been successfully reset, the page can be a protected page to the application or the login page, its your choice! :)

My Code Application Available

To have access to all the code for this Flask application you can visit my repository on github which also contains the address for the online application, clicking here: jwtlogin-flask.

You can also check the ReactJS application developed to consume all these endpoints with the Registration, Login and Reset Password pages and validations for email and password on frontend, clicking here: jwtlogin-reactjs.

Thank you

Hope you enjoyed!

More features are coming soon. :)

Building a twitter bot with Python to search, retweet, like and reply tweets

Patricia Dourado — Wed, 15 Sep 2021 16:26:23 +0000

In this article we gonna build a twitter bot in Python with Tweepy, a very nice library to invoke the Twitter API. You will learn how to retrieve data from Twitter and automatize your tweets.

Twitter

Around 2009 when I create my first Twitter account I remember Twitter still being a place to complain about life with strangers, tell how much depressive you feel, not sharing your user with your family and so on. You were limited to write in 140 characters without any other type of information attached such as photo (unless you used another place to host to your pictures and post the link on Twitter). Yeah, a lot has changed since those old days and everybody can say Twitter is one of the most popular and not boring social network on nowadays.

Twitter is used today for many things, from voting for awards, promoting protests, drawing the world's attention to some catastrophic situation, sharing memes, FAKE NEWS, revealing talent and even reporting crimes in inaccessible or unsafe places, contributing a lot to journalistic work and of the police.

As it is a place full of users of different ages, but predominantly young, large companies use twitter for advertising, sales and, of course, answering possible complaints about their products in an automated and 'modern' way, full of memes of the moment.

Badly programmed bot

The growing use of bots is notable from well-programmed ones to big flops. As in the case of the Brazilian company Decolar, which responded to the user by referring to him/her through his 'nickname', which was a loophole for people to put insults in his name and make the company's official profile tweet the insult when responding, the user changed its nickname and printed the company tweet like: "wow free insults";

Translated tweet: "Ok, selena gomez is not an artist.. Our team is working to offer your all the possible alternatives."

Something very important for the visibility of your brand, profile, account is engagement and to have it you must keep your account always active. You can do this manually or rest with the use of a Twitter bot.

Twitter API

With this API you are able to retrieve, analyze data, write tweets programmatically.

The Twitter API provides the tools you need to contribute to, engage with, and analyze the conversation happening on Twitter.

To start our bot, first of all you need to create (if you don't have one) a twitter account and then you must apply for a developer account to have your user case approved.

After that you have to create a Twitter Application through Twitter API for developers website.

Create an App

Choose type of app

I've chose the type hobbyist for the bot.

Getting started

Submit a standard application for access to the Twitter developer plataform

Describe your app

Describe how you will use Twitter data and/or APIs. For example, you can say:
"I will dedicate this bot to test the auto replying to tag and comments, auto retweet and like status with the name of Pelé." or whatever you like to use.

Submit your application

Accept the terms and submit your application.

Verify your email

You need to verify your email and confirm to complete your application, after that your application will be reviewed. You will have to wait until there.

When your application is approved you will be provided with a set of credentials that you will use to authenticate all requests to the API. Those are:

API Key - This is essentially a username, and allows you to make a request on behalf of your App.
API Key Secret - This is a password, and allows you to make a request on behalf of your App.
Access Token - This token represents the Twitter account that owns the App, and allows you to make a request on behalf of that Twitter account.
Access Token Secret - This token also represents the Twitter account that owns the App, and allows you to make a request on behalf of that Twitter account.
Bearer Token - This token represents your App and enables you to authenticate requests that require OAuth 2.0 Bearer Token authentication.

We are not going to use the Bearer Token on this tutorial.

With Twitter API we will have access to a lot of endpoints and public user's information such as:

Tweets, Retweets, Likes, Trends, Media. As we will also have the right to tweet, retweet, like, send direct messages.

Rate Limit

Twitter API limits the number of requests a developer can make during a period, so you will have to take this in consideration when writing your bot. If you pass this limit your Twitter bot will be blocked during a time or even stopped to run.

For example, Twitter API allows you to make 2400 tweet updates by day in intervals of 30 minutes in your application (Retweets are also counted as tweets). Also 1000 messages of direct message. Follow limit of 400 follows by day and etc.

You can check all the types of Rate Limit here: Twitter API rate limit.

Tweepy

We are going to use the Python library Tweepy to automatize our twitter bot.

The API class provides access to the entire twitter RESTful API methods. Each method can accept various parameters and return responses. For more information about these methods please refer to API Reference.

Installation

You can install Tweepy through the following command:

pip install tweepy

Particularly I use virtual environment to install my python libraries and packages not globally, if you don't know how to use it go back to the beginning of the last article here: JWT Login Flask.

dotenv

To not expose our credentials when eventually pushing to a public repository I recommend the use of the module dotenv and our sensitive data in a .env file like:

CONSUMER_KEY = 'YOUR API KEY'
CONSUMER_SECRET = 'YOUR SECRET KEY'
KEY = 'YOUR ACCESS TOKEN'
SECRET = 'YOUR SECRET'

Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env. Storing configuration in the environment separate from code is based on The Twelve-Factor App methodology.

Installation

You can install dotenv through pip with the following command:

pip install python-dotenv

First Tweet!

Import libraries and load env variables - First of all we are going to import all the necessary libraries we will use:

import os
import tweepy
import time
import logging
from dotenv import load_dotenv

Load env variables - Then we will load the environment variables from .env file and set the python variables: load_dotenv() # take environment variables from .env:

# API key
CONSUMER_KEY = os.getenv('CONSUMER_KEY')
# API secret key
CONSUMER_SECRET = os.getenv('CONSUMER_SECRET')
# Access token
KEY = os.getenv('KEY')
# Access token secret
SECRET = os.getenv('SECRET')

Link credentials to Login - Log with the credentials from our Twitter Application with the OAuth. Twitter requires all requests to use OAuth for authentication:

logging.basicConfig(level=logging.INFO)
logger = logging.getLogger()
auth = tweepy.OAuthHandler(CONSUMER_KEY, CONSUMER_SECRET)
auth.set_access_token(KEY, SECRET)

Create object API - We will create a Tweepy API. The API class provides access to the entire twitter RESTful API methods. Each method can accept various parameters and return responses:

api = tweepy.API(auth)

Update status - We are going to update our status and tweet our first tweet from the bot!

api.update_status('bot tweeting live!')

Twitter bot is live!

Run the code below to tweet our first tweet with bot!

`bot.py`

import os
import tweepy
import time
import logging
from dotenv import load_dotenv

load_dotenv()  # take environment variables from .env.

# API key
CONSUMER_KEY = os.getenv('CONSUMER_KEY')
# API secret key
CONSUMER_SECRET = os.getenv('CONSUMER_SECRET')
# Access token
KEY = os.getenv('KEY')
# Access token secret
SECRET = os.getenv('SECRET')

logging.basicConfig(level=logging.INFO)
logger = logging.getLogger()

auth = tweepy.OAuthHandler(CONSUMER_KEY, CONSUMER_SECRET)
auth.set_access_token(KEY, SECRET)

# Create API object
api = tweepy.API(auth)

# First tweet from your bot account!
api.update_status('bot tweeting live!')

Avoid repeated Tweets

To avoid reply or read the same tweets twice or more we are going to use a file with the ID of the last seen tweets:

FILE_NAME = 'last_seen.txt'

def read_last_seen(FILE_NAME):
  file_read = open(FILE_NAME,'r')
  last_seen_id = int(file_read.read().strip())
  file_read.close()
  return last_seen_id

def store_last_seen(FILE_NAME, last_seen_id):
  file_write = open(FILE_NAME,'w')
  file_write.write(str(last_seen_id))
  file_write.close()
  return

Replying Tweets

We are going to use the method api.update_status again, but now for replying to users with the most recents tweets with the word 'Brazil' with the message: "In brazilian portuguese we don't say foreign we say GRINGO and I think that is beautiful!"

def reply():
  tweets = api.mentions_timeline(read_last_seen(FILE_NAME), tweet_mode = 'extended')

  for tweet in reversed(tweets):
    if 'brazil' in tweet.full_text.lower():
      api.update_status("@" + tweet.user.screen_name + " In brazilian portuguese we don't say foreign we say GRINGO and I think that is beautiful!", tweet.id)
      store_last_seen(FILE_NAME, tweet.id)

To invoke the method just add the following line: reply() on your python bot.py

Retweeting Tweets

This time we are going to retweet the first 25 tweets mentioning the word brazilian. Note that I used a time.sleep() of 900 seconds to run the method api.retweet() because of the rate limit imposed by Twitter API.

def retweet():
  for tweet in api.search(q="brazilian", lang="en", count=25):
    status = api.get_status(tweet.id, tweet_mode = 'extended')
    if not status.retweeted:  # Check if Retweet
      try:
        api.retweet(tweet.id)
      except Exception as e:
        logger.error("Error on retweet", exc_info=True)

while True:
  retweet()
  time.sleep(900)

A retweet is considered a POST request, that way in 900 seconds (15 minutes) we will retweet 25 tweets, so in one hour (3600 seconds) we will have retweeted 3600/900 = 4 x 25 tweets = 100 tweets.

Please, observe the rate limit window, per user and app for POST requests:

With this logic we will have exactly 300 retweets in 3 hours.

Liking Tweets

To favorite/like the tweets we can use the method api.create_favorite() like the following:

def favorite():
  for tweet in api.search(q="brazilian", lang="en", count=25):
    status = api.get_status(tweet.id, tweet_mode = 'extended')
    if not status.retweeted:  # Check if Retweet
      try:
        api.create_favorite(tweet.id)
      except Exception as e:
        logger.error("Error on retweet", exc_info=True)
while True:
  favorite()
  time.sleep(900)

Replying and Retweeting Tweets

If we would like to reply and retweet the same tweet we need to pay attention to not have our bot blocked by spamming, it means if we tweet the same thing in a short period the twitter is going to consider it as a spam.

To get around this we will add an incremental value of i to differentiate the current reply from the previous one.

def retweet(i):
  for tweet in api.search(q="brazilian", lang="en", count=12):
    status = api.get_status(tweet.id, tweet_mode = 'extended')
    if not status.retweeted:  # Check if Retweet
      try:
        i = i + 1
        api.update_status("@" + tweet.user.screen_name + " In brazilian portuguese we don't say foreign we say GRINGO and I think that is beautiful! +"+str(i), tweet.id)
        api.retweet(tweet.id)
      except Exception as e:
        logger.error("Error on retweet", exc_info=True)

i = 0
while True:
  retweet(i)
  time.sleep(900)

Note that the number of tweets searched to be replied and retweeted changed to 12 due to the rate limit. If you prefer you can reduce the number of tweets that will be replied and retweeted or increase the time in time.sleep() for call the method;

Thank you!

Hope you enjoyed this article and can build your own Twitter bot! :)

Building a JWT login and registration backend with flask-praetorian for ReactJS frontend

Patricia Dourado — Fri, 10 Sep 2021 05:54:55 +0000

This is a tutorial to help you build a JWT based login application and registration using the micro web framework Flask.

Note: This application has been updated and now has more features that are not described in this article (as confirmation email, reset password and etc), but it will be described in future articles. The repository of this application has the updated version.

Before running the Flask API its necessary to install a bunch of packages as you can check listed here requirements.txt.

Python Virtual Environment

To install the required modules I've used Python virtualenv to create a isolated Virtual Environment in Python so the project can have it's own dependencies independently of other project's dependencies. In resume: for not installing globally this modules.

Installation

To install virtualenv just run the following command on your project folder (here we use pip on windows):

py -3 -m pip install --user virtualenv

Creating a Virtual Environment

To create a Virtual Environment name myproject:

py -3 -m venv myproject

You will see a new folder created called myproject

Activation

To activate and use your new virtual environment, just run:

myproject\Scripts\activate

Now you can start to install the modules and packages you want and run your project on the new environment.

To install requeriments.txt just this command:

pip install -r requirements.txt

To deactivate myproject just run: deactivate.

PostegreSQL

Its also necessary to create a database and users table before anything. I've used PostegreSQL as database and pgAdmin 4 interface to create the DB and table.

Create users table

The SQL for the created users table is the following:

CREATE TABLE public.users
(
    id integer NOT NULL DEFAULT nextval('users_id_seq'::regclass),
    username text COLLATE pg_catalog."default" NOT NULL,
    password text COLLATE pg_catalog."default" NOT NULL,
    roles text COLLATE pg_catalog."default",
    is_active boolean,
    CONSTRAINT users_pkey PRIMARY KEY (id)
)

TABLESPACE pg_default;

ALTER TABLE public.users
    OWNER to (insert here your user_database)

DB Model

A model that might be used using flask-praetorian:

class User(db.Model):

    __tablename__ = 'users'

    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.Text, unique=True, nullable=False)
    password = db.Column(db.Text, nullable=False)
    roles = db.Column(db.Text)
    is_active = db.Column(db.Boolean, default=True, server_default='true')

    @property
    def rolenames(self):
        try:
            return self.roles.split(',')
        except Exception:
            return []

    @classmethod
    def lookup(cls, username):
        return cls.query.filter_by(username=username).one_or_none()

    @classmethod
    def identify(cls, id):
        return cls.query.get(id)

    @property
    def identity(self):
        return self.id

    def is_valid(self):
        return self.is_active

Initialize Flask App

app = flask.Flask(__name__)
app.debug = True
app.config['SECRET_KEY'] = 'my secret key'
app.config['JWT_ACCESS_LIFESPAN'] = {'hours': 24}
app.config['JWT_REFRESH_LIFESPAN'] = {'days': 30}

# Initialize the flask-praetorian instance for the app
guard.init_app(app, User)

SQLAlchemy

The SQLAlchemy was used as the Python ORM for accessing data from the database and facilitate the communication between app and db converting function calls to SQL statements.

Do not forget to change 'SQLALCHEMY_DATABASE_URI' to your own here:

# Initialize a local database
app.config['SQLALCHEMY_DATABASE_URI'] = 'postgresql://user_database:password@hostname:5432/database_name'
db.init_app(app)

# Initializes CORS so that the api_tool can talk to app
cors.init_app(app)

Endpoints

Some endpoints were defined to be consumed by the frontend application, they are:

1. /api/

The first endpoint is the confirmation our API is up running!

@app.route('/api/')
def home():
    return {"Hello": "World"}, 200

2. /api/login

The second endpoint receives the user credentials (by POST request) and authenticates/logs it with flask-praetorian 'authenticate' method issuing a user JWT access token and returning a 200 code with the token;

@app.route('/api/login', methods=['POST'])
def login():
    """
    Logs a user in by parsing a POST request containing user credentials and
    issuing a JWT token.
    """
    req = flask.request.get_json(force=True)
    username = req.get('username', None)
    password = req.get('password', None)
    user = guard.authenticate(username, password)
    ret = {'access_token': guard.encode_jwt_token(user)}
    return ret, 200

3. /api/refresh

The third endpoint refreshes (by POST request) an existing JWT creating a new one with a new access expiration, returning a 200 code with the new token;

@app.route('/api/refresh', methods=['POST'])
def refresh():
    """
    Refreshes an existing JWT by creating a new one that is a copy of the old
    except that it has a refreshed access expiration.
    .. example::
       $ curl http://localhost:5000/api/refresh -X GET \
         -H "Authorization: Bearer <your_token>"
    """
    print("refresh request")
    old_token = Request.get_data()
    new_token = guard.refresh_jwt_token(old_token)
    ret = {'access_token': new_token}
    return ret, 200

4. /api/protected

The fourth endpoint is a protected endpoint which requires a header with a valid JWT using the @flask_praetorian.auth_required decorator. The endpoint returns a message with the current user username as a secret message;

@app.route('/api/protected')
@flask_praetorian.auth_required
def protected():
    """
    A protected endpoint. The auth_required decorator will require a header
    containing a valid JWT
    .. example::
       $ curl http://localhost:5000/api/protected -X GET \
         -H "Authorization: Bearer <your_token>"
    """
    return {'message': 'protected endpoint (allowed usr {})'.format(flask_praetorian.current_user().username)}

5. /api/registration

The fifth endpoint is a simple user registration without requiring user email (for now), with the password hash method being invoked only to demonstrate insertion into database if its a new user;

@app.route('/api/registration', methods=['POST'])
def registration():

    """Register user without validation email, only for test"""

    req = flask.request.get_json(force=True)
    username = req.get('username', None)
    password = req.get('password', None)

    with app.app_context():
        db.create_all()
        if db.session.query(User).filter_by(username=username).count() < 1:
            db.session.add(User(
                username=username,
                password=guard.hash_password(password),
                roles='user'
            ))
        db.session.commit()

    user = guard.authenticate(username, password)
    ret = {'access_token': guard.encode_jwt_token(user)}

    return ret,200

Run Flask App

# Run
if __name__ == '__main__':
    app.run()

Running Locally

To run your application locally you can use the following command:

flask run

Deploying the Application

This application was deployed on Heroku.

If you want to deploy to Heroku, follow the steps:

Create a Heroku account here;
Download and Install Heroku CLI: link;
Login into Heroku (on cli);
Its necessary to add a Heroku Procfile on flask directory to map the remote app:
- Create a file called Procfile without extension with the following line: web: gunicorn app:app
Create a requirements.txt file with all the installed requirements for flask app runs; (see it in pip freeze) or just use the following command: pip freeze > requirements.txt;
On Heroku website (platform) create a new app called myapp;
After installed heroku on CLI run: heroku login (it will make the login on web page pop-up);
On Heroku website:
- Create a database: heroku addons:create heroku-postgresql:hobby-dev --app myapp
- To see the URL of database: heroku config --app myapp
You will need to create the PostegreSQL database table that we described on PostegreSQL section but on Heroku now, I did it using the pgAdmin interface linked to the address host of the Heroku database we created on the step above.
- The database address host, user and password you can find on Database Credentials on your Heroku app settings. You can follow this article if you need more help;
Initiate a local git repository: git init Add on git the following files: app.py requirements.txt Procfile (ignore venv, pycashe with .gitignore);
Don't forget to commit your changes;
Link your local repository to heroku heroku git:remote -a myapp;
Push to Heroku your commits git push heroku master;

Flask-praetorian

To let the things easier Flask-praetorian was used to handle the hard logic by itself.

Among the advantages of using Flask-praetorian in this API (where the most important is undoubtedly allowing to use JWT token for authentication) are:

Hash passwords for storing in database;
Verify plaintext passwords against the hashed, stored versions;
Generate authorization tokens upon verification of passwords;
Check requests to secured endpoints for authorized tokens;
Supply expiration of tokens and mechanisms for refreshing them;
Ensure that the users associated with tokens have necessary roles for access;

You can check Flask-praetorian documentation here: Flask-praetorian

Frontend Application

For now the ReactJS application (check the repository here) that consumes this Flask API provides three different pages:

The Home page with the login button (if the user isn't logged) and with the secret button and the logout button (assuming the user is logged);
The Login Page where the user can log-in;
The Protected page with a content message that only the logged user can view;

Note: As I said at the beginning of the article, the application has been updated both the backend and the frontend, check some new pages:

Login Page

Registration Page

Reset Password Page

Note 2: You can check the whole jwtlogin flask application code in this github repository and the deployed with ReactJS part on its description link;

Inspiration and reference links:

Using Netlify CMS to manage my blog posts

Patricia Dourado — Thu, 09 Sep 2021 09:13:09 +0000

Since I started to think of writing some guides about everything I was learning and doing, I saw the need of starting my own blog to document my steps and help myself to remind things I've already done without losing too much time learning again from different sources.

So, after searching between Hugo and Gatsby and once I was familiar with React, to make things easier I chose to use a Gatsby boilerplate blog (gatsby-starter-blog).

Writing my first post about styled-components on this blog directly in Markdown, made me want so hard an editor or something to manage the file posts without having to worry about .md syntax and etc. So I found Netlify CMS with this incredibly support to Gatsby!

Netlify CMS is an open-source content management system (CMS) for static site generators that allows to edit our content and data as commits in applications Git Repositories in Markdown, JSON, YAML or TOML format.

Following the guide on this link that I will detail here too, it was so easy to setup everything and starting using the Netlify CMS as I did to write this original article on my blog.

Install Netlify CMS

So, on my blog project root directory I've just needed to install Netlify CMS through the following command:

npm install --save netlify-cms-app gatsby-plugin-netlify-cms

After installation, create a small config file called config.yml in the directory static/admin/config.yml on my gatsby blog project. The config.yml must have the following configuration:

backend:
  name: git-gateway
  branch: master

media_folder: static/img
public_folder: /img

collections:
  - name: 'blog'
    label: 'Blog'
    folder: 'content/blog'
    create: true
    slug: 'index'
    media_folder: ''
    public_folder: ''
    path: '{{title}}/index'
    editor:
      preview: false
    fields:
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Publish Date', name: 'date', widget: 'datetime' }
      - { label: 'Description', name: 'description', widget: 'string' }
      - { label: 'Body', name: 'body', widget: 'markdown' }

Next step is to add the plugin line to gatsby-config.js

plugins: [`gatsby-plugin-netlify-cms`]

Git Push your modifications

Finally, commit your changes and push the modified repository to your GitHub:

git add .
git commit -m "setup netlify cms"
git remote add origin https://github.com/YOUR_USERNAME/NEW_REPO_NAME.git
git push -u origin master

Add your repo to Netlify

Go to Netlify and select 'New Site from Git'. Select GitHub and the repository you just pushed to. Click Configure Netlify on GitHub and give access to your repository. Finish the setup by clicking Deploy Site. Netlify will begin reading your repository and starting building your project.

Enable Identity and Git Gateway

Netlify's Identity and Git Gateway services allow you to manage CMS admin users for your site without requiring them to have an account with your Git host or commit access on your repo. From your site dashboard on Netlify:

Go to Settings > Identity, and select Enable Identity service.
Under Registration preferences, select Open or Invite only. In most cases, you want only invited users to access your CMS, but if you're just experimenting, you can leave it open for convenience.
If you'd like to allow one-click login with services like Google and GitHub, check the boxes next to the services you'd like to use, under External providers.
Scroll down to Services > Git Gateway, and click Enable Git Gateway. This authenticates with your Git host and generates an API access token. In this case, we're leaving the Roles field blank, which means any logged in user may access the CMS. For information on changing this, check the Netlify Identity documentation.

Start publishing

It's time to create your first blog post. Login to your site's /admin/ page and create a new post by clicking New Blog. Add a title, a date and some text. When you click Publish, a new commit will be created in your GitHub repo with this format Create Blog “year-month-date-title”.

Then Netlify will detect that there was a commit in your repo, and will start rebuilding your project. When your project is deployed you'll be able to see the post you created.

Hope you enjoy Netlify CMS as much as I did! :)

Styled Components

Patricia Dourado — Thu, 09 Sep 2021 08:56:04 +0000

I decided to bring the articles from my blog here to dev.to and following the order, the first article I wrote was about styled-components, so here we go..

While the front end development is experiencing the modular advantages of components, there are several ways to styling them, as CSS, SASS, CSS Modules, etc.

I would like to introduce you to my new favorite one: styled-components, which nowadays is increasingly popular on the frontend.

Created by Max Stoiber, styled-components is a library that allows you to write CSS code inside Javascript, which means you won't need to import .css file into your page anymore. In addiction to organize your code better, you also have the possibility to reuse the created components in the same project just calling them or in another project just copying the .js file into it.

I had my first experience with styled-components on a ReactJS project I started developing last year. I was presented to this fantastic library through a learning live on twitch.tv and once I used it I've never wanted to return to the old ways of styling. You will see why!

Installation

To set up styled-components, run the following command (if you use npm) in your project directory:

npm install --save styled-components

Voilà!

The following example creates a simple button component, already styled:

  import styled from "styled-components";

  const Button = styled.button`
    background-color: #3a4042;
    color: #f5f5f5;
    border: 1px solid #f5f5f5;
    border-radius: 4px;
    padding: 0.25em 1em;
    margin: 1em;
    font-size: 20px;
    cursor: pointer;
  `;

  render(
    <Button> 
      Send
    </Button>
  );

The result:

Now you saw how easy is to styling your component, you must know that you can style any component!

The following example is a modificated one from styled-component website:

const h2 = ({ className, children }) => (
  <a className={className}>
    {children}
  </a>
)

const StyledH2 = styled(h2)`
  color: #db7093;
  font-weight: bold;
`;

render(
  <>
    <h2>Unstyled, boring Title</h2>
    <StyledH2>Styled, exciting Title</StyledH2>
  </>
);

The result:

You can also pass tag names into the styled() factory call, as "div", "section", not only components.

Changing based on props

You can also change a component state based on a prop you set and adapt this component to have another style or behavior.

This example shows how to change the size of the component Tag by setting its prop small to true.

const Tag = styled.h2`
  font-size: 40px;
  letter-spacing: 2px;
  background-color: #db7093;
  color: #f5f5f5;
  padding: 20px 18px;

  ${({ small }) =>
    small &&
    css`
      font-size: 25px;
      padding: 8px 8px;
    `};
`;

render(
  <div>
    <Tag>Normal Tag</Tag>
    <Tag small>Small tag</Tag>
  </div>
);

Check the result below:

One of my favorites things in styled-components is how you can pass props of a component to the DOM node that is mounted.

This examples shows how to styled-components passes the prop categoryColor with the border color to the Button component, if no value is sent by the prop then the default color #ffba05 is used.

const Button = styled.button`
  color: #000000;
  width: 100px; 
  margin-right: 5px;
  border-radius: 4px;
  border: 4px solid
    ${({ categoryColor }) => categoryColor || "#ffba05"};
`;

render(
  <div>
    <Button>yes</Button>
    <Button categoryColor={"#db7093"}>no</Button>
   </div>
);

Check the result below:

Apart from the improved experience for developers, styled-components provides:

Automatic critical CSS: styled-components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically. Combined with code splitting, this means your users load the least amount of code necessary.
No class name bugs: styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.
Easier deletion of CSS: it can be hard to know whether a class name is used somewhere in your codebase. styled-components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all its styles get deleted with it.
Simple dynamic styling: adapting the styling of a component based on its props or a global theme is simple and intuitive without having to manually manage dozens of classes.
Painless maintenance: you never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.
Automatic vendor prefixing: write your CSS to the current standard and let styled-components handle the rest.

Hope you enjoy styled-components as much as I did. :)