Finxter Project – Streamlit Password Generator App

This is part of our full academy course with video

Project Description

Both in my day job and personal life, I notice every day how important online security has become. Almost every part of our everyday lives are connected somehow to the Internet. And everyone of those connections requires (or should need) a password at the least.

The problem with that is that passwords are often difficult to remember if you want to make them secure. Furthermore, it is difficult to randomize them when we create them.

People think in patterns, and I am no different.

PW Generator App Live Demo

To solve this, I use a self-hosted password manager, but this is not an easy thing to set up. To bridge the gap between how most people look at passwords these days and the ideal way of keeping them, I developed a simple web application.

It uses my favorite framework Streamlit, and should not take you more than half an hour to create. Let’s jump in!

Install dependencies

The first thing I’ll do every time is installing all the needed dependencies.

For this project, we will need the Streamlit library, as well as Random_Word and requests.

As with my other tutorials, I will explain why we need these as we encounter them in our code.

pip install streamlit
pip install Random_Word
pip install requests

Step 1: Set up the directory structure

I use VS Code as my editor of choice, and setting up a new project folder there is a breeze.

Right-click in the Explorer menu on the left side and click New Folder. We only need one folder, .streamlit, to hold our Streamlit config.toml and secrets.toml files.

We will write all our code in a single app.py file.

├── .streamlit
│   ├── config.toml
│   └── secrets.toml
|── app.py

Step 2: Getting the API Ninja API key

For the passphrase aspect of our application, we’ll need an API key to get us random words. I used the API Ninja Random Word API, which you can find here. Signing up for their service is quick, easy and, most importantly, free!

Navigate to their registration page and follow the sign-up procedure. 

Afterward, you should be able to create your API key and get started right away. Your screen should look something like this, except for the API calls. Yours will be zero when you start this for the first time.

Once you’ve grabbed your API key, navigate back to your folder structure and create a variable in the secrets.toml file. Paste your key on the right side of the = sign, and you’re ready to start coding!

Tip: Don’t forget the quotes 🙂

Step 3: Import dependencies and Streamlit basic set-up

At the top of our file, we first import all the dependencies for our app to function. These are the three packages we installed earlier, as well as the secrets and string modules that come built-in to Python.

These I will use to generate an, as close to possible, random password.

#---PIP PACKAGES----#
import streamlit as st
from random_word import ApiNinjas
import requests


#---BUILT IN PYTHON PACKAGES----#
import secrets
import string

When building Streamlit applications, I find it easiest to first get their initial configuration done quickly, so I don’t have to worry about it later.

The first thing to do is define a couple of parameters we will need to initialize our application. That way, we can change them later if we are so inclined.

I do this in the  #---STREAMLIT SETTINGS---# block. 

#---STREAMLIT SETTINGS---#
page_title = "PW & PW-Sentence Generator"
page_icon = ":building_construction:"
layout = "centered"

The first function you will always need to call to get your Streamlit app to function is st.set_page_config(). If you forget this, Streamlit will get annoyed and start throwing errors.

#---PAGE CONFIG---#
st.set_page_config(page_title=page_title, page_icon=page_icon, layout=layout)


"#"
st.title(f"{page_icon} {page_title}")
"#"

The last block, #---STREAMLIT CONFIG HIDE---#, is optional but hides the “Made with Streamlit” banner at the bottom and the hamburger menu at the top if you want to.

#---STREAMLIT CONFIG HIDE---#
hide_st_style = """<style>
                #MainMenu {visibility : hidden;}
                footer {visibility : hidden;}
                header {visibility : hidden;}
                </style>
                """
st.markdown(hide_st_style, unsafe_allow_html=True)

When you’ve inserted all the code above and then called the command below, a browser window should open. 

👉 Tip: Make sure you run the command in the root of your application folder!


streamlit run app.py

After a few seconds and your view should resemble the one below

At this point, I usually let the application run in the background. This allows me to see all my changes to the code in semi-real-time on the browser window. 

Step 3: Defining our password generator function

The idea for the app is to have the ability for a user to choose if he wants a secure password or a secure passphrase. For this to work, we need functions that can generate those passwords or passphrases.

The current length for a secure password is between 14 and 16 randomized characters. I use a length of 14 for my function but you can change this very easily. 

#---PW GENERATOR FUNCTION--#
def generate_pw()->None:
    """Uses the string module to get the letters and digits that make up the alphabet used to generate the random characters. These characters are
    appended to the pwd string which is then assigned to the session_state variable [pw]"""
    letters = string.ascii_letters
    digits = string.digits  
    alphabet = letters + digits
    pwd_length = 14
    pwd = ''
    for i in range(pwd_length):
        pwd += ''.join(secrets.choice(alphabet))


    st.session_state["pw"] = pwd

This function first creates the letters and digits variables using the methods from the Python string module we imported earlier. These are then concatenated into one long string we call alphabet.

Next, I set the preferred password length at 14 characters. Feel free to