{"id":131669,"date":"2023-02-06T18:12:49","date_gmt":"2023-02-06T18:12:49","guid":{"rendered":"https:\/\/blog.finxter.com\/?p=1113906"},"modified":"2023-02-06T18:12:49","modified_gmt":"2023-02-06T18:12:49","slug":"i-made-a-password-generator-in-streamlit-thats-really-secure-maybe-too-secure","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2023\/02\/06\/i-made-a-password-generator-in-streamlit-thats-really-secure-maybe-too-secure\/","title":{"rendered":"I Made a Password Generator in Streamlit That\u2019s Really Secure (Maybe Too Secure!)"},"content":{"rendered":"\n
\n
\n
\n
\n
<\/div>\n<\/p><\/div>\n
\n
<\/div>\n<\/p><\/div>\n
\n
<\/div>\n<\/p><\/div>\n
\n
<\/div>\n<\/p><\/div>\n
\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
<\/div>\n<\/p><\/div>\n
\n
<\/div>\n<\/p><\/div>\n
\n
<\/div>\n<\/p><\/div>\n
\n
<\/div>\n<\/p><\/div>\n
\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n
5\/5 – (1 vote) <\/div>\n<\/p><\/div>\n
\"YouTube<\/a>
<\/figcaption><\/figure>\n

Project Description<\/h2>\n

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. <\/p>\n

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. <\/p>\n

People think in patterns, and I am no different. <\/p>\n

\n
\"\"<\/a>
PW Generator App Live Demo<\/a><\/figcaption><\/figure>\n<\/div>\n

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. <\/p>\n

It uses my favorite framework Streamlit<\/a>, and should not take you more than half an hour to create. Let\u2019s jump in!<\/p>\n

Install dependencies<\/h2>\n

The first thing I\u2019ll do every time is installing all the needed dependencies. <\/p>\n

For this project, we will need the Streamlit library, as well as Random_Word<\/code> and requests<\/a><\/code>. <\/p>\n

As with my other tutorials, I will explain why we need these as we encounter them in our code.<\/p>\n

pip install streamlit\npip install Random_Word\npip install requests<\/code><\/pre>\n
\n
Step 1: Set up the directory structure<\/h2>\n
\n
\"\"<\/figure>\n<\/div>\n
I use VS Code as my editor of choice, and setting up a new project folder there is a breeze. <\/p>\n
Right-click in the Explorer menu on the left side and click New Folder<\/code>. We only need one folder, .streamlit<\/code>, to hold our Streamlit config.toml<\/code> and secrets.toml<\/code> files. <\/p>\n
We will write all our code in a single app.py<\/code> file.<\/p>\n
\u251c\u2500\u2500 .streamlit\n\u2502 \u251c\u2500\u2500 config.toml\n\u2502 \u2514\u2500\u2500 secrets.toml\n|\u2500\u2500 app.py<\/code>\n<\/pre>\n
Step 2: Getting the API Ninja API key<\/h2>\n
\n
\"\"<\/figure>\n<\/div>\n
For the passphrase aspect of our application, we\u2019ll need an API key to get us random words. I used the API Ninja Random Word API, which you can find here<\/a>. Signing up for their service is quick, easy and, most importantly, free! <\/p>\n
Navigate to their registration page<\/a> and follow the sign-up procedure.\u00a0<\/p>\n
\n
\"\"<\/figure>\n<\/div>\n
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.<\/p>\n
\n
\"\"<\/figure>\n<\/div>\n
Once you\u2019ve grabbed your API key, navigate back to your folder structure and create a variable in the secrets.toml<\/code> file. Paste your key on the right side of the =<\/code> sign, and you\u2019re ready to start coding!<\/p>\n
Tip<\/strong>: Don\u2019t forget the quotes \"\ud83d\ude42\"<\/em><\/p>\n
\n
\"\"<\/figure>\n<\/div>\n
Step 3: Import dependencies and Streamlit basic set-up<\/h2>\n
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<\/code> <\/em>and string<\/code> modules that come built-in to Python. <\/p>\n
These I will use to generate an, as close to possible, random password.<\/p>\n
#---PIP PACKAGES----#\nimport streamlit as st\nfrom random_word import ApiNinjas\nimport requests #---BUILT IN PYTHON PACKAGES----#\nimport secrets\nimport string<\/pre>\n
When building Streamlit applications, I find it easiest to first get their initial configuration done quickly, so I don\u2019t have to worry about it later. <\/p>\n
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. <\/p>\n
I do this in the\u00a0 #---STREAMLIT SETTINGS---#<\/code> block.\u00a0<\/p>\n
#---STREAMLIT SETTINGS---#\npage_title = \"PW & PW-Sentence Generator\"\npage_icon = \":building_construction:\"\nlayout = \"centered\"<\/pre>\n
The first function you will always need to call to get your Streamlit app to function is st.set_page_config()<\/code>. If you forget this, Streamlit will get annoyed and start throwing errors.<\/p>\n
#---PAGE CONFIG---#\nst.set_page_config(page_title=page_title, page_icon=page_icon, layout=layout) \"#\"\nst.title(f\"{page_icon} {page_title}\") \"#\"\n<\/pre>\n
The last block, #---STREAMLIT CONFIG HIDE---#<\/code>, is optional but hides the \u201cMade with Streamlit\u201d<\/strong> banner at the bottom and the hamburger menu at the top if you want to.<\/p>\n
#---STREAMLIT CONFIG HIDE---#\nhide_st_style = \"\"\"<style> #MainMenu {visibility : hidden;} footer {visibility : hidden;} header {visibility : hidden;} <\/style> \"\"\"\nst.markdown(hide_st_style, unsafe_allow_html=True)<\/pre>\n
When you\u2019ve inserted all the code above and then called the command below, a browser window should open.\u00a0<\/p>\n
\"\ud83d\udc49\" Tip<\/strong>: Make sure you run the command in the root of your application folder!<\/em><\/p>\n
\n
streamlit run app.py<\/pre>\n
\n
After a few seconds and your view should resemble the one below<\/p>\n
\n
\"\"<\/figure>\n<\/div>\n
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. <\/p>\n
Step 3: Defining our password generator function<\/h2>\n
\n
\"\"<\/figure>\n<\/div>\n
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. <\/p>\n
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.\u00a0<\/p>\n
#---PW GENERATOR FUNCTION--#\ndef 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\n<\/pre>\n
This function first creates the letters<\/code> and digits<\/code> variables using the methods from the Python string<\/code> module we imported earlier. These are then concatenated<\/a> into one long string we call alphabet<\/code>. <\/p>\n
Next, I set the preferred password length at 14 characters. Feel free to change this.<\/p>\n
The actual password generation occurs next. We concatenate random characters from this alphabet<\/code> variable to the initially empty pwd<\/code> variable.<\/p>\n
According to the official documentation<\/a> of the secrets module, \u201cthe<\/em> <\/em><\/a>secrets module provides access to the most secure source of randomness that your operating system provides\u201d<\/em>. <\/p>\n
In other words, it comes as close to random as possible \"\ud83d\ude42\"<\/p>\n
The last thing we need to do is to assign the completed password to the st.session_state[\"pw\"]<\/code> variable. The st_session_state<\/code> is, in essence, a dictionary<\/a>. This dictionary is accessible by the Streamlit application during the entire time it is running. It allows passing variables, states to different parts of your app at different times. <\/p>\n
In our case, we will use it to store the generated value of both the password and passphrase.<\/p>\n
Step 4: Defining our passphrase generator functions<\/h2>\n
For generating the passphrase, I found that I needed two functions. It is possible to do it in one function, of course, but I found it a lot tidier to split it up. <\/p>\n
It also seems more Pythonic to me, as it adheres to the tenet that every function should only do one thing.<\/p>\n
#---PASSPHRASE GENERATOR FUNCTIONS---# #---GET RANDOM WORD---#\ndef get_random_word()->str: \"\"\"Uses the API Ninja API to request a word string. This string is then parsed to extract only the word and return it.\"\"\" api_url = 'https:\/\/api.api-ninjas.com\/v1\/randomword' response = requests.get(api_url, headers={'X-Api-Key': st.secrets.API_NINJA}) if response.status_code == requests.codes.ok: returned_word = response.text.split(\":\") returned_word = returned_word[1] returned_word = returned_word[2:-2] return returned_word else: return \"Error:\", response.status_code, response.text<\/pre>\n
The first function, get_random_word()<\/code> will use the API Ninja API to request and return a random word. For this, we need to call the API Key we stored earlier. <\/p>\n
Streamlit has a secure method for this using the st.secrets<\/code> method. We just add a .<\/code> and then the name of the key we defined in the secrets.toml<\/code> file. That way, we never expose the actual key.<\/p>\n
The returned string has some extra characters attached to it that we need to strip off. We only need the actual word for our purpose. If something goes wrong with the request our else statement will trigger. This will return the error code and message.<\/p>\n
 #---GENERATING THE PHRASE---#\ndef generate_ps()->None: \"\"\"Uses the get_random_word function to request five words. These are concatenated into a string with dashes and then assigned these to the session_state variable [pw] \"\"\" passphrase = \"\" for x in range(5): passphrase += f\"{get_random_word()}-\" passphrase_final = passphrase[:-1] st.session_state[\"pw\"] = passphrase_final<\/pre>\n
Our second function will create the actual passphrase we need. As with the password, you can choose the length for yourself. I set the length for mine at 5 words, which should be more than secure enough. <\/p>\n
To start, we define an empty string passphrase<\/code>. Then we will call the get_random_word()<\/code> function for the length I mentioned above. This will get us the number of words we need. <\/p>\n
For each iteration of our loop, I concatenate the received words + a dash to the passphrase string. For that I use my favorite formatting method for Python strings, the f-string<\/a><\/strong>. When we\u2019ve added all the words and dashes to the passphrase, we strip off the last dash.<\/p>\n
The last thing we need to do here is to also assign the generated string to the st.session_state[\"pw\"]<\/code> variable.\u00a0 This is the same thing we did with the password.<\/p>\n
Step 5: Creating the Streamlit application<\/h2>\n
\n
\"\"<\/figure>\n<\/div>\n
For the UI aspect of our application, we only need a few lines of code, most of them related to the layout.<\/p>\n
#---MAIN PAGE---# if \"pw\" not in st.session_state: st.session_state[\"pw\"] = '' \"---\"\n<\/pre>\n
The first part is ensuring the st.session_state[\"pw\"]<\/code> gets initialized. <\/p>\n
We assign it to an empty string<\/a> to prevent Streamlit from throwing an error. The 3 dashes between quotes are part of Streamlit\u2019s magic commands. It will insert a horizontal divider in our application without any complicated code.<\/p>\n
col1,col2 = st.columns([4,4], gap = \"large\") with col1: st.caption(\"Secure password length is set at 14 chars.\") st.button(\"Generate secure password\", key = \"pw_button\", on_click = generate_pw) with col2: st.caption(\"Secure passphrase length is set at 5 words.\") st.button(\"Generate secure password sentence\", key = \"ps_button\", on_click = generate_ps) \"#\"\n<\/pre>\n
As we are allowing the user to choose between creating a password or a passphrase, we\u2019ll need two columns to display these. <\/p>\n
When calling st.columns<\/code> with more than one argument, the width of each column needs to be in a list<\/a>. That list will then function as the first argument. The gap<\/code> keyword provides a relative vertical separation between the columns.<\/p>\n
Defining the content for each column is easily done. We create a with<\/code>-statement for each of the columns. All the code inside the statement then becomes part of that column.\u00a0<\/p>\n
The st.caption<\/code> method allows us to provide a hint or extra info. In my case, I use it to tell the user about the current length of the password or passphrase. <\/p>\n
The second part of every column is the button used to generate our password\/passphrase. <\/p>\n
\"\ud83d\udc49\" Recommended<\/strong>: Streamlit Button – Ultimate Guide with Video<\/a><\/p>\n
Streamlit\u2019s st.button()<\/code> method as a simple on_click<\/code> keyword argument. You can pass a function to it that gets run when the button gets clicked.\u00a0<\/p>\n
At the bottom, we use another bit of Streamlit magic. The \u201c<\/em>#<\/code>\u201d <\/em>will insert a horizontal space\/new line to create some separation.<\/p>\n
\"#\"\nocol1, ocol2, ocol3 = st.columns([1,4,1])\nwith ocol1: ''\nwith ocol2: st.caption(\"Generated secure PW\") \"---\" st.subheader(st.session_state[\"pw\"]) \"---\" with ocol3: ''<\/pre>\n
The very last part of our application is more layout. <\/p>\n
I define three columns to center the generated password. We can add the empty string to the first and third columns. These strings are once again part of Streamlit magic. The middle column will hold our generated password\/passphrase. <\/p>\n
Showing the password is easy. Because we\u2019ve assigned the generated values to the st.session_state[\"pw\"]<\/code> variable, we can just call it.<\/p>\n
Step 6: Putting it all together<\/h2>\n
\n
\"\"<\/figure>\n<\/div>\n
If everything went well your completed code will look similar to my code below.<\/p>\n
#---PIP PACKAGES----#\nimport streamlit as st\nfrom random_word import ApiNinjas\nimport requests #---BUILT IN PYTHON PACKAGES----#\nimport secrets\nimport string #---STREAMLIT SETTINGS---#\npage_title = \"PW & PW-Sentence Generator\"\npage_icon = \":building_construction:\"\nlayout = \"centered\" #---PAGE CONFIG---#\nst.set_page_config(page_title=page_title, page_icon=page_icon, layout=layout) \"#\"\nst.title(f\"{page_icon} {page_title}\") \"#\" #---STREAMLIT CONFIG HIDE---#\nhide_st_style = \"\"\"<style> #MainMenu {visibility : hidden;} footer {visibility : hidden;} header {visibility : hidden;} <\/style> \"\"\"\nst.markdown(hide_st_style, unsafe_allow_html=True) #---PW GENERATOR FUNCTION--#\ndef 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 #---PASSPHRASE GENERATOR FUNCTIONS---# #---GET RANDOM WORD---#\ndef get_random_word()->str: \"\"\"Uses the API Ninja API to request a word string. This string is then parsed to extract only the word and return it.\"\"\" api_url = 'https:\/\/api.api-ninjas.com\/v1\/randomword' response = requests.get(api_url, headers={'X-Api-Key': st.secrets.API_NINJA}) if response.status_code == requests.codes.ok: returned_word = response.text.split(\":\") returned_word = returned_word[1] returned_word = returned_word[2:-2] return returned_word else: return \"Error:\", response.status_code, response.text #---GENERATING THE PHRASE---#\ndef generate_ps()->None: \"\"\"Uses the get_random_word function to request five words. These are concatenated into a string with dashes and then assigned these to the session_state variable [pw] \"\"\" passphrase = \"\" for x in range(5): passphrase += f\"{get_random_word()}-\" passphrase_final = passphrase[:-1] st.session_state[\"pw\"] = passphrase_final #---MAIN PAGE---# if \"pw\" not in st.session_state: st.session_state[\"pw\"] = '' \"---\"\ncol1,col2 = st.columns([4,4], gap = \"large\") with col1: st.caption(\"Secure password length is set at 14 chars.\") st.button(\"Generate secure password\", key = \"pw_button\", on_click = generate_pw) with col2: st.caption(\"Secure passphrase length is set at 5 words.\") st.button(\"Generate secure password sentence\", key = \"ps_button\", on_click = generate_ps) \"#\" \"#\"\nocol1, ocol2, ocol3 = st.columns([1,4,1])\nwith ocol1: ''\nwith ocol2: st.caption(\"Generated secure PW\") \"---\" st.subheader(st.session_state[\"pw\"]) \"---\" with ocol3: ''\n<\/pre>\n
When you check the browser again, your application should be ready to use!<\/p>\n
\n
\"\"<\/figure>\n<\/div>\n
Tip<\/strong>: When pressing the passphrase button, a slight delay might occur as the app contacts the API \"\ud83d\ude42\"<\/em><\/p>\n
Conclusion<\/h2>\n
\n
\"\"<\/figure>\n<\/div>\n
I hope you liked this tutorial. It is very basic in its functionality, but the potential for a lot more is there. <\/p>\n
I have some ideas of my own that I would like to implement. Chief among them is the ability to choose the number of characters or words for the password\/passphrase. <\/p>\n
Another one, but this will be a separate project, is to create a mobile app version of this. Who knows, you might see it here if I succeed.\u00a0<\/p>\n
Have fun building this!<\/p>\n